//Edit the code below and see your changes update live in the canvas: // to refresh the running window always create your convas as follow: //function webGLStart() { PhiloGL('codeRunning-canvas', { program: { from: 'ids', vs: 'shader-vs_chap0', fs: 'shader-fs_chap0' }, onError: function() { alert("djafer: An error ocurred while loading the application"); }, onLoad: function(app) { var gl = app.gl, canvas = app.canvas, program = app.program, camera = app.camera; gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0, 0, 0, 1); gl.clearDepth(1); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); program.setBuffers({ 'triangle': { attribute: 'aVertexPosition', value: new Float32Array([0, 1, 0, -1, -1, 0, 1, -1, 0]), size: 3 }, 'square': { attribute: 'aVertexPosition', value: new Float32Array([1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0]), size: 3 } }); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); camera.view.id(); //Draw Triangle camera.view.$translate(-1.5, 0, -7); program.setUniform('uMVMatrix', camera.view); program.setUniform('uPMatrix', camera.projection); program.setBuffer('triangle'); gl.drawArrays(gl.TRIANGLES, 0, 3); //Draw Square camera.view.$translate(3, 0, 0); program.setUniform('uMVMatrix', camera.view); program.setUniform('uPMatrix', camera.projection); program.setBuffer('square'); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } }); //}