Skip to content
Permalink
Browse files

This renders something trough webgl

  • Loading branch information...
jappeace committed May 19, 2018
1 parent ca3f7e7 commit 668f714294b4423ae51e8857bf7d9e8dafa4ba8c
Showing with 130 additions and 6 deletions.
  1. +130 −6 port.elm
136 port.elm
@@ -18,7 +18,7 @@ import WebGL.Texture as Texture exposing (Error, Texture)
type alias Particle = {
size : Float,
velocity: Vec2,
postition: Vec2,
position: Vec2,
color: Vec4
}

@@ -58,6 +58,8 @@ opts = {
type alias Model =
{ texture : Maybe Texture
, theta : Float
, options : Options
, particles : List Particle
}


@@ -71,13 +73,22 @@ update action model =
case action of
TextureLoaded textureResult ->
( { model | texture = Result.toMaybe textureResult }, Cmd.none )

Animate dt ->
( { model | theta = model.theta + dt / 10000 }, Cmd.none )
( logic dt { model | theta = model.theta + dt / 10000 }, Cmd.none )

logic : Float -> Model -> Model
logic fps model = model -- TODO port logic

init : ( Model, Cmd Msg )
init =
( { texture = Nothing, theta = 0 }
( { texture = Nothing, theta = 0, options = opts, particles = [
{
size = 50.0,
velocity = vec2 10.0 10.0,
position = vec2 20.0 20.0,
color = vec4 1.0 1.0 1.0 1.0
}
]}
, Task.attempt TextureLoaded (Texture.load "texture/flame.png")
)

@@ -91,7 +102,7 @@ main =
}

view : Model -> Html Msg
view { texture, theta } =
view { texture, theta, particles } =
Html.div [] [
Html.p [] [Html.text (toString theta)],
WebGL.toHtmlWith
@@ -105,7 +116,120 @@ view { texture, theta } =
, style [ ( "display", "block" ) ]
]
(texture
|> Maybe.map (scene (perspective theta))
|> Maybe.map (scene particles)
|> Maybe.withDefault []
)
]
scene : List Particle -> Texture -> List Entity
scene particles texture =
let
partfunc arg = WebGL.entity vertexShader fragmentShader arg {
texture=texture,
resolution=vec2 200 500
}
in
List.map (partfunc << particleMesh) particles

triangle : Vec2 -> Vec2 -> Vec2 -> Vec2 -> Vec2 -> Vec2 -> Vec4 -> (Vertex, Vertex, Vertex)
triangle a b c d e f col = (
{
position = a,
texture_coord = d,
color_attribute = col
},
{
position = b,
texture_coord = e,
color_attribute = col
},
{
position = c,
texture_coord = f,
color_attribute = col
}
)

particleMesh : Particle -> Mesh Vertex
particleMesh particle =
let
size = particle.size/2
left = (Vec2.getX particle.position) - size
right = (Vec2.getX particle.position) + size
bottom = (Vec2.getY particle.position) - size
top = (Vec2.getY particle.position) + size
in
[
triangle
(vec2 left bottom)
(vec2 right bottom)
(vec2 left top)
(vec2 0.0 0.0)
(vec2 1.0 0.0)
(vec2 0.0 1.0)
particle.color
,
triangle
(vec2 left top)
(vec2 right bottom)
(vec2 right top)
(vec2 0.0 1.0)
(vec2 1.0 0.0)
(vec2 1.0 1.0)
particle.color
] |> WebGL.triangles

vertexShader : Shader Vertex Uniforms { v_color : Vec4, v_texture_coord : Vec2 }
vertexShader =
[glsl|
attribute vec2 position;
attribute vec2 texture_coord;
attribute vec4 color_attribute;
uniform vec2 resolution;
varying vec4 v_color;
varying vec2 v_texture_coord;
void main() {
vec2 clipSpace = (position/resolution)*2.0-1.0;
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
v_color = color_attribute;
v_texture_coord = texture_coord;
}
|]

type alias Vertex =
{ position : Vec2
, texture_coord : Vec2
, color_attribute : Vec4
}

type alias Uniforms =
{
resolution : Vec2,
texture : Texture
}

fragmentShader : Shader {} { u | texture : Texture } { v_color : Vec4, v_texture_coord : Vec2 }
fragmentShader =
[glsl|
precision mediump float;
uniform sampler2D texture;
varying vec4 v_color;
varying highp vec2 v_texture_coord;
void main() {
vec2 uv = gl_FragCoord.xy/vec2(800,600);
vec4 texColor = texture2D(texture,v_texture_coord.xy);
vec4 finalColor;
finalColor.r = texColor.r*v_color.r;
finalColor.g = texColor.g*v_color.g;
finalColor.b = texColor.b*v_color.b;
finalColor.a = texColor.a*v_color.a;
gl_FragColor = finalColor;
}
|]

0 comments on commit 668f714

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.