diff options
Diffstat (limited to 'mojo/apps/js/main.js')
-rw-r--r-- | mojo/apps/js/main.js | 215 |
1 files changed, 178 insertions, 37 deletions
diff --git a/mojo/apps/js/main.js b/mojo/apps/js/main.js index 88115ff..52bfc5b 100644 --- a/mojo/apps/js/main.js +++ b/mojo/apps/js/main.js @@ -3,78 +3,219 @@ // found in the LICENSE file. define([ - "console", - "mojo/apps/js/bindings/connector", - "mojo/apps/js/bindings/core", - "mojo/apps/js/bindings/gl", - "mojo/apps/js/bindings/threading", - "mojom/native_viewport", - "mojom/gles2", + 'console', + 'mojo/apps/js/bindings/connector', + 'mojo/apps/js/bindings/core', + 'mojo/apps/js/bindings/gl', + 'mojo/apps/js/bindings/threading', + 'mojom/native_viewport', + 'mojom/gles2', + 'mojom/shell', ], function(console, connector, core, gljs, threading, nativeViewport, - gles2) { + gles2, + shell) { - const VERTEX_SHADER_SOURCE = - "uniform mat4 u_mvpMatrix; \n" + - "attribute vec4 a_position; \n" + - "void main() \n" + - "{ \n" + - " gl_Position = u_mvpMatrix * a_position; \n" + - "} \n"; + const VERTEX_SHADER_SOURCE = [ + 'uniform mat4 u_mvpMatrix;', + 'attribute vec4 a_position;', + 'void main()', + '{', + ' gl_Position = u_mvpMatrix * a_position;', + '}' + ].join('\n'); - function NativeViewportClientImpl() { + const FRAGMENT_SHADER_SOURCE = [ + 'precision mediump float;', + 'void main()', + '{', + ' gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );', + '}' + ].join('\n'); + + function ESMatrix() { + this.m = new Float32Array(16); } + ESMatrix.prototype.loadZero = function() { + for (var i = 0; i < this.m.length; i++) { + this.m[i] = 0; + } + }; + + ESMatrix.prototype.loadIdentity = function() { + this.loadZero(); + for (var i = 0; i < 4; i++) { + this.m[i*4+i] = 1; + } + }; + + function loadProgram(gl) { + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE); + gl.compileShader(vertexShader); + + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE); + gl.compileShader(fragmentShader); + + var program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + + gl.linkProgram(program); + // TODO(aa): Check for errors using getProgramiv and LINK_STATUS. + + gl.deleteShader(vertexShader); + gl.deleteShader(fragmentShader); + + return program; + } + + var vboVertices; + var vboIndices; + function generateCube(gl) { + var numVertices = 24 * 3; + var numIndices = 12 * 3; + + var cubeVertices = new Float32Array([ + -0.5, -0.5, -0.5, + -0.5, -0.5, 0.5, + 0.5, -0.5, 0.5, + 0.5, -0.5, -0.5, + -0.5, 0.5, -0.5, + -0.5, 0.5, 0.5, + 0.5, 0.5, 0.5, + 0.5, 0.5, -0.5, + -0.5, -0.5, -0.5, + -0.5, 0.5, -0.5, + 0.5, 0.5, -0.5, + 0.5, -0.5, -0.5, + -0.5, -0.5, 0.5, + -0.5, 0.5, 0.5, + 0.5, 0.5, 0.5, + 0.5, -0.5, 0.5, + -0.5, -0.5, -0.5, + -0.5, -0.5, 0.5, + -0.5, 0.5, 0.5, + -0.5, 0.5, -0.5, + 0.5, -0.5, -0.5, + 0.5, -0.5, 0.5, + 0.5, 0.5, 0.5, + 0.5, 0.5, -0.5 + ]); + + var cubeIndices = new Uint16Array([ + 0, 2, 1, + 0, 3, 2, + 4, 5, 6, + 4, 6, 7, + 8, 9, 10, + 8, 10, 11, + 12, 15, 14, + 12, 14, 13, + 16, 17, 18, + 16, 18, 19, + 20, 23, 22, + 20, 22, 21 + ]); + + // TODO(aa): The C++ program branches here on whether the pointer is + // non-NULL. + vboVertices = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vboVertices); + gl.bufferData(gl.ARRAY_BUFFER, cubeVertices, gl.STATIC_DRAW); + gl.bindBuffer(gl.ARRAY_BUFFER, 0); + + vboIndices = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vboIndices); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, 0); + + return cubeIndices.length; + } + + function drawCube(gl, width, height, program, positionLocation, mvpLocation, + numIndices, mvpMatrix) { + gl.viewport(0, 0, width, height); + gl.clear(gl.COLOR_BUFFER_BIT); + gl.useProgram(program); + gl.bindBuffer(gl.ARRAY_BUFFER, vboVertices); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vboIndices); + gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 12, 0); + gl.enableVertexAttribArray(positionLocation); + gl.uniformMatrix4fv(mvpLocation, false, mvpMatrix.m); + gl.drawElements(gl.TRIANGLES, numIndices, gl.UNSIGNED_SHORT, 0); + } + + function SampleApp(shell) { + this.shell_ = shell; + + var pipe = new core.createMessagePipe(); + new connector.Connection(pipe.handle0, NativeViewportClientImpl, + nativeViewport.NativeViewportProxy); + this.shell_.connect('mojo:mojo_native_viewport_service', pipe.handle1); + } // TODO(aa): It is a bummer to need this stub object in JavaScript. We should // have a 'client' object that contains both the sending and receiving bits of // the client side of the interface. Since JS is loosely typed, we do not need // a separate base class to inherit from to receive callbacks. + SampleApp.prototype = Object.create(shell.ShellClientStub.prototype); + + + function NativeViewportClientImpl(remote) { + this.remote_ = remote; + + var pipe = core.createMessagePipe(); + new connector.Connection(pipe.handle0, GLES2ClientImpl, gles2.GLES2Proxy); + + this.remote_.open(); + this.remote_.createGLES2Context(pipe.handle1); + } NativeViewportClientImpl.prototype = Object.create(nativeViewport.NativeViewportClientStub.prototype); + NativeViewportClientImpl.prototype.onCreated = function() { + console.log(['NativeViewportClientImpl.prototype.OnCreated']); + }; NativeViewportClientImpl.prototype.didOpen = function() { - console.log("NativeViewportClientImpl.prototype.DidOpen"); + console.log(['NativeViewportClientImpl.prototype.DidOpen']); }; - function GLES2ClientImpl() { + function GLES2ClientImpl(remote) { + this.remote_ = remote; } - GLES2ClientImpl.prototype = Object.create(gles2.GLES2ClientStub.prototype); GLES2ClientImpl.prototype.didCreateContext = function(encoded, width, height) { - console.log("GLES2ClientImpl.prototype.didCreateContext"); var gl = new gljs.Context(encoded, width, height); + var program = loadProgram(gl); + var positionLocation = gl.getAttribLocation(program, 'a_position'); + var mvpLocation = gl.getUniformLocation(program, 'u_mvpMatrix'); + var numIndices = generateCube(gl); + var mvpMatrix = new ESMatrix(); - var shader = gl.createShader(gl.VERTEX_SHADER); - console.log("shader is: ", String(shader)); - gl.shaderSource(shader, VERTEX_SHADER_SOURCE); - gl.compileShader(shader); - console.log("all done"); + gl.clearColor(0, 0, 0, 0); + mvpMatrix.loadIdentity(); + drawCube(gl, width, height, program, positionLocation, mvpLocation, + numIndices, mvpMatrix); + gl.swapBuffers(); }; GLES2ClientImpl.prototype.contextLost = function() { - console.log("GLES2ClientImpl.prototype.contextLost"); + console.log(['GLES2ClientImpl.prototype.contextLost']); }; - return function(handle) { - var nativeViewportConnection = new connector.Connection( - handle, - NativeViewportClientImpl, - nativeViewport.NativeViewportProxy); - - var gles2Handles = core.createMessagePipe(); - var gles2Connection = new connector.Connection( - gles2Handles.handle0, GLES2ClientImpl, gles2.GLES2Proxy); - nativeViewportConnection.remote.open(); - nativeViewportConnection.remote.createGLES2Context(gles2Handles.handle1); + return function(handle) { + new connector.Connection(handle, SampleApp, shell.ShellProxy); }; }); |