wip

addons.json

@@ -1,6 +1,3 @@
 {
-  "addons": [
-    "hubs-duck-addon",
-    "hubs-portals-addon"
-  ]
+  "addons": []
 }

src/addons.ts

@@ -1,4 +1,5 @@
-import { App } from "./app";
+import { GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
+import { App, HubsWorld } from "./app";
 import { prefabs } from "./prefabs/prefabs";
 
 import {
@@ -12,6 +13,10 @@ import {
 import configs from "./utils/configs";
 import { commonInflators, gltfInflators, jsxInflators } from "./utils/jsx-entity";
 import { networkableComponents, schemas } from "./utils/network-schemas";
+import { gltfPluginsExtra } from "./components/gltf-model-plus";
+import { GLTFLinkResolverFn, gltfLinkResolvers } from "./inflators/model";
+import { Object3D } from "three";
+import { extraSections } from "./react-components/debug-panel/ECSSidebar";
 
 function getNextIdx(slot: Array<SystemConfigT>, system: SystemConfigT) {
   return slot.findIndex(item => {
@@ -25,8 +30,10 @@ function registerSystem(system: SystemConfigT) {
     slot = APP.addon_systems.setup;
   } else if (system.order < SystemOrderE.PostPhysics) {
     slot = APP.addon_systems.prePhysics;
-  } else if (system.order < SystemOrderE.MatricesUpdate) {
+  } else if (system.order < SystemOrderE.PostPhysics) {
     slot = APP.addon_systems.postPhysics;
+  } else if (system.order < SystemOrderE.MatricesUpdate) {
+    slot = APP.addon_systems.matricesUpdate;
   } else if (system.order < SystemOrderE.BeforeRender) {
     slot = APP.addon_systems.beforeRender;
   } else if (system.order < SystemOrderE.AfterRender) {
@@ -101,6 +108,17 @@ export function registerAddon(id: AddonIdT, config: AddonConfigT) {
   pendingAddons.set(id, config);
 }
 
+export type GLTFParserCallbackFn = (parser: GLTFParser) => GLTFLoaderPlugin;
+export function registerGLTFLoaderPlugin(callback: GLTFParserCallbackFn): void {
+  gltfPluginsExtra.push(callback);
+}
+export function registerGLTFLinkResolver(resolver: GLTFLinkResolverFn): void {
+  gltfLinkResolvers.push(resolver);
+}
+export function registerECSSidebarSection(section: (world: HubsWorld, selectedObj: Object3D) => React.JSX.Element) {
+  extraSections.push(section);
+}
+
 export function onAddonsInit(app: App) {
   app.scene?.addEventListener("hub_updated", () => {
     for (const [id, addon] of pendingAddons) {

src/app.ts

@@ -19,6 +19,7 @@ import {
   PositionalAudio,
   Scene,
   sRGBEncoding,
+  Texture,
   WebGLRenderer
 } from "three";
 import { AudioSettings, SourceType } from "./components/audio-params";
@@ -54,6 +55,7 @@ export interface HubsWorld extends IWorld {
   nid2eid: Map<number, number>;
   eid2obj: Map<number, Object3D>;
   eid2mat: Map<number, Material>;
+  eid2tex: Map<number, Texture>;
   time: { delta: number; elapsed: number; tick: number };
 }
 
@@ -135,6 +137,7 @@ export class App {
     // TODO: Create accessor / update methods for these maps / set
     this.world.eid2obj = new Map();
     this.world.eid2mat = new Map();
+    this.world.eid2tex = new Map();
 
     this.world.nid2eid = new Map();
     this.world.deletedNids = new Set();

src/bit-components.js

@@ -21,7 +21,9 @@ export const Owned = defineComponent();
 export const EntityStateDirty = defineComponent();
 export const NetworkedMediaFrame = defineComponent({
   capturedNid: Types.ui32,
-  scale: [Types.f32, 3]
+  scale: [Types.f32, 3],
+  flags: Types.ui8,
+  mediaType: Types.ui8
 });
 NetworkedMediaFrame.capturedNid[$isStringType] = true;
 
@@ -36,6 +38,45 @@ export const MediaFrame = defineComponent({
   previewingNid: Types.eid,
   flags: Types.ui8
 });
+export const MediaRoot = defineComponent();
+export const Capturable = defineComponent();
+export const CapturableObject = defineComponent();
+export const NetworkedText = defineComponent({
+  text: Types.ui8,
+  anchorX: Types.ui8,
+  anchorY: Types.ui8,
+  color: Types.ui32,
+  curveRadius: Types.f32,
+  direction: Types.ui8,
+  fillOpacity: Types.f32,
+  fontUrl: Types.ui8,
+  fontSize: Types.f32,
+  letterSpacing: Types.f32,
+  lineHeight: Types.ui8,
+  textAlign: Types.ui8,
+  outlineWidth: Types.ui8,
+  outlineColor: Types.ui32,
+  outlineBlur: Types.ui8,
+  outlineOffsetX: Types.ui8,
+  outlineOffsetY: Types.ui8,
+  outlineOpacity: Types.f32,
+  strokeWidth: Types.ui8,
+  strokeColor: Types.ui32,
+  strokeOpacity: Types.ui32,
+  textIndent: Types.ui32,
+  whiteSpace: Types.ui8,
+  overflowWrap: Types.ui8,
+  opacity: Types.f32,
+  side: Types.ui8,
+  maxWidth: Types.f32
+});
+NetworkedText.text[$isStringType] = true;
+NetworkedText.lineHeight[$isStringType] = true;
+NetworkedText.outlineWidth[$isStringType] = true;
+NetworkedText.outlineBlur[$isStringType] = true;
+NetworkedText.outlineOffsetX[$isStringType] = true;
+NetworkedText.outlineOffsetY[$isStringType] = true;
+NetworkedText.strokeWidth[$isStringType] = true;
 export const TextTag = defineComponent();
 export const ReflectionProbe = defineComponent();
 export const Slice9 = defineComponent({
@@ -119,7 +160,11 @@ export const Rigidbody = defineComponent({
   activationState: Types.ui8,
   collisionFilterGroup: Types.ui32,
   collisionFilterMask: Types.ui32,
-  flags: Types.ui8
+  flags: Types.ui8,
+  prevType: Types.ui8
+});
+export const NetworkedRigidBody = defineComponent({
+  prevType: Types.ui8
 });
 export const PhysicsShape = defineComponent({
   bodyId: Types.ui16,
@@ -216,6 +261,7 @@ export const SceneRoot = defineComponent();
 export const NavMesh = defineComponent();
 export const SceneLoader = defineComponent({ src: Types.ui32 });
 SceneLoader.src[$isStringType] = true;
+export const SceneLoaded = defineComponent();
 
 export const MediaImage = defineComponent({
   cacheKey: Types.ui32,
@@ -270,9 +316,12 @@ export const LoopAnimation = defineComponent();
  */
 export const LoopAnimationData = new Map();
 export const NetworkedVideo = defineComponent({
+  src: Types.ui8,
   time: Types.f32,
-  flags: Types.ui8
+  flags: Types.ui8,
+  projection: Types.ui8
 });
+NetworkedVideo.src[$isStringType] = true;
 export const VideoMenuItem = defineComponent();
 export const VideoMenu = defineComponent({
   videoRef: Types.eid,
@@ -387,6 +436,7 @@ export const Billboard = defineComponent({
   onlyY: Types.ui8
 });
 export const MaterialTag = defineComponent();
+export const TextureTag = defineComponent();
 export const UVScroll = defineComponent({
   speed: [Types.f32, 2],
   increment: [Types.f32, 2],
@@ -454,3 +504,4 @@ export const ObjectMenuTransform = defineComponent({
   prevObjectRef: Types.eid,
   flags: Types.ui8
 });
+export const InteractableObject = defineComponent();

src/bit-systems/audio-emitter-system.ts

@@ -6,6 +6,7 @@ import { AudioType, SourceType } from "../components/audio-params";
 import { AudioSystem } from "../systems/audio-system";
 import { applySettings, getCurrentAudioSettings, updateAudioSettings } from "../update-audio-settings";
 import { addObject3DComponent, swapObject3DComponent } from "../utils/jsx-entity";
+import { EntityID } from "../utils/networking-types";
 
 export type AudioObject3D = StereoAudio | PositionalAudio;
 type AudioConstructor<T> = new (listener: ThreeAudioListener) => T;
@@ -55,6 +56,13 @@ function swapAudioType<T extends AudioObject3D>(
   swapObject3DComponent(world, eid, newAudio);
 }
 
+export function swapAudioSrc(world: HubsWorld, videoEid: EntityID, audioEid: EntityID) {
+  const audio = world.eid2obj.get(audioEid)! as AudioObject3D;
+  const video = MediaVideoData.get(videoEid)!;
+  audio.setMediaElementSource(video);
+  video.volume = 1;
+}
+
 export function makeAudioEntity(world: HubsWorld, source: number, sourceType: SourceType, audioSystem: AudioSystem) {
   const eid = addEntity(world);
   APP.sourceType.set(eid, sourceType);

src/bit-systems/camera-tool.js

@@ -211,7 +211,7 @@ function rotateWithRightClick(world, camera) {
     userinput.get(paths.device.mouse.buttonRight)
   ) {
     const rightCursor = anyEntityWith(world, RemoteRight);
-    physicsSystem.updateRigidBodyOptions(camera, { type: "kinematic" });
+    physicsSystem.updateRigidBody(camera, { type: "kinematic" });
     transformSystem.startTransform(world.eid2obj.get(camera), world.eid2obj.get(rightCursor), {
       mode: "cursor"
     });

src/bit-systems/loop-animation.ts

@@ -1,5 +1,5 @@
 import { addComponent, defineQuery, enterQuery, exitQuery, hasComponent, removeComponent } from "bitecs";
-import { AnimationAction, AnimationClip, AnimationMixer, LoopRepeat } from "three";
+import { AnimationClip, LoopRepeat } from "three";
 import {
   MixerAnimatable,
   MixerAnimatableData,
@@ -47,12 +47,16 @@ const getActiveClips = (
 
 export function loopAnimationSystem(world: HubsWorld): void {
   loopAnimationInitializeEnterQuery(world).forEach((eid: number): void => {
+    const params = LoopAnimationInitializeData.get(eid)!;
+    if (!params.length) {
+      return;
+    }
+
     const object = world.eid2obj.get(eid)!;
     const mixer = MixerAnimatableData.get(eid)!;
 
     addComponent(world, LoopAnimation, eid);
 
-    const params = LoopAnimationInitializeData.get(eid)!;
     const activeAnimations = [];
 
     for (let i = 0; i < params.length; i++) {

src/bit-systems/media-loading.ts

@@ -30,7 +30,9 @@ import {
   Rigidbody,
   MediaLoaderOffset,
   MediaVideo,
-  NetworkedTransform
+  NetworkedTransform,
+  MediaRoot,
+  Capturable
 } from "../bit-components";
 import { inflatePhysicsShape, Shape } from "../inflators/physics-shape";
 import { ErrorObject } from "../prefabs/error-object";
@@ -204,7 +206,7 @@ class UnsupportedMediaTypeError extends Error {
   }
 }
 
-type MediaInfo = {
+export type MediaInfo = {
   accessibleUrl: string;
   canonicalUrl: string;
   canonicalAudioUrl: string | null;
@@ -282,7 +284,10 @@ function* loadMedia(world: HubsWorld, eid: EntityID) {
   let media: EntityID;
   try {
     const urlData = (yield resolveMediaInfo(src)) as MediaInfo;
+    APP.getSid(urlData.accessibleUrl); // Register the sid as this is what we will get over the network for media.
     media = yield* loadByMediaType(world, eid, urlData);
+    addComponent(world, MediaRoot, media);
+    addComponent(world, Capturable, media);
     addComponent(world, MediaLoaded, media);
     addComponent(world, MediaInfo, media);
     MediaInfo.accessibleUrl[media] = APP.getSid(urlData.accessibleUrl);

src/bit-systems/object-menu.ts

@@ -105,7 +105,7 @@ function startRotation(world: HubsWorld, menuEid: EntityID, targetEid: EntityID)
   }
   const transformSystem = APP.scene!.systems["transform-selected-object"];
   const physicsSystem = AFRAME.scenes[0].systems["hubs-systems"].physicsSystem;
-  physicsSystem.updateRigidBodyOptions(Rigidbody.bodyId[targetEid], { type: "kinematic" });
+  physicsSystem.updateRigidBody(Rigidbody.bodyId[targetEid], { type: "kinematic" });
   const rightCursorEid = anyEntityWith(world, RemoteRight)!;
   transformSystem.startTransform(world.eid2obj.get(targetEid)!, world.eid2obj.get(rightCursorEid)!, {
     mode: TRANSFORM_MODE.CURSOR
@@ -137,7 +137,7 @@ function startScaling(world: HubsWorld, menuEid: EntityID, targetEid: EntityID)
   // TODO: Remove the dependency with AFRAME
   const transformSystem = (AFRAME as any).scenes[0].systems["transform-selected-object"];
   const physicsSystem = AFRAME.scenes[0].systems["hubs-systems"].physicsSystem;
-  physicsSystem.updateRigidBodyOptions(Rigidbody.bodyId[targetEid], { type: "kinematic" });
+  physicsSystem.updateRigidBody(Rigidbody.bodyId[targetEid], { type: "kinematic" });
   const rightCursorEid = anyEntityWith(world, RemoteRight)!;
   scalingHandler = new ScalingHandler(world.eid2obj.get(targetEid), transformSystem);
   scalingHandler!.objectToScale = world.eid2obj.get(targetEid);

src/bit-systems/scene-loading.ts

@@ -7,7 +7,6 @@ import {
   HeightFieldTag,
   NavMesh,
   Networked,
-  PhysicsShape,
   SceneLoader,
   ScenePreviewCamera,
   SceneRoot,