git.iko.soy/elk
on 8bfca73 help sign in
elk/libraries/Native/Graphics/WebGL.js
216 lines 7.1 kB history raw
1Elm.Native.Graphics.WebGL = {};
2Elm.Native.Graphics.WebGL.make = function(elm) {
4 elm.Native = elm.Native || {};
5 elm.Native.Graphics = elm.Native.Graphics || {};
6 elm.Native.Graphics.WebGL = elm.Native.Graphics.WebGL || {};
7 if (elm.Native.Graphics.WebGL.values) return elm.Native.Graphics.WebGL.values;
9 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;
11 var Signal = Elm.Signal.make(elm);
12 var newElement = Elm.Graphics.Element.make(elm).newElement;
13 var Utils = Elm.Native.Utils.make(elm);
14 var Tuple2 = Utils.Tuple2;
15 var MJS = Elm.Native.MJS.make(elm);
16 var List = Elm.Native.List.make(elm);
18 function encapsulate(program, buffer, uniforms) {
20 var model = {
21 program: program,
22 buffer: buffer,
23 uniforms: uniforms
24 };
26 return model;
28 }
30 function webgl(w, h, draw) {
32 var node = newNode('canvas');
33 var gl = node.getContext('webgl');
35 function link (vSrc, fSrc) {
37 function createShader(str, type) {
39 var shader = gl.createShader(type);
41 gl.shaderSource(shader, str);
42 gl.compileShader(shader);
43 var compile = gl.COMPILE_STATUS;
44 if (!gl.getShaderParameter(shader,compile)) {
45 throw gl.getShaderInfoLog(shader);
46 }
48 return shader;
50 };
52 var vshader = createShader(vSrc, gl.VERTEX_SHADER);
53 var fshader = createShader(fSrc, gl.FRAGMENT_SHADER);
54 var program = gl.createProgram();
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 }
63 return program;
65 }
67 function bind (program, bufferElems) {
69 var bufferObject = {};
71 var attributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
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:
77 // Might want to invert the loop
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);
88 var buffer = gl.createBuffer();
89 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
90 gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
92 bufferObject[attribute.name] = buffer;
94 break;
96 default:
97 console.log("Bad buffer type");
98 break;
99 }
101 }
103 return bufferObject;
105 }
107 function render(model) {
108 drawGL(model);
109 return model.node;
110 }
112 function update(canvasNode, oldModel, newModel) {
113 drawGL(newModel)
114 }
116 }
118 function drawGL(model) {
120 var gl = model.gl;
121 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
123 function drawModel(glModel) {
124 var program = glModel.program;
125 gl.useProgram(program);
127 var activeUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
128 for (var i = 0; i < activeUniforms; i += 1) {
129 var uniform = gl.getActiveUniform(program, i);
130 var uniformLocation = gl.getUniformLocation(program, uniform.name);
131 switch (uniform.type) {
132 case gl.FLOAT_MAT4:
133 gl.uniformMatrix4fv(uniformLocation, false, glModel.uniforms[uniform.name]);
134 break;
135 default:
136 console.log("Unsupported uniform type: " + uniform.type);
137 break;
138 }
139 }
141 var numIndices = List.length(glModel.attributes);
142 var indices = List.toArray(List.range(0,numIndices));
143 var indexBuffer = gl.createBuffer();
144 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
145 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
147 var activeAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
148 for (var i = 0; i < activeAttributes; i += 1) {
149 var attribute = gl.getActiveAttrib(program, i);
150 var attribLocation = gl.getAttribLocation(program, attribute.name);
151 gl.enableVertexAttribArray(attribLocation);
152 switch (attribute.type) {
153 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);
162 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
163 gl.vertexAttribPointer(attribLocation, 3, gl.FLOAT, false, 0, 0);
164 break;
165 default:
166 console.log("Unsupported attribute type: " + attribute.type);
167 break;
168 }
169 }
171 gl.drawElements(gl.TRIANGLES, numIndices, gl.UNSIGNED_SHORT, 0);
173 }
175 List.each(drawModel, model.glModels);
177 }
179 /*
180 * Called for new node, caches lots of stuff
181 */
182 function render(model) {
183 drawGL(model);
184 return model.node;
185 }
187 /*
188 * Called at existing node
189 */
190 function update(canvasNode, oldModel, newModel) {
191 drawGL(newModel)
192 }
194 function webgl(context, glModels) {
196 return A3(newElement, context.w, context.h, {
197 ctor: 'Custom',
198 type: 'WebGL',
199 render: render,
200 update: update,
201 model: {
202 aspect: context.w/context.h,
203 node: context.node,
204 gl: context.gl,
205 glModels: glModels,
206 },
207 });
209 }
211 return elm.Native.Graphics.WebGL.values = {
212 encapsulate:F3(linkModel),
213 webgl:F3(webgl),
214 };
216};