Implement more of the JavaScript GL API.

mojo/apps/js/main.js

 // Copyright 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // 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',
 ], function(console,
             connector,
             core,
             gljs,
             threading,
             nativeViewport,
             gles2) {
 
-  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');
+
+  const FRAGMENT_SHADER_SOURCE = [
+    'precision mediump float;',
+    'void main()',
+    '{',
+    '  gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );',
+    '}'
+  ].join('\n');
+
+  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): The C program checks for errors here, but I don't see how to do
+    // this in WebGL.
+
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    console.log('done creating program');
+
+    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 Float32Array([
+      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) {
+    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, 3 * 32, 0);
+    gl.enableVertexAttribArray(positionLocation);
+    // TODO(aa): Moar.
+  }
 
   function NativeViewportClientImpl() {
   }
 
   // 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.
   NativeViewportClientImpl.prototype =
       Object.create(nativeViewport.NativeViewportClientStub.prototype);
 
   NativeViewportClientImpl.prototype.didOpen = function() {
-    console.log("NativeViewportClientImpl.prototype.DidOpen");
+    console.log('NativeViewportClientImpl.prototype.DidOpen');
   };
 
 
   function GLES2ClientImpl() {
   }
 
   GLES2ClientImpl.prototype =
       Object.create(gles2.GLES2ClientStub.prototype);
 
   GLES2ClientImpl.prototype.didCreateContext = function(encoded,
                                                         width,
                                                         height) {
-    console.log("GLES2ClientImpl.prototype.didCreateContext");
+    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 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);
+    console.log(String(program), String(positionLocation), String(mvpLocation),
+                String(numIndices));
+
+    drawCube(gl, width, height, program, positionLocation);
   };
 
   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);
   };
 });