Add spherical projection flag

Also, pass mediaLoader flags to loaders.

src/bit-systems/media-loading.ts

@@ -16,25 +16,24 @@ import { loadPDF } from "../utils/load-pdf";
 import { MediaType, mediaTypeName, resolveMediaInfo } from "../utils/media-utils";
 import { EntityID } from "../utils/networking-types";
 
+// TODO Should every loader have the same signature ( HubsWorld, flags, MediaInfo )?
 const loaderForMediaType = {
-  [MediaType.IMAGE]: (
-    world: HubsWorld,
-    { accessibleUrl, contentType }: { accessibleUrl: string; contentType: string }
-  ) => loadImage(world, accessibleUrl, contentType),
-  [MediaType.VIDEO]: (world: HubsWorld, { accessibleUrl }: { accessibleUrl: string }) =>
-    loadVideo(world, accessibleUrl),
-  [MediaType.MODEL]: (
-    world: HubsWorld,
-    { accessibleUrl, contentType }: { accessibleUrl: string; contentType: string }
-  ) => loadModel(world, accessibleUrl, contentType, true),
-  [MediaType.PDF]: (world: HubsWorld, { accessibleUrl }: { accessibleUrl: string }) => loadPDF(world, accessibleUrl)
+  [MediaType.IMAGE]: (world: HubsWorld, flags: number, { accessibleUrl, contentType }: MediaInfo) =>
+    loadImage(world, flags, accessibleUrl, contentType),
+  [MediaType.VIDEO]: (world: HubsWorld, flags: number, { accessibleUrl }: MediaInfo) =>
+    loadVideo(world, flags, accessibleUrl),
+  [MediaType.MODEL]: (world: HubsWorld, flags: number, { accessibleUrl, contentType }: MediaInfo) =>
+    loadModel(world, flags, accessibleUrl, contentType, true),
+  [MediaType.PDF]: (world: HubsWorld, flags: number, { accessibleUrl }: MediaInfo) =>
+    loadPDF(world, flags, accessibleUrl)
 };
 
 export const MEDIA_LOADER_FLAGS = {
   RECENTER: 1 << 0,
   RESIZE: 1 << 1,
   ANIMATE_LOAD: 1 << 2,
-  IS_OBJECT_MENU_TARGET: 1 << 3
+  IS_OBJECT_MENU_TARGET: 1 << 3,
+  SPHERICAL_PROJECTION: 1 << 4
 };
 
 function resizeAndRecenter(world: HubsWorld, media: EntityID, eid: EntityID) {
@@ -138,7 +137,7 @@ function* loadMedia(world: HubsWorld, eid: EntityID) {
     if (!loader) {
       throw new UnsupportedMediaTypeError(eid, urlData.mediaType);
     }
-    media = yield* loader(world, urlData);
+    media = yield* loader(world, MediaLoader.flags[eid], urlData);
   } catch (e) {
     console.error(e);
     media = renderAsEntity(world, ErrorObject());

src/bit-systems/object-spawner.ts

@@ -26,7 +26,8 @@ function* spawnObjectJob(world: HubsWorld, spawner: EntityID) {
     recenter: false,
     resize: false,
     animateLoad: false,
-    isObjectMenuTarget: true
+    isObjectMenuTarget: true,
+    sphericalProjection: false
   });
 
   if (ObjectSpawner.flags[spawner] & OBJECT_SPAWNER_FLAGS.APPLY_GRAVITY) {

src/bit-systems/scene-loading.ts

@@ -44,7 +44,7 @@ function* loadScene(
       throw new Error("Scene loading failed. No src url provided to load.");
     }
 
-    const { value: scene, canceled } = yield* cancelable(loadModel(world, src, "model/gltf", false), signal);
+    const { value: scene, canceled } = yield* cancelable(loadModel(world, 0, src, "model/gltf", false), signal);
     if (canceled) {
       return;
     }

src/inflators/image-loader.ts

@@ -13,7 +13,8 @@ export function inflateImageLoader(world: HubsWorld, eid: number, params: ImageL
     recenter: false,
     resize: false,
     animateLoad: false,
-    isObjectMenuTarget: false
+    isObjectMenuTarget: false,
+    sphericalProjection: params.projection === ProjectionMode.SPHERE_EQUIRECTANGULAR
   });
 
   // TODO: Use projection

src/inflators/media-loader.ts

@@ -9,19 +9,21 @@ export type MediaLoaderParams = {
   recenter: boolean;
   animateLoad: boolean;
   isObjectMenuTarget: boolean;
+  sphericalProjection: boolean;
 };
 
 export function inflateMediaLoader(
   world: HubsWorld,
   eid: number,
-  { src, recenter, resize, animateLoad, isObjectMenuTarget }: MediaLoaderParams
+  { src, recenter, resize, animateLoad, isObjectMenuTarget, sphericalProjection }: MediaLoaderParams
 ) {
   addComponent(world, MediaLoader, eid);
   let flags = 0;
   if (recenter) flags |= MEDIA_LOADER_FLAGS.RECENTER;
   if (resize) flags |= MEDIA_LOADER_FLAGS.RESIZE;
   if (animateLoad) flags |= MEDIA_LOADER_FLAGS.ANIMATE_LOAD;
   if (isObjectMenuTarget) flags |= MEDIA_LOADER_FLAGS.IS_OBJECT_MENU_TARGET;
+  if (sphericalProjection) flags |= MEDIA_LOADER_FLAGS.SPHERICAL_PROJECTION;
   MediaLoader.flags[eid] = flags;
   MediaLoader.src[eid] = APP.getSid(src)!;
 }

src/inflators/pdf-loader.ts

@@ -9,7 +9,8 @@ export function inflatePDFLoader(world: HubsWorld, eid: number, params: PDFLoade
     recenter: false,
     resize: false,
     animateLoad: false,
-    isObjectMenuTarget: false
+    isObjectMenuTarget: false,
+    sphericalProjection: false
   });
 
   // TODO Should the PDF be controlled by users? (Should it be a PDFMenuTarget?)

src/inflators/spawner.ts

@@ -23,7 +23,8 @@ export function inflateSpawner(world: HubsWorld, eid: number, props: SpawnerPara
     recenter: false,
     resize: false,
     animateLoad: false,
-    isObjectMenuTarget: false
+    isObjectMenuTarget: false,
+    sphericalProjection: false
   });
 
   addComponent(world, HandCollisionTarget, eid);

src/inflators/video-loader.ts

@@ -16,7 +16,8 @@ export function inflateVideoLoader(world: HubsWorld, eid: number, params: VideoL
     recenter: false,
     resize: false,
     animateLoad: false,
-    isObjectMenuTarget: false
+    isObjectMenuTarget: false,
+    sphericalProjection: params.projection === ProjectionMode.SPHERE_EQUIRECTANGULAR
   });
 
   // TODO: Use the rest of VideoLoaderParams

src/load-media-on-paste-or-drop.ts

@@ -28,7 +28,8 @@ function spawnFromUrl(text: string) {
     recenter: true,
     resize: true,
     animateLoad: true,
-    isObjectMenuTarget: true
+    isObjectMenuTarget: true,
+    sphericalProjection: false
   });
   const avatarPov = (document.querySelector("#avatar-pov-node")! as AElement).object3D;
   const obj = APP.world.eid2obj.get(eid)!;
@@ -51,7 +52,8 @@ async function spawnFromFileList(files: FileList) {
           recenter: true,
           resize: true,
           animateLoad: true,
-          isObjectMenuTarget: true
+          isObjectMenuTarget: true,
+          sphericalProjection: false
         };
       })
       .catch(e => {
@@ -61,7 +63,8 @@ async function spawnFromFileList(files: FileList) {
           recenter: true,
           resize: true,
           animateLoad: true,
-          isObjectMenuTarget: true
+          isObjectMenuTarget: true,
+          sphericalProjection: false
         };
       });
 

src/message-dispatch.js

@@ -143,7 +143,8 @@ export default class MessageDispatch extends EventTarget {
             resize: true,
             recenter: true,
             animateLoad: true,
-            isObjectMenuTarget: true
+            isObjectMenuTarget: true,
+            sphericalProjection: false
           });
           const obj = APP.world.eid2obj.get(eid);
           obj.position.copy(avatarPov.localToWorld(new THREE.Vector3(0, 0, -1.5)));

src/utils/load-image.tsx

@@ -6,18 +6,22 @@ import { renderAsEntity } from "../utils/jsx-entity";
 import { HubsWorld } from "../app";
 import { Texture } from "three";
 import { AlphaMode } from "./create-image-mesh";
+import { MEDIA_LOADER_FLAGS } from "../bit-systems/media-loading";
 
-export function* loadImage(world: HubsWorld, url: string, contentType: string) {
+export function* loadImage(world: HubsWorld, flags: number, url: string, contentType: string) {
   const { texture, ratio, cacheKey }: { texture: Texture; ratio: number; cacheKey: string } =
     yield loadTextureCancellable(url, 1, contentType);
+  const projection =
+    flags & MEDIA_LOADER_FLAGS.SPHERICAL_PROJECTION ? ProjectionMode.SPHERE_EQUIRECTANGULAR : ProjectionMode.FLAT;
+
   return renderAsEntity(
     world,
     <entity
       name="Image"
       image={{
         texture,
         ratio,
-        projection: ProjectionMode.FLAT,
+        projection,
         alphaMode: AlphaMode.Opaque,
         cacheKey
       }}

src/utils/load-model.tsx

@@ -4,7 +4,7 @@ import { HubsWorld } from "../app";
 import { loadModel as loadGLTFModel } from "../components/gltf-model-plus";
 import { renderAsEntity } from "../utils/jsx-entity";
 
-export function* loadModel(world: HubsWorld, src: string, contentType: string, useCache: boolean) {
+export function* loadModel(world: HubsWorld, _flags: number, src: string, contentType: string, useCache: boolean) {
   // TODO: Write loadGLTFModelCancelable
   const { scene, animations } = yield loadGLTFModel(src, contentType, useCache, null);
 

src/utils/load-pdf.tsx

@@ -3,11 +3,13 @@ import * as pdfjs from "pdfjs-dist";
 import { HubsWorld } from "../app";
 import { createElementEntity, renderAsEntity } from "../utils/jsx-entity";
 
-export function* loadPDF(world: HubsWorld, url: string) {
+export function* loadPDF(world: HubsWorld, _flags: number, url: string) {
   const pdf = (yield pdfjs.getDocument(url).promise) as pdfjs.PDFDocumentProxy;
 
   // TODO Should we create the canvas texture here and load/render the first page?
 
+  // TODO Use flags to determine whether this should be a controllable object
+
   return renderAsEntity(
     world,
     <entity name="PDF" networked grabbable={{ cursor: true, hand: false }} pdf={{ pdf }}></entity>

src/utils/load-video.tsx

@@ -5,9 +5,12 @@ import { VideoTexture } from "three";
 import { renderAsEntity } from "../utils/jsx-entity";
 import { loadVideoTexture } from "../utils/load-video-texture";
 import { HubsWorld } from "../app";
+import { MEDIA_LOADER_FLAGS } from "../bit-systems/media-loading";
 
-export function* loadVideo(world: HubsWorld, url: string) {
+export function* loadVideo(world: HubsWorld, flags: number, url: string) {
   const { texture, ratio }: { texture: VideoTexture; ratio: number } = yield loadVideoTexture(url);
+  const projection =
+    flags & MEDIA_LOADER_FLAGS.SPHERICAL_PROJECTION ? ProjectionMode.SPHERE_EQUIRECTANGULAR : ProjectionMode.FLAT;
 
   return renderAsEntity(
     world,
@@ -20,7 +23,7 @@ export function* loadVideo(world: HubsWorld, url: string) {
         texture,
         ratio,
         autoPlay: true,
-        projection: ProjectionMode.FLAT
+        projection
       }}
     ></entity>
   );

src/utils/message-for.ts

@@ -174,7 +174,8 @@ export function messageForLegacyRoomObjects(objects: LegacyRoomObject[]) {
       resize: true,
       recenter: true,
       animateLoad: true,
-      isObjectMenuTarget: true
+      isObjectMenuTarget: true,
+      sphericalProjection: false
     };
     const createMessage: CreateMessage = [nid, "media", initialData];
     message.creates.push(createMessage);