libraries/Native/Graphics/WebGL.js · elk · git.iko.soy

git.iko.soy/elk

on d288733 help sign in

elk/libraries/Native/Graphics/WebGL.js

299 lines 9.4 kB history raw

1Elm.Native.Graphics.WebGL = {};

2Elm.Native.Graphics.WebGL.make = function(elm) {

4 // LOG LEVEL

6 elm.Native = elm.Native || {};

7 elm.Native.Graphics = elm.Native.Graphics || {};

8 elm.Native.Graphics.WebGL = elm.Native.Graphics.WebGL || {};

9 if (elm.Native.Graphics.WebGL.values) return elm.Native.Graphics.WebGL.values;

11 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;

13 var Signal = Elm.Signal.make(elm);

14 var newElement = Elm.Graphics.Element.make(elm).newElement;

15 var Utils = Elm.Native.Utils.make(elm);

16 var Tuple2 = Utils.Tuple2;

17 var MJS = Elm.Native.MJS.make(elm);

18 var List = Elm.Native.List.make(elm);

20 function encapsulate(program, buffer, uniforms) {

22 return model = {

23 program: program,

24 buffer: buffer,

25 uniforms: uniforms

26 };

28 }

30 function link (vSrc, fSrc) {

32 var guid = Utils.guid();

34 //console.log("Wrapped program #" + guid);

36 return program = {

37 guid: guid,

38 vSrc: vSrc,

39 fSrc: fSrc

40 };

42 }

44 function do_link (gl, vSrc, fSrc) {

46 function createShader(str, type) {

48 var shader = gl.createShader(type);

50 gl.shaderSource(shader, str);

51 gl.compileShader(shader);

52 var compile = gl.COMPILE_STATUS;

53 if (!gl.getShaderParameter(shader,compile)) {

54 throw gl.getShaderInfoLog(shader);

55 }

57 return shader;

59 };

61 var vshader = createShader(vSrc, gl.VERTEX_SHADER);

62 var fshader = createShader(fSrc, gl.FRAGMENT_SHADER);

63 var program = gl.createProgram();

64 //console.log("Created shaders and program");

66 gl.attachShader(program, vshader);

67 gl.attachShader(program, fshader);

68 gl.linkProgram(program);

69 if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {

70 throw gl.getProgramInfoLog(program);

71 }

73 return program;

75 }

77 function bind (bufferElems) {

79 var guid = Utils.guid();

81 //console.log("Wrapped buffer #" + guid);

83 return buffer = {

84 guid: guid,

85 bufferElems: bufferElems

86 };

88 }

90 function do_bind (gl, program, bufferElems) {

92 var buffers = {};

94 var attributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);

95 for (var i = 0; i < attributes; i += 1) {

96 var attribute = gl.getActiveAttrib(program, i);

97 switch (attribute.type) {

98 case gl.FLOAT_VEC3:

100 // Might want to invert the loop

101 // to build the array buffer first

102 // and then bind each one-at-a-time

103 var data = [];

104 List.each(function(elem){

105 data.push(elem._0[attribute.name][0]);

106 data.push(elem._0[attribute.name][1]);

107 data.push(elem._0[attribute.name][2]);

108 data.push(elem._1[attribute.name][0]);

109 data.push(elem._1[attribute.name][1]);

110 data.push(elem._1[attribute.name][2]);

111 data.push(elem._2[attribute.name][0]);

112 data.push(elem._2[attribute.name][1]);

113 data.push(elem._2[attribute.name][2]);

114 }, bufferElems);

115 var array = new Float32Array(data);

117 var buffer = gl.createBuffer();

118 //console.log("Created attribute buffer " + attribute.name);

119 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

120 gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);

122 buffers[attribute.name] = buffer;

124 break;

126 default:

127 console.log("Bad buffer type");

128 break;

129 }

131 }

133 var numIndices = 3 * List.length(bufferElems);

134 var indices = List.toArray(List.range(0, numIndices - 1));

135 //console.log("Created index buffer");

136 var indexBuffer = gl.createBuffer();

137 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

138 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

140 var bufferObject = {

141 numIndices: numIndices,

142 indexBuffer: indexBuffer,

143 buffers: buffers

144 };

146 return bufferObject;

148 }

150 function drawGL(model) {

151

152 var gl = model.cache.gl;

154 gl.viewport(0, 0, model.w, model.h);

155 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

156 //console.log("Drawing");

158 function drawModel(m) {

160 var program = model.cache.programs[m.program.guid];

161 if (!program) {

162 program = do_link(gl, m.program.vSrc, m.program.fSrc);

163 model.cache.programs[m.program.guid] = program;

164 }

166 gl.useProgram(program);

168 var numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);

169 for (var i = 0; i < numUniforms; i += 1) {

170 var uniform = gl.getActiveUniform(program, i);

171 var uniformLocation = gl.getUniformLocation(program, uniform.name);

172 switch (uniform.type) {

173 case gl.INT:

174 gl.uniform1i(uniformLocation, m.uniforms[uniform.name]);

175 break;

176 case gl.FLOAT:

177 gl.uniform1f(uniformLocation, m.uniforms[uniform.name]);

178 break;

179 case gl.FLOAT_VEC3:

180 gl.uniform3fv(uniformLocation, m.uniforms[uniform.name]);

181 break;

182 case gl.FLOAT_MAT4:

183 gl.uniformMatrix4fv(uniformLocation, false, m.uniforms[uniform.name]);

184 break;

185 default:

186 console.log("Unsupported uniform type: " + uniform.type);

187 break;

188 }

189 }

191 var buffer = model.cache.buffers[m.buffer.guid];

192 if (!buffer) {

193 buffer = do_bind(gl, program, m.buffer.bufferElems);

194 model.cache.buffers[m.buffer.guid] = buffer;

195 }

197 var numIndices = buffer.numIndices;

198 var indexBuffer = buffer.indexBuffer;

199 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

201 var numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);

202 for (var i = 0; i < numAttributes; i += 1) {

203 var attribute = gl.getActiveAttrib(program, i);

204 var attribLocation = gl.getAttribLocation(program, attribute.name);

205 gl.enableVertexAttribArray(attribLocation);

206 attributeBuffer = buffer.buffers[attribute.name];

208 switch (attribute.type) {

209 case gl.FLOAT_VEC3:

210 gl.bindBuffer(gl.ARRAY_BUFFER, attributeBuffer);

211 gl.vertexAttribPointer(attribLocation, 3, gl.FLOAT, false, 0, 0);

212 break;

213 default:

214 console.log("Unsupported attribute type: " + attribute.type);

215 break;

216 }

217 }

219 gl.drawElements(gl.TRIANGLES, numIndices, gl.UNSIGNED_SHORT, 0);

221 }

223 List.each(drawModel, model.models);

225 }

227 function webgl(dimensions, models) {

229 if (!window.WebGLRenderingContext) {

230 throw new Error("It appears your browser does not support WebGL! http://get.webgl.org/troubleshooting");

231 return;

232 }

234 var w = dimensions._0;

235 var h = dimensions._1;

237 function render(model) {

239 var div = newNode('div');

240 div.style.overflow = 'hidden';

241 var canvas = newNode('canvas');

242 var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

243 gl.enable(gl.DEPTH_TEST);

245 model.cache.gl = gl;

246 model.cache.canvas = canvas;

247 model.cache.programs = [];

248 model.cache.buffers = [];

250 update(div, model, model);

252 return div;

254 }

256 function update(div, oldModel, newModel) {

258 newModel.cache = oldModel.cache;

260 var canvas = newModel.cache.canvas;

262 canvas.style.width = oldModel.w + 'px';

263 canvas.style.height = oldModel.h + 'px';

264 canvas.style.display = "block";

265 canvas.style.position = "absolute";

266 canvas.width = oldModel.w;

267 canvas.height = oldModel.h;

269 drawGL(newModel);

271 div.appendChild(canvas);

273 }

275 var elem = {

276 ctor: 'Custom',

277 type: 'WebGL',

278 render: render,

279 update: update,

280 model: {

281 models: models,

282 cache: {},

283 w: w,

284 h: h,

285 }

286 };

288 return A3(newElement, w, h, elem);

290 }

292 return elm.Native.Graphics.WebGL.values = {

293 link:F2(link),

294 bind:bind,

295 encapsulate:F3(encapsulate),

296 webgl:F2(webgl)

297 };