Needle Engine 3.24.0

Files changed (28) hide show

src/engine-components/Animator.ts +6 -3
src/engine-components/AnimatorController.ts +5 -4
src/engine-components/ui/Button.ts +3 -3
src/engine-components/Camera.ts +25 -13
src/engine-components/CameraUtils.ts +6 -5
src/engine-components/codegen/components.ts +1 -0
src/engine/debug/debug_overlay.ts +1 -1
src/engine/engine_context_registry.ts +2 -0
src/engine/engine_context.ts +36 -11
src/engine/engine_create_objects.ts +5 -5
src/engine/engine_gizmos.ts +8 -4
src/engine/engine_physics_rapier.ts +4 -3
src/engine/engine_scenetools.ts +1 -0
src/engine-components/export/gltf/GltfExport.ts +12 -18
src/engine-components/ui/Graphic.ts +9 -3
src/engine/extensions/NEEDLE_techniques_webgl.ts +2 -1
src/engine-components/ParticleSystem.ts +18 -6
src/engine-components/timeline/PlayableDirector.ts +2 -0
src/engine/codegen/register_types.ts +4 -2
src/engine-components/ShadowCatcher.ts +73 -35
src/engine-components/Skybox.ts +15 -8
src/engine-components/ui/Text.ts +4 -2
src/engine-components/export/usdz/ThreeUSDZExporter.ts +10 -6
src/engine-components/timeline/TimelineModels.ts +1 -0
src/engine-components/timeline/TimelineTracks.ts +9 -3
src/engine-components/webxr/WebXRImageTracking.ts +1 -1
src/engine-components/webxr/WebXRSync.ts +2 -2
src/engine-components/ContactShadows.ts +249 -0

src/engine-components/Animator.ts CHANGED Viewed

@@ -87,8 +87,9 @@
     /**@deprecated use setBool */
     SetBool(name: string | number, val: boolean) { this.setBool(name, val); }
     setBool(name: string | number, value: boolean) {
+        if(this.runtimeAnimatorController?.getBool(name) !== value)
+            this._parametersAreDirty = true;
         this.runtimeAnimatorController?.setBool(name, value);
-        this._parametersAreDirty = true;
     }
     /**@deprecated use getBool */
@@ -100,8 +101,9 @@
     /**@deprecated use setFloat */
     SetFloat(name: string | number, val: number) { this.setFloat(name, val); }
     setFloat(name: string | number, val: number) {
+        if(this.runtimeAnimatorController?.getFloat(name) !== val)
+            this._parametersAreDirty = true;
         this.runtimeAnimatorController?.setFloat(name, val);
-        this._parametersAreDirty = true;
     }
     /**@deprecated use getFloat */
@@ -113,8 +115,9 @@
     /**@deprecated use setInteger */
     SetInteger(name: string | number, val: number) { this.setInteger(name, val); }
     setInteger(name: string | number, val: number) {
+        if(this.runtimeAnimatorController?.getInteger(name) !== val)
+            this._parametersAreDirty = true;
         this.runtimeAnimatorController?.setInteger(name, val);
-        this._parametersAreDirty = true;
     }
     /**@deprecated use getInteger */

src/engine-components/AnimatorController.ts CHANGED Viewed

@@ -483,8 +483,9 @@
             offsetNormalized = Math.max(0, Math.min(1, offsetNormalized));
             if (state.cycleOffsetParameter) {
-                const val = this.getFloat(state.cycleOffsetParameter);
+                let val = this.getFloat(state.cycleOffsetParameter);
                 if (typeof val === "number") {
+                    if (val < 0) val += 1;
                     offsetNormalized += val;
                     offsetNormalized %= 1;
                 }
@@ -494,13 +495,13 @@
                 offsetNormalized += state.cycleOffset
                 offsetNormalized %= 1;
             }
             if (action.isRunning())
                 action.stop();
             action.reset();
             action.enabled = true;
             const duration = state.motion.clip!.duration;
-            action.time = offsetNormalized * duration;
+            // if we are looping to the same state we don't want to offset the current start time
+            action.time = isSelf ? 0 : offsetNormalized * duration;
             if (action.timeScale < 0) action.time = duration - action.time;
             action.clampWhenFinished = true;
             action.setLoop(LoopOnce, 0);
@@ -1012,7 +1013,7 @@
     }
     onDeserialize(data: AnimatorControllerModel & { __type?: string }, context: SerializationContext) {
-        if (context.type === AnimatorController && data.__type === "AnimatorController")
+        if (context.type === AnimatorController && data?.__type === "AnimatorController")
             return new AnimatorController(data);
         return undefined;
     }

src/engine-components/ui/Button.ts CHANGED Viewed

@@ -271,10 +271,10 @@
         image.setupState(disabledState);
     }
-    private getFinalColor(col: RGBAColor, col2?: RGBAColor) {
+    private getFinalColor(col: RGBAColor, col2?: RGBAColor): RGBAColor {
         if (col2) {
-            return col.clone().multiply(col2);
+            return col.clone().multiply(col2).convertLinearToSRGB() as RGBAColor;
         }
-        return col.clone();
+        return col.clone().convertLinearToSRGB() as RGBAColor;
     }
 }

src/engine-components/Camera.ts CHANGED Viewed

@@ -11,6 +11,7 @@
 import { EquirectangularReflectionMapping, OrthographicCamera, PerspectiveCamera, Ray, SRGBColorSpace, Vector3 } from "three";
 import { OrbitControls } from "./OrbitControls.js";
 import { RenderTexture } from "../engine/engine_texture.js";
+import { Texture } from "three";
 export enum ClearFlags {
     Skybox = 1,
@@ -172,18 +173,18 @@
     private _backgroundColor?: RGBAColor;
     private _fov?: number;
-    private _cam: THREE.PerspectiveCamera | THREE.OrthographicCamera | null = null;
+    private _cam: PerspectiveCamera | OrthographicCamera | null = null;
     private _clearFlags: ClearFlags = ClearFlags.SolidColor;
     private _skybox?: CameraSkybox;
-    public get cam(): THREE.PerspectiveCamera | THREE.OrthographicCamera {
+    public get cam(): PerspectiveCamera | OrthographicCamera {
         if (this.activeAndEnabled)
             this.buildCamera();
         return this._cam!;
     }
-    private static _origin: THREE.Vector3 = new Vector3();
-    private static _direction: THREE.Vector3 = new Vector3();
+    private static _origin: Vector3 = new Vector3();
+    private static _direction: Vector3 = new Vector3();
     public screenPointToRay(x: number, y: number, ray?: Ray): Ray {
         const cam = this.cam;
         const origin = Camera._origin;
@@ -234,6 +235,11 @@
     onBeforeRender() {
         if (this._cam) {
+            // because the background color may be animated!
+            if (this._clearFlags === ClearFlags.SolidColor)
+                this.applyClearFlagsIfIsActiveCamera();
             if (this._targetTexture) {
                 if (this.context.isManagedExternally) {
                     // TODO: rendering with r3f renderer does throw an shader error for some reason?
@@ -264,7 +270,7 @@
         const cameraAlreadyCreated = this.gameObject["isCamera"];
         // TODO: when exporting from blender we already have a camera in the children
-        let cam: THREE.PerspectiveCamera | THREE.OrthographicCamera | null = null;
+        let cam: PerspectiveCamera | OrthographicCamera | null = null;
         if (cameraAlreadyCreated) {
             cam = this.gameObject as any;
             cam?.layers.enableAll();
@@ -272,7 +278,7 @@
                 this._fov = cam.fov;
         }
         else
-            cam = this.gameObject.children[0] as THREE.PerspectiveCamera | THREE.OrthographicCamera | null;
+            cam = this.gameObject.children[0] as PerspectiveCamera | OrthographicCamera | null;
         if (cam && cam.isCamera) {
             if (cam instanceof PerspectiveCamera) {
                 if (this._fov)
@@ -370,25 +376,28 @@
     static backgroundShouldBeTransparent(context: Context) {
         const session = context.renderer.xr?.getSession();
         if (!session) return false;
+        if (typeof session["_transparent"] === "boolean") {
+            return session["_transparent"];
+        }
         const environmentBlendMode = session.environmentBlendMode;
         if (debug)
             showBalloonMessage("Environment blend mode: " + environmentBlendMode + " on " + navigator.userAgent);
-        const transparent = environmentBlendMode === 'additive' || environmentBlendMode === 'alpha-blend';
+        let transparent = environmentBlendMode === 'additive' || environmentBlendMode === 'alpha-blend';
         if (context.xrSessionMode === XRSessionMode.ImmersiveAR) {
             if (environmentBlendMode === "opaque") {
                 // workaround for Quest 2 returning opaque when it should be alpha-blend
                 // check user agent if this is the Quest browser and return true if so
                 if (navigator.userAgent?.includes("OculusBrowser")) {
-                    return true;
+                    transparent = true;
                 }
                 // Mozilla WebXR Viewer
                 else if (navigator.userAgent?.includes("Mozilla") && navigator.userAgent?.includes("Mobile WebXRViewer/v2")) {
-                    return true;
+                    transparent = true;
                 }
             }
         }
+        session["_transparent"] = transparent;
         return transparent;
     }
 }
@@ -397,7 +406,7 @@
 class CameraSkybox {
     private _camera: Camera;
-    private _skybox?: THREE.Texture;
+    private _skybox?: Texture;
     get context() { return this._camera?.context; }
@@ -406,9 +415,12 @@
     }
     enable() {
-        this._skybox = this.context.lightmaps.tryGetSkybox(this._camera.sourceId) as THREE.Texture;
+        this._skybox = this.context.lightmaps.tryGetSkybox(this._camera.sourceId) as Texture;
         if (!this._skybox) {
-            console.warn(`Camera \"${this._camera.name}\" failed to load/find skybox texture`, this._camera.sourceId, this.context.lightmaps, "Current background: ", this.context.scene.background);
+            if (!this["_did_log_failed_to_find_skybox"]) {
+                this["_did_log_failed_to_find_skybox"] = true;
+                console.warn(`Camera \"${this._camera.name}\" failed to load/find skybox texture`, this._camera.sourceId, this.context.lightmaps, "Current background: ", this.context.scene.background);
+            }
             if (debug || isDevEnvironment())
                 showBalloonWarning(`Camera \"${this._camera.name}\" has no skybox texture`);
         }

src/engine-components/CameraUtils.ts CHANGED Viewed

@@ -5,7 +5,7 @@
 import { RGBAColor } from "./js-extensions/RGBAColor.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import { getCameraController } from "../engine/engine_camera.js";
-import { Camera } from "./Camera.js";
+import { Camera, ClearFlags } from "./Camera.js";
 import { NeedleEngineHTMLElement } from "../engine/engine_element.js";
 import { getParam } from "../engine/engine_utils.js";
 import { Context } from "../engine/engine_context.js";
@@ -22,12 +22,13 @@
     const camInstance = new Camera();
     camInstance.sourceId = evt.files?.[0]?.src ?? "unknown"
-    // Set the clearFlags to a skybox if we have one
-    if((evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId))
-        camInstance.clearFlags = 1;
+    // Set the clearFlags to a skybox if we have one OR if the user set a skybox image attribute
+    if(evt.context.domElement.getAttribute("skybox-image")?.length || 0 > 0 || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId))
+        camInstance.clearFlags = ClearFlags.Skybox;
     else
         // TODO provide a nice default skybox
-        camInstance.clearFlags = 2;
+        camInstance.clearFlags = ClearFlags.SolidColor;
     camInstance.backgroundColor = new RGBAColor(0.5, 0.5, 0.5, 1);
     camInstance.fieldOfView = 35;
     // TODO: can we store the backgroundBlurriness in the gltf file somewhere except inside the camera?

src/engine-components/codegen/components.ts CHANGED Viewed

@@ -51,6 +51,7 @@
 export { ColorBySpeedModule } from "../ParticleSystemModules.js";
 export { ColorOverLifetimeModule } from "../ParticleSystemModules.js";
 export { Component } from "../Component.js";
+export { ContactShadows } from "../ContactShadows.js";
 export { ControlTrackHandler } from "../timeline/TimelineTracks.js";
 export { CustomBranding } from "../export/usdz/USDZExporter.js";
 export { Deletable } from "../DeleteBox.js";

src/engine/debug/debug_overlay.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 const debug = getParam("debugdebug");
 let hide = false;
-if (getParam("noerrors")) hide = true;
+if (getParam("noerrors") || getParam("nooverlaymessages")) hide = true;
 const globalErrorContainerKey = "needle_engine_global_error_container";

src/engine/engine_context_registry.ts CHANGED Viewed

@@ -7,6 +7,8 @@
     ContextCreationStart = "ContextCreationStart",
     /** Called when the context has been created, before the first frame */
     ContextCreated = "ContextCreated",
+    /** Called after the first frame has been rendered after creation */
+    ContextFirstFrameRendered = "ContextFirstFrameRendered",
     /** Called when the context has been destroyed */
     ContextDestroyed = "ContextDestroyed",
     /** Called when the context could not find a camera during creation */

src/engine/engine_context.ts CHANGED Viewed

@@ -173,6 +173,13 @@
 	 */
 	targetFrameRate?: number | { value?: number };
+	/** Use a higher number for more accurate physics simulation.
+	 * When undefined physics steps will be 1 for mobile devices and 5 for desktop devices
+	 * Set to 0 to disable physics updates
+	 * TODO: changing physics steps is currently not supported because then forces that we get from the character controller and rigidbody et al are not correct anymore - this needs to be properly tested before making this configureable
+	*/
+	private physicsSteps?: number = 1;
 	/** used to append to loaded assets */
 	hash?: string;
@@ -941,6 +948,14 @@
 		}
 	}
+	/** Call to **manually** perform physics steps.
+	 * By default the context uses the `physicsSteps` property to perform steps during the update loop
+	 * If you just want to increase the accuracy of physics you can instead set the `physicsSteps` property to a higher value
+	 * */
+	public updatePhysics(steps: number) {
+		this.internalUpdatePhysics(steps);
+	}
 	private _lastTimestamp = 0;
 	private _accumulatedTime = 0;
 	private _dispatchReadyAfterFrame = false;
@@ -1039,18 +1054,12 @@
 		this.executeCoroutines(FrameEvent.LateUpdate);
 		if (this.onHandlePaused()) return false;
-		if (this.physics.engine) {
-			const physicsSteps = 1;
-			const dt = this.time.deltaTime / physicsSteps;
-			for (let i = 0; i < physicsSteps; i++) {
-				this._currentFrameEvent = FrameEvent.PrePhysicsStep;
-				this.executeCoroutines(FrameEvent.PrePhysicsStep);
-				this.physics.engine.step(dt);
-				this._currentFrameEvent = FrameEvent.PostPhysicsStep;
-				this.executeCoroutines(FrameEvent.PostPhysicsStep);
-			}
-			this.physics.engine.postStep();
+		if (this.physicsSteps === undefined) {
+			this.physicsSteps = 1;
 		}
+		if (this.physics.engine && this.physicsSteps > 0) {
+			this.internalUpdatePhysics(this.physicsSteps);
+		}
 		if (this.onHandlePaused()) return false;
@@ -1085,6 +1094,21 @@
 		return true;
 	}
+	private internalUpdatePhysics(steps: number) {
+		if (!this.physics.engine) return false;
+		const physicsSteps = steps;
+		const dt = this.time.deltaTime / physicsSteps;
+		for (let i = 0; i < physicsSteps; i++) {
+			this._currentFrameEvent = FrameEvent.PrePhysicsStep;
+			this.executeCoroutines(FrameEvent.PrePhysicsStep);
+			this.physics.engine.step(dt);
+			this._currentFrameEvent = FrameEvent.PostPhysicsStep;
+			this.executeCoroutines(FrameEvent.PostPhysicsStep);
+		}
+		this.physics.engine.postStep();
+		return true;
+	}
 	private internalOnRender() {
 		if (!this.isManagedExternally) {
 			looputils.runPrewarm(this);
@@ -1127,6 +1151,7 @@
 		if (this._dispatchReadyAfterFrame) {
 			this._dispatchReadyAfterFrame = false;
 			this.domElement.dispatchEvent(new CustomEvent("ready"));
+			ContextRegistry.dispatchCallback(ContextEvent.ContextFirstFrameRendered, this);
 		}
 	}

src/engine/engine_create_objects.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import { PlaneGeometry, MeshBasicMaterial, DoubleSide, Mesh, Material, MeshStandardMaterial, BoxGeometry, SphereGeometry } from "three"
+import { PlaneGeometry, MeshBasicMaterial, DoubleSide, Mesh, Material, MeshStandardMaterial, BoxGeometry, SphereGeometry, ColorRepresentation } from "three"
 export enum PrimitiveType {
     Quad = 0,
     Cube = 1,
@@ -16,20 +15,21 @@
     static createPrimitive(type: PrimitiveType, opts?: ObjectOptions): Mesh {
         let obj: Mesh;
+        const color = 0xffffff;
         switch (type) {
             case PrimitiveType.Quad:
                 const quadGeo = new PlaneGeometry(1, 1, 1, 1);
-                const quadMat = opts?.material ?? new MeshBasicMaterial({ color: 0xffffff });
+                const quadMat = opts?.material ?? new MeshStandardMaterial({ color: color });
                 obj = new Mesh(quadGeo, quadMat);
                 break;
             case PrimitiveType.Cube:
                 const boxGeo = new BoxGeometry(1, 1, 1);
-                const boxMat = opts?.material ?? new MeshStandardMaterial({ color: 0xdddddd });
+                const boxMat = opts?.material ?? new MeshStandardMaterial({ color: color });
                 obj = new Mesh(boxGeo, boxMat);
                 break;
             case PrimitiveType.Sphere:
                 const sphereGeo = new SphereGeometry(.5, 16, 16);
-                const sphereMat = opts?.material ?? new MeshStandardMaterial({ color: 0xdddddd });
+                const sphereMat = opts?.material ?? new MeshStandardMaterial({ color: color });
                 obj = new Mesh(sphereGeo, sphereMat);
                 break;
         }

src/engine/engine_gizmos.ts CHANGED Viewed

@@ -3,11 +3,13 @@
 import { getWorldPosition, lookAtObject, setWorldPositionXYZ } from './engine_three_utils.js';
 import type { Vec3, Vec4 } from './engine_types.js';
 import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
+import { getParam } from './engine_utils.js';
 const _tmp = new Vector3();
 const _tmp2 = new Vector3();
 const _quat = new Quaternion();
+const debug = getParam("debuggizmos");
 const defaultColor: ColorRepresentation = 0x888888;
 export type LabelHandle = {
@@ -167,7 +169,8 @@
         if (backgroundColor && typeof backgroundColor === "string" && backgroundColor?.length >= 8 && backgroundColor.startsWith("#")) {
             opacity = parseInt(backgroundColor.substring(7), 16) / 255;
             backgroundColor = backgroundColor.substring(0, 7);
-            console.log(backgroundColor, opacity);
+            if (debug)
+                console.log(backgroundColor, opacity);
         }
         else if (typeof backgroundColor === "object" && backgroundColor["a"] !== undefined) {
             opacity = backgroundColor["a"]
@@ -184,13 +187,13 @@
                 backgroundColor: backgroundColor ?? undefined,
                 backgroundOpacity: opacity,
                 textContent: text,
-                borderRadius: .1,
-                padding: .1,
+                borderRadius: 1 * size,
+                padding: 1 * size,
             });
             const global = this;
             const labelHandle = element as LabelHandle & Text;
             labelHandle.setText = function (str: string) {
-                this.set({ textContent: str });
+                this.set({ textContent: str, whiteSpace: 'pre' });
                 global.tmuiNeedsUpdate = true;
             };
         }
@@ -201,6 +204,7 @@
                 backgroundColor: backgroundColor ?? undefined,
                 backgroundOpacity: opacity,
                 textContent: text,
+                whiteSpace: 'pre',
             });
             // const handle = element as any as LabelHandle;
             // handle.setText(text);

src/engine/engine_physics_rapier.ts CHANGED Viewed

@@ -18,7 +18,7 @@
 import { foreachComponent } from './engine_gameobject.js';
 import { ActiveCollisionTypes, ActiveEvents, CoefficientCombineRule, Ball, Collider, ColliderDesc, EventQueue, JointData, QueryFilterFlags, RigidBody, RigidBodyType, ShapeColliderTOI, World, Ray, ShapeType, Cuboid } from '@dimforge/rapier3d-compat';
-import { CollisionDetectionMode, PhysicsMaterial, PhysicsMaterialCombine } from '../engine/engine_physics.types.js';
+import { CollisionDetectionMode, type PhysicsMaterial, PhysicsMaterialCombine } from '../engine/engine_physics.types.js';
 import { Gizmos } from './engine_gizmos.js';
 import { Mathf } from './engine_math.js';
 import { SphereOverlapResult } from './engine_types.js';
@@ -748,7 +748,8 @@
         // otherwise rapier will compute the mass properties based on the collider shape and density
         // https://rapier.rs/docs/user_guides/javascript/rigid_bodies#mass-properties
         if (useExplicitMassProperties) {
-            desc.setDensity(0);
+            desc.setDensity(.000001);
+            desc.setMass(.000001);
         }
         const col = this.world.createCollider(desc, rigidBody);
@@ -886,7 +887,7 @@
             rigidbody.setAdditionalMass(rb.mass, false);
             for (let i = 0; i < rigidbody.numColliders(); i++) {
                 const col = rigidbody.collider(i);
-                col.setDensity(0);
+                col.setDensity(0.0000001);
             }
             rigidbody.recomputeMassPropertiesFromColliders();
         }

src/engine/engine_scenetools.ts CHANGED Viewed

@@ -105,6 +105,7 @@
 export async function parseSync(context: Context, data: string | ArrayBuffer, path: string, seed: number | UIDProvider | null): Promise<GLTF | undefined> {
     if (typeof path !== "string") {
         console.warn("Parse gltf binary without path, this might lead to errors in resolving extensions. Please provide the source path of the gltf/glb file", path, typeof path);
+        path = "";
     }
     if (printGltf) console.log("Parse glTF", path)
     const loader = await createGLTFLoader(path, context);

src/engine-components/export/gltf/GltfExport.ts CHANGED Viewed

@@ -24,21 +24,10 @@
 // @generate-component
 export class GltfExportBox extends BoxHelperComponent {
     sceneRoot?: THREE.Object3D;
-    start() {
-        this.startCoroutine(this.updateGltfBox());
-    }
-    *updateGltfBox() {
-        while (true) {
-            for (let i = 0; i < 10; i++) yield;
-        }
-    }
 }
 export class GltfExport extends Behaviour {
     @serializable()
     binary: boolean = true;
@@ -55,7 +44,11 @@
             this.objects = [this.context.scene];
         const opts = { binary: this.binary, pivot: GltfExport.calculateCenter(this.objects) };
-        const res = await this.export(this.objects, opts);
+        const res = await this.export(this.objects, opts).catch(err => {
+            console.error(err);
+            return false;
+        })
+        if (res === false) return false;
         if (!this.binary) {
             if (!name.endsWith(".gltf"))
@@ -67,6 +60,7 @@
             GltfExport.saveArrayBuffer(res, name);
         else
             GltfExport.saveJson(res, name);
+        return true;
     }
     async export(objectsToExport: Object3D[], opts?: ExportOptions): Promise<any> {
@@ -79,12 +73,11 @@
         if (!this.exporter) {
             // Instantiate a exporter
             this.exporter = new GLTFExporter();
-            //@ts-ignore
             this.exporter.register(writer => new GLTFMeshGPUInstancingExtension(writer));
-            this.ext = new NEEDLE_components();
-            //@ts-ignore
-            this.ext.registerExport(this.exporter);
+            // TODO
+            // this.ext = new NEEDLE_components();
+            // this.ext.registerExport(this.exporter);
         }
         GltfExport.filterTopmostParent(objectsToExport);
@@ -128,7 +121,8 @@
         });
         const serializationContext = new SerializationContext(exportScene);
-        this.ext!.context = serializationContext;
+        if (this.ext)
+            this.ext.context = serializationContext;
         return new Promise((resolve, reject) => {
             if (debugExport) console.log("Starting glTF export.")

src/engine-components/ui/Graphic.ts CHANGED Viewed

@@ -33,6 +33,7 @@
             this._color = new RGBAColor(1, 1, 1, 1);
         }
         this._color.copy(col);
+        this.onColorChanged();
     }
     private _alphaFactor: number = 1;
@@ -44,9 +45,12 @@
         return this._alphaFactor;
     }
+    private sRGBColor: Color = new Color(1, 0, 1);
     protected onColorChanged() {
         if (this.uiObject) {
-            _colorStateObject.backgroundColor = this._color;
+            this.sRGBColor.copy(this._color);
+            this.sRGBColor.convertLinearToSRGB();
+            _colorStateObject.backgroundColor = this.sRGBColor;
             _colorStateObject.backgroundOpacity = this._color.alpha * this._alphaFactor;
             this.applyEffects(_colorStateObject, this._alphaFactor);
             this.uiObject.set(_colorStateObject);
@@ -164,6 +168,8 @@
         this.controlsChildLayout = false;
         this._currentlyCreatingPanel = false;
         this.onAfterCreated();
+        this.onColorChanged();
     }
     protected onBeforeCreate(_opts: any) { }
@@ -192,7 +198,7 @@
         this.setOptions({ backgroundOpacity: 0 });
         if (tex) {
             // workaround for https://github.com/needle-tools/needle-engine-support/issues/109
-            if (tex.colorSpace === SRGBColorSpace) {
+            // if (tex.colorSpace === SRGBColorSpace || !tex.colorSpace || true) {
                 if (Graphic.textureCache.has(tex)) {
                     tex = Graphic.textureCache.get(tex)!;
                 } else {
@@ -209,7 +215,7 @@
                         tex = clone;
                     }
                 }
-            }
+            // }
             this.setOptions({ backgroundImage: tex, borderRadius: 0, backgroundOpacity: this.color.alpha, backgroundSize: "stretch" });
         }
         else {

src/engine/extensions/NEEDLE_techniques_webgl.ts CHANGED Viewed

@@ -452,8 +452,9 @@
                                 const indexString = val.substring("/textures/".length);
                                 const texIndex = Number.parseInt(indexString);
                                 if (texIndex >= 0) {
-                                    const tex = await this.parser.getDependency("texture", texIndex);
+                                    let tex = await this.parser.getDependency("texture", texIndex);
                                     if (tex instanceof Texture) {
+                                        tex = tex.clone();
                                         tex.colorSpace = LinearSRGBColorSpace;
                                         tex.needsUpdate = true;
                                     }

src/engine-components/ParticleSystem.ts CHANGED Viewed

@@ -509,6 +509,7 @@
 const $colorLerpFactor = Symbol("colorLerpFactor");
 const tempColor = new RGBAColor(1, 1, 1, 1);
+const col = new RGBAColor(1, 1, 1, 1);
 class ColorBehaviour extends ParticleSystemBaseBehaviour {
     type: string = "NeedleColor";
@@ -517,7 +518,7 @@
     private _init(particle: Particle) {
         const materialColor = this.system.renderer.particleMaterial;
-        const col = this.system.main.startColor.evaluate(Math.random());
+        col.copy(this.system.main.startColor.evaluate(Math.random()));
         if (materialColor?.color) {
             tempColor.copy(materialColor.color);
             col.multiply(tempColor)
@@ -607,15 +608,26 @@
         }
         return factor;
     }
+    private flatWhiteTexture?: THREE.Texture;
+    private clonedTexture: { original?: THREE.Texture, clone?: THREE.Texture } = { original: undefined, clone: undefined };
     get texture(): THREE.Texture {
         const mat = this.material;
         if (mat && mat["map"]) {
-            const tex = mat["map"]!;
-            tex.premultiplyAlpha = false;
-            tex.colorSpace = THREE.LinearSRGBColorSpace;
-            return tex;
+            const original = mat["map"]! as THREE.Texture;
+            // cache the last original one so we're not creating tons of clones
+            if (this.clonedTexture.original !== original || !this.clonedTexture.clone)
+            {
+                const tex = original.clone();
+                tex.premultiplyAlpha = false;
+                tex.colorSpace = THREE.LinearSRGBColorSpace;
+                this.clonedTexture.original = original;
+                this.clonedTexture.clone = tex;
+            }
+            return this.clonedTexture.clone;
         }
-        return createFlatTexture(new RGBAColor(1, 1, 1, 1), 1)
+        if (!this.flatWhiteTexture)
+            this.flatWhiteTexture = createFlatTexture(new RGBAColor(1, 1, 1, 1), 1)
+        return this.flatWhiteTexture;
     }
     get startTileIndex() { return new TextureSheetStartFrameGenerator(this.system); }
     get uTileCount() { return this.anim.enabled ? this.anim?.numTilesX : undefined }

src/engine-components/timeline/PlayableDirector.ts CHANGED Viewed

@@ -560,6 +560,8 @@
                 const audio = new Tracks.AudioTrackHandler();
                 audio.director = this;
                 audio.track = track;
+                audio.audioSource = track.outputs.find(o => o instanceof AudioSource) as AudioSource;
                 this._audioTracks.push(audio);
                 if (!audioListener) {
                     // If the scene doesnt have an AudioListener we add one to the main camera

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore.js"
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components.js";
 import { ActionBuilder } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
@@ -53,6 +53,7 @@
 import { ColorBySpeedModule } from "../../engine-components/ParticleSystemModules.js";
 import { ColorOverLifetimeModule } from "../../engine-components/ParticleSystemModules.js";
 import { Component } from "../../engine-components/Component.js";
+import { ContactShadows } from "../../engine-components/ContactShadows.js";
 import { ControlTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { CustomBranding } from "../../engine-components/export/usdz/USDZExporter.js";
 import { Deletable } from "../../engine-components/DeleteBox.js";
@@ -217,7 +218,7 @@
 import { XRGrabRendering } from "../../engine-components/webxr/WebXRGrabRendering.js";
 import { XRRig } from "../../engine-components/webxr/WebXRRig.js";
 import { XRState } from "../../engine-components/XRFlag.js";
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("ActionBuilder", ActionBuilder);
@@ -271,6 +272,7 @@
 TypeStore.add("ColorBySpeedModule", ColorBySpeedModule);
 TypeStore.add("ColorOverLifetimeModule", ColorOverLifetimeModule);
 TypeStore.add("Component", Component);
+TypeStore.add("ContactShadows", ContactShadows);
 TypeStore.add("ControlTrackHandler", ControlTrackHandler);
 TypeStore.add("CustomBranding", CustomBranding);
 TypeStore.add("Deletable", Deletable);

src/engine-components/ShadowCatcher.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import { Behaviour, GameObject } from "./Component.js";
 import { RGBAColor } from "./js-extensions/RGBAColor.js";
+import { ShadowMaterial, AdditiveBlending, Material, MeshBasicMaterial, Mesh, MeshStandardMaterial } from "three";
+import { serializable } from "../engine/engine_serialization_decorator.js";
+import { ObjectUtils, PrimitiveType } from "../engine/engine_create_objects.js";
 import { Renderer } from "./Renderer.js";
-import { ShadowMaterial, AdditiveBlending, Material } from "three";
-import { serializable } from "../engine/engine_serialization_decorator.js";
 enum ShadowMode {
     ShadowMask = 0,
@@ -20,8 +21,44 @@
     @serializable(RGBAColor)
     shadowColor: RGBAColor = new RGBAColor(0, 0, 0, 1);
+    private targetMesh?: Mesh;
     awake() {
+        // if there's no geometry, make a basic quad
+        if (!(this.gameObject instanceof Mesh)) {
+            const quad = ObjectUtils.createPrimitive(PrimitiveType.Quad, {
+                name: "ShadowCatcher",
+                material: new MeshStandardMaterial({
+                    // HACK heuristic to get approx. the same colors out as with the current default ShadowCatcher material
+                    // not clear why this is needed; assumption is that the Renderer component does something we're not respecting here
+                    color: 0x999999,
+                    roughness: 1,
+                    metalness: 0,
+                    transparent: true,
+                })
+            });
+            quad.receiveShadow = true;
+            quad.geometry.rotateX(-Math.PI / 2);
+            // TODO breaks shadow catching right now
+            // const renderer  = new Renderer();
+            // renderer.receiveShadows = true;
+            // GameObject.addComponent(quad, Renderer);
+            this.gameObject.add(quad);
+            this.targetMesh = quad;
+        }
+        else if (this.gameObject instanceof Mesh && this.gameObject.material) {
+            // make sure we have a unique material to work with
+            this.gameObject.material = this.gameObject.material.clone();
+            this.targetMesh = this.gameObject;
+        }
+        if(!this.targetMesh) {
+            console.warn("ShadowCatcher: no mesh to apply shadow catching to. Groups are currently not supported.");
+            return;
+        }
         switch (this.mode) {
             case ShadowMode.ShadowMask:
                 this.applyShadowMaterial();
@@ -33,7 +70,6 @@
                 this.applyOccluderMaterial();
                 break;
         }
     }
     // Custom blending, diffuse-only lighting blended onto the scene additively.
@@ -42,31 +78,30 @@
     // Works even better with an additional black-ish gradient to darken parts of the AR scene
     // so that lights become more visible on bright surfaces.
     applyLightBlendMaterial() {
-        const renderer = GameObject.getComponent(this.gameObject, Renderer);
-        if (renderer) {
-            const material = renderer.sharedMaterial;
-            material.blending = AdditiveBlending;
-            this.applyMaterialOptions(material);
-            material.onBeforeCompile = (shader) => {
-                // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/meshphysical.glsl.js#L181
-                // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib.js#LL284C11-L284C11
-                // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/shadow.glsl.js#L40
-                // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmask_pars_fragment.glsl.js#L2
-                // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl.js#L281
+        if (!this.targetMesh) return;
-                shader.fragmentShader = shader.fragmentShader.replace("vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;",
-                    `vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;
-                // diffuse-only lighting with overdrive to somewhat compensate
-                // for the loss of indirect lighting and to make it more visible.
-                vec3 direct = reflectedLight.directSpecular * 6.6;
-                float max = max(direct.r, max(direct.g, direct.b));
-                // early out - we're simply returning direct lighting and some alpha based on it so it can
-                // be blended onto the scene.
-                gl_FragColor = vec4(direct, max);
-                return;
-                `);
-            }
+        const material = this.targetMesh.material as Material;
+        material.blending = AdditiveBlending;
+        this.applyMaterialOptions(material);
+        material.onBeforeCompile = (shader) => {
+            // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/meshphysical.glsl.js#L181
+            // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib.js#LL284C11-L284C11
+            // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/shadow.glsl.js#L40
+            // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmask_pars_fragment.glsl.js#L2
+            // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl.js#L281
+            shader.fragmentShader = shader.fragmentShader.replace("vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;",
+                `vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;
+            // diffuse-only lighting with overdrive to somewhat compensate
+            // for the loss of indirect lighting and to make it more visible.
+            vec3 direct = (reflectedLight.directDiffuse + reflectedLight.directSpecular) * 6.6;
+            float max = max(direct.r, max(direct.g, direct.b));
+            // early out - we're simply returning direct lighting and some alpha based on it so it can
+            // be blended onto the scene.
+            gl_FragColor = vec4(direct, max);
+            return;
+            `);
         }
     }
@@ -74,17 +109,16 @@
     // doesn't take light attenuation into account.
     // works great for Directional Lights.
     applyShadowMaterial() {
-        const renderer = GameObject.getComponent(this.gameObject, Renderer);
-        if (renderer) {
-            if (renderer.sharedMaterial?.type !== "ShadowMaterial") {
+        if (this.targetMesh) {
+            if ((this.targetMesh.material as Material).type !== "ShadowMaterial") {
                 const material = new ShadowMaterial();
                 material.color = this.shadowColor;
                 material.opacity = this.shadowColor.alpha;
                 this.applyMaterialOptions(material);
-                renderer.sharedMaterial = material;
+                this.targetMesh.material = material;
             }
             else {
-                const material = renderer.sharedMaterial as ShadowMaterial;
+                const material = this.targetMesh.material as ShadowMaterial;
                 material.color = this.shadowColor;
                 material.opacity = this.shadowColor.alpha;
                 this.applyMaterialOptions(material);
@@ -93,9 +127,13 @@
     }
     applyOccluderMaterial() {
-        const renderer = GameObject.getComponent(this.gameObject, Renderer);
-        if (renderer) {
-            const material = renderer.sharedMaterial;
+        if (this.targetMesh) {
+            let material = this.targetMesh.material as Material;
+            if (!material) {
+                const mat = new MeshBasicMaterial();
+                this.targetMesh.material = mat;
+                material = mat;
+            }
             material.depthWrite = true;
             material.stencilWrite = true;
             material.colorWrite = false;

src/engine-components/Skybox.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader.js";
 import { EquirectangularRefractionMapping, NeverDepth, SRGBColorSpace, sRGBEncoding, Texture, TextureLoader } from "three"
 import { syncField } from "../engine/engine_networking_auto.js";
-import { Camera } from "./Camera.js";
+import { Camera, ClearFlags } from "./Camera.js";
 import { PromiseAllWithErrors, addAttributeChangeCallback, getParam, removeAttributeChangeCallback } from "../engine/engine_utils.js";
 import { ContextRegistry } from "../engine/engine_context_registry.js";
 import { registerObservableAttribute } from "../engine/engine_element_extras.js";
@@ -43,12 +43,18 @@
     const promises = new Array<Promise<any>>();
     if (skyboxImage) {
-        if (debug) console.log("Creating remote skybox to load " + skyboxImage);
+        if (debug)
+            console.log("Creating remote skybox to load " + skyboxImage);
+        // if the user is loading a GLB without a camera then the CameraUtils (which creates the default camera)
+        // checks if we have this attribute set and then sets the skybox clearflags accordingly
+        // if the user has a GLB with a camera but set to solid color then the skybox image is not visible -> we will just warn then and not override the camera settings
+        if(context.mainCameraComponent?.clearFlags !== ClearFlags.Skybox) console.warn("\"skybox-image\" attribute has no effect: camera clearflags are not set to \"Skybox\"");
         const promise = createRemoteSkyboxComponent(context, skyboxImage, true, false, "skybox-image");
         promises.push(promise);
     }
     if (environmentImage) {
-        if (debug) console.log("Creating remote environment to load " + environmentImage);
+        if (debug)
+            console.log("Creating remote environment to load " + environmentImage);
         const promise = createRemoteSkyboxComponent(context, environmentImage, false, true, "environment-image");
         promises.push(promise);
     }
@@ -137,8 +143,8 @@
     }
     async setSkybox(url: string | undefined | null) {
-        if (!this.activeAndEnabled) return;
-        if (!url) return;
+        if (!this.activeAndEnabled) return false;
+        if (!url) return false;
         if (!url?.endsWith(".hdr") && !url.endsWith(".exr") && !url.endsWith(".jpg") && !url.endsWith(".png") && !url.endsWith(".jpeg")) {
             console.warn("Potentially invalid skybox url", this.url, "on", this.name);
         }
@@ -147,7 +153,7 @@
         if (this._prevUrl === url && this._prevLoadedEnvironment) {
             this.applySkybox();
-            return;
+            return true;
         }
         else {
             this._prevLoadedEnvironment?.dispose();
@@ -156,9 +162,9 @@
         this._prevUrl = url;
         const envMap = await this.loadTexture(url);
-        if (!envMap) return;
+        if (!envMap) return false;
         // Check if we're still enabled
-        if (!this.enabled) return;
+        if (!this.enabled) return false;
         // Update the current url
         this.url = url;
         const nameIndex = url.lastIndexOf("/");
@@ -168,6 +174,7 @@
         }
         this._prevLoadedEnvironment = envMap;
         this.applySkybox();
+        return true;
     }
     private async loadTexture(url: string) {

src/engine-components/ui/Text.ts CHANGED Viewed

@@ -90,9 +90,11 @@
         this.uiObject?.set({ fontSize: val });
     }
+    private sRGBTextColor: Color = new Color(1, 0, 1);
     protected onColorChanged(): void {
-        this.uiObject?.set({ color: this.color, fontOpacity: this.color.alpha });
+        this.sRGBTextColor.copy(this.color);
+        this.sRGBTextColor.convertLinearToSRGB();
+        this.uiObject?.set({ color: this.sRGBTextColor, fontOpacity: this.color.alpha });
     }
     onParentRectTransformChanged(): void {

src/engine-components/export/usdz/ThreeUSDZExporter.ts CHANGED Viewed

@@ -37,6 +37,12 @@
 	return str;
 }
+// TODO: remove once we update to TypeScript 5 that has proper types for OffscreenCanvas
+declare type OffsetCanvasExt = OffscreenCanvas & {
+	convertToBlob: (options?: any) => Promise<Blob>;
+}
 class USDObject {
 	static USDObject_export_id = 0;
@@ -481,7 +487,7 @@
 			if ( canvas ) {
-				const blob = await new Promise( resolve => canvas.toBlob( resolve, isRGBA ? 'image/png' : 'image/jpeg', 0.95 ) ) as any;
+				const blob = await canvas.convertToBlob( {type: isRGBA ? 'image/png' : 'image/jpeg', quality: 0.95 } );
 				files[ `textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}` ] = new Uint8Array( await blob.arrayBuffer() );
 			} else {
@@ -814,11 +820,9 @@
 		// max. canvas size on Safari is still 4096x4096
 		const scale = 4096 / Math.max( image.width, image.height );
-		const canvas = document.createElement( 'canvas' );
-		canvas.width = image.width * Math.min( 1, scale );
-		canvas.height = image.height * Math.min( 1, scale );
+		const canvas = new OffscreenCanvas( image.width * Math.min( 1, scale ), image.height * Math.min( 1, scale ) );
-		const context = canvas.getContext( '2d' );
+		const context = canvas.getContext( '2d' ) as OffscreenCanvasRenderingContext2D;
 		if (!context) throw new Error('Could not get canvas 2D context');
 		if ( flipY === true ) {
@@ -854,7 +858,7 @@
 		}
-		return canvas;
+		return canvas as OffsetCanvasExt;
 	} else {

src/engine-components/timeline/TimelineModels.ts CHANGED Viewed

@@ -31,6 +31,7 @@
     clips?: Array<ClipModel>;
     markers?: Array<MarkerModel>;
     trackOffset?: TrackOffset;
+    volume?: number;
 }
 declare type Vec3 = { x: number, y: number, z: number };

src/engine-components/timeline/TimelineTracks.ts CHANGED Viewed

@@ -564,12 +564,13 @@
 const muteAudioTracks = getParam("mutetimeline");
 export class AudioTrackHandler extends TrackHandler {
     models: Array<Models.ClipModel> = [];
     listener!: AudioListener;
     audio: Array<Audio> = [];
     audioContextTimeOffset: Array<number> = [];
     lastTime: number = 0;
+    audioSource?:AudioSource;
     private _audioLoader: AudioLoader | null = null;
@@ -642,6 +643,7 @@
         for (let i = 0; i < this.models.length; i++) {
             const model = this.models[i];
             const audio = this.audio[i];
+            const asset = model.asset as Models.AudioClipModel;
             // only trigger loading for tracks that are CLOSE to being played
             if ((!audio || !audio.buffer) && this.isInTimeRange(model, time - 1, time + 1)) {
                 this.handleAudioLoading(model, audio);
@@ -649,7 +651,7 @@
             if (AudioSource.userInteractionRegistered === false) continue;
             if (audio === null || !audio.buffer) continue;
             audio.playbackRate = this.director.context.time.timeScale * this.director.speed;
-            audio.loop = model.asset.loop;
+            audio.loop = asset.loop;
             if (time >= model.start && time <= model.end && time < this.director.duration) {
                 if (this.director.isPlaying == false) {
                     if (audio.isPlaying)
@@ -673,7 +675,11 @@
                         audio.play(playTimeOffset);
                     }
                 }
-                let vol = model.asset.volume as number;
+                let vol = asset.volume as number;
+                if(this.track.volume !== undefined)
+                    vol *= this.track.volume;
                 if (isMuted) vol = 0;
                 if (model.easeInDuration > 0) {
                     const easeIn = Math.min((time - model.start) / model.easeInDuration, 1);

src/engine-components/webxr/WebXRImageTracking.ts CHANGED Viewed

@@ -164,7 +164,7 @@
                         // TODO better would be to do that once we actually need it
                         const canvas = await imageToCanvas(img);
                         if (canvas) {
-                            const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png', 1)) as any;
+                            const blob = await canvas.convertToBlob({type: 'image/png'});
                             const arrayBuffer = await blob.arrayBuffer();
                             const exporter = GameObject.findObjectOfType(USDZExporter);

src/engine-components/webxr/WebXRSync.ts CHANGED Viewed

@@ -345,9 +345,9 @@
     }
     private buildLocalAvatar() {
-        if (this.localAvatar) return;
+        if (this.localAvatar || !this.webXR) return;
         const connectionId = this.context.connection?.connectionId ?? this.k_LocalAvatarNoNetworkingGuid;
-        this.localAvatar = new WebXRAvatar(this.context, connectionId, this.webXR!);
+        this.localAvatar = new WebXRAvatar(this.context, connectionId, this.webXR);
         this.localAvatar.isLocalAvatar = true;
         this.localAvatar.setAvatarOverride(this.getAvatarId());
         this.avatars[this.localAvatar.guid] = this.localAvatar;

src/engine-components/ContactShadows.ts ADDED Viewed

@@ -0,0 +1,249 @@
+import { Behaviour } from "./Component.js";
+import { serializable } from "../engine/engine_serialization_decorator.js";
+import { CustomBlending, DoubleSide, Group, Matrix4, MaxEquation, Mesh, MeshBasicMaterial, MeshDepthMaterial, MinEquation, OrthographicCamera, PlaneGeometry, ShaderMaterial, WebGLRenderTarget } from "three";
+import { HorizontalBlurShader } from 'three/examples/jsm/shaders/HorizontalBlurShader.js';
+import { VerticalBlurShader } from 'three/examples/jsm/shaders/VerticalBlurShader.js';
+// Adapted from https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadow_contact.html.
+// Improved with
+// - ground occluder
+// - backface shadowing (slightly less than front faces)
+// - node can simply be scaled in Y to adjust max. ground height
+export class ContactShadows extends Behaviour {
+    @serializable()
+    darkness: number = 0.5;
+    @serializable()
+    opacity: number = 0.5;
+    @serializable()
+    blur: number = 4.0;
+    @serializable()
+    occludeBelowGround: boolean = true;
+    @serializable()
+    backfaceShadows: boolean = true;
+    private shadowCamera?: OrthographicCamera;
+    private shadowGroup?: Group;
+    private renderTarget?: WebGLRenderTarget;
+    private renderTargetBlur?: WebGLRenderTarget;
+    private plane?: Mesh;
+    private occluderMesh?: Mesh;
+    private blurPlane?: Mesh;
+    private depthMaterial?: MeshDepthMaterial;
+    private horizontalBlurMaterial?: ShaderMaterial;
+    private verticalBlurMaterial?: ShaderMaterial;
+    awake(): void {
+        const textureSize = 512;
+        this.shadowGroup = new Group();
+        this.gameObject.add(this.shadowGroup);
+        // the render target that will show the shadows in the plane texture
+        this.renderTarget = new WebGLRenderTarget(textureSize, textureSize);
+        this.renderTarget.texture.generateMipmaps = false;
+        // the render target that we will use to blur the first render target
+        this.renderTargetBlur = new WebGLRenderTarget(textureSize, textureSize);
+        this.renderTargetBlur.texture.generateMipmaps = false;
+        // make a plane and make it face up
+        const planeGeometry = new PlaneGeometry(1, 1).rotateX(Math.PI / 2);
+        //@ts-ignore
+        if (this.gameObject.isMesh) {
+            this.plane = this.gameObject as any as Mesh;
+            const mat = this.plane!.material as MeshBasicMaterial;
+            mat.map = this.renderTarget.texture;
+            // When someone makes a custom mesh, they can set these values right on the material.
+            // mat.opacity = this.state.plane.opacity;
+            // mat.transparent = true;
+            // mat.depthWrite = false;
+        }
+        else {
+            const planeMaterial = new MeshBasicMaterial({
+                map: this.renderTarget.texture,
+                opacity: this.opacity,
+                color: 0x000000,
+                transparent: true,
+                depthWrite: false,
+            });
+            this.plane = new Mesh(planeGeometry, planeMaterial);
+            this.plane.scale.y = - 1;
+            this.gameObject.add(this.plane);
+        }
+        if (this.plane) this.plane.renderOrder = 1;
+        if (this.occludeBelowGround) {
+            this.occluderMesh = new Mesh(this.plane.geometry, new MeshBasicMaterial({
+                depthWrite: true,
+                stencilWrite: true,
+                colorWrite: false,
+            })).rotateX(Math.PI).translateY(0.0001);
+            this.occluderMesh.renderOrder = -100;
+            this.gameObject.add(this.occluderMesh);
+        }
+        // the plane onto which to blur the texture
+        this.blurPlane = new Mesh(planeGeometry);
+        this.blurPlane.visible = false;
+        this.shadowGroup.add(this.blurPlane);
+        // max. ground distance is controlled via object scale
+        this.shadowCamera = new OrthographicCamera(-1 /2, 1/2, 1/2, -1/2, 0, 1.0);
+        this.shadowCamera.rotation.x = Math.PI / 2; // get the camera to look up
+        this.shadowGroup.add(this.shadowCamera);
+        // like MeshDepthMaterial, but goes from black to transparent
+        this.depthMaterial = new MeshDepthMaterial();
+        this.depthMaterial.userData.darkness = { value: this.darkness };
+        // this will properly overlap calculated shadows
+        this.depthMaterial.blending = CustomBlending;
+        this.depthMaterial.blendEquation = MaxEquation;
+        if (this.backfaceShadows)
+            this.depthMaterial.side = DoubleSide;
+        // this.depthMaterial.blendEquation = MinEquation;
+        this.depthMaterial.onBeforeCompile = shader => {
+            if (!this.depthMaterial) return;
+            shader.uniforms.darkness = this.depthMaterial.userData.darkness;
+            shader.fragmentShader = /* glsl */`
+                uniform float darkness;
+                ${shader.fragmentShader.replace(
+                'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
+                // we're scaling the shadow value down a bit when it's a backface (looks better)
+                'gl_FragColor = vec4( vec3( 1.0 ), ( 1.0 - fragCoordZ ) * darkness * opacity * (gl_FrontFacing ? 1.0 : 0.66) );'
+            )}
+            `;
+        };
+        this.depthMaterial.depthTest = false;
+        this.depthMaterial.depthWrite = false;
+        this.horizontalBlurMaterial = new ShaderMaterial(HorizontalBlurShader);
+        this.horizontalBlurMaterial.depthTest = false;
+        this.verticalBlurMaterial = new ShaderMaterial(VerticalBlurShader);
+        this.verticalBlurMaterial.depthTest = false;
+        this.shadowGroup.visible = false;
+    }
+    onDestroy(): void {
+        // dispose the render targets
+        this.renderTarget?.dispose();
+        this.renderTargetBlur?.dispose();
+        // dispose the materials
+        this.depthMaterial?.dispose();
+        this.horizontalBlurMaterial?.dispose();
+        this.verticalBlurMaterial?.dispose();
+        // dispose the geometries
+        this.blurPlane?.geometry.dispose();
+        this.plane?.geometry.dispose();
+        this.occluderMesh?.geometry.dispose();
+    }
+    onBeforeRender(_frame: XRFrame | null): void {
+        const scene = this.context.scene;
+        const renderer = this.context.renderer;
+        const initialRenderTarget = renderer.getRenderTarget();
+        if (!this.renderTarget || !this.renderTargetBlur ||
+            !this.depthMaterial || !this.shadowCamera ||
+            !this.blurPlane || !this.shadowGroup || !this.plane ||
+            !this.horizontalBlurMaterial || !this.verticalBlurMaterial)
+            return;
+        //@ts-ignore
+        if (this.gameObject.isMesh)
+            this.gameObject.visible = false;
+        // Idea: shear the shadowCamera matrix to add some light direction to the ground shadows
+        /*
+        const mat = this.shadowCamera.projectionMatrix.clone();
+        this.shadowCamera.projectionMatrix.multiply(new Matrix4().makeShear(0, 0, 0, 0, 0, 0));
+        */
+        this.shadowGroup.visible = true;
+        if (this.occluderMesh) this.occluderMesh.visible = false;
+        const planeWasVisible = this.plane.visible;
+        this.plane.visible = false;
+        // remove the background
+        const initialBackground = scene.background;
+        scene.background = null;
+        // force the depthMaterial to everything
+        scene.overrideMaterial = this.depthMaterial;
+        // set renderer clear alpha
+        const initialClearAlpha = renderer.getClearAlpha();
+        renderer.setClearAlpha(0);
+        // render to the render target to get the depths
+        renderer.setRenderTarget(this.renderTarget);
+        renderer.render(scene, this.shadowCamera);
+        // for the shearing idea
+        // this.shadowCamera.projectionMatrix.copy(mat);
+        // and reset the override material
+        scene.overrideMaterial = null;
+        this.blurShadow(this.blur);
+        // a second pass to reduce the artifacts
+        // (0.4 is the minimum blur amout so that the artifacts are gone)
+        this.blurShadow(this.blur * 0.4);
+        this.shadowGroup.visible = false;
+        if (this.occluderMesh) this.occluderMesh.visible = true;
+        this.plane.visible = planeWasVisible;
+        // reset and render the normal scene
+        renderer.setRenderTarget(initialRenderTarget);
+        renderer.setClearAlpha(initialClearAlpha);
+        scene.background = initialBackground;
+    }
+    // renderTarget --> blurPlane (horizontalBlur) --> renderTargetBlur --> blurPlane (verticalBlur) --> renderTarget
+    private blurShadow(amount) {
+        if (!this.blurPlane || !this.shadowCamera ||
+            !this.renderTarget || !this.renderTargetBlur ||
+            !this.horizontalBlurMaterial || !this.verticalBlurMaterial)
+            return;
+        this.blurPlane.visible = true;
+        // blur horizontally and draw in the renderTargetBlur
+        this.blurPlane.material = this.horizontalBlurMaterial;
+        (this.blurPlane.material as ShaderMaterial).uniforms.tDiffuse.value = this.renderTarget.texture;
+        this.horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
+        const renderer = this.context.renderer;
+        const currentRt = renderer.getRenderTarget();
+        renderer.setRenderTarget(this.renderTargetBlur);
+        renderer.render(this.blurPlane, this.shadowCamera);
+        // blur vertically and draw in the main renderTarget
+        this.blurPlane.material = this.verticalBlurMaterial;
+        (this.blurPlane.material as ShaderMaterial).uniforms.tDiffuse.value = this.renderTargetBlur.texture;
+        this.verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
+        renderer.setRenderTarget(this.renderTarget);
+        renderer.render(this.blurPlane, this.shadowCamera);
+        this.blurPlane.visible = false;
+        renderer.setRenderTarget(currentRt);
+    }
+}