feat: turning vr-related components to typescript

benmccann · Nov 9, 2020 · 62a3b11 · 62a3b11
1 parent f7ab6a9
commit 62a3b11
Show file tree

Hide file tree

Showing 14 changed files with 1,359 additions and 1,323 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
 		"@egjs/common-demo": "github:naver/egjs#common-demo",
 		"@egjs/component": "^2.2.2",
 		"@egjs/visible": "^2.1.0",
+		"@types/webxr": "^0.1.0",
 		"babel-eslint": "^10.0.1",
 		"babel-loader": "^8.0.4",
 		"babel-plugin-add-module-exports": "^0.2.1",

diff --git a/src/PanoImageRenderer/PanoImageRenderer.ts b/src/PanoImageRenderer/PanoImageRenderer.ts
@@ -17,6 +17,7 @@ import { PROJECTION_TYPE, STEREO_FORMAT } from "../PanoViewer/consts";
 import { IS_IOS } from "../utils/browser";
 import { CubemapConfig, ValueOf } from "src/types";
 import YawPitchControl from "src/YawPitchControl/YawPitchControl";
+import { XRFrame } from "webxr";
 
 const ImageType = PROJECTION_TYPE;
 
@@ -681,7 +682,7 @@ class PanoImageRenderer extends Component<{
   private _initBuffers() {
     const vertexPositionData = this._renderer.getVertexPositionData();
     const indexData = this._renderer.getIndexData();
-    const textureCoordData = this._renderer.getTextureCoordData(this._imageConfig);
+    const textureCoordData = this._renderer.getTextureCoordData(this._imageConfig!);
     const gl = this.context;
 
     this.vertexBuffer = WebGLUtils.initBuffer(
@@ -702,12 +703,12 @@ class PanoImageRenderer extends Component<{
     // Detect if it is EAC Format while CUBESTRIP mode.
     // We assume it is EAC if image is not 3/2 ratio.
     if (this._imageType === ImageType.CUBESTRIP) {
-      const {width, height} = this._renderer.getDimension(this._image);
+      const { width, height } = this._renderer.getDimension(this._image as HTMLImageElement | HTMLVideoElement);
       const isEAC = width && height && width / height !== 1.5 ? 1 : 0;
 
       this.context.uniform1f(this.context.getUniformLocation(this.shaderProgram!, "uIsEAC"), isEAC);
     } else if (this._imageType === ImageType.PANORAMA) {
-      const {width, height} = this._renderer.getDimension(this._image);
+      const { width, height } = this._renderer.getDimension(this._image as HTMLImageElement | HTMLVideoElement);
       const imageAspectRatio = width && height && width / height;
 
       this._renderer.updateShaderData({imageAspectRatio});
@@ -720,8 +721,8 @@ class PanoImageRenderer extends Component<{
     this._renderer.bindTexture(
       this.context,
       this.texture,
-      this._image,
-      this._imageConfig,
+      this._image as HTMLImageElement | HTMLVideoElement,
+      this._imageConfig!,
     );
     this._shouldForceDraw = true;
 
@@ -731,8 +732,8 @@ class PanoImageRenderer extends Component<{
   private _updateTexture() {
     this._renderer.updateTexture(
       this.context,
-      this._image,
-      this._imageConfig,
+      this._image as HTMLImageElement | HTMLVideoElement,
+      this._imageConfig!,
     );
   }
 
@@ -751,15 +752,15 @@ class PanoImageRenderer extends Component<{
     }
   }
 
-  private _renderStereo = (time, frame) => {
+  private _renderStereo = (time: number, frame: XRFrame) => {
     const vr = this._vr;
     const gl = this.context;
 
-    const eyeParams = vr.getEyeParams(gl, frame);
+    const eyeParams = vr!.getEyeParams(gl, frame);
 
     if (!eyeParams) return;
 
-    vr.beforeRender(gl, frame);
+    vr!.beforeRender(gl, frame);
 
     // Render both eyes
     for (const eyeIndex of [0, 1]) {
@@ -775,7 +776,7 @@ class PanoImageRenderer extends Component<{
       this._draw();
     }
 
-    vr.afterRender();
+    vr!.afterRender();
   }
 
   private _bindBuffers() {
@@ -852,15 +853,15 @@ class PanoImageRenderer extends Component<{
   }
 
   private _onFirstVRFrame = (time, frame) => {
-    const vr = this._vr;
+    const vr = this._vr!;
     const gl = this.context;
     const animator = this._animator;
 
     // If rendering is not ready, wait for next frame
     if (!vr.canRender(frame)) return;
 
     const minusZDir = vec3.fromValues(0, 0, -1);
-    const eyeParam = vr.getEyeParams(gl, frame)[0];
+    const eyeParam = vr.getEyeParams(gl, frame)![0];
     // Extract only rotation
     const mvMatrix = mat3.fromMat4(mat3.create(), eyeParam.mvMatrix);
     const pMatrix = mat3.fromMat4(mat3.create(), eyeParam.pMatrix);

diff --git a/src/PanoImageRenderer/WebGLAnimator.ts b/src/PanoImageRenderer/WebGLAnimator.ts
@@ -6,87 +6,87 @@ class WebGLAnimator {
   private _rafId: number;
   private _rafTimer: number;
 
-	constructor() {
-		this._callback = null;
-		this._context = window;
-		this._rafId = -1;
-		this._rafTimer = -1;
-	}
-
-	public setCallback(callback: (...args: any[]) => any) {
-		this._callback = callback;
-	}
-
-	public setContext(context: any) {
-		this._context = context;
-	}
-
-	public start() {
-		const context = this._context;
-		const callback = this._callback;
-
-		// No context / callback set
-		if (!context || !callback) return;
-		// Animation already started
-		if (this._rafId >= 0 || this._rafTimer >= 0) return;
-
-		if (IS_SAFARI_ON_DESKTOP) {
-			this._rafId = context.requestAnimationFrame(this._onLoopNextTick);
-		} else {
-			this._rafId = context.requestAnimationFrame(this._onLoop);
-		}
-	}
-
-	public stop() {
-		if (this._rafId >= 0) {
-			this._context.cancelAnimationFrame(this._rafId);
-		}
-
-		if (this._rafTimer >= 0) {
-			clearTimeout(this._rafTimer);
-		}
-
-		this._rafId = -1;
-		this._rafTimer = -1;
-	}
-
-	/**
-	 * There can be more than 1 argument when we use XRSession's raf
-	 */
-	private _onLoop = (...args: any[]) => {
-		this._callback!(...args);
-		this._rafId = this._context.requestAnimationFrame(this._onLoop);
-	}
-
-	/**
-	 * MacOS X Safari Bug Fix
-	 * This code guarantees that rendering should be occurred.
-	 *
-	 * In MacOS X(10.14.2), Safari (12.0.2)
-	 * The requestAnimationFrame(RAF) callback is called just after previous RAF callback without term
-	 * only if requestAnimationFrame is called for next frame while updating frame is delayed (~over 2ms)
-	 * So browser cannot render the frame and may be freezing.
-	 */
-	private _onLoopNextTick = (...args: any[]) => {
-		const before = performance.now();
-
-		this._callback!(...args);
-
-		const diff = performance.now() - before;
-
-		if (this._rafTimer >= 0) {
-			clearTimeout(this._rafTimer);
-			this._rafTimer = -1;
-		}
-
-		/* Use requestAnimationFrame only if current rendering could be possible over 60fps (1000/60) */
-		if (diff < 16) {
-			this._rafId = this._context.requestAnimationFrame(this._onLoop);
-		} else {
-			/* Otherwise, Call setTimeout instead of requestAnimationFrame to gaurantee renering should be occurred */
-			this._rafTimer = window.setTimeout(this._onLoop, 0);
-		}
-	}
+  constructor() {
+    this._callback = null;
+    this._context = window;
+    this._rafId = -1;
+    this._rafTimer = -1;
+  }
+
+  public setCallback(callback: (...args: any[]) => any) {
+    this._callback = callback;
+  }
+
+  public setContext(context: any) {
+    this._context = context;
+  }
+
+  public start() {
+    const context = this._context;
+    const callback = this._callback;
+
+    // No context / callback set
+    if (!context || !callback) return;
+    // Animation already started
+    if (this._rafId >= 0 || this._rafTimer >= 0) return;
+
+    if (IS_SAFARI_ON_DESKTOP) {
+      this._rafId = context.requestAnimationFrame(this._onLoopNextTick);
+    } else {
+      this._rafId = context.requestAnimationFrame(this._onLoop);
+    }
+  }
+
+  public stop() {
+    if (this._rafId >= 0) {
+      this._context.cancelAnimationFrame(this._rafId);
+    }
+
+    if (this._rafTimer >= 0) {
+      clearTimeout(this._rafTimer);
+    }
+
+    this._rafId = -1;
+    this._rafTimer = -1;
+  }
+
+  /**
+   * There can be more than 1 argument when we use XRSession's raf
+   */
+  private _onLoop = (...args: any[]) => {
+    this._callback!(...args);
+    this._rafId = this._context.requestAnimationFrame(this._onLoop);
+  }
+
+  /**
+   * MacOS X Safari Bug Fix
+   * This code guarantees that rendering should be occurred.
+   *
+   * In MacOS X(10.14.2), Safari (12.0.2)
+   * The requestAnimationFrame(RAF) callback is called just after previous RAF callback without term
+   * only if requestAnimationFrame is called for next frame while updating frame is delayed (~over 2ms)
+   * So browser cannot render the frame and may be freezing.
+   */
+  private _onLoopNextTick = (...args: any[]) => {
+    const before = performance.now();
+
+    this._callback!(...args);
+
+    const diff = performance.now() - before;
+
+    if (this._rafTimer >= 0) {
+      clearTimeout(this._rafTimer);
+      this._rafTimer = -1;
+    }
+
+    /* Use requestAnimationFrame only if current rendering could be possible over 60fps (1000/60) */
+    if (diff < 16) {
+      this._rafId = this._context.requestAnimationFrame(this._onLoop);
+    } else {
+      /* Otherwise, Call setTimeout instead of requestAnimationFrame to gaurantee renering should be occurred */
+      this._rafTimer = window.setTimeout(this._onLoop, 0);
+    }
+  }
 }
 
 export default WebGLAnimator;