From 3af3635eea560b02e4a98b13365901f1e65ca3ab Mon Sep 17 00:00:00 2001 From: Manish Goregaokar Date: Fri, 9 Mar 2018 10:03:32 -0800 Subject: [PATCH] Use correct viewport and clear correctly --- demo/client/src/3d-demo.ts | 29 +++++++++++++++++++++++++---- demo/client/src/aa-strategy.ts | 4 ++-- demo/client/src/renderer.ts | 12 ++++++++++-- demo/client/src/ssaa-strategy.ts | 2 +- demo/client/src/view.ts | 14 +++++++------- demo/client/src/xcaa-strategy.ts | 2 +- 6 files changed, 46 insertions(+), 17 deletions(-) diff --git a/demo/client/src/3d-demo.ts b/demo/client/src/3d-demo.ts index 85e43291..41c04766 100644 --- a/demo/client/src/3d-demo.ts +++ b/demo/client/src/3d-demo.ts @@ -376,6 +376,7 @@ class ThreeDRenderer extends Renderer { camera: PerspectiveCamera; needsStencil: boolean = false; + rightEye: boolean = false; get isMulticolor(): boolean { return false; @@ -386,8 +387,12 @@ class ThreeDRenderer extends Renderer { } get destAllocatedSize(): glmatrix.vec2 { + let width = this.renderContext.canvas.width; + if (this.inVR) { + width = width / 2; + } return glmatrix.vec2.clone([ - this.renderContext.canvas.width, + width, this.renderContext.canvas.height, ]); } @@ -484,14 +489,27 @@ class ThreeDRenderer extends Renderer { } redrawVR(frame: VRFrameData): void { + this.clearDestFramebuffer(true); this.vrProjectionMatrix = frame.leftProjectionMatrix; + this.rightEye = false; this.camera.setView(F32ArrayToMat4(frame.leftViewMatrix), frame.pose); this.redraw(); + this.rightEye = true; this.vrProjectionMatrix = frame.rightProjectionMatrix; this.camera.setView(F32ArrayToMat4(frame.rightViewMatrix), frame.pose); this.redraw(); } + setDrawViewport() { + let offset = 0; + if (this.rightEye) { + offset = this.destAllocatedSize[0]; + } + const renderContext = this.renderContext; + const gl = renderContext.gl; + gl.viewport(offset, 0, this.destAllocatedSize[0], this.destAllocatedSize[1]); + } + pathTransformsForObject(objectIndex: number): PathTransformBuffers { const meshDescriptor = this.renderContext.appController.meshDescriptors[objectIndex]; const pathCount = this.pathCountForObject(objectIndex); @@ -546,16 +564,19 @@ class ThreeDRenderer extends Renderer { throw new PathfinderError("Unsupported antialiasing type!"); } - protected clearDestFramebuffer(): void { + protected clearDestFramebuffer(force: boolean): void { const gl = this.renderContext.gl; gl.bindFramebuffer(gl.FRAMEBUFFER, this.destFramebuffer); - gl.viewport(0, 0, this.destAllocatedSize[0], this.destAllocatedSize[1]); + // clear the entire viewport + gl.viewport(0, 0, this.renderContext.canvas.width, this.renderContext.canvas.height); gl.clearColor(1.0, 1.0, 1.0, 1.0); gl.clearDepth(1.0); gl.depthMask(true); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + if (force || this.vrProjectionMatrix == null) { + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + } } protected getModelviewTransform(objectIndex: number): glmatrix.mat4 { diff --git a/demo/client/src/aa-strategy.ts b/demo/client/src/aa-strategy.ts index b329b6d0..bf05aad8 100644 --- a/demo/client/src/aa-strategy.ts +++ b/demo/client/src/aa-strategy.ts @@ -136,7 +136,7 @@ export class NoAAStrategy extends AntialiasingStrategy { const renderContext = renderer.renderContext; const gl = renderContext.gl; gl.bindFramebuffer(gl.FRAMEBUFFER, renderer.destFramebuffer); - gl.viewport(0, 0, this.framebufferSize[0], this.framebufferSize[1]); + renderer.setDrawViewport(); gl.disable(gl.SCISSOR_TEST); } @@ -147,7 +147,7 @@ export class NoAAStrategy extends AntialiasingStrategy { const gl = renderContext.gl; gl.bindFramebuffer(gl.FRAMEBUFFER, renderer.destFramebuffer); - gl.viewport(0, 0, this.framebufferSize[0], this.framebufferSize[1]); + renderer.setDrawViewport(); gl.disable(gl.SCISSOR_TEST); } diff --git a/demo/client/src/renderer.ts b/demo/client/src/renderer.ts index d8db48e4..2a6d8719 100644 --- a/demo/client/src/renderer.ts +++ b/demo/client/src/renderer.ts @@ -48,6 +48,8 @@ export abstract class Renderer { lastTimings: Timings; + inVR: boolean = false; + get emboldenAmount(): glmatrix.vec2 { return glmatrix.vec2.create(); } @@ -141,13 +143,19 @@ export abstract class Renderer { this.redraw(); } + setDrawViewport() { + const renderContext = this.renderContext; + const gl = renderContext.gl; + gl.viewport(0, 0, this.destAllocatedSize[0], this.destAllocatedSize[1]); + } + redraw(): void { const renderContext = this.renderContext; if (this.meshBuffers == null) return; - this.clearDestFramebuffer(); + this.clearDestFramebuffer(false); // Start timing rendering. if (this.timerQueryPollInterval == null && @@ -426,7 +434,7 @@ export abstract class Renderer { protected drawSceneryIfNecessary(): void {} - protected clearDestFramebuffer(): void { + protected clearDestFramebuffer(force: boolean): void { const renderContext = this.renderContext; const gl = renderContext.gl; diff --git a/demo/client/src/ssaa-strategy.ts b/demo/client/src/ssaa-strategy.ts index 395f6d3c..61d9aa40 100644 --- a/demo/client/src/ssaa-strategy.ts +++ b/demo/client/src/ssaa-strategy.ts @@ -127,7 +127,7 @@ export default class SSAAStrategy extends AntialiasingStrategy { const gl = renderContext.gl; gl.bindFramebuffer(gl.FRAMEBUFFER, renderer.destFramebuffer); - gl.viewport(0, 0, renderer.destAllocatedSize[0], renderer.destAllocatedSize[1]); + renderer.setDrawViewport(); gl.disable(gl.DEPTH_TEST); gl.disable(gl.BLEND); diff --git a/demo/client/src/view.ts b/demo/client/src/view.ts index e1af24a3..6e5f8f20 100644 --- a/demo/client/src/view.ts +++ b/demo/client/src/view.ts @@ -178,7 +178,6 @@ export abstract class DemoView extends PathfinderView implements RenderContext { private vrDisplay: VRDisplay | null; private vrFrameData: VRFrameData | null; private inVRRAF: boolean; - private inVR: boolean; /// NB: All subclasses are responsible for creating a renderer in their constructors. constructor(areaLUT: HTMLImageElement, @@ -202,7 +201,6 @@ export abstract class DemoView extends PathfinderView implements RenderContext { this.inVRRAF = false; - this.inVR = false; this.vrDisplay = null; if ("VRFrameData" in window) { this.vrFrameData = new VRFrameData; @@ -234,14 +232,14 @@ export abstract class DemoView extends PathfinderView implements RenderContext { } window.addEventListener('vrdisplaypresentchange', () => { - if (this.vrDisplay == null) return; if (this.vrDisplay.isPresenting) { const that = this; + this.resized(); function vrCallback(): void { - if (that.vrDisplay == null || !that.inVR) { + if (that.vrDisplay == null || !that.renderer.inVR) { return; } that.vrDisplay.requestAnimationFrame(vrCallback); @@ -251,7 +249,8 @@ export abstract class DemoView extends PathfinderView implements RenderContext { } this.vrDisplay.requestAnimationFrame(vrCallback); } else { - this.inVR = false; + this.renderer.inVR = false; + this.resized(); } }); } @@ -307,7 +306,7 @@ export abstract class DemoView extends PathfinderView implements RenderContext { enterVR(): void { if (this.vrDisplay != null) { - this.inVR = true; + this.renderer.inVR = true; this.vrDisplay.requestPresent([{ source: this.canvas }]); } } @@ -318,7 +317,8 @@ export abstract class DemoView extends PathfinderView implements RenderContext { if (!this.renderer.meshesAttached) return; - if (!this.inVR || this.vrDisplay == null || this.vrFrameData == null) { + if (!this.renderer.inVR || this.vrDisplay == null || + this.vrFrameData == null) { this.renderer.redraw(); } else { if (!this.inVRRAF) { diff --git a/demo/client/src/xcaa-strategy.ts b/demo/client/src/xcaa-strategy.ts index 64da4dfb..f1323b4e 100644 --- a/demo/client/src/xcaa-strategy.ts +++ b/demo/client/src/xcaa-strategy.ts @@ -294,7 +294,7 @@ export abstract class XCAAStrategy extends AntialiasingStrategy { const gl = renderContext.gl; gl.bindFramebuffer(gl.FRAMEBUFFER, renderer.destFramebuffer); - gl.viewport(0, 0, this.destFramebufferSize[0], this.destFramebufferSize[1]); + renderer.setDrawViewport(); gl.disable(gl.SCISSOR_TEST); }