@needle-tools/engine 3.28.6-beta → 3.28.7-beta.1

package/src/engine-components/ContactShadows.ts

@@ -1,266 +1,266 @@
-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';
-import { getParam } from "../engine/engine_utils.js"
-import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
-
-const debug = getParam("debugcontactshadows");
-
-// 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 {
-        if(debug) console.log("Create ContactShadows on " + this.gameObject.name, this)
-        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);
-        
-        if (this.gameObject instanceof Mesh) {
-            if (debug) console.log("ContactShadows: use existing mesh", this.gameObject)
-            this.plane = this.gameObject as any as Mesh;
-            // Make sure we clone the material once because it might be used on another object as well
-            const mat = this.plane.material = (this.plane.material as MeshBasicMaterial).clone();
-            mat.map = this.renderTarget.texture;
-            mat.opacity = this.opacity;
-            // mat.transparent = true;
-            // mat.depthWrite = false;
-            // mat.needsUpdate = true;
-            // 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) {
-            if(debug)
-                console.error("ContactShadows: not initialized yet");
-            return;
-        }
-
-        // 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;
-
-        if (this.gameObject instanceof Mesh) {
-            this.gameObject.visible = false;
-            setCustomVisibility(this.gameObject, 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);
-    }
+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';
+import { getParam } from "../engine/engine_utils.js"
+import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
+
+const debug = getParam("debugcontactshadows");
+
+// 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 {
+        if(debug) console.log("Create ContactShadows on " + this.gameObject.name, this)
+        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);
+        
+        if (this.gameObject instanceof Mesh) {
+            if (debug) console.log("ContactShadows: use existing mesh", this.gameObject)
+            this.plane = this.gameObject as any as Mesh;
+            // Make sure we clone the material once because it might be used on another object as well
+            const mat = this.plane.material = (this.plane.material as MeshBasicMaterial).clone();
+            mat.map = this.renderTarget.texture;
+            mat.opacity = this.opacity;
+            // mat.transparent = true;
+            // mat.depthWrite = false;
+            // mat.needsUpdate = true;
+            // 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) {
+            if(debug)
+                console.error("ContactShadows: not initialized yet");
+            return;
+        }
+
+        // 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;
+
+        if (this.gameObject instanceof Mesh) {
+            this.gameObject.visible = false;
+            setCustomVisibility(this.gameObject, 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);
+    }
 }

package/src/engine-components/DeleteBox.ts

@@ -1,36 +1,36 @@
-
-import * as THREE from "three";
-import { syncDestroy } from "../engine/engine_networking_instantiate.js";
-import { getParam } from "../engine/engine_utils.js";
-import { BoxHelperComponent } from "./BoxHelperComponent.js";
-import { Behaviour, GameObject } from "./Component.js";
-import { UsageMarker } from "./Interactable.js";
-
-const debug = getParam("debugdeletable");
-
-export class DeleteBox extends BoxHelperComponent { }
-
-
-export class Deletable extends Behaviour {
-
-    private deleteBoxes: DeleteBox[] = [];
-
-    awake() {
-        this.deleteBoxes = GameObject.findObjectsOfType(DeleteBox, this.context);
-    }
-
-    update(): void {
-        for (const box of this.deleteBoxes) {
-            const obj = this.gameObject as unknown as THREE.Mesh;
-            const res = box.isInBox(obj);
-            if (res === true) {
-                const marker = GameObject.getComponentInParent(this.gameObject, UsageMarker);
-                if (!marker) {
-                    if (debug) console.log("DESTROY", this.gameObject);
-                    syncDestroy(this.gameObject, this.context.connection);
-                }
-                else if (debug) console.warn("Can not delete object with usage marker", this.guid, marker)
-            }
-        }
-    }
+
+import * as THREE from "three";
+import { syncDestroy } from "../engine/engine_networking_instantiate.js";
+import { getParam } from "../engine/engine_utils.js";
+import { BoxHelperComponent } from "./BoxHelperComponent.js";
+import { Behaviour, GameObject } from "./Component.js";
+import { UsageMarker } from "./Interactable.js";
+
+const debug = getParam("debugdeletable");
+
+export class DeleteBox extends BoxHelperComponent { }
+
+
+export class Deletable extends Behaviour {
+
+    private deleteBoxes: DeleteBox[] = [];
+
+    awake() {
+        this.deleteBoxes = GameObject.findObjectsOfType(DeleteBox, this.context);
+    }
+
+    update(): void {
+        for (const box of this.deleteBoxes) {
+            const obj = this.gameObject as unknown as THREE.Mesh;
+            const res = box.isInBox(obj);
+            if (res === true) {
+                const marker = GameObject.getComponentInParent(this.gameObject, UsageMarker);
+                if (!marker) {
+                    if (debug) console.log("DESTROY", this.gameObject);
+                    syncDestroy(this.gameObject, this.context.connection);
+                }
+                else if (debug) console.warn("Can not delete object with usage marker", this.guid, marker)
+            }
+        }
+    }
 }