fix: pre-multiplied assumption in layer compositor.

feat: all image loaders now will use ImageBitmap if supported
fix: passes/latlong include was out of date

src/examples/passes/latlong/fragment.glsl

@@ -8,7 +8,7 @@ uniform sampler2D equirectangularMap;
 varying vec4 v_homogeneousVertexPosition;
 
 #pragma include <color/spaces/srgb>
-#pragma include <cubemaps/equirectangular>
+#pragma include <cubemaps/latLong>
 
 void main() {
 

src/lib/engines/layerCompositor/LayerCompositor.ts

@@ -29,7 +29,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, isImageBitmapSupported } from "../../textures/loaders/Image";
+import { fetchImage } from "../../textures/loaders/Image";
 import { Texture } from "../../textures/Texture";
 import fragmentSource from "./fragment.glsl";
 import { Layer } from "./Layer";
@@ -208,35 +208,19 @@ export class LayerCompositor {
         // console.log(texImage2D);
         return texImage2D;
       }
-      const imageBitmapSupported = isImageBitmapSupported();
       if (image === undefined) {
-        if (imageBitmapSupported) {
-          fetchImageBitmap(url).then((imageBitmap: ImageBitmap) => {
-            return resolve(createTexture(this, imageBitmap));
-          });
-        } else {
-          fetchImage(url).then((image: HTMLImageElement) => {
-            return resolve(createTexture(this, image));
-          });
-        }
-      } else if (image instanceof HTMLImageElement) {
-        if (imageBitmapSupported) {
-          const imageBitmapPromise = createImageBitmap(image);
-          imageBitmapPromise.then((imageBitmap) => {
-            return resolve(createTexture(this, imageBitmap));
-          });
-        } else {
+        fetchImage(url).then((image: HTMLImageElement | ImageBitmap) => {
           return resolve(createTexture(this, image));
-        }
-      } else if (image instanceof ImageBitmap) {
+        });
+      } else if (image instanceof HTMLImageElement || image instanceof ImageBitmap) {
         return resolve(createTexture(this, image));
       }
     });
   }
 
   // ask how much memory is used
   // set max size
-  // draw() - makes things fit with size of div assuming piframebufferToLayerUVScalels are square
+  // draw() - makes things fit with size of div assuming pixels are square
   render(): void {
     // framebuffer.clear();
     this.updateViewport();

src/lib/engines/layerCompositor/fragment.glsl

@@ -20,7 +20,7 @@ void main() {
   outputColor += sRGBToLinear( layerColor.rgb );
 
   gl_FragColor.rgb = linearTosRGB( outputColor );
- // gl_FragColor.rgb *= layerColor.a;  - do not currently do this.  Assume images are already in pre-multiplied form.
+  gl_FragColor.rgb *= layerColor.a;
   gl_FragColor.a = layerColor.a;
 
 }

src/lib/textures/loaders/Image.ts

@@ -5,7 +5,7 @@
 // * @bhouston
 //
 
-export function fetchImage(url: string): Promise<HTMLImageElement> {
+export function fetchImageElement(url: string): Promise<HTMLImageElement> {
   return new Promise<HTMLImageElement>((resolve, reject) => {
     const image = new Image();
     image.crossOrigin = "anonymous";
@@ -17,18 +17,6 @@ export function fetchImage(url: string): Promise<HTMLImageElement> {
   });
 }
 
-export async function fetchCubeImages(urlPattern: string): Promise<HTMLImageElement[]> {
-  const cubeMapFaces = ["px", "nx", "py", "ny", "pz", "nz"];
-  const fetchPromises: Promise<HTMLImageElement>[] = [];
-  cubeMapFaces.forEach((face) => {
-    fetchPromises.push(fetchImage(urlPattern.replace("*", face)));
-  });
-  return Promise.all(fetchPromises);
-}
-
-export function isImageBitmapSupported(): boolean {
-  return "createImageBitmap" in window;
-}
 export function fetchImageBitmap(url: string): Promise<ImageBitmap> {
   return new Promise<ImageBitmap>((resolve, reject) => {
     fetch(url)
@@ -57,3 +45,25 @@ export function fetchImageBitmap(url: string): Promise<ImageBitmap> {
       );
   });
 }
+
+export function isImageBitmapSupported(): boolean {
+  return "createImageBitmap" in window;
+}
+
+export type Image = HTMLImageElement | ImageBitmap;
+
+export function fetchImage(url: string): Promise<Image> {
+  if (isImageBitmapSupported()) {
+    return fetchImageBitmap(url);
+  }
+  return fetchImageElement(url);
+}
+
+export async function fetchCubeImages(urlPattern: string): Promise<Image[]> {
+  const cubeMapFaces = ["px", "nx", "py", "ny", "pz", "nz"];
+  const fetchPromises: Promise<Image>[] = [];
+  cubeMapFaces.forEach((face) => {
+    fetchPromises.push(fetchImage(urlPattern.replace("*", face)));
+  });
+  return Promise.all(fetchPromises);
+}