Various review cleanups

demo/client/html/3d-demo.html.hbs

@@ -46,7 +46,10 @@
                  class="btn btn-outline-secondary pf-toolbar-button"
                  aria-expanded="false" aria-controls="#pf-vr"
                  style="display: none">
-                    <span>VR</span>
+                    <!-- https://materialdesignicons.com/icon/virtual-reality -->
+                    <svg style="height: 18px" viewBox="0 0 24 24">
+                        <path fill="#000000" d="M5,3C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5M6,9H7.5L8.5,12.43L9.5,9H11L9.25,15H7.75L6,9M13,9H16.5C17.35,9 18,9.65 18,10.5V11.5C18,12.1 17.6,12.65 17.1,12.9L18,15H16.5L15.65,13H14.5V15H13V9M14.5,10.5V11.5H16.5V10.5H14.5Z" />
+                    </svg>
                 </button>
             </div>
         </div>

demo/client/src/3d-demo.ts

@@ -383,44 +383,42 @@ class ThreeDView extends DemoView implements TextRenderContext {
     newTimingsReceived(timings: Timings): void {}
 
     vrSetup(): void {
-        if (navigator.getVRDisplays) {
-            navigator.getVRDisplays().then((displays) => {
-              if (displays.length > 0) {
+        if (!('getVRDisplays' in navigator)) {
+            return;
+        }
+
+        navigator.getVRDisplays().then(displays => {
+            if (displays.length === 0) {
+                return;
+            }
             this.vrDisplay = displays[displays.length - 1];
 
-                // It's heighly reccommended that you set the near and far planes to
-                // something appropriate for your scene so the projection matricies
+            // It's heighly recommended that you set the near and far planes to
+            // something appropriate for your scene so the projection matrices
             // WebVR produces have a well scaled depth buffer.
             this.renderer.setClipPlanes(this.vrDisplay);
             unwrapNull(document.getElementById('pf-vr')).style.display = "initial";
-              } else {
-                // no vr displays
-              }
         });
-        } else {
-            // no vr support
-        }
 
         window.addEventListener('vrdisplaypresentchange', () => {
           if (this.vrDisplay == null)
               return;
 
           if (this.vrDisplay.isPresenting) {
-            const that = this;
             const eye = this.vrDisplay.getEyeParameters("left");
 
             this.vrDisplayHeight = eye.renderHeight;
             this.vrDisplayWidth = eye.renderWidth * 2;
             this.resizeToFit(true);
-            function vrCallback(): void {
-                if (that.vrDisplay == null || !that.renderer.inVR) {
+            const vrCallback = () => {
+                if (this.vrDisplay == null || !this.renderer.inVR) {
                     return;
                 }
-                that.vrDisplay.requestAnimationFrame(vrCallback);
-                that.inVRRAF = true;
-                that.redraw();
-                that.inVRRAF = false;
-            }
+                this.vrDisplay.requestAnimationFrame(vrCallback);
+                this.inVRRAF = true;
+                this.redraw();
+                this.inVRRAF = false;
+            };
             this.vrDisplay.requestAnimationFrame(vrCallback);
           } else {
             this.renderer.inVR = false;
@@ -458,7 +456,7 @@ class ThreeDRenderer extends Renderer {
     camera: PerspectiveCamera;
 
     needsStencil: boolean = false;
-    rightEye: boolean = false;
+    vrRightEye: boolean = false;
 
     get isMulticolor(): boolean {
         return false;
@@ -532,6 +530,7 @@ class ThreeDRenderer extends Renderer {
 
         this.distantGlyphVAO = null;
         this.vrProjectionMatrix = null;
+
         this.camera = new PerspectiveCamera(renderContext.canvas, {
             innerCollisionExtent: MONUMENT_SCALE[0],
         });
@@ -573,10 +572,10 @@ class ThreeDRenderer extends Renderer {
     redrawVR(frame: VRFrameData): void {
         this.clearDestFramebuffer(true);
         this.vrProjectionMatrix = frame.leftProjectionMatrix;
-        this.rightEye = false;
+        this.vrRightEye = false;
         this.camera.setView(F32ArrayToMat4(frame.leftViewMatrix), frame.pose);
         this.redraw();
-        this.rightEye = true;
+        this.vrRightEye = true;
         this.vrProjectionMatrix = frame.rightProjectionMatrix;
         this.camera.setView(F32ArrayToMat4(frame.rightViewMatrix), frame.pose);
         this.redraw();
@@ -584,7 +583,7 @@ class ThreeDRenderer extends Renderer {
 
     setDrawViewport() {
         let offset = 0;
-        if (this.rightEye) {
+        if (this.vrRightEye) {
             offset = this.destAllocatedSize[0];
         }
         const renderContext = this.renderContext;
@@ -806,7 +805,7 @@ class ThreeDRenderer extends Renderer {
                          normal[0] / normal[3],
                          normal[1] / normal[3],
                          normal[2] / normal[3]);
-            gl.uniform1f(monumentProgram.uniforms.uLightThings, this.inVR ? 0 : 1);
+            gl.uniform1f(monumentProgram.uniforms.uEnableLighting, this.inVR ? 0 : 1);
             // Draw the face!
             gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, face * 6 * UINT16_SIZE);
         }

demo/client/src/camera.ts

@@ -373,7 +373,7 @@ export class PerspectiveCamera extends Camera {
         // TODO(pcwalton)
     }
 
-    setView(rotation: glmatrix.mat4, pose: VRPose) {
+    setView(rotation: glmatrix.mat4, pose: VRPose): void {
         this.vrRotationMatrix = rotation;
     }
 

shaders/gles2/demo-3d-monument.fs.glsl

@@ -25,7 +25,7 @@ uniform float uShininess;
 /// The normal of these vertices.
 uniform vec3 uNormal;
 
-uniform bool uLightThings;
+uniform bool uEnableLighting;
 
 varying vec3 vPosition;
 
@@ -35,7 +35,7 @@ void main() {
 
     vec3 color = uAmbientColor;
 
-    if (uLightThings) {
+    if (uEnableLighting) {
         float lambertian = max(dot(lightDirection, normal), 0.0);
         float specular = 0.0;