Make the cube spin in the JS mojo app.

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',
+    'timer',
     '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,
+            timer,
             connector,
             core,
             gljs,
             threading,
             nativeViewport,
             gles2,
             shell) {
 
   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 ESMatrix() {
     this.m = new Float32Array(16);
   }
 
+  ESMatrix.prototype.getIndex = function(x, y) {
+    return x * 4 + y;
+  }
+
+  ESMatrix.prototype.set = function(x, y, v) {
+    this.m[this.getIndex(x, y)] = v;
+  };
+
+  ESMatrix.prototype.get = function(x, y) {
+    return this.m[this.getIndex(x, y)];
+  };
+
   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;
+      this.set(i, i, 1);
     }
   };
 
+  ESMatrix.prototype.multiply = function(a, b) {
+    var result = new ESMatrix();
+    for (var i = 0; i < 4; i++) {
+      result.set(i, 0,
+          (a.get(i, 0) * b.get(0, 0)) +
+          (a.get(i, 1) * b.get(1, 0)) +
+          (a.get(i, 2) * b.get(2, 0)) +
+          (a.get(i, 3) * b.get(3, 0)));
+
+      result.set(i, 1,
+          (a.get(i, 0) * b.get(0, 1)) +
+          (a.get(i, 1) * b.get(1, 1)) +
+          (a.get(i, 2) * b.get(2, 1)) +
+          (a.get(i, 3) * b.get(3, 1)));
+
+      result.set(i, 2,
+          (a.get(i, 0) * b.get(0, 2)) +
+          (a.get(i, 1) * b.get(1, 2)) +
+          (a.get(i, 2) * b.get(2, 2)) +
+          (a.get(i, 3) * b.get(3, 2)));
+
+      result.set(i, 3,
+          (a.get(i, 0) * b.get(0, 3)) +
+          (a.get(i, 1) * b.get(1, 3)) +
+          (a.get(i, 2) * b.get(2, 3)) +
+          (a.get(i, 3) * b.get(3, 3)));
+    }
+    for (var i = 0; i < result.m.length; i++) {
+      this.m[i] = result.m[i];
+    }
+  };
+
+  ESMatrix.prototype.frustrum = function(left, right, bottom, top, nearZ,
+                                         farZ) {
+    var deltaX = right - left;
+    var deltaY = top - bottom;
+    var deltaZ = farZ - nearZ;
+
+    if (nearZ < 0 || farZ < 0 || deltaZ < 0 || deltaY < 0 || deltaX < 0) {
+      return;
+    }
+
+    var frust = new ESMatrix();
+    frust.set(0, 0, 2 * nearZ / deltaX);
+
+    frust.set(1, 1, 2 * nearZ / deltaY);
+
+    frust.set(2, 0, (right + left) / deltaX);
+    frust.set(2, 1, (top + bottom) / deltaY);
+    frust.set(2, 2, -(nearZ + farZ) / deltaZ);
+    frust.set(2, 3, -1);
+
+    frust.set(3, 2, -2 * nearZ * farZ / deltaZ);
+
+    this.multiply(frust, this);
+  };
+
+  ESMatrix.prototype.perspective = function(fovY, aspect, nearZ, farZ) {
+    var frustrumH = Math.tan(fovY / 360 * Math.PI) * nearZ;
+    var frustrumW = frustrumH * aspect;
+    this.frustrum(-frustrumW, frustrumW, -frustrumH, frustrumH, nearZ, farZ);
+  };
+
+  ESMatrix.prototype.translate = function(tx, ty, tz) {
+    this.set(3, 0, this.get(3, 0) + this.get(0, 0) *
+             tx + this.get(1, 0) * ty + this.get(2, 0) * tz);
+    this.set(3, 1, this.get(3, 1) + this.get(0, 1) *
+             tx + this.get(1, 1) * ty + this.get(2, 1) * tz);
+    this.set(3, 2, this.get(3, 2) + this.get(0, 2) *
+             tx + this.get(1, 2) * ty + this.get(2, 2) * tz);
+    this.set(3, 3, this.get(3, 3) + this.get(0, 3) *
+             tx + this.get(1, 3) * ty + this.get(2, 3) * tz);
+  };
+
+  ESMatrix.prototype.rotate = function(angle, x, y, z) {
+    var mag = Math.sqrt(x * x + y * y + z * z);
+    var sinAngle = Math.sin(angle * Math.PI / 180);
+    var cosAngle = Math.cos(angle * Math.PI / 180);
+    if (mag <= 0) {
+      return;
+    }
+
+    var xx, yy, zz, xy, yz, zx, xs, ys, zs, oneMinusCos;
+    var rotation = new ESMatrix();
+
+    x /= mag;
+    y /= mag;
+    z /= mag;
+
+    xx = x * x;
+    yy = y * y;
+    zz = z * z;
+    xy = x * y;
+    yz = y * z;
+    zx = z * x;
+    xs = x * sinAngle;
+    ys = y * sinAngle;
+    zs = z * sinAngle;
+    oneMinusCos = 1 - cosAngle;
+
+    rotation.set(0, 0, (oneMinusCos * xx) + cosAngle);
+    rotation.set(0, 1, (oneMinusCos * xy) - zs);
+    rotation.set(0, 2, (oneMinusCos * zx) + ys);
+    rotation.set(0, 3, 0);
+
+    rotation.set(1, 0, (oneMinusCos * xy) + zs);
+    rotation.set(1, 1, (oneMinusCos * yy) + cosAngle);
+    rotation.set(1, 2, (oneMinusCos * yz) - xs);
+    rotation.set(1, 3, 0);
+
+    rotation.set(2, 0, (oneMinusCos * zx) - ys);
+    rotation.set(2, 1, (oneMinusCos * yz) + xs);
+    rotation.set(2, 2, (oneMinusCos * zz) + cosAngle);
+    rotation.set(2, 3, 0);
+
+    rotation.set(3, 0, 0);
+    rotation.set(3, 1, 0);
+    rotation.set(3, 2, 0);
+    rotation.set(3, 3, 1);
+
+    this.multiply(rotation, this);
+  };
+
   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();
@@ skipping 65 matching lines @@
     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
@@ skipping 17 matching lines @@
   NativeViewportClientImpl.prototype.onCreated = function() {
     console.log('NativeViewportClientImpl.prototype.OnCreated');
   };
   NativeViewportClientImpl.prototype.didOpen = function() {
     console.log('NativeViewportClientImpl.prototype.DidOpen');
   };
 
 
   function GLES2ClientImpl(remote) {
     this.remote_ = remote;
+    this.lastTime_ = Date.now();
+    this.angle_ = 45;
   }
   GLES2ClientImpl.prototype =
       Object.create(gles2.GLES2ClientStub.prototype);
 
   GLES2ClientImpl.prototype.didCreateContext = function(encoded,
                                                         width,
                                                         height) {
-    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();
+    this.width_ = width;
+    this.height_ = height;
+    this.gl_ = new gljs.Context(encoded, width, height);
+    this.program_ = loadProgram(this.gl_);
+    this.positionLocation_ =
+        this.gl_.getAttribLocation(this.program_, 'a_position');
+    this.mvpLocation_ =
+        this.gl_.getUniformLocation(this.program_, 'u_mvpMatrix');
+    this.numIndices_ = generateCube(this.gl_);
+    this.mvpMatrix_ = new ESMatrix();
+    this.mvpMatrix_.loadIdentity();
 
-    gl.clearColor(0, 0, 0, 0);
-    mvpMatrix.loadIdentity();
-    drawCube(gl, width, height, program, positionLocation, mvpLocation,
-             numIndices, mvpMatrix);
-    gl.swapBuffers();
+    this.gl_.clearColor(0, 0, 0, 0);
+    this.timer_ = timer.createRepeating(16, this.handleTimer.bind(this));
+  };
+
+  GLES2ClientImpl.prototype.drawCube = function() {
+    this.gl_.viewport(0, 0, this.width_, this.height_);
+    this.gl_.clear(this.gl_.COLOR_BUFFER_BIT);
+    this.gl_.useProgram(this.program_);
+    this.gl_.bindBuffer(this.gl_.ARRAY_BUFFER, vboVertices);
+    this.gl_.bindBuffer(this.gl_.ELEMENT_ARRAY_BUFFER, vboIndices);
+    this.gl_.vertexAttribPointer(this.positionLocation_, 3, this.gl_.FLOAT,
+                                 false, 12, 0);
+    this.gl_.enableVertexAttribArray(this.positionLocation_);
+    this.gl_.uniformMatrix4fv(this.mvpLocation_, false, this.mvpMatrix_.m);
+    this.gl_.drawElements(this.gl_.TRIANGLES, this.numIndices_,
+                          this.gl_.UNSIGNED_SHORT, 0);
+    this.gl_.swapBuffers();
+  };
+
+  GLES2ClientImpl.prototype.handleTimer = function() {
+    var now = Date.now();
+    var timeDelta = Date.now() - this.lastTime_;

[abarth-chromium, 2014/01/07 23:01:04]

We should be use Mojo's monotonic clock rather than Data.now.  We probably need
to add a JS binding for MojoGetTimeTicksNow.

[Aaron Boodman, 2014/01/07 23:22:38]

I'm always happy to add more bindings using our shiny new bindings system, but
in this case, I don't see what it adds. The frame rate is 60 hertz. How does the
extra resolution help us?

+    this.lastTime_ = now;
+
+    this.angle_ += this.getRotationForTimeDelgate(timeDelta);
+    this.angle_ = this.angle_ % 360;
+
+    var aspect = this.width_ / this.height_;
+
+    var perspective = new ESMatrix();
+    perspective.loadIdentity();
+    perspective.perspective(60, aspect, 1, 20);
+
+    var modelView = new ESMatrix();
+    modelView.loadIdentity();
+    modelView.translate(0, 0, -2);
+    modelView.rotate(this.angle_, 1, 0, 1);
+
+    this.mvpMatrix_.multiply(modelView, perspective);
+
+    this.drawCube();
+  };
+
+  GLES2ClientImpl.prototype.getRotationForTimeDelgate = function(timeDelta) {
+    return timeDelta * .04;
   };
 
   GLES2ClientImpl.prototype.contextLost = function() {
     console.log('GLES2ClientImpl.prototype.contextLost');
   };
 
 
   return function(handle) {
     new connector.Connection(handle, SampleApp, shell.ShellProxy);
   };
 });