Match screen size as much as possible

This commit is contained in:
Manish Goregaokar 2018-03-22 15:58:43 -07:00
parent 0751da81a4
commit 3d223c1a4a
2 changed files with 41 additions and 14 deletions

View File

@ -407,7 +407,11 @@ class ThreeDView extends DemoView implements TextRenderContext {
if (this.vrDisplay.isPresenting) {
const that = this;
this.resized();
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) {
return;
@ -420,7 +424,7 @@ class ThreeDView extends DemoView implements TextRenderContext {
this.vrDisplay.requestAnimationFrame(vrCallback);
} else {
this.renderer.inVR = false;
this.resized();
this.resizeToFit(true);
}
});
}

View File

@ -55,6 +55,9 @@ export abstract class PathfinderView {
suppressAutomaticRedraw: boolean;
vrDisplayWidth: number | null;
vrDisplayHeight: number | null;
protected abstract get camera(): Camera;
private dirty: boolean;
@ -67,6 +70,9 @@ export abstract class PathfinderView {
this.suppressAutomaticRedraw = false;
this.canvas = unwrapNull(document.getElementById('pf-canvas')) as HTMLCanvasElement;
window.addEventListener('resize', () => this.resizeToFit(false), false);
this.vrDisplayHeight = null;
this.vrDisplayWidth = null;
}
setDirty(): void {
@ -115,24 +121,37 @@ export abstract class PathfinderView {
this.setDirty();
}
protected inVR(): boolean {
return false;
}
protected resizeToFit(initialSize: boolean): void {
if (!this.canvas.classList.contains('pf-no-autoresize')) {
const windowWidth = window.innerWidth;
const canvasTop = this.canvas.getBoundingClientRect().top;
const height = window.scrollY + window.innerHeight - canvasTop;
const devicePixelRatio = window.devicePixelRatio;
if (this.inVR()) {
const width = unwrapNull(this.vrDisplayWidth);
const height = unwrapNull(this.vrDisplayHeight);
// these are already in device pixel units, no need to multiply
this.canvas.style.width = width + 'px';
this.canvas.style.height = height + 'px';
this.canvas.width = width;
this.canvas.height = height;
} else {
const width = window.innerWidth;
const canvasTop = this.canvas.getBoundingClientRect().top;
const height = window.scrollY + window.innerHeight - canvasTop;
const devicePixelRatio = window.devicePixelRatio;
const canvasSize = new Float32Array([width, height]) as glmatrix.vec2;
glmatrix.vec2.scale(canvasSize, canvasSize, devicePixelRatio);
glmatrix.vec2.round(canvasSize, canvasSize);
const canvasSize = new Float32Array([windowWidth, height]) as glmatrix.vec2;
glmatrix.vec2.scale(canvasSize, canvasSize, devicePixelRatio);
glmatrix.vec2.round(canvasSize, canvasSize);
this.canvas.style.width = width + 'px';
this.canvas.style.height = height + 'px';
this.canvas.width = canvasSize[0];
this.canvas.height = canvasSize[1];
}
this.canvas.style.width = windowWidth + 'px';
this.canvas.style.height = height + 'px';
this.canvas.width = canvasSize[0];
this.canvas.height = canvasSize[1];
}
this.resized();
}
}
@ -278,6 +297,10 @@ export abstract class DemoView extends PathfinderView implements RenderContext {
this.renderer.canvasResized();
}
protected inVR(): boolean {
return this.renderer.inVR;
}
protected initContext(): void {
// Initialize the OpenGL context.
this.gl = expectNotNull(this.canvas.getContext('webgl', { antialias: false, depth: true }),