@needle-tools/engine 4.13.1-next.9fc3e64 → 4.14.0-beta

package/src/engine-components/SeeThrough.ts

@@ -5,30 +5,30 @@ import { Mathf } from "../engine/engine_math.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { getTempVector } from "../engine/engine_three_utils.js";
 import { getParam } from "../engine/engine_utils.js";
-import { USDObject, USDZExporterContext } from "./api.js";
 import type { Camera } from "./Camera.js";
 import { Behaviour } from "./Component.js";
 import { IUSDExporterExtension } from "./export/usdz/Extension.js";
 import { USDZExporter } from "./export/usdz/USDZExporter.js";
 import type { OrbitControls } from "./OrbitControls.js";
 import { Renderer } from "./Renderer.js";
+import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
 
 const debugSeeThrough = getParam("debugseethrough");
 
-type MaterialState = {
-    opacity: number,
-    transparent: boolean,
-    alphaHash: boolean
-}
-
-type MaterialWithState = Material & {
-    /** Original values */
-    userData: {
-        seeThrough: {
-            initial: MaterialState,
-        }
-    }
-};
+// type MaterialState = {
+//     opacity: number,
+//     transparent: boolean,
+//     alphaHash: boolean
+// }
+
+// type MaterialWithState = Material & {
+//     /** Original values */
+//     userData: {
+//         seeThrough: {
+//             initial: MaterialState,
+//         }
+//     }
+// };
 
 let i = 0;
 
@@ -176,26 +176,26 @@ export class SeeThrough extends Behaviour {
     onEnable() {
         this._needsUpdate = true;
         this._renderer = null;
-        SeeThroughUsdzExporterPlugin.components.push(this);
+        // SeeThroughUsdzExporterPlugin.components.push(this);
     }
 
     /**  @internal */
     onDisable() {
-        this._renderer?.forEach(r => {
-            const original = this.rendererMaterialsOriginal.get(r);
-            for (let i = 0; i < r.sharedMaterials.length; i++) {
-                const mat = r.sharedMaterials[i];
-                if (!mat) continue;
-                if (original && original[i]) {
-                    r.sharedMaterials[i] = original[i];
-                }
-            }
-            this.rendererMaterials.delete(r);
-            this.rendererMaterialsOriginal.delete(r);
-        });
-
-        const index = SeeThroughUsdzExporterPlugin.components.indexOf(this);
-        if (index !== -1) SeeThroughUsdzExporterPlugin.components.splice(index, 1);
+        // this._renderer?.forEach(r => {
+        //     const original = this.rendererMaterialsOriginal.get(r);
+        //     for (let i = 0; i < r.sharedMaterials.length; i++) {
+        //         const mat = r.sharedMaterials[i];
+        //         if (!mat) continue;
+        //         if (original && original[i]) {
+        //             r.sharedMaterials[i] = original[i];
+        //         }
+        //     }
+        //     this.rendererMaterials.delete(r);
+        //     this.rendererMaterialsOriginal.delete(r);
+        // });
+
+        // const index = SeeThroughUsdzExporterPlugin.components.indexOf(this);
+        // if (index !== -1) SeeThroughUsdzExporterPlugin.components.splice(index, 1);
     }
 
     /**
@@ -239,8 +239,8 @@ export class SeeThrough extends Behaviour {
         }
     }
 
-    private readonly rendererMaterials = new WeakMap<Renderer, Array<MaterialWithState>>();
-    private readonly rendererMaterialsOriginal = new WeakMap<Renderer, Array<Material>>();
+    // private readonly rendererMaterials = new WeakMap<Renderer, Array<MaterialWithState>>();
+    // private readonly rendererMaterialsOriginal = new WeakMap<Renderer, Array<Material>>();
 
     private updateDirection() {
         this.referencePoint ??= this.context.scene;
@@ -272,66 +272,81 @@ export class SeeThrough extends Behaviour {
                 renderer.gameObject.raycastAllowed = true;
             }
 
-            if (!this.rendererMaterials.has(renderer)) {
-                const originalMaterials = new Array<Material>();
-                const clonedMaterials = new Array<MaterialWithState>();
-
-                // We clone the materials once and store them, so we can modify the opacity without affecting other objects using the same material. This could potentially be optimized further to re-use materials between renderers if multiple renderers use the same material.
-                for (let i = 0; i < renderer.sharedMaterials.length; i++) {
-                    const mat = renderer.sharedMaterials[i];
-                    if (!mat) continue;
-                    originalMaterials.push(mat);
-                    const matClone = mat.clone() as MaterialWithState;
-                    // @ts-ignore
-                    matClone.userData = mat.userData || {};
-                    matClone.userData.seeThrough = {
-                        initial: {
-                            opacity: matClone.opacity,
-                            transparent: matClone.transparent,
-                            alphaHash: matClone.alphaHash
-                        }
-                    }
-                    clonedMaterials.push(matClone);
-                    renderer.sharedMaterials[i] = matClone;
-                }
-
-                this.rendererMaterials.set(renderer, clonedMaterials);
-                this.rendererMaterialsOriginal.set(renderer, originalMaterials);
-            }
-
-            const materials = renderer.hasLightmap ? renderer.sharedMaterials : this.rendererMaterials.get(renderer);
+            // if (!this.rendererMaterials.has(renderer)) {
+            //     const originalMaterials = new Array<Material>();
+            //     const clonedMaterials = new Array<MaterialWithState>();
+
+            //     // We clone the materials once and store them, so we can modify the opacity without affecting other objects using the same material. This could potentially be optimized further to re-use materials between renderers if multiple renderers use the same material.
+            //     for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+            //         const mat = renderer.sharedMaterials[i];
+            //         if (!mat) continue;
+            //         originalMaterials.push(mat);
+            //         const matClone = mat.clone() as MaterialWithState;
+            //         // @ts-ignore
+            //         matClone.userData = mat.userData || {};
+            //         matClone.userData.seeThrough = {
+            //             initial: {
+            //                 opacity: matClone.opacity,
+            //                 transparent: matClone.transparent,
+            //                 alphaHash: matClone.alphaHash
+            //             }
+            //         }
+            //         clonedMaterials.push(matClone);
+            //         // renderer.sharedMaterials[i] = matClone;
+            //     }
+
+            //     this.rendererMaterials.set(renderer, clonedMaterials);
+            //     this.rendererMaterialsOriginal.set(renderer, originalMaterials);
+            // }
+
+            const materials = renderer.sharedMaterials;// : this.rendererMaterials.get(renderer);
             if (!materials) return;
 
-            for (const mat of materials) {
-                if (!mat) continue;
+            const block = MaterialPropertyBlock.get(renderer.gameObject);
 
-                let newAlpha = Mathf.lerp(mat.opacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
-                if (newAlpha >= 0.99) newAlpha = 1;
-                else if (newAlpha <= 0.01) newAlpha = 0;
+            const currentOpacity = (block.getOverride("opacity")?.value ?? materials[0].opacity ?? 1);
 
+            let newAlpha = Mathf.lerp(currentOpacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
+            if (newAlpha >= 0.99) newAlpha = 1;
+            else if (newAlpha <= 0.01) newAlpha = 0;
 
-                const wasTransparent = mat.transparent;
-                const wasAlphaHash = mat.alphaHash;
-                const previousOpacity = mat.opacity;
+            // const currentTransparent = (block.getOverride("transparent")?.value ?? materials[0].transparent ?? false) as boolean;
 
-                mat.alphaHash = this.useAlphaHash;
+            block.setOverride("alphaHash", this.useAlphaHash);
+            block.setOverride("opacity", newAlpha);
+            block.setOverride("transparent", newAlpha >= 0.99999 ? false : !this.useAlphaHash);
 
-                if (mat.userData && "seeThrough" in mat.userData) {
-                    const initial = mat.userData.seeThrough.initial as MaterialState;
-                    mat.opacity = initial.opacity * newAlpha;
-                    mat.transparent = mat.opacity >= 1 ? initial.transparent : !this.useAlphaHash;
-                }
-                else {
-                    mat.transparent = mat.opacity >= 1 ? false : !this.useAlphaHash;
-                }
 
-                if (wasTransparent !== mat.transparent 
-                    || wasAlphaHash !== mat.alphaHash 
-                    || mat.opacity !== previousOpacity // MeshPhysicsMaterial needs that and maybe other materials too...
-                ) {
-                    mat.needsUpdate = true;
-                }
-            }
+            // for (const mat of materials) {
+            //     if (!mat) continue;
+
+            //     let newAlpha = Mathf.lerp(mat.opacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
+            //     if (newAlpha >= 0.99) newAlpha = 1;
+            //     else if (newAlpha <= 0.01) newAlpha = 0;
+
+
+            //     const wasTransparent = mat.transparent;
+            //     const wasAlphaHash = mat.alphaHash;
+            //     const previousOpacity = mat.opacity;
+
+            //     mat.alphaHash = this.useAlphaHash;
+
+            //     if (mat.userData && "seeThrough" in mat.userData) {
+            //         const initial = mat.userData.seeThrough.initial as MaterialState;
+            //         mat.opacity = initial.opacity * newAlpha;
+            //         mat.transparent = mat.opacity >= 1 ? initial.transparent : !this.useAlphaHash;
+            //     }
+            //     else {
+            //         mat.transparent = mat.opacity >= 1 ? false : !this.useAlphaHash;
+            //     }
+
+            //     if (wasTransparent !== mat.transparent 
+            //         || wasAlphaHash !== mat.alphaHash 
+            //         || mat.opacity !== previousOpacity // MeshPhysicsMaterial needs that and maybe other materials too...
+            //     ) {
+            //         mat.needsUpdate = true;
+            //     }
+            // }
         });
     }
 
@@ -339,33 +354,33 @@ export class SeeThrough extends Behaviour {
 
 
 ;
-class SeeThroughUsdzExporterPlugin implements IUSDExporterExtension {
+// class SeeThroughUsdzExporterPlugin implements IUSDExporterExtension {
 
-    static readonly components: SeeThrough[] = [];
+//     static readonly components: SeeThrough[] = [];
 
-    get extensionName() {
-        return "SeeThrough";
-    }
+//     get extensionName() {
+//         return "SeeThrough";
+//     }
 
-    // onExportObject(object: Object3D<Object3DEventMap>, model: USDObject, context: USDZExporterContext) {
-    //     const component = SeeThroughUsdzExporterPlugin.components.find(c => c.gameObject === object);
-    //     if(!component) return;
-    //     console.log("OH MY GOD SEE THROUGH USDZ EXPORTER", component, model);
+//     // onExportObject(object: Object3D<Object3DEventMap>, model: USDObject, context: USDZExporterContext) {
+//     //     const component = SeeThroughUsdzExporterPlugin.components.find(c => c.gameObject === object);
+//     //     if(!component) return;
+//     //     console.log("OH MY GOD SEE THROUGH USDZ EXPORTER", component, model);
 
-    //     model.materialName = "AlphaHashMaterialInstance"; // we could make this unique per object if needed
+//     //     model.materialName = "AlphaHashMaterialInstance"; // we could make this unique per object if needed
 
-    //     model.addEventListener("serialize", (writer, context) => {
-    //         writer.appendLine(`# SeeThrough component on ${object.name}`);
-    //     });
-    // }
+//     //     model.addEventListener("serialize", (writer, context) => {
+//     //         writer.appendLine(`# SeeThrough component on ${object.name}`);
+//     //     });
+//     // }
 
-}
+// }
 
-const seeThroughUsdzExporterPlugin = new SeeThroughUsdzExporterPlugin();
+// const seeThroughUsdzExporterPlugin = new SeeThroughUsdzExporterPlugin();
 
-USDZExporter.beforeExport.addEventListener(args => {
-    if (SeeThroughUsdzExporterPlugin.components.length === 0) return;
-    if (args.exporter.extensions.includes(seeThroughUsdzExporterPlugin) === false) {
-        args.exporter.extensions.push(seeThroughUsdzExporterPlugin);
-    }
-});
+// USDZExporter.beforeExport.addEventListener(args => {
+//     if (SeeThroughUsdzExporterPlugin.components.length === 0) return;
+//     if (args.exporter.extensions.includes(seeThroughUsdzExporterPlugin) === false) {
+//         args.exporter.extensions.push(seeThroughUsdzExporterPlugin);
+//     }
+// });

package/src/engine-components/SmoothFollow.ts

@@ -73,7 +73,7 @@ export class SmoothFollow extends Behaviour {
      * @default 0.1
      */
     @serializable()
-    followFactor = .1;
+    followFactor: number = .1;
 
     /**
      * Speed factor for rotation following.
@@ -83,7 +83,7 @@ export class SmoothFollow extends Behaviour {
      * @default 0.1
      */
     @serializable()
-    rotateFactor = .1;
+    rotateFactor: number = .1;
 
     /**
      * Which position axes to follow. Use bitwise OR to combine:

package/src/engine-components/ui/Button.ts

@@ -204,7 +204,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
     // image? : Image;
 
     @serializable()
-    set interactable(value) {
+    set interactable(value: boolean) {
         this._interactable = value;
         if (this._image) {
             this._image.setInteractable(value);

package/src/engine-components/ui/Raycaster.ts

@@ -63,7 +63,7 @@ export class ObjectRaycaster extends Raycaster {
     private raycastHits: Intersection[] = [];
 
     @serializable()
-    ignoreSkinnedMeshes = false;
+    ignoreSkinnedMeshes: boolean = false;
 
     start(): void {
         this.targets = [this.gameObject];

package/src/engine-components/web/ViewBox.ts

@@ -8,6 +8,13 @@ import { registerType } from "../../engine/engine_typestore.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { RGBAColor } from "../../engine/js-extensions/RGBAColor.js";
 import { Behaviour } from "../Component.js";
+// Type-only imports for TSDoc @see links
+import type { Context } from "../../engine/engine_context.js";
+import type { Camera as CameraComponent } from "../Camera.js";
+import type { DragControls } from "../DragControls.js";
+import type { LookAtConstraint } from "../LookAtConstraint.js";
+import type { OrbitControls } from "../OrbitControls.js";
+import type { SceneSwitcher } from "../SceneSwitcher.js";
 
 
 const debugParam = getParam("debugviewbox");
@@ -83,7 +90,7 @@ export type ViewBoxMode = "continuous" | "once";
  * scene.add(viewBox);
  * ```
  *
- * @see {@link Camera} - The camera component that ViewBox controls
+ * @see {@link CameraComponent} - The camera component that ViewBox controls
  * @see {@link OrbitControls} - Camera controls that work alongside ViewBox
  * @see {@link DragControls} - Alternative camera controls compatible with ViewBox
  * @see {@link LookAtConstraint} - Another way to control camera targeting
@@ -121,7 +128,7 @@ export class ViewBox extends Behaviour {
      * as they would appear with that field of view. Setting it to a wider FOV (e.g., 90) makes objects appear
      * smaller, while a narrower FOV (e.g., 30) makes them appear larger.
      *
-     * @see {@link Camera} for the camera component and its FOV property
+     * @see {@link CameraComponent} for the camera component and its FOV property
      * @default -1 (automatically uses the camera's FOV on the first frame)
      */
     @serializable()

package/src/engine-components/webxr/WebXRPlaneTracking.ts

@@ -66,13 +66,13 @@ export class WebXRPlaneTracking extends Behaviour {
      * Note: this will only be applied if dataTemplate is not assigned
      */
     @serializable()
-    occluder = true;
+    occluder: boolean = true;
 
     /**
      * If true the system will try to initiate room capture if no planes are detected.
      */
     @serializable()
-    initiateRoomCaptureIfNoData = true;
+    initiateRoomCaptureIfNoData: boolean = true;
 
     /**
      * If true plane tracking will be enabled
@@ -88,7 +88,7 @@ export class WebXRPlaneTracking extends Behaviour {
 
     /** when enabled mesh or plane tracking will also be used in VR */
     @serializable()
-    runInVR = true;
+    runInVR: boolean = true;
 
     /**
      * Returns all tracked planes

package/src/engine-components/webxr/controllers/XRControllerFollow.ts

@@ -63,7 +63,7 @@ export class XRControllerFollow extends Behaviour {
      * @default false
     */
     @serializable()
-    useGripSpace = false;
+    useGripSpace: boolean = false;
 
     /** when enabled the position, rotation and scale of this object will be set to the position it was at when it entered the XR session 
      * @default true

package/src/engine-components/webxr/controllers/XRControllerMovement.ts

@@ -40,13 +40,13 @@ export class XRControllerMovement extends Behaviour implements XRMovementBehavio
      * @default 1.5
     */
     @serializable()
-    movementSpeed = 1.5;
+    movementSpeed: number = 1.5;
 
     /** How many degrees to rotate the XR rig when using the rotation trigger
      * @default 30
      */
     @serializable()
-    rotationStep = 30;
+    rotationStep: number = 30;
 
     /** When enabled you can teleport using the right XR controller's thumbstick by pressing forward 
      * @default true
@@ -65,13 +65,13 @@ export class XRControllerMovement extends Behaviour implements XRMovementBehavio
      * @default false
     */
     @serializable()
-    useTeleportTarget = false;
+    useTeleportTarget: boolean = false;
 
     /** Enable to fade out the scene when teleporting 
      * @default false
     */
     @serializable()
-    useTeleportFade = false;
+    useTeleportFade: boolean = false;
 
     /** enable to visualize controller rays in the 3D scene 
      * @default true