git.iko.soy/elk
on master help sign in
API nicety changes
7ff90c8John P Mayer Jr
libraries/Graphics/WebGL.elm+17−11
compare with master
unifiedsplit
@@ -1,4 +1,4 @@
1−module Graphics.WebGL where
1+module Graphics.WebGL (makeGL, Vertex, bufferMesh, transform, mesh, webgl) where
2
2
3{-| WebGL
3{-| WebGL
4
4
@@ -11,21 +11,27 @@ import Color (Color)
11import Graphics.Element (Element)
11import Graphics.Element (Element)
12import Native.Graphics.WebGL
12import Native.Graphics.WebGL
13
13
14−data GLContext = Fake_GLContext
14+data GLContext = Fake_Context
15
15
16−glContext : Int -> Int -> Signal GLContext
16+makeGL : Int -> Int -> Signal GLContext
17−glContext = Native.Graphics.WebGL.glContext
17+makeGL = Native.Graphics.WebGL.makeGL
18
18
19−type GLPoint = { pos: V3, color: Color }
19+type Vertex = { pos: V3, color: Color }
20−type GLTriangle = { a: GLPoint, b: GLPoint, c: GLPoint }
20+type Triangle = (Vertex,Vertex,Vertex)
21
21
22data Mesh = Fake_Mesh
22data Mesh = Fake_Mesh
23
23
24−bindMesh : [GLTriangle] -> GLContext -> Mesh
24+bufferMesh : [Triangle] -> GLContext -> Mesh
25−bindMesh = Native.Graphics.WebGL.bindMesh
25+bufferMesh = Native.Graphics.WebGL.bufferMesh
26
26
27−data Scene = Node M4x4 [Scene] | Leaf Mesh
27+data Scene = SceneNode M4x4 [Scene] | SceneLeaf Mesh
28
28
29+transform : M4x4 -> [Scene] -> Scene
30+transform = SceneNode
31+
32+mesh : Mesh -> Scene
33+mesh = SceneLeaf
34+
29−renderGL : GLContext -> Scene -> Element
35+webgl : GLContext -> Scene -> Element
30−renderGL = Native.Graphics.WebGL.renderGL
36+webgl = Native.Graphics.WebGL.webgl
31
37
libraries/MJS.elm+6
@@ -17,3 +17,9 @@ m4x4identity = Native.MJS.m4x4identity
17
17
18m4x4makeRotate : Float -> V3 -> M4x4
18m4x4makeRotate : Float -> V3 -> M4x4
19m4x4makeRotate = Native.MJS.m4x4makeRotate
19m4x4makeRotate = Native.MJS.m4x4makeRotate
20+
21+m4x4makeLookAt : V3 -> V3 -> V3 -> M4x4
22+m4x4makeLookAt = Native.MJS.m4x4makeLookAt
23+
24+m4x4makePerspective : Float -> Float -> Float -> Float -> M4x4
25+m4x4makePerspective = Native.MJS.m4x4makePerspective
libraries/Native/Graphics/WebGL.js+8−9
@@ -102,7 +102,7 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
102
102
103 function drawScene(scene,n) {
103 function drawScene(scene,n) {
104 switch(scene.ctor) {
104 switch(scene.ctor) {
105− case 'Leaf':
105+ case 'SceneLeaf':
106 drawMesh(scene._0, sceneMatrixStack[n]);
106 drawMesh(scene._0, sceneMatrixStack[n]);
107 break;
107 break;
108 default:
108 default:
@@ -137,7 +137,7 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
137 drawGL(newModel)
137 drawGL(newModel)
138 }
138 }
139
139
140− function glContext(w,h) {
140+ function makeGL(w,h) {
141 var node = newNode('canvas');
141 var node = newNode('canvas');
142 var gl = node.getContext('webgl');
142 var gl = node.getContext('webgl');
143 var programPtr = createProgram(gl, geoVert, geoFrag);
143 var programPtr = createProgram(gl, geoVert, geoFrag);
@@ -153,7 +153,7 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
153 return Signal.constant({w:w,h:h,gl:gl,node:node,program:program});
153 return Signal.constant({w:w,h:h,gl:gl,node:node,program:program});
154 }
154 }
155
155
156− function bindMesh(triangles, context) {
156+ function bufferMesh(triangles, context) {
157 var indices = [];
157 var indices = [];
158 var positions = [];
158 var positions = [];
159 var colors = [];
159 var colors = [];
@@ -161,10 +161,9 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
161 function pushTriangle(n, node) {
161 function pushTriangle(n, node) {
162 if (node.ctor === "[]") return;
162 if (node.ctor === "[]") return;
163 var tri = node._0;
163 var tri = node._0;
164− var names = ['a','b','c'];
165 for (var i = 0; i < 3; i+= 1) {
164 for (var i = 0; i < 3; i+= 1) {
166 indices.push(3 * n + i);
165 indices.push(3 * n + i);
167− var vertex = tri[names[i]];
166+ var vertex = tri['_' + i];
168 for (var j = 0; j < 3; j += 1) {
167 for (var j = 0; j < 3; j += 1) {
169 positions.push(vertex.pos[j]);
168 positions.push(vertex.pos[j]);
170 }
169 }
@@ -201,7 +200,7 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
201
200
202 }
201 }
203
202
204− function renderGL(context, scene) {
203+ function webgl(context, scene) {
205
204
206 return A3(newElement, context.w, context.h, {
205 return A3(newElement, context.w, context.h, {
207 ctor: 'Custom',
206 ctor: 'Custom',
@@ -220,9 +219,9 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
220 }
219 }
221
220
222 return elm.Native.Graphics.WebGL.values = {
221 return elm.Native.Graphics.WebGL.values = {
223− glContext:F2(glContext),
222+ makeGL:F2(makeGL),
224− bindMesh:F2(bindMesh),
223+ bufferMesh:F2(bufferMesh),
225− renderGL:F2(renderGL),
224+ webgl:F2(webgl),
226 };
225 };
227
226
228};
227};
libraries/Native/MJS.js+1−1
@@ -1888,7 +1888,7 @@ Elm.Native.MJS.make = function(elm) {
1888 m4x4translate3: F4(M4x4.translate3),
1888 m4x4translate3: F4(M4x4.translate3),
1889 m4x4translate1: F2(M4x4.translate1),
1889 m4x4translate1: F2(M4x4.translate1),
1890 m4x4translate: F2(M4x4.translate),
1890 m4x4translate: F2(M4x4.translate),
1891− m4x4makeLookFt: F3(M4x4.makeLookAt),
1891+ m4x4makeLookAt: F3(M4x4.makeLookAt),
1892 m4x4transpose: M4x4.transpose,
1892 m4x4transpose: M4x4.transpose,
1893 m4x4transformPoint: F2(M4x4.transformPoint),
1893 m4x4transformPoint: F2(M4x4.transformPoint),
1894 /*
1894 /*
tests/good/Box.elm+32−14
@@ -1,36 +1,53 @@
1
1
2import open Color
2import open Color
3−import open Graphics.WebGL
4import open MJS
3import open MJS
5
4
6−-- Setup the GL context
5+import Graphics.WebGL (GLContext, Vertex, Triangle, Mesh, Scene, makeGL, bufferMesh, transform, mesh, webgl)
7
6
8−context : Signal GLContext
7+-- Setup the GLContext
9−context = glContext 400 400
10
8
9+gl : Signal GLContext
10+gl = makeGL 400 400
11+
11−-- Define what our picture looks like
12+-- Define what our geometry looks like
12
13
13top = v3 0 1 0
14top = v3 0 1 0
14left = v3 -1 -1 0
15left = v3 -1 -1 0
15right = v3 1 -1 0
16right = v3 1 -1 0
16
17
17−triangle : GLTriangle
18+geometry : Triangle
18−triangle = GLTriangle (GLPoint top red) (GLPoint left blue) (GLPoint right green)
19+geometry = (Vertex top red, Vertex left blue, Vertex right green)
20+
21+-- Bind our geometry to a mesh in our GL gl
22+
23+geoMesh : Signal Mesh
24+geoMesh = lift (bufferMesh [geometry]) gl
19
25
20−-- Bind our picture to a mesh in our GL context
26+-- Build two helper transforms
21
27
22−triMesh : Signal Mesh
28+perspective : M4x4
23−triMesh = lift (bindMesh [triangle]) context
29+perspective = m4x4makePerspective 45 1 0.01 100
24
30
25−-- Given an angle and a Mesh, what does the scene look like?
31+camera : Float -> M4x4
32+camera r =
33+ let eye = v3 0 0 r
34+ center = v3 0 0 0
35+ up = v3 0 1 0
36+ in m4x4makeLookAt eye center up
37+
38+-- Build the scene with extra model rotate transforms
26
39
27scene : Float -> Mesh -> Scene
40scene : Float -> Mesh -> Scene
28−scene angle mesh =
41+scene angle m =
29 let xAxis = v3 1 0 0
42 let xAxis = v3 1 0 0
30 yAxis = v3 0 1 0
43 yAxis = v3 0 1 0
31 rotationX = m4x4makeRotate (angle / 2) xAxis
44 rotationX = m4x4makeRotate (angle / 2) xAxis
32 rotationY = m4x4makeRotate (angle / 3) yAxis
45 rotationY = m4x4makeRotate (angle / 3) yAxis
33− in Node rotationX [Node rotationY [Leaf mesh]]
46+ in transform perspective [
47+ transform (camera <| 5 + 3 * sin angle) [
48+ transform rotationX [
49+ transform rotationY [
50+ mesh m ]]]]
34
51
35-- Standard accumulator and wiring it up with main
52-- Standard accumulator and wiring it up with main
36
53
@@ -38,4 +55,5 @@ angle : Signal Float
38angle = foldp (\_ a -> a + 0.1) 0 (fps 25)
55angle = foldp (\_ a -> a + 0.1) 0 (fps 25)
39
56
40main : Signal Element
57main : Signal Element
41−main = lift2 renderGL context (lift2 scene angle triMesh)
58+main = lift2 webgl gl (lift2 scene angle geoMesh)
59+