Feedback updates

src/inflators/image-loader.ts

@@ -1,15 +1,22 @@
 import { HubsWorld } from "../app";
-import { ProjectionMode } from "../utils/projection-mode";
+import { ProjectionModeName } from "../utils/projection-mode";
 import { inflateMediaLoader } from "./media-loader";
 import { MediaImageLoaderData } from "../bit-components";
+import { AlphaModeName } from "../utils/create-image-mesh";
 
 export interface ImageLoaderParams {
   src: string;
-  projection: string;
-  alphaMode: string;
+  projection: ProjectionModeName;
+  alphaMode: AlphaModeName;
   alphaCutoff: number;
 }
 
+const DEFAULTS: Partial<ImageLoaderParams> = {
+  projection: ProjectionModeName.FLAT,
+  alphaMode: AlphaModeName.OPAQUE,
+  alphaCutoff: 0.5
+};
+
 export function inflateImageLoader(world: HubsWorld, eid: number, params: ImageLoaderParams) {
   inflateMediaLoader(world, eid, {
     src: params.src,
@@ -19,5 +26,6 @@ export function inflateImageLoader(world: HubsWorld, eid: number, params: ImageL
     isObjectMenuTarget: false
   });
 
-  MediaImageLoaderData.set(eid, params);
+  const requiredParams = Object.assign({}, DEFAULTS, params) as Required<ImageLoaderParams>;
+  MediaImageLoaderData.set(eid, requiredParams);
 }

src/inflators/image.ts

@@ -16,6 +16,13 @@ export interface ImageParams {
   alphaCutoff: number;
 }
 
+const DEFAULTS: Partial<ImageParams> = {
+  projection: ProjectionMode.FLAT,
+  alphaMode: AlphaMode.OPAQUE,
+  alphaCutoff: 0.5,
+  ratio: 1
+};
+
 export function inflateImage(world: HubsWorld, eid: EntityID, params: ImageParams) {
   const { texture, ratio, projection, alphaMode, alphaCutoff, cacheKey } = params;
   const mesh =
@@ -25,22 +32,11 @@ export function inflateImage(world: HubsWorld, eid: EntityID, params: ImageParam
   addObject3DComponent(world, eid, mesh);
   addComponent(world, MediaImage, eid);
 
-  if (projection !== undefined) {
-    MediaImage.projection[eid] = projection;
-  } else {
-    MediaImage.projection[eid] = ProjectionMode.FLAT;
-  }
-  if (alphaMode !== undefined) {
-    MediaImage.alphaMode[eid] = alphaMode;
-  } else {
-    MediaImage.alphaMode[eid] = AlphaMode.Opaque;
-  }
-  if (alphaCutoff !== undefined) {
-    MediaImage.alphaCutoff[eid] = alphaCutoff;
-  } else {
-    MediaImage.alphaCutoff[eid] = 0;
-  }
-
+  const requiredParams = Object.assign({}, DEFAULTS, params) as Required<ImageParams>;
+  MediaImage.projection[eid] = requiredParams.projection;
+  MediaImage.alphaMode[eid] = requiredParams.alphaMode;
+  MediaImage.alphaCutoff[eid] = requiredParams.alphaCutoff;
   MediaImage.cacheKey[eid] = APP.getSid(cacheKey);
+
   return eid;
 }

src/inflators/video-loader.ts

@@ -1,15 +1,23 @@
 import { HubsWorld } from "../app";
 import { MediaVideoLoaderData } from "../bit-components";
+import { ProjectionModeName } from "../utils/projection-mode";
 import { inflateMediaLoader } from "./media-loader";
 
 export interface VideoLoaderParams {
   src: string;
-  projection?: string;
+  projection: ProjectionModeName;
   autoPlay: boolean;
   controls: boolean;
   loop: boolean;
 }
 
+const DEFAULTS: Partial<VideoLoaderParams> = {
+  projection: ProjectionModeName.FLAT,
+  controls: true,
+  autoPlay: true,
+  loop: true
+};
+
 export function inflateVideoLoader(world: HubsWorld, eid: number, params: VideoLoaderParams) {
   inflateMediaLoader(world, eid, {
     src: params.src,
@@ -19,5 +27,6 @@ export function inflateVideoLoader(world: HubsWorld, eid: number, params: VideoL
     isObjectMenuTarget: false
   });
 
-  MediaVideoLoaderData.set(eid, params);
+  const requiredParams = Object.assign({}, DEFAULTS, params) as Required<VideoLoaderParams>;
+  MediaVideoLoaderData.set(eid, requiredParams);
 }

src/inflators/video.ts

@@ -19,26 +19,28 @@ export interface VideoParams {
   controls: boolean;
 }
 
+const DEFAULTS: Partial<VideoParams> = {
+  projection: ProjectionMode.FLAT,
+  controls: true,
+  ratio: 1
+};
+
 export function inflateVideo(world: HubsWorld, eid: EntityID, params: VideoParams) {
-  const { texture, ratio, projection, video, controls } = params;
+  const { texture, ratio, projection, video } = params;
   const mesh =
     projection === ProjectionMode.SPHERE_EQUIRECTANGULAR
       ? create360ImageMesh(texture)
       : createImageMesh(texture, ratio);
   addObject3DComponent(world, eid, mesh);
   addComponent(world, MediaVideo, eid);
 
+  const requiredParams = Object.assign({}, DEFAULTS, params) as Required<VideoParams>;
   MediaVideo.flags[eid] = 0;
-  if (controls !== undefined) {
+  if (!!requiredParams.controls) {
     MediaVideo.flags[eid] |= VIDEO_FLAGS.CONTROLS;
   }
-  if (projection !== undefined) {
-    MediaVideo.projection[eid] = projection;
-  } else {
-    MediaVideo.projection[eid] = ProjectionMode.FLAT;
-  }
-
-  MediaVideo.ratio[eid] = ratio !== undefined ? ratio : 1;
+  MediaVideo.projection[eid] = requiredParams.projection;
+  MediaVideo.ratio[eid] = requiredParams.ratio;
   MediaVideoData.set(eid, video);
   return eid;
 }

src/inflators/waypoint.tsx

@@ -70,7 +70,7 @@ export function inflateWaypoint(world: HubsWorld, eid: number, props: WaypointPa
             texture,
             ratio: 1,
             projection: ProjectionMode.FLAT,
-            alphaMode: AlphaMode.Blend,
+            alphaMode: AlphaMode.BLEND,
             cacheKey
           }}
         ></entity>

src/prefabs/error-object.js

@@ -13,7 +13,7 @@ export function ErrorObject() {
         texture: loadTextureFromCache("error", 1).texture,
         ratio: 1400 / 1200,
         projection: ProjectionMode.FLAT,
-        alphaMode: AlphaMode.Blend,
+        alphaMode: AlphaMode.BLEND,
         cacheKey: TextureCache.key("error", 1)
       }}
     />

src/prefabs/video-menu.tsx

@@ -72,7 +72,7 @@ export function VideoMenuPrefab() {
           texture: playTexture,
           ratio: 1,
           projection: ProjectionMode.FLAT,
-          alphaMode: AlphaMode.Blend,
+          alphaMode: AlphaMode.BLEND,
           cacheKey: TextureCache.key(playImageUrl, 1)
         }}
         visible={false}
@@ -85,7 +85,7 @@ export function VideoMenuPrefab() {
           texture: pauseTexture,
           ratio: 1,
           projection: ProjectionMode.FLAT,
-          alphaMode: AlphaMode.Blend,
+          alphaMode: AlphaMode.BLEND,
           cacheKey: TextureCache.key(pauseImageUrl, 1)
         }}
         visible={false}

src/utils/create-image-mesh.ts

@@ -3,19 +3,30 @@ import { errorTexture } from "../utils/error-texture";
 import { Layers } from "../camera-layers";
 import { Texture } from "three";
 
-export enum AlphaMode {
-  Opaque = 0,
-  Blend = 1,
-  Mask = 2
+export const enum AlphaMode {
+  OPAQUE = 0,
+  BLEND = 1,
+  MASK = 2
 }
 
-export const enum ALPHA_MODE {
+export const enum AlphaModeName {
   OPAQUE = "opaque",
   BLEND = "blend",
   MASK = "mask"
 }
 
-export function create360ImageMesh(texture: Texture, alphaMode: AlphaMode = AlphaMode.Opaque, alphaCutoff = 0.5) {
+export function getAlphaModeFromAlphaModeName(alphaMode: AlphaModeName) {
+  if (alphaMode === AlphaModeName.OPAQUE) {
+    return AlphaMode.OPAQUE;
+  } else if (alphaMode === AlphaModeName.BLEND) {
+    return AlphaMode.BLEND;
+  } else if (alphaMode === AlphaModeName.MASK) {
+    return AlphaMode.MASK;
+  }
+  return AlphaMode.OPAQUE;
+}
+
+export function create360ImageMesh(texture: Texture, alphaMode: AlphaMode = AlphaMode.OPAQUE, alphaCutoff = 0.5) {
   const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
   // invert the geometry on the x-axis so that all of the faces point inward
   geometry.scale(-1, 1, 1);
@@ -33,14 +44,14 @@ export function create360ImageMesh(texture: Texture, alphaMode: AlphaMode = Alph
     material.transparent = true;
   } else {
     switch (alphaMode) {
-      case AlphaMode.Opaque:
+      case AlphaMode.OPAQUE:
         material.transparent = false;
         break;
-      case AlphaMode.Mask:
+      case AlphaMode.MASK:
         material.transparent = false;
         material.alphaTest = alphaCutoff;
         break;
-      case AlphaMode.Blend:
+      case AlphaMode.BLEND:
         material.transparent = true;
         material.alphaTest = 0;
         break;
@@ -60,7 +71,7 @@ export function create360ImageMesh(texture: Texture, alphaMode: AlphaMode = Alph
 export function createImageMesh(
   texture: Texture,
   ratio: number,
-  alphaMode: AlphaMode = AlphaMode.Opaque,
+  alphaMode: AlphaMode = AlphaMode.OPAQUE,
   alphaCutoff = 0.5
 ) {
   const width = Math.min(1.0, 1.0 / ratio);
@@ -71,15 +82,15 @@ export function createImageMesh(
   material.toneMapped == false;
   material.side = THREE.DoubleSide;
   switch (alphaMode) {
-    case AlphaMode.Mask:
+    case AlphaMode.MASK:
       material.transparent = false;
       material.alphaTest = alphaCutoff;
       break;
-    case AlphaMode.Blend:
+    case AlphaMode.BLEND:
       material.transparent = true;
       material.alphaTest = 0;
       break;
-    case AlphaMode.Opaque:
+    case AlphaMode.OPAQUE:
     default:
       material.transparent = false;
   }

src/utils/load-image.tsx

@@ -1,11 +1,11 @@
 /** @jsx createElementEntity */
 import { createElementEntity } from "../utils/jsx-entity";
-import { PROJECTION_MODE, ProjectionMode } from "./projection-mode";
+import { ProjectionMode, getProjectionFromProjectionName } from "./projection-mode";
 import { loadTextureCancellable } from "../utils/load-texture";
 import { renderAsEntity } from "../utils/jsx-entity";
 import { HubsWorld } from "../app";
 import { Texture } from "three";
-import { ALPHA_MODE, AlphaMode } from "./create-image-mesh";
+import { AlphaMode, getAlphaModeFromAlphaModeName } from "./create-image-mesh";
 import { EntityID } from "./networking-types";
 import { MediaImageLoaderData } from "../bit-components";
 import { ImageParams } from "../inflators/image";
@@ -17,11 +17,11 @@ export function* createImageDef(world: HubsWorld, url: string, contentType: stri
   // TODO it would be nice if we could be less aggressive 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: AlphaMode = AlphaMode.Blend;
+  let alphaMode: AlphaMode = AlphaMode.BLEND;
   if (contentType === "image/gif") {
-    alphaMode = AlphaMode.Mask;
+    alphaMode = AlphaMode.MASK;
   } else if (contentType === "image/jpeg") {
-    alphaMode = AlphaMode.Opaque;
+    alphaMode = AlphaMode.OPAQUE;
   }
 
   return {
@@ -39,18 +39,8 @@ export function* loadImage(world: HubsWorld, eid: EntityID, url: string, content
 
   if (MediaImageLoaderData.has(eid)) {
     const params = MediaImageLoaderData.get(eid)!;
-    if (params.projection === PROJECTION_MODE.FLAT) {
-      imageDef.projection = ProjectionMode.FLAT;
-    } else if (params.projection === PROJECTION_MODE.SPHERE_EQUIRECTANGULAR) {
-      imageDef.projection = ProjectionMode.SPHERE_EQUIRECTANGULAR;
-    }
-    if (params.alphaMode === ALPHA_MODE.OPAQUE) {
-      imageDef.alphaMode = AlphaMode.Opaque;
-    } else if (params.alphaMode === ALPHA_MODE.BLEND) {
-      imageDef.alphaMode = AlphaMode.Blend;
-    } else if ((params.alphaMode = ALPHA_MODE.MASK)) {
-    }
-    imageDef.alphaMode === AlphaMode.Mask;
+    imageDef.projection = getProjectionFromProjectionName(params.projection);
+    imageDef.alphaMode = getAlphaModeFromAlphaModeName(params.alphaMode);
     imageDef.alphaCutoff = params.alphaCutoff;
     MediaImageLoaderData.delete(eid);
   }

src/utils/load-video.tsx

@@ -1,6 +1,6 @@
 /** @jsx createElementEntity */
 import { createElementEntity } from "../utils/jsx-entity";
-import { PROJECTION_MODE, ProjectionMode } from "./projection-mode";
+import { ProjectionMode, getProjectionFromProjectionName } from "./projection-mode";
 import { renderAsEntity } from "../utils/jsx-entity";
 import { loadVideoTexture } from "../utils/load-video-texture";
 import { HubsWorld } from "../app";
@@ -19,11 +19,7 @@ export function* loadVideo(world: HubsWorld, eid: EntityID, url: string, content
     loop = params.loop;
     autoPlay = params.autoPlay;
     controls = params.controls;
-    if (params.projection === PROJECTION_MODE.FLAT) {
-      projection = ProjectionMode.FLAT;
-    } else if (params.projection === PROJECTION_MODE.SPHERE_EQUIRECTANGULAR) {
-      projection = ProjectionMode.SPHERE_EQUIRECTANGULAR;
-    }
+    projection = getProjectionFromProjectionName(params.projection);
     MediaVideoLoaderData.delete(eid);
   }
 

src/utils/projection-mode.ts

@@ -1,8 +1,17 @@
-export enum ProjectionMode {
+export const enum ProjectionMode {
   FLAT = 0,
   SPHERE_EQUIRECTANGULAR = 1
 }
-export const enum PROJECTION_MODE {
+export const enum ProjectionModeName {
   FLAT = "flat",
   SPHERE_EQUIRECTANGULAR = "360-equirectangular"
 }
+
+export function getProjectionFromProjectionName(projectionName: ProjectionModeName): ProjectionMode {
+  if (projectionName === ProjectionModeName.FLAT) {
+    return ProjectionMode.FLAT;
+  } else if (projectionName === ProjectionModeName.SPHERE_EQUIRECTANGULAR) {
+    return ProjectionMode.SPHERE_EQUIRECTANGULAR;
+  }
+  return ProjectionMode.FLAT;
+}