git.iko.soy/elk
on master help sign in
much cleaned API in my opinion, plus a much simpler example
68e8bcaJohn P Mayer Jr
.gitignore+2
compare with master
unifiedsplit
@@ -10,3 +10,5 @@ cabal-dev
10data
10data
11*/ElmFiles/*
11*/ElmFiles/*
12.DS_Store
12.DS_Store
13+build
14+cache
compiler/Type/Constrain/Expression.hs+1−1
@@ -42,7 +42,7 @@ constrain env (L span expr) tipe =
42 Nothing -> throwError [PP.text "Some sort of GLSL parse error"]
42 Nothing -> throwError [PP.text "Some sort of GLSL parse error"]
43 Just sourceTipe -> return . L span $ CEqual tipe (shaderTipe sourceTipe)
43 Just sourceTipe -> return . L span $ CEqual tipe (shaderTipe sourceTipe)
44 where
44 where
45− shaderTipe t = Env.get env Env.types "Graphics.WebGL.GLShader" <| t
45+ shaderTipe t = Env.get env Env.types "Graphics.WebGL.Shader" <| t
46 glTipe = Env.get env Env.types . PH.glTipeName
46 glTipe = Env.get env Env.types . PH.glTipeName
47 declsRecord :: PH.GLShaderDecls -> TermN Variable
47 declsRecord :: PH.GLShaderDecls -> TermN Variable
48 declsRecord extractedTipes = record (fields' extractedTipes) (TermN EmptyRecord1)
48 declsRecord extractedTipes = record (fields' extractedTipes) (TermN EmptyRecord1)
libraries/Graphics/WebGL.elm+11−5
@@ -1,19 +1,25 @@
1−module Graphics.WebGL (encapsulate, webgl) where
1+module Graphics.WebGL (link, bind, encapsulate, webgl) where
2
2
3{-| WebGL -}
3{-| WebGL -}
4
4
5import Graphics.Element (Element)
5import Graphics.Element (Element)
6import Native.Graphics.WebGL
6import Native.Graphics.WebGL
7
7
8+data GL = Dummy_GL
9+
8−data Shader a u v = Dummy_Shader
10+data Shader auv = Dummy_Shader
9data Program a u = Dummy_Program
11data Program a u = Dummy_Program
10−type Linker = Shader a u v -> Shader {} {} v -> Program a u
12+
13+link : GL -> Shader { attribute : a, uniform : u, varying : v } -> Shader { attribute : {}, uniform : {}, varying : v } -> Program a u
14+link = Native.Graphics.WebGL.link
11
15
12-- Binder really should not need a program
16-- Binder really should not need a program
13-- I need runtime type information from something though...
17-- I need runtime type information from something though...
14
18
15data Buffer a = Dummy_Buffer
19data Buffer a = Dummy_Buffer
20+
16−type Binder = Program a u -> [a] -> Buffer a
21+bind : GL -> Program a u -> [a] -> Buffer a
22+bind = Native.Graphics.WebGL.bind
17
23
18-- Now I cheat here because elm lacks existential types or rank-n
24-- Now I cheat here because elm lacks existential types or rank-n
19-- I'm in essense doing the following
25-- I'm in essense doing the following
@@ -24,5 +30,5 @@ data Model = Dummy_Model
24encapsulate : Program a u -> Buffer a -> u -> Model
30encapsulate : Program a u -> Buffer a -> u -> Model
25encapsulate = Native.Graphics.WebGL.encapsulate
31encapsulate = Native.Graphics.WebGL.encapsulate
26
32
27−webgl : Int -> Int -> (Linker -> Binder -> [Model]) -> Element
33+webgl : Int -> Int -> (GL -> [Model]) -> Element
28webgl = Native.Graphics.WebGL.webgl
34webgl = Native.Graphics.WebGL.webgl
libraries/Native/Graphics/WebGL.js+126−143
@@ -27,190 +27,173 @@ Elm.Native.Graphics.WebGL.make = function(elm) {
27
27
28 }
28 }
29
29
30− function webgl(w, h, draw) {
31−
32− var node = newNode('canvas');
33− var gl = node.getContext('webgl');
34−
35− function link (vSrc, fSrc) {
30+ function link (gl, vSrc, fSrc) {
36
31
37− function createShader(str, type) {
32+ function createShader(str, type) {
38
33
39− var shader = gl.createShader(type);
34+ var shader = gl.createShader(type);
40
35
41− gl.shaderSource(shader, str);
36+ gl.shaderSource(shader, str);
42− gl.compileShader(shader);
37+ gl.compileShader(shader);
43− var compile = gl.COMPILE_STATUS;
38+ var compile = gl.COMPILE_STATUS;
44− if (!gl.getShaderParameter(shader,compile)) {
39+ if (!gl.getShaderParameter(shader,compile)) {
45− throw gl.getShaderInfoLog(shader);
40+ throw gl.getShaderInfoLog(shader);
46− }
47−
48− return shader;
49−
50− };
41+ }
51
42
52− var vshader = createShader(vSrc, gl.VERTEX_SHADER);
43+ return shader;
53− var fshader = createShader(fSrc, gl.FRAGMENT_SHADER);
54− var program = gl.createProgram();
55
44
56− gl.attachShader(program, vshader);
57− gl.attachShader(program, fshader);
58− gl.linkProgram(program);
59− if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
60− throw gl.getProgramInfoLog(program);
61− }
45+ };
62
46
63− return program;
47+ var vshader = createShader(vSrc, gl.VERTEX_SHADER);
48+ var fshader = createShader(fSrc, gl.FRAGMENT_SHADER);
49+ var program = gl.createProgram();
64
50
51+ gl.attachShader(program, vshader);
52+ gl.attachShader(program, fshader);
53+ gl.linkProgram(program);
54+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
55+ throw gl.getProgramInfoLog(program);
65 }
56 }
66
57
67− function bind (program, bufferElems) {
58+ return program;
68
59
69− var bufferObject = {};
60+ }
70
61
71− var attributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
62+ function bind (gl, program, bufferElems) {
72− for (var i = 0; i < attributes; i += 1) {
73− var attribute = gl.getActiveAttrib(program, i);
74− switch (attribute.type) {
75− case gl.FLOAT_VEC3:
76
63
77− // Might want to invert the loop
64+ var buffers = {};
78− // to build the array buffer first
79− // and then bind each one-at-a-time
80− var data = [];
81− List.each(function(elem){
82− data.push(elem[attribute.name][0]);
83− data.push(elem[attribute.name][1]);
84− data.push(elem[attribute.name][2]);
85− }, bufferElems);
86− var array = new Float32Array(data);
87
65
88− var buffer = gl.createBuffer();
66+ var attributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
89− gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
67+ for (var i = 0; i < attributes; i += 1) {
90− gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
68+ var attribute = gl.getActiveAttrib(program, i);
69+ switch (attribute.type) {
70+ case gl.FLOAT_VEC3:
91
71
92− bufferObject[attribute.name] = buffer;
72+ // Might want to invert the loop
73+ // to build the array buffer first
74+ // and then bind each one-at-a-time
75+ var data = [];
76+ List.each(function(elem){
77+ data.push(elem[attribute.name][0]);
78+ data.push(elem[attribute.name][1]);
79+ data.push(elem[attribute.name][2]);
80+ }, bufferElems);
81+ var array = new Float32Array(data);
93
82
94− break;
83+ var buffer = gl.createBuffer();
84+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
85+ gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
95
86
96− default:
87+ buffers[attribute.name] = buffer;
97− console.log("Bad buffer type");
98− break;
99− }
100
88
101− }
89+ break;
102
90
103− return bufferObject;
91+ default:
92+ console.log("Bad buffer type");
93+ break;
94+ }
104
95
105 }
96 }
106
97
107− function render(model) {
98+ var bufferObject = {
108− drawGL(model);
99+ numIndices: List.length(bufferElems),
109− return model.node;
100+ buffers: buffers
110− }
101+ };
111
102
112− function update(canvasNode, oldModel, newModel) {
103+ return bufferObject;
113− drawGL(newModel)
114− }
115
104
116 }
105 }
117
106
118− function drawGL(model) {
107+ function webgl(w, h, draw) {
119−
108+
120− var gl = model.gl;
109+ var node = newNode('canvas');
110+ var gl = node.getContext('webgl');
111+
112+ function drawGL(state) {
113+
121− gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
114+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
122−
115+
123− function drawModel(glModel) {
116+ function drawModel(model) {
117+
124− var program = glModel.program;
118+ var program = model.program;
125− gl.useProgram(program);
119+ gl.useProgram(program);
126−
120+
127− var activeUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
121+ var numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
128− for (var i = 0; i < activeUniforms; i += 1) {
122+ for (var i = 0; i < numUniforms; i += 1) {
129− var uniform = gl.getActiveUniform(program, i);
123+ var uniform = gl.getActiveUniform(program, i);
130− var uniformLocation = gl.getUniformLocation(program, uniform.name);
124+ var uniformLocation = gl.getUniformLocation(program, uniform.name);
131− switch (uniform.type) {
125+ switch (uniform.type) {
132− case gl.FLOAT_MAT4:
126+ case gl.FLOAT_MAT4:
133− gl.uniformMatrix4fv(uniformLocation, false, glModel.uniforms[uniform.name]);
127+ gl.uniformMatrix4fv(uniformLocation, false, model.uniforms[uniform.name]);
134− break;
128+ break;
135− default:
129+ default:
136− console.log("Unsupported uniform type: " + uniform.type);
130+ console.log("Unsupported uniform type: " + uniform.type);
137− break;
131+ break;
132+ }
138 }
133 }
139− }
140
134
141− var numIndices = List.length(glModel.attributes);
135+ var numIndices = model.buffer.numIndices;
142− var indices = List.toArray(List.range(0,numIndices));
136+ var indices = List.toArray(List.range(0,numIndices));
137+
143− var indexBuffer = gl.createBuffer();
138+ var indexBuffer = gl.createBuffer();
144− gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
139+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
145− gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
140+ gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
146−
141+
147− var activeAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
142+ var numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
148− for (var i = 0; i < activeAttributes; i += 1) {
143+ for (var i = 0; i < numAttributes; i += 1) {
149− var attribute = gl.getActiveAttrib(program, i);
144+ var attribute = gl.getActiveAttrib(program, i);
150− var attribLocation = gl.getAttribLocation(program, attribute.name);
145+ var attribLocation = gl.getAttribLocation(program, attribute.name);
151− gl.enableVertexAttribArray(attribLocation);
146+ gl.enableVertexAttribArray(attribLocation);
147+ attributeBuffer = model.buffer.buffers[attribute.name];
148+
152− switch (attribute.type) {
149+ switch (attribute.type) {
153− case gl.FLOAT_VEC3:
150+ case gl.FLOAT_VEC3:
154− var data = [];
155− List.each(function(elem){
156− data.push(elem[attribute.name][0]);
157− data.push(elem[attribute.name][1]);
158− data.push(elem[attribute.name][2]);
159− }, glModel.attributes);
160− var attributeBuffer = gl.createBuffer();
161− gl.bindBuffer(gl.ARRAY_BUFFER, attributeBuffer);
151+ gl.bindBuffer(gl.ARRAY_BUFFER, attributeBuffer);
162− gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
163− gl.vertexAttribPointer(attribLocation, 3, gl.FLOAT, false, 0, 0);
152+ gl.vertexAttribPointer(attribLocation, 3, gl.FLOAT, false, 0, 0);
164− break;
153+ break;
165− default:
154+ default:
166− console.log("Unsupported attribute type: " + attribute.type);
155+ console.log("Unsupported attribute type: " + attribute.type);
167− break;
156+ break;
157+ }
168 }
158 }
169− }
170
159
171− gl.drawElements(gl.TRIANGLES, numIndices, gl.UNSIGNED_SHORT, 0);
160+ gl.drawElements(gl.TRIANGLES, numIndices, gl.UNSIGNED_SHORT, 0);
172
161
173− }
162+ }
174
163
175− List.each(drawModel, model.glModels);
164+ List.each(drawModel, state.models);
176
165
177− }
166+ }
178
167
179− /*
180− * Called for new node, caches lots of stuff
181− */
182− function render(model) {
168+ function render(state) {
183− drawGL(model);
169+ drawGL(state);
184− return model.node;
170+ return node;
185− }
171+ }
186
172
187− /*
173+ function update(_node, oldState, newState) {
188− * Called at existing node
189− */
190− function update(canvasNode, oldModel, newModel) {
191− drawGL(newModel)
174+ drawGL(newState)
192− }
175+ }
193
176
194− function webgl(context, glModels) {
177+ var models = draw(gl);
195
178
196− return A3(newElement, context.w, context.h, {
179+ var elem = {
197 ctor: 'Custom',
180 ctor: 'Custom',
198− type: 'WebGL',
181+ type: 'WebGL',
199− render: render,
182+ render: render,
200− update: update,
183+ update: update,
201− model: {
184+ model: {
202− aspect: context.w/context.h,
185+ models: models,
203− node: context.node,
204− gl: context.gl,
205− glModels: glModels,
206− },
186+ }
207− });
187+ };
208
188
189+ return A3(newElement, w, h, elem);
209 }
190 }
210
191
211 return elm.Native.Graphics.WebGL.values = {
192 return elm.Native.Graphics.WebGL.values = {
193+ link:F3(link),
194+ bind:F3(bind),
212− encapsulate:F3(linkModel),
195+ encapsulate:F3(encapsulate),
213− webgl:F3(webgl),
196+ webgl:F3(webgl)
214 };
197 };
215
198
216};
199};
tests/good/.gitignoredeleted−2
@@ -1,2 +0,0 @@
1−build
2−cache
tests/good/Box.elm+23−46
@@ -1,59 +1,36 @@
1
1
2−import open Color
2+import MJS (V3,v3)
3−import open MJS
3+import Graphics.WebGL (link, bind, encapsulate, webgl)
4−
5−import Graphics.WebGL (GLContext, Vertex, Triangle, Mesh, Scene, makeGL, bufferMesh, transform, mesh, webgl)
6−
7−-- Setup the GLContext
8−
9−gl : Signal GLContext
10−gl = makeGL 400 400
11
4
12-- Define what our geometry looks like
5-- Define what our geometry looks like
13
6
7+top : V3
14top = v3 0 1 0
8top = v3 0 1 0
9+left : V3
15left = v3 -1 -1 0
10left = v3 -1 -1 0
11+right : V3
16right = v3 1 -1 0
12right = v3 1 -1 0
17
13
18−geometry : Triangle
14+mesh : [{ pos : V3 }]
19−geometry = (Vertex top red, Vertex left blue, Vertex right green)
15+mesh = map (\vec -> { pos = vec }) [top, left, right]
20−
21−-- Bind our geometry to a mesh in our GL gl
22−
23−geoMesh : Signal Mesh
24−geoMesh = lift (bufferMesh [geometry]) gl
25−
26−-- Build two helper transforms
27−
28−perspective : M4x4
29−perspective = m4x4makePerspective 45 1 0.01 100
30−
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
39
16
40−scene : Float -> Mesh -> Scene
17+vert = [glShader|
41−scene angle m =
18+attribute vec3 pos;
42− let xAxis = v3 1 0 0
19+void main () {
43− yAxis = v3 0 1 0
20+ gl_Position = vec4(pos, 1.0);
44− rotationX = m4x4makeRotate (angle / 2) xAxis
21+}
45− rotationY = m4x4makeRotate (angle / 3) yAxis
22+|]
46− in transform perspective [
47− transform (camera <| 5 + 3 * sin angle) [
48− transform rotationX [
49− transform rotationY [
50− mesh m ]]]]
51
23
52−-- Standard accumulator and wiring it up with main
24+frag = [glShader|
25+void main () {
26+ gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
27+}
28+|]
53
29
54−angle : Signal Float
30+draw gl =
55−angle = foldp (\_ a -> a + 0.1) 0 (fps 25)
31+ let prog = link gl vert frag
32+ buf = bind gl prog mesh
33+ in [ encapsulate prog buf {} ]
56
34
57−main : Signal Element
35+main = webgl 400 400 draw
58−main = lift2 webgl gl (lift2 scene angle geoMesh)
59
36