@needle-tools/engine 2.65.2-pre → 2.67.0-pre

package/src/engine-components/Renderer.ts

@@ -90,6 +90,8 @@ class SharedMaterialArray implements ISharedMaterials {
             if (!target) continue;
             const mat = target.material as Material;
             if (!mat) continue;
+            // set the shadow side to the same as the side of the material, three flips this for some reason
+            mat.shadowSide = mat.side;
             for (let k = 0; k < originalMaterials.length; k++) {
                 const orig = originalMaterials[k];
                 if (!orig) {
@@ -110,7 +112,7 @@ class SharedMaterialArray implements ISharedMaterials {
             this._indexMap = indexMap;
             const warningMessage = `Renderer ${renderer.name} was initialized with missing materials - this may lead to unexpected behaviour when trying to access sharedMaterials by index.`;
             console.warn(warningMessage);
-            if(isLocalNetwork()) showBalloonWarning("Found renderer with missing materials: please check the console for details.");
+            if (isLocalNetwork()) showBalloonWarning("Found renderer with missing materials: please check the console for details.");
         }
 
         // this lets us override the javascript indexer, only works in ES6 tho
@@ -243,18 +245,37 @@ export class Renderer extends Behaviour implements IRenderer {
     }
 
     private _sharedMaterials!: SharedMaterialArray;
-    private _originalMaterials: Material[] = [];
+    private _originalMaterials?: Material[];
 
     // this is just available during deserialization
     private set sharedMaterials(_val: Array<Material | null>) {
         // TODO: elements in the array might be missing at the moment which leads to problems if an index is serialized
-        this._originalMaterials = _val as Material[];
+        if (!this._originalMaterials) {
+            this._originalMaterials = _val as Material[];
+        }
+        else if (_val) {
+            let didWarn = false;
+            for (let i = 0; i < this._sharedMaterials.length; i++) {
+                const mat = i < _val.length ? _val[i] : null;
+                if (mat && mat instanceof Material) {
+                    this.sharedMaterials[i] = mat as Material;
+                }
+                else {
+                    if (!didWarn) {
+                        didWarn = true;
+                        console.warn("Can not assign null as material: " + this.name, mat);
+                    }
+                }
+            }
+        }
     }
 
     //@ts-ignore
     get sharedMaterials(): SharedMaterialArray {
-        if (!this._sharedMaterials || !this._sharedMaterials.is(this))
+        if (!this._sharedMaterials || !this._sharedMaterials.is(this)) {
+            if (!this._originalMaterials) this._originalMaterials = [];
             this._sharedMaterials = new SharedMaterialArray(this, this._originalMaterials);
+        }
         return this._sharedMaterials!;
     }
 
@@ -503,7 +524,7 @@ export class Renderer extends Behaviour implements IRenderer {
             //     console.log(this.name, this.gameObject.matrixWorldNeedsUpdate);
             const needsUpdate: boolean = this.gameObject[NEED_UPDATE_INSTANCE_KEY] === true;// || this.gameObject.matrixWorldNeedsUpdate;
             if (needsUpdate) {
-                if(debugInstancing)
+                if (debugInstancing)
                     console.log("UPDATE INSTANCED MATRICES", this.context.time.frame);
                 this.gameObject[NEED_UPDATE_INSTANCE_KEY] = false;
                 const remove = false;// Math.random() < .01;
@@ -607,8 +628,6 @@ export class Renderer extends Behaviour implements IRenderer {
     loadProgressiveTextures(material: THREE.Material) {
         // progressive load before rendering so we only load textures for visible materials
         if (!suppressProgressiveLoading && material) {
-            if (debugProgressiveLoading && material["_didRequestTextureLOD"] === undefined)
-                console.warn("Progressive?", this)
 
             if (material["_didRequestTextureLOD"] === undefined && this.allowProgressiveLoading) {
                 material["_didRequestTextureLOD"] = 0;
@@ -712,7 +731,7 @@ class InstancingHandler {
 
     public objs: InstancedMeshRenderer[] = [];
 
-    public setup(renderer:Renderer, obj: THREE.Object3D, context: Context, handlesArray: InstanceHandle[] | null, args: InstancingSetupArgs, level: number = 0)
+    public setup(renderer: Renderer, obj: THREE.Object3D, context: Context, handlesArray: InstanceHandle[] | null, args: InstancingSetupArgs, level: number = 0)
         : InstanceHandle[] | null {
 
         const res = this.tryCreateOrAddInstance(obj, context, args);
@@ -729,6 +748,14 @@ class InstancingHandler {
                 handlesArray = this.setup(renderer, ch, context, handlesArray, args, nextLevel);
             }
         }
+
+        if (level === 0) {
+            // For multi material objects we only want to track the root object's matrix
+            if (args.useMatrixWorldAutoUpdate && handlesArray && handlesArray.length >= 0) {
+                this.autoUpdateInstanceMatrix(obj);
+            }
+        }
+
         return handlesArray;
     }
 
@@ -755,8 +782,6 @@ class InstancingHandler {
                 if (i.isFull()) continue;
                 if (i.geo === geo && i.material === mat) {
                     const handle = i.addInstance(mesh);
-                    if (args.useMatrixWorldAutoUpdate && handle)
-                        this.autoUpdateInstanceMatrix(mesh, i, handle);
                     return handle;
                 }
             }
@@ -764,17 +789,14 @@ class InstancingHandler {
             const i = new InstancedMeshRenderer(obj.name, geo, mat, 200, context);
             this.objs.push(i);
             const handle = i.addInstance(mesh);
-            if (args.useMatrixWorldAutoUpdate && handle)
-                this.autoUpdateInstanceMatrix(mesh, i, handle);
             return handle;
         }
         return null;
     }
 
-    private autoUpdateInstanceMatrix(obj: Object3D, _renderer: InstancedMeshRenderer, _handle: InstanceHandle) {
+    private autoUpdateInstanceMatrix(obj: Object3D) {
         const original = obj.matrixWorld["multiplyMatrices"].bind(obj.matrixWorld);
         let previousMatrix: THREE.Matrix4 = obj.matrixWorld.clone();
-
         const matrixChangeWrapper = (a: Matrix4, b: Matrix4) => {
             const newMatrixWorld = original(a, b);
             // console.warn("MULT", obj.matrixWorldNeedsUpdate);
@@ -786,7 +808,6 @@ class InstancingHandler {
             return newMatrixWorld;
         };
         obj.matrixWorld["multiplyMatrices"] = matrixChangeWrapper;
-
         // wrap matrixWorldNeedsUpdate
         // let originalMatrixWorldNeedsUpdate = obj.matrixWorldNeedsUpdate;
         // Object.defineProperty(obj, "matrixWorldNeedsUpdate", {
@@ -798,7 +819,6 @@ class InstancingHandler {
         //         originalMatrixWorldNeedsUpdate = value;
         //     }
         // });
-
     }
 }
 const instancing: InstancingHandler = new InstancingHandler();

package/src/engine-components/ScreenCapture.ts

@@ -409,9 +409,9 @@ class PeerHandle extends EventDispatcher {
     disable() {
         if (!this._enabled) return;
         this._enabled = false;
-        this.context.connection.stopListening(RoomEvents.JoinedRoom, this.onConnectRoomFn);
-        this.context.connection.stopListening(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
-        this.context.connection.stopListening(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
+        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onConnectRoomFn);
+        this.context.connection.stopListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
+        this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
         this.unsubscribePeerEvents();
     }
 

package/src/engine-components/Skybox.ts

@@ -43,6 +43,8 @@ export class RemoteSkybox extends Behaviour {
             this._prevLoadedEnvironment = undefined;
         }
         this.unregisterDropEvents();
+        // Re-apply the skybox/background settings of the main camera
+        this.context.mainCameraComponent?.applyClearFlags();
     }
 
     async setSkybox(url: string | undefined | null) {

package/src/engine-components/SmoothFollow.ts

@@ -20,15 +20,11 @@ export class SmoothFollow extends Behaviour {
     @serializable()
     positionAxes : Axes = Axes.All;
 
-    // @serializable()
-    // rotationAxes : Axes = Axes.All;
-
     flipForward: boolean = false;
 
     private static _invertForward: THREE.Quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
     private _firstUpdate = true;
 
-
     onBeforeRender(): void {
         this.updateNow(false);
     }
@@ -39,9 +35,13 @@ export class SmoothFollow extends Behaviour {
             const wp = getWorldPosition(this.target);
             const fpos = this._firstUpdate || hard ? 1 : Mathf.clamp01(this.context.time.deltaTime * this.followFactor);
             const currentPosition = this.worldPosition;
+
             if(this.positionAxes & Axes.X) currentPosition.x = Mathf.lerp(currentPosition.x, wp.x, fpos);
             if(this.positionAxes & Axes.Y) currentPosition.y = Mathf.lerp(currentPosition.y, wp.y, fpos);
             if(this.positionAxes & Axes.Z) currentPosition.z = Mathf.lerp(currentPosition.z, wp.z, fpos);
+            
+            // TODO lerp distance from target as well
+
             this.worldPosition = currentPosition;
         }
         if (this.rotateFactor > 0) {

package/src/engine-components/SpectatorCamera.ts

@@ -562,9 +562,9 @@ class SpectatorCamNetworking {
     }
 
     destroy() {
-        this.context.connection.stopListening("spectator-follower-changed", this._followerEventMethod);
-        this.context.connection.stopListening("spectator-request-follow", this._requestFollowMethod);
-        this.context.connection.stopListening(RoomEvents.JoinedRoom, this._joinedRoomMethod);
+        this.context.connection.stopListen("spectator-follower-changed", this._followerEventMethod);
+        this.context.connection.stopListen("spectator-request-follow", this._requestFollowMethod);
+        this.context.connection.stopListen(RoomEvents.JoinedRoom, this._joinedRoomMethod);
     }
 
     onSpectatedObjectChanged(target: PlayerView | undefined, _prevId?: string) {

package/src/engine-components/SyncedCamera.ts

@@ -102,7 +102,7 @@ export class SyncedCamera extends Behaviour {
     }
 
     onEnable(): void {
-        this._receiveCallback = this.context.connection.beginListenBinrary(SyncedCameraModelIdentifier, this.onReceivedRemoteCameraInfoBin.bind(this));
+        this._receiveCallback = this.context.connection.beginListenBinary(SyncedCameraModelIdentifier, this.onReceivedRemoteCameraInfoBin.bind(this));
     }
 
     onDisable(): void {

package/src/engine-components/SyncedTransform.ts

@@ -105,7 +105,7 @@ export class SyncedTransform extends Behaviour {
         this.joinedRoomCallback = this.tryGetLastState.bind(this);
         this.context.connection.beginListen(RoomEvents.JoinedRoom, this.joinedRoomCallback);
         this.receivedDataCallback = this.onReceivedData.bind(this);
-        this.context.connection.beginListenBinrary(SyncedTransformIdentifier, this.receivedDataCallback);
+        this.context.connection.beginListenBinary(SyncedTransformIdentifier, this.receivedDataCallback);
     }
 
     onDestroy(): void {
@@ -113,7 +113,7 @@ export class SyncedTransform extends Behaviour {
         if (this.syncDestroy)
             sendDestroyed(this.guid, this.context.connection);
         this._model = null;
-        this.context.connection.stopListening(RoomEvents.JoinedRoom, this.joinedRoomCallback);
+        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.joinedRoomCallback);
         this.context.connection.stopListenBinary(SyncedTransformIdentifier, this.receivedDataCallback);
     }
 

package/src/engine-components/TestRunner.ts

@@ -21,7 +21,7 @@ export class TestSimulateUserData extends Behaviour {
 
     awake(): void {
         if (this.useFlatbuffers) {
-            this.context.connection.beginListenBinrary(SyncedTransformIdentifier, (_mod: SyncedTransformModel) => {
+            this.context.connection.beginListenBinary(SyncedTransformIdentifier, (_mod: SyncedTransformModel) => {
                 // console.log("Received transform");
                 // const sc = SyncedTransformModel.getRootAsSyncedTransformModel(bin);
                 // console.log(mod.guid());

package/src/engine-components/WebARCameraBackground.ts

@@ -0,0 +1,215 @@
+import { Behaviour } from "./Component";
+import { serializable } from "../engine/engine_serialization_decorator";
+import { RGBAColor } from "../engine-components/js-extensions/RGBAColor"
+import { WebXR } from "../engine-components/WebXR";
+import { 
+    Camera as ThreeCamera, 
+    Scene, 
+    Texture, 
+    Mesh, MeshBasicMaterial, 
+    UniformsUtils, 
+    PlaneGeometry, 
+    ShaderLib, 
+    ShaderMaterial,
+    DoubleSide
+} from "three";
+
+export class WebARCameraBackground extends Behaviour {
+
+    awake(): void {
+        WebXR.OptionalFeatures_AR.push('camera-access');
+    }
+
+    @serializable()
+    public backgroundTint: RGBAColor = new RGBAColor(1,1,1,1);
+
+    public get background() {
+        return this.backgroundPlane;
+    }
+
+    private _preRender;
+
+    onEnable(): void {
+        this._preRender = this.preRender.bind(this);
+        this.context.pre_render_callbacks.push(this._preRender);
+
+        if (this.backgroundPlane) {
+            this.gameObject.add(this.backgroundPlane);
+            this.backgroundPlane.visible = false;
+        }
+    }
+
+    onDisable(): void {
+        this.context.pre_render_callbacks = this.context.pre_render_callbacks.filter(cb => cb !== this._preRender);
+
+        if (this.backgroundPlane)
+            this.gameObject.remove(this.backgroundPlane);
+    }
+
+    private backgroundPlane?: Mesh;
+    private threeTexture?: Texture;
+    private forceTextureInitialization = function() {
+        const material = new MeshBasicMaterial();
+        const geometry = new PlaneGeometry();
+        const scene = new Scene();
+        scene.add(new Mesh(geometry, material));
+        const camera = new ThreeCamera();
+    
+        return function forceTextureInitialization(renderer, texture) {
+          material.map = texture;
+          renderer.render(scene, camera);
+        };
+    }();
+
+    // TODO should only attach on session start, and detach on session end
+    private preRender() {
+        if (!this || !this.gameObject) return;
+
+        const xr = this.context.renderer.xr;
+        const frame = xr.getFrame();
+
+        if (frame) {
+            
+            // We're generating a new texture here, and force three to initialize it
+            // from https://stackoverflow.com/a/55084367 to inject a custom texture into three.js
+            if (!this.threeTexture && this.context.renderer) {
+                this.threeTexture = new Texture();
+                // this.threeTexture.encoding = LinearEncoding;
+                this.forceTextureInitialization(this.context.renderer, this.threeTexture);
+            }
+
+            // simple mesh and fullscreen shader to display the camera texture
+            // from three: WebGLBackground
+            if (this.backgroundPlane === undefined) {
+                this.backgroundPlane = makeFullscreenPlane(this.backgroundTint);
+                this.gameObject.add(this.backgroundPlane);
+            }
+
+            // WebXR Raw Camera Access - 
+            // we composite the camera texture into the scene background by rendering it first.
+            this.updateFromFrame(frame);
+        }
+
+        /*
+        if (this.planeMesh) {
+            this.planeMesh.visible = frame != null;
+        }
+        */
+    }
+
+    onBeforeRender(frame: XRFrame | null) {
+        this.updateFromFrame(frame);
+    }
+
+    updateFromFrame(frame: XRFrame | null) {
+        if (!frame) return;
+
+        // https://chromium.googlesource.com/chromium/src/+/7c5ac3c0f95b97cf12be95a5c1c0a8ff163246d8/third_party/webxr_test_pages/webxr-samples/proposals/camera-access-barebones.html
+        const pose = frame.getViewerPose(this.context.renderer.xr.getReferenceSpace()!);
+        if (pose) { 
+            for( const view of pose.views) {
+                // @ts-ignore
+                if ('camera' in view && view.camera) {
+                    const xrManager = this.context.renderer.xr;
+                    let binding = xrManager.getBinding();
+                    // not sure how / why this can be null, but we can recreate it here
+                    if (!binding) binding = new XRWebGLBinding( frame.session, this.context.renderer.getContext() );
+                    
+                    if (binding) {
+                        let glImage: WebGLTexture | null = null;
+                        if ('getCameraImage' in binding) {
+                            // @ts-ignore
+                            glImage = binding.getCameraImage(view.camera);
+
+                            // discussion on exactly this:
+                            // https://discourse.threejs.org/t/using-a-webgltexture-as-texture-for-three-js/46245/8
+                            // HACK from https://stackoverflow.com/a/55084367 to inject a custom texture into three.js
+                            const texProps = this.context.renderer.properties.get(this.threeTexture);
+                            texProps.__webglTexture = glImage;
+
+                            if (this.backgroundPlane) {
+                                //@ts-ignore
+                                this.backgroundPlane.setTexture(this.threeTexture);
+                                this.backgroundPlane.visible = true;
+                            }
+                        }
+                    }
+                    else {
+                        // console.error(view.camera, xrManager)
+                    }
+                }
+                else {
+                    // console.error("NO CAMERA IN VIEW")
+                }
+            }
+        }
+        else {
+            // console.error(this.context.renderer.xr.getReferenceSpace(), frame);
+        }
+    }
+}
+// TODO tint could be an uniform
+let backgroundFragment: string = /* glsl */`
+uniform sampler2D t2D;
+
+varying vec2 vUv;
+
+void main() {
+
+    vec4 texColor = texture2D( t2D, vUv );
+    texColor.w = 1.0;
+
+    // inline sRGB decode
+    texColor = vec4( mix( pow( texColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), texColor.rgb * 0.0773993808, vec3( lessThanEqual( texColor.rgb, vec3( 0.04045 ) ) ) ), texColor.w );
+
+    gl_FragColor = texColor * <backgroundTint>;
+
+    #include <tonemapping_fragment>
+    #include <encodings_fragment>
+
+}
+`;
+
+// not sure where we want to move this and in which form is best (extends Object3D?)
+export function makeFullscreenPlane(tint: RGBAColor ) {
+    const replacementTint = "vec4(" + tint.r.toFixed(3) + "," + tint.g.toFixed(3) + "," + tint.b.toFixed(3) + "," + tint.a.toFixed(3) + ")";
+    console.log(replacementTint);
+    const planeMesh = new Mesh(
+        new PlaneGeometry(2, 2),
+        // @ts-ignore
+        new ShaderMaterial({
+            name: 'BackgroundMaterial',
+            uniforms: UniformsUtils.clone( ShaderLib.background.uniforms ),
+            vertexShader: ShaderLib.background.vertexShader,
+            fragmentShader: backgroundFragment.replace("<backgroundTint>", replacementTint), // ShaderLib.background.fragmentShader,
+            side: DoubleSide,
+            depthTest: false,
+            depthWrite: false,
+            fog: false
+        })
+    );
+
+    planeMesh.geometry.deleteAttribute( 'normal' );
+
+    // add "map" material property so the renderer can evaluate it like for built-in materials
+    Object.defineProperty( planeMesh.material, 'map', {
+        get: function () {
+            return this.threeTexture;
+        }
+    } );
+
+    // Option 1: add the planeMesh to our scene for rendering.
+    // This is useful for applying custom shader effects on the background (instead of using the system composite)
+    planeMesh.renderOrder = -10000; // render first
+    planeMesh.layers.disableAll();
+    planeMesh.layers.enable(2); // ignore raycasts
+    planeMesh.frustumCulled = false;
+
+    // should be a class, for now lets just define a method for the weird way the texture needs to be set
+    // @ts-ignore
+    planeMesh.setTexture = function(texture) {
+        planeMesh.material.uniforms.t2D.value = texture;
+    }
+
+    return planeMesh;
+}

package/src/engine-components/WebARSessionRoot.ts

@@ -84,10 +84,11 @@ export class WebARSessionRoot extends Behaviour {
 
             if (this._isTouching) {
                 // callbacks
-                this.dispatchEvent(new CustomEvent('placedSession', { detail: { pose: pose } }));
+                const poseMatrix = new Matrix4().fromArray(pose.transform.matrix).invert();
+                this.dispatchEvent(new CustomEvent('placedSession', { detail: { pose, poseMatrix } }));
 
                 if (this.webAR) this.webAR.setReticleActive(false);
-                this.placeAt(rig, new Matrix4().fromArray(pose.transform.matrix).invert());
+                this.placeAt(rig, poseMatrix);
                 return true;
             }
         }

package/src/engine-components/WebXR.ts

@@ -78,6 +78,11 @@ export class WebXR extends Behaviour {
     public static get IsARSupported(): boolean { return arSupported; }
     public static get IsVRSupported(): boolean { return vrSupported; }
 
+    private static _optionalFeatures_VR: string[] = ['local-floor', 'bounded-floor', 'hand-tracking', 'high-fixed-foveation-level', 'layers'];
+    private static _optionalFeatures_AR: string[] = ['plane-detection', 'anchors', 'local-floor', 'hand-tracking', 'layers'];
+    public static get OptionalFeatures_VR(): string[] { return this._optionalFeatures_VR; }
+    public static get OptionalFeatures_AR(): string[] { return this._optionalFeatures_AR; }
+
     public static addEventListener(type: string, listener: any): any {
         this.events.addEventListener(type, listener);
         return listener;
@@ -93,7 +98,8 @@ export class WebXR extends Behaviour {
         }
         else
             webXR.__internalAwake();
-        const vrButton = VRButton.createButton(webXR.context.renderer);
+        const options = { optionalFeatures: WebXR.OptionalFeatures_VR };
+        const vrButton = VRButton.createButton(webXR.context.renderer, options);
         vrButton.classList.add('webxr-ar-button');
         vrButton.classList.add('webxr-button');
         this.resetButtonStyles(vrButton);
@@ -106,19 +112,17 @@ export class WebXR extends Behaviour {
     public static createARButton(webXR: WebXR, opts?: CreateButtonOptions): HTMLButtonElement | HTMLAnchorElement {
         webXR.__internalAwake();
         const domOverlayRoot = webXR.webAR?.getAROverlayContainer();
-        const features: any = {};
+        const options: any = { optionalFeatures: [...this.OptionalFeatures_AR] };
         if (domOverlayRoot) {
-            features.domOverlay = { root: domOverlayRoot };
-            features.optionalFeatures = ['hit-test', 'dom-overlay'];
+            options.domOverlay = { root: domOverlayRoot };
+            options.optionalFeatures.push('dom-overlay')
+            options.optionalFeatures.push('hit-test');
         }
         else {
             console.warn("No dom overlay root found, HTML overlays on top of screen-based AR will not work.");
         }
-        features.optionalFeatures.push('plane-detection');
-        // features.optionalFeatures.push('light-estimation');
-        features.optionalFeatures.push('anchors');
 
-        const arButton = ARButton.createButton(webXR.context.renderer, features);
+        const arButton = ARButton.createButton(webXR.context.renderer, options);
         arButton.classList.add('webxr-ar-button');
         arButton.classList.add('webxr-button');
         WebXR.resetButtonStyles(arButton);

package/src/engine-components/WebXRAvatar.ts

@@ -9,7 +9,6 @@ import { AssetReference } from "../engine/engine_addressables";
 import { Object3D } from "three";
 import { VRUserState } from "./WebXRSync";
 import { getParam } from "../engine/engine_utils";
-import { serializable } from "../engine/engine_serialization_decorator";
 import { ViewDevice } from "../engine/engine_playerview";
 import { InstancingUtil } from "../engine/engine_instancing";
 
@@ -332,6 +331,7 @@ export class WebXRAvatar {
             if (this.flags.length <= 0) {
                 if (this.head) {
                     const flag = GameObject.addNewComponent(this.head, XRFlag) as XRFlag;
+                    // TODO: the defaults are wrong? should be Desktop | ThirdPerson ?
                     flag.visibleIn = XRStateFlag.ThirdPerson | XRStateFlag.VR;
                     this.flags.push(flag);
                     if (debug)

package/src/engine-components/WebXRGrabRendering.ts

@@ -54,8 +54,8 @@ export class XRGrabRendering extends Behaviour {
     }
 
     onDisable(): void {
-        this.context.connection.stopListening(XRGrabEvent.StartOrUpdate, this._addOrUpdateSub);
-        this.context.connection.stopListening(XRGrabEvent.End, this._endSub);
+        this.context.connection.stopListen(XRGrabEvent.StartOrUpdate, this._addOrUpdateSub);
+        this.context.connection.stopListen(XRGrabEvent.End, this._endSub);
         AttachedObject.RemoveEventListener(AttachedObjectEvents.WillFree, this._freeSub);
     }
 

package/src/engine-components/WebXRSync.ts

@@ -253,7 +253,7 @@ export class WebXRSync extends Behaviour {
                 this.avatars[evt.id] = undefined;
             }
         });
-        this.context.connection.beginListenBinrary(VRUserStateBufferIdentifier, (state: VrUserStateBuffer) => {
+        this.context.connection.beginListenBinary(VRUserStateBufferIdentifier, (state: VrUserStateBuffer) => {
             // console.log("BUFFER", state);
             const guid = state.guid();
             if (!guid) return;
@@ -299,7 +299,7 @@ export class WebXRSync extends Behaviour {
 
     onDisable() {
         if (this.eventSub_ConnectionEvent)
-            this.context.connection.stopListening(RoomEvents.JoinedRoom, this.eventSub_ConnectionEvent);
+            this.context.connection.stopListen(RoomEvents.JoinedRoom, this.eventSub_ConnectionEvent);
         WebXR.removeEventListener(WebXREvent.XRStarted, this.eventSub_WebXRStartEvent);
         WebXR.removeEventListener(WebXREvent.XRUpdate, this.eventSub_WebXRUpdateEvent);
         WebXR.removeEventListener(WebXREvent.XRStopped, this.eventSub_WebXREndEvent);

package/src/engine-components/codegen/components.ts

@@ -7,6 +7,7 @@ export { AnimationExtension } from "../export/usdz/extensions/Animation";
 export { AnimationTrackHandler } from "../timeline/TimelineTracks";
 export { Animator } from "../Animator";
 export { AnimatorController } from "../AnimatorController";
+export { Antialiasing } from "../postprocessing/Effects/Antialiasing";
 export { AttachedObject } from "../WebXRController";
 export { AudioListener } from "../AudioListener";
 export { AudioSource } from "../AudioSource";
@@ -23,6 +24,7 @@ export { AvatarModel } from "../AvatarLoader";
 export { AxesHelper } from "../AxesHelper";
 export { BaseUIComponent } from "../ui/BaseUIComponent";
 export { BasicIKConstraint } from "../BasicIKConstraint";
+export { Bloom } from "../postprocessing/Effects/Bloom";
 export { BoxCollider } from "../Collider";
 export { BoxGizmo } from "../Gizmos";
 export { BoxHelperComponent } from "../BoxHelperComponent";
@@ -34,13 +36,15 @@ export { CanvasGroup } from "../ui/CanvasGroup";
 export { CapsuleCollider } from "../Collider";
 export { CharacterController } from "../CharacterController";
 export { CharacterControllerInput } from "../CharacterController";
+export { ChromaticAberration } from "../postprocessing/Effects/ChromaticAberration";
 export { Collider } from "../Collider";
-export { ColorAdjustments } from "../Volume";
+export { ColorAdjustments } from "../postprocessing/Effects/ColorAdjustments";
 export { ColorBySpeedModule } from "../ParticleSystemModules";
 export { ColorOverLifetimeModule } from "../ParticleSystemModules";
 export { ControlTrackHandler } from "../timeline/TimelineTracks";
 export { Deletable } from "../DeleteBox";
 export { DeleteBox } from "../DeleteBox";
+export { DepthOfField } from "../postprocessing/Effects/DepthOfField";
 export { DeviceFlag } from "../DeviceFlag";
 export { DragControls } from "../DragControls";
 export { DropListener } from "../DropListener";
@@ -92,9 +96,11 @@ export { ParticleBurst } from "../ParticleSystemModules";
 export { ParticleSubEmitter } from "../ParticleSystemSubEmitter";
 export { ParticleSystem } from "../ParticleSystem";
 export { ParticleSystemRenderer } from "../ParticleSystem";
+export { PixelationEffect } from "../postprocessing/Effects/Pixelation";
 export { PlayableDirector } from "../timeline/PlayableDirector";
 export { PlayerColor } from "../PlayerColor";
 export { PointerEventData } from "../ui/PointerEvents";
+export { PostProcessingHandler } from "../postprocessing/PostProcessingHandler";
 export { RawImage } from "../ui/Image";
 export { Raycaster } from "../ui/Raycaster";
 export { Rect } from "../ui/RectTransform";
@@ -109,6 +115,7 @@ export { Rigidbody } from "../RigidBody";
 export { RotationBySpeedModule } from "../ParticleSystemModules";
 export { RotationOverLifetimeModule } from "../ParticleSystemModules";
 export { ScreenCapture } from "../ScreenCapture";
+export { ScreenSpaceAmbientOcclusion } from "../postprocessing/Effects/ScreenspaceAmbientOcclusion";
 export { ShadowCatcher } from "../ShadowCatcher";
 export { ShapeModule } from "../ParticleSystemModules";
 export { SignalAsset } from "../timeline/SignalAsset";
@@ -137,7 +144,7 @@ export { TestRunner } from "../TestRunner";
 export { TestSimulateUserData } from "../TestRunner";
 export { Text } from "../ui/Text";
 export { TextureSheetAnimationModule } from "../ParticleSystemModules";
-export { ToneMapping } from "../Volume";
+export { ToneMapping } from "../postprocessing/Effects/Tonemapping";
 export { TrailModule } from "../ParticleSystemModules";
 export { TransformData } from "../export/usdz/extensions/Animation";
 export { TransformGizmo } from "../TransformGizmo";
@@ -148,13 +155,14 @@ export { USDZExporter } from "../export/usdz/USDZExporter";
 export { VelocityOverLifetimeModule } from "../ParticleSystemModules";
 export { VerticalLayoutGroup } from "../ui/Layout";
 export { VideoPlayer } from "../VideoPlayer";
+export { Vignette } from "../postprocessing/Effects/Vignette";
 export { Voip } from "../Voip";
-export { Volume } from "../Volume";
-export { VolumeComponent } from "../Volume";
-export { VolumeParameter } from "../Volume";
-export { VolumeProfile } from "../Volume";
+export { Volume } from "../postprocessing/Volume";
+export { VolumeParameter } from "../postprocessing/VolumeParameter";
+export { VolumeProfile } from "../postprocessing/VolumeProfile";
 export { VRUserState } from "../WebXRSync";
 export { WebAR } from "../WebXR";
+export { WebARCameraBackground } from "../WebARCameraBackground";
 export { WebARSessionRoot } from "../WebARSessionRoot";
 export { WebXR } from "../WebXR";
 export { WebXRAvatar } from "../WebXRAvatar";