Apply transparency to images in newLaoder

src/utils/load-image.tsx

@@ -7,9 +7,23 @@ import { HubsWorld } from "../app";
 import { Texture } from "three";
 import { AlphaMode } from "./create-image-mesh";
 
+// TODO AlphaMode is written in JS and should be a ts enum
+type AlphaModeType = typeof AlphaMode.Opaque | typeof AlphaMode.Mask | typeof AlphaMode.Blend;
 export function* loadImage(world: HubsWorld, url: string, contentType: string) {
   const { texture, ratio, cacheKey }: { texture: Texture; ratio: number; cacheKey: string } =
     yield loadTextureCancellable(url, 1, contentType);
+  console.log(url, contentType, texture);
+
+  // TODO it would be nice if we could be less agressive with transparency here.
+  // Doing so requires inspecting the raw file data upstream of here and passing
+  // that info through somehow which feels tricky.
+  let alphaMode: AlphaModeType = AlphaMode.Blend;
+  if (contentType === "image/gif") {
+    alphaMode = AlphaMode.Mask;
+  } else if (contentType === "image/jpeg") {
+    alphaMode = AlphaMode.Opaque;
+  }
+
   return renderAsEntity(
     world,
     <entity
@@ -18,7 +32,7 @@ export function* loadImage(world: HubsWorld, url: string, contentType: string) {
         texture,
         ratio,
         projection: ProjectionMode.FLAT,
-        alphaMode: AlphaMode.Opaque,
+        alphaMode,
         cacheKey
       }}
     />