feat: enable direct image loading in LayerCompositor for max speed

bhouston · Aug 14, 2020 · bd1fc0a · bd1fc0a
1 parent 3267f4c
commit bd1fc0a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/src/examples/compositing/basic/index.ts b/src/examples/compositing/basic/index.ts
@@ -2,7 +2,6 @@ import { Layer } from "../../../lib/engines/layerCompositor/Layer";
 import { LayerCompositor } from "../../../lib/engines/layerCompositor/LayerCompositor";
 import { Vector2 } from "../../../lib/math/Vector2";
 import { Vector3 } from "../../../lib/math/Vector3";
-import { fetchImage } from "../../../lib/textures/loaders/Image";
 
 const canvas = document.getElementById("framebuffer") as HTMLCanvasElement;
 
@@ -12,20 +11,16 @@ async function init(): Promise<null> {
   layerCompositor.layerSize = new Vector2(2048, 2048);
 
   const splatUrl = "/assets/textures/decals/splat.png";
-  const splatImage = await fetchImage(splatUrl);
-  const splatTexImage2D = await layerCompositor.loadTexImage2D(splatUrl, splatImage);
+  const splatTexImage2D = await layerCompositor.loadTexImage2D(splatUrl);
 
   const shirtUrl = "/assets/textures/test/moireShirt.png";
-  const shirtImage = await fetchImage(shirtUrl);
-  const shirtTexImage2D = await layerCompositor.loadTexImage2D(shirtUrl, shirtImage);
+  const shirtTexImage2D = await layerCompositor.loadTexImage2D(shirtUrl);
 
   const radialUrl = "/assets/textures/test/moireRadial.png";
-  const radialImage = await fetchImage(radialUrl);
-  const radialTexImage2D = await layerCompositor.loadTexImage2D(radialUrl, radialImage);
+  const radialTexImage2D = await layerCompositor.loadTexImage2D(radialUrl);
 
   const concentricUrl = "/assets/textures/test/moireConcentric.png";
-  const concentricImage = await fetchImage(concentricUrl);
-  const concentricTexImage2D = await layerCompositor.loadTexImage2D(concentricUrl, concentricImage);
+  const concentricTexImage2D = await layerCompositor.loadTexImage2D(concentricUrl);
 
   layerCompositor.clearState.color = new Vector3(0.2, 0.2, 0.2);
 

diff --git a/src/lib/engines/layerCompositor/LayerCompositor.ts b/src/lib/engines/layerCompositor/LayerCompositor.ts
@@ -28,6 +28,7 @@ import { TexParameters } from "../../renderers/webgl/textures/TexParameters";
 import { TextureFilter } from "../../renderers/webgl/textures/TextureFilter";
 import { TextureTarget } from "../../renderers/webgl/textures/TextureTarget";
 import { TextureWrap } from "../../renderers/webgl/textures/TextureWrap";
+import { fetchImage, fetchImageBitmap } from "../../textures/loaders/Image";
 import { Texture } from "../../textures/Texture";
 import fragmentSource from "./fragment.glsl";
 import { Layer } from "./Layer";
@@ -139,10 +140,10 @@ export class LayerCompositor {
     }
   }
 
-  loadTexImage2D(key: string, image: HTMLImageElement): Promise<TexImage2D> {
+  loadTexImage2D(url: string, image: HTMLImageElement | ImageBitmap | undefined): Promise<TexImage2D> {
     return new Promise<TexImage2D>((resolve) => {
       // check for texture in cache.
-      const cachedTexImage2D = this.texImage2DCache[key];
+      const cachedTexImage2D = this.texImage2DCache[url];
       if (cachedTexImage2D !== undefined && !cachedTexImage2D.disposed) {
         return resolve(cachedTexImage2D);
       }
@@ -156,23 +157,36 @@ export class LayerCompositor {
         texture.minFilter = TextureFilter.Nearest;
         texture.generateMipmaps = false;
         texture.anisotropicLevels = 1;
-        texture.name = key;
+        texture.name = url;
 
         // console.log(texture);
         // load texture onto the GPU
         const texImage2D = makeTexImage2DFromTexture(compositor.context, texture);
-        compositor.texImage2DCache[key] = texImage2D;
+        compositor.texImage2DCache[url] = texImage2D;
         // console.log(texImage2D);
         return texImage2D;
       }
-
-      if ("createImageBitmap" in window) {
-        console.log("using createImageBitmap");
-        const imageBitmapPromise = createImageBitmap(image);
-        imageBitmapPromise.then((imageBitmap) => {
-          return resolve(createTexture(this, imageBitmap));
-        });
-      } else {
+      if (image === undefined) {
+        if ("createImageBitmap" in window) {
+          fetchImageBitmap(url).then((imageBitmap: ImageBitmap) => {
+            return resolve(createTexture(this, imageBitmap));
+          });
+        } else {
+          fetchImage(url).then((image: HTMLImageElement) => {
+            return resolve(createTexture(this, image));
+          });
+        }
+      }
+      if (image instanceof HTMLImageElement) {
+        if ("createImageBitmap" in window) {
+          const imageBitmapPromise = createImageBitmap(image);
+          imageBitmapPromise.then((imageBitmap) => {
+            return resolve(createTexture(this, imageBitmap));
+          });
+        } else {
+          return resolve(createTexture(this, image));
+        }
+      } else if (image instanceof ImageBitmap) {
         return resolve(createTexture(this, image));
       }
     });