Beginning of JS Mojo API to GL

mojo/apps/js/main.js

Index: mojo/apps/js/main.js
diff --git a/mojo/apps/js/main.js b/mojo/apps/js/main.js
index 1dd5ff871f108aa5734a3d507330cb2c5f463664..0f9e8693e13210dca6ebdc1fbcfea6c7a540bec2 100644
--- a/mojo/apps/js/main.js
+++ b/mojo/apps/js/main.js
@@ -6,19 +6,33 @@ define([
     "console",
     "mojo/apps/js/bindings/connector",
     "mojo/apps/js/bindings/core",
+    "mojo/apps/js/bindings/gljs",
     "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";
+
   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);
 
@@ -26,6 +40,7 @@ define([
     console.log("NativeViewportClientImpl.prototype.DidOpen");
   };
 
+
   function GLES2ClientImpl() {
   }
 
@@ -36,25 +51,27 @@ define([
                                                         width,
                                                         height) {
     console.log("GLES2ClientImpl.prototype.didCreateContext");
-    // Need to call MojoGLES2MakeCurrent(encoded) in C++.
-    // TODO(abarth): Should we handle some of this GL setup in C++?
+    var context = new gljs.Context(encoded, width, height);

[abarth-chromium, 2013/12/11 06:24:22]

Typically folks use a variable named |gl| for the context.

[Aaron Boodman, 2013/12/12 19:30:30]

okie doke

+
+    var shader = context.createShader(context.VERTEX_SHADER);
+    console.log("shader is: ", String(shader));
+    context.shaderSource(shader, VERTEX_SHADER_SOURCE);
+    context.compileShader(shader);
+    console.log("all done");
   };
 
   GLES2ClientImpl.prototype.contextLost = function() {
     console.log("GLES2ClientImpl.prototype.contextLost");
   };
 
-  var nativeViewportConnection = null;
-  var gles2Connection = null;
-
   return function(handle) {
-    nativeViewportConnection = new connector.Connection(
+    var nativeViewportConnection = new connector.Connection(
         handle,
         NativeViewportClientImpl,
         nativeViewport.NativeViewportProxy);
 
     var gles2Handles = core.createMessagePipe();
-    gles2Connection = new connector.Connection(
+    var gles2Connection = new connector.Connection(
         gles2Handles.handle0, GLES2ClientImpl, gles2.GLES2Proxy);
 
     nativeViewportConnection.remote.open();