diff --git a/demo/client/html/3d-demo.html.hbs b/demo/client/html/3d-demo.html.hbs index 51e87851..7966ff65 100644 --- a/demo/client/html/3d-demo.html.hbs +++ b/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"> - VR + + + + diff --git a/demo/client/src/3d-demo.ts b/demo/client/src/3d-demo.ts index ef0d5738..7d34be20 100644 --- a/demo/client/src/3d-demo.ts +++ b/demo/client/src/3d-demo.ts @@ -370,7 +370,7 @@ class ThreeDView extends DemoView implements TextRenderContext { this.inVRRAF = false; this.vrDisplay = null; if ("VRFrameData" in window) { - this.vrFrameData = new VRFrameData; + this.vrFrameData = new VRFrameData; } else { this.vrFrameData = null; } @@ -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) { - 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 - // 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 + if (!('getVRDisplays' in navigator)) { + return; } + navigator.getVRDisplays().then(displays => { + if (displays.length === 0) { + return; + } + this.vrDisplay = displays[displays.length - 1]; + + // 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"; + }); + 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); } diff --git a/demo/client/src/camera.ts b/demo/client/src/camera.ts index d31d4a76..505e5178 100644 --- a/demo/client/src/camera.ts +++ b/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; } diff --git a/shaders/gles2/demo-3d-monument.fs.glsl b/shaders/gles2/demo-3d-monument.fs.glsl index eb6920a4..4e26f4df 100644 --- a/shaders/gles2/demo-3d-monument.fs.glsl +++ b/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;