@needle-tools/engine 4.10.5-next.a5d5bf4 → 4.11.0-beta

package/src/engine/engine_gizmos.ts

@@ -1,4 +1,4 @@
-import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material,Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
+import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
 import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
 import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
 
@@ -289,11 +289,11 @@ export class Gizmos {
         const mesh = Internal.getMesh(options.duration ?? 0);
         if ("mesh" in options) {
             mesh.geometry = options.mesh.geometry;
-            mesh.matrix.copy(options.mesh.matrixWorld);
+            mesh.matrixWorld.copy(options.mesh.matrixWorld);
         }
         else {
             mesh.geometry = options.geometry;
-            mesh.matrix.copy(options.matrix);
+            mesh.matrixWorld.copy(options.matrix);
         }
         mesh.matrixAutoUpdate = false;
         mesh.matrixWorldAutoUpdate = false;

package/src/engine/engine_physics.ts

@@ -325,8 +325,12 @@ export class Physics {
             const mesh = obj as Mesh | SkinnedMesh;
             const geo = mesh.geometry;
 
+            if (obj.raycastAllowed === false) {
+                shouldIntersectObject = false;
+            }
+
             // We need to run this first because of "EventSystem.testObject" implementation
-            if (options.testObject) {
+            if (shouldIntersectObject && options.testObject) {
                 const testResult = options.testObject?.(obj);
                 if (testResult === false) {
                     continue;
@@ -335,8 +339,7 @@ export class Physics {
                     shouldIntersectObject = false;
                 }
             }
-
-            if (shouldIntersectObject) {
+            else if (shouldIntersectObject) {
                 if (!geo) {
                     shouldIntersectObject = false;
                 }
@@ -348,18 +351,24 @@ export class Physics {
 
 
             if (shouldIntersectObject) {
-                const raycastMesh = getRaycastMesh(obj);
-                if (raycastMesh) mesh.geometry = raycastMesh as any;
                 const lastResultsCount = results.length;
+                const preference = obj.raycastPreference || "lod";
 
-                let usePrecise = true;
+                let usePrecise = preference !== "bounds";
                 if (options.precise === false) usePrecise = false;
                 usePrecise ||= geo.getAttribute("position")?.array?.length < 64;
                 if (mesh instanceof GroundedSkybox) {
                     usePrecise = false;
                 }
 
-                if (!usePrecise && customRaycast(mesh, raycaster, results)) {
+
+                if (preference === "lod") {
+                    const raycastMesh = getRaycastMesh(obj);
+                    if (raycastMesh) mesh.geometry = raycastMesh as any;
+                }
+
+
+                if (!usePrecise && boundsRaycast(mesh, raycaster, results)) {
                     // did handle raycast
                 }
                 else if (options.useAcceleratedRaycast !== false) {
@@ -369,13 +378,16 @@ export class Physics {
                     raycaster.intersectObject(mesh, false, results);
                 }
 
+                // Restore
+                mesh.geometry = geo;
+
+                // Debug
                 if (debugPhysics && results.length != lastResultsCount) {
                     const latestResult = results[results.length - 1];
-                    const col = raycastMesh ? 0x88dd55 : 0x770000;
-                    Gizmos.DrawWireSphere(latestResult.point, .1, col, 1, false);
-                    Gizmos.DrawWireMesh({ mesh: obj as Mesh, depthTest: false, duration: .2, color: col });
+                    Gizmos.DrawWireSphere(latestResult.point, .1, 0x770000, 1, false);
+                    Gizmos.DrawWireMesh({ mesh: obj as Mesh, depthTest: false, duration: .2, color: 0x770000 });
                 }
-                mesh.geometry = geo;
+
             }
 
             if (options.recursive !== false) {
@@ -481,7 +493,7 @@ const normalUpMatrix = new Matrix3();
 /**
  * @returns false if custom raycasting can not run, otherwise true
  */
-function customRaycast(mesh: Mesh, raycaster: Raycaster, results: Intersection[]): boolean {
+function boundsRaycast(mesh: Mesh, raycaster: Raycaster, results: Intersection[]): boolean {
     const originalComputeIntersectionsFn = mesh["_computeIntersections"];
     if (!originalComputeIntersectionsFn) {
         return false;

package/src/engine/js-extensions/Object3D.ts

@@ -34,6 +34,23 @@ declare module 'three' {
          */
         hideFlags: HideFlags;
 
+        /**
+         * If false the object will be ignored for raycasting (e.g. pointer events). Default is true.
+         * @default true
+         */
+        raycastAllowed: boolean;
+
+        /**
+         * Set a raycast preference for the object: 
+         * - `lod` will use the raycast mesh lod if available (default). This is usually a simplified mesh for raycasting.  
+         * - `bounds` will use the bounding box of the object for raycasting. This is very fast but not very accurate.  
+         * - `full` will use the full mesh for raycasting. This is the most accurate but also the slowest option.
+         * 
+         * **NOTE:** Needle Engine's Raycast system will use Mesh BVH by default - so event 'full' is usually faster than default three.js raycasting.
+         */
+        raycastPreference?: 'lod' | 'bounds' | 'full';
+
+
         /**
          * Add a Needle Engine component to the {@link Object3D}.
          * @param comp The component instance or constructor to add.
@@ -242,6 +259,21 @@ if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "activeSelf")) {
     });
 }
 
+
+if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "raycastAllowed")) {
+    Object.defineProperty(Object3D.prototype, "raycastAllowed", {
+        get: function () {
+            return this.userData && this.userData.raycastAllowed !== false;
+        },
+        set: function (val: boolean) {
+            const self = this as Object3D;
+            if (!self.userData) self.userData = {};
+            self.userData.raycastAllowed = val;
+        }
+    });
+}
+
+
 if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "worldPosition")) {
     Object.defineProperty(Object3D.prototype, "worldPosition", {
         get: function () {

package/src/engine-components/Renderer.ts

@@ -359,7 +359,7 @@ export class Renderer extends Behaviour implements IRenderer {
     get sharedMaterials(): SharedMaterialArray {
 
         // @ts-ignore (original materials will be set during deserialization)
-        if(this._originalMaterials === undefined) return null;
+        if (this._originalMaterials === undefined) return null;
 
         // @ts-ignore during deserialization code might access this property *before* the setter and then create an empty array
         if (this.__isDeserializing === true) return null;
@@ -476,41 +476,43 @@ export class Renderer extends Behaviour implements IRenderer {
                 ? this._lightmapTextureOverride
                 : this.context.lightmaps.tryGetLightmap(this.sourceId, this.lightmapIndex);
             if (tex) {
-                if (!this._lightmaps)
-                    this._lightmaps = [];
-
-                if (type === "Mesh") {
-                    const mat = this.gameObject["material"];
-                    if (!mat?.isMeshBasicMaterial) {
-                        if (this._lightmaps.length <= 0) {
-                            const rm = new RendererLightmap(this.gameObject as any as Mesh, this.context);
-                            this._lightmaps.push(rm);
-                        }
-                        const rm = this._lightmaps[0];
-                        rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                    }
-                    else {
-                        if (mat)
-                            console.warn("Lightmapping is not supported on MeshBasicMaterial", mat.name)
-                    }
-                }
-                // for multi materials we need to loop through children 
-                // and then we add a lightmap renderer component to each of them
-                else if (this.isMultiMaterialObject(this.gameObject) && this.sharedMaterials.length > 0) {
-                    for (let i = 0; i < this.gameObject.children.length; i++) {
-                        const child = this.gameObject.children[i];
-                        if (!child["material"]?.isMeshBasicMaterial) {
-                            let rm: RendererLightmap | undefined = undefined;
-                            if (i >= this._lightmaps.length) {
-                                rm = new RendererLightmap(child as Mesh, this.context);
-                                this._lightmaps.push(rm);
-                            }
-                            else
-                                rm = this._lightmaps[i];
-                            rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                        }
-                    }
-                }
+                if (!this._lightmaps) this._lightmaps = [];
+
+
+                const rm = new RendererLightmap(this);
+                rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
+                this._lightmaps.push(rm);
+
+                // if (type === "Mesh") {
+                //     const mat = this.gameObject["material"];
+                //     if (!mat?.isMeshBasicMaterial) {
+                //         if (this._lightmaps.length <= 0) {
+                //         }
+                //         const rm = this._lightmaps[0];
+                //         rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
+                //     }
+                //     else {
+                //         if (mat)
+                //             console.warn("Lightmapping is not supported on MeshBasicMaterial", mat.name)
+                //     }
+                // }
+                // // for multi materials we need to loop through children 
+                // // and then we add a lightmap renderer component to each of them
+                // else if (this.isMultiMaterialObject(this.gameObject) && this.sharedMaterials.length > 0) {
+                //     for (let i = 0; i < this.gameObject.children.length; i++) {
+                //         const child = this.gameObject.children[i];
+                //         if (!child["material"]?.isMeshBasicMaterial) {
+                //             let rm: RendererLightmap | undefined = undefined;
+                //             if (i >= this._lightmaps.length) {
+                //                 rm = new RendererLightmap(child as Mesh, this.context);
+                //                 this._lightmaps.push(rm);
+                //             }
+                //             else
+                //                 rm = this._lightmaps[i];
+                //             rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
+                //         }
+                //     }
+                // }
             }
             else {
                 if (debugRenderer) console.warn("Lightmap not found", this.sourceId, this.lightmapIndex);
@@ -742,7 +744,6 @@ export class Renderer extends Behaviour implements IRenderer {
             const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
             material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
         }
-
         if (this._lightmaps) {
             for (const lm of this._lightmaps) {
                 lm.updateLightmapUniforms(material);

package/src/engine-components/RendererLightmap.ts

@@ -1,8 +1,9 @@
 import { NEEDLE_progressive } from "@needle-tools/gltf-progressive";
-import { Material, Mesh, MeshPhysicalMaterial, ShaderMaterial, Texture, Vector4, WebGLProgramParametersWithUniforms } from "three";
+import { Group, Material, Mesh, MeshPhysicalMaterial, Object3D, ShaderMaterial, Texture, Vector4, WebGLProgramParametersWithUniforms } from "three";
 
 import type { Context } from "../engine/engine_setup.js";
 import { getParam } from "../engine/engine_utils.js";
+import { type Renderer } from "./Renderer.js";
 
 const debug = getParam("debuglightmaps");
 
@@ -31,15 +32,15 @@ export class RendererLightmap {
     private lightmapIndex: number = -1;
     private lightmapScaleOffset: Vector4 = new Vector4(1, 1, 0, 0);
 
-    private context: Context;
-    private gameObject: Mesh;
+    private readonly renderer: Renderer;
+    private get context(): Context { return this.renderer.context; }
+    private get gameObject() { return this.renderer.gameObject; }
     private lightmapTexture: Texture | null = null;
     private lightmapScaleOffsetUniform = { value: new Vector4(1, 1, 0, 0) };
     private lightmapUniform: { value: Texture | null } = { value: null };
 
-    constructor(gameObject: Mesh, context: Context) {
-        this.gameObject = gameObject;
-        this.context = context;
+    constructor(renderer: Renderer) {
+        this.renderer = renderer;
     }
 
     init(lightmapIndex: number, lightmapScaleOffset: Vector4, lightmapTexture: Texture) {
@@ -55,7 +56,7 @@ export class RendererLightmap {
             console.log("Lightmap:", this.gameObject.name, lightmapIndex, "\nScaleOffset:", lightmapScaleOffset, "\nTexture:", lightmapTexture)
             this.setLightmapDebugMaterial();
         }
-        else if(debug) console.log("Use debuglightmaps=show to render lightmaps only in the scene.")
+        else if (debug) console.log("Use debuglightmaps=show to render lightmaps only in the scene.")
         this.applyLightmap();
     }
 
@@ -77,42 +78,38 @@ export class RendererLightmap {
             return;
         }
 
-        if (this.gameObject.type === "Group") {
-            if (this.gameObject["Needle:Multimaterial-LightmapWarning"] === undefined) {
-                this.gameObject["Needle:Multimaterial-LightmapWarning"] = true;
-                console.warn("Lightmap on multimaterial object is not supported yet... please open a feature request on https://github.com/needle-tools/needle-engine-support if your project requires it");
-            }
-            return;
-        }
+        const mesh = this.gameObject as unknown as (Mesh | Group);
+        this.ensureLightmapUvs(mesh);
 
-        console.assert(this.gameObject.type === "Mesh", "Lightmap only works on meshes", this);
+        for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
 
-        const mesh = this.gameObject as unknown as Mesh;
-        if (!mesh.geometry.getAttribute("uv1"))
-            mesh.geometry.setAttribute("uv1", mesh.geometry.getAttribute("uv"));
+            const mat = this.renderer.sharedMaterials[i];
+            if (!mat) continue;
 
-        if (Array.isArray(this.gameObject.material)) {
-            const mats: Material[] = this.gameObject.material;
-            for (let i = 0; i < mats.length; i++) {
-                mats[i] = this.ensureLightmapMaterial(mats[i]);
+            const newMat = this.ensureLightmapMaterial(mat);
+            if (mat !== newMat) {
+                this.renderer.sharedMaterials[i] = newMat;
             }
         }
-        else {
-            this.gameObject.material = this.ensureLightmapMaterial(this.gameObject.material);
-        }
 
         if (this.lightmapIndex >= 0 && this.lightmapTexture) {
             // always on channel 1 for now. We could optimize this by passing the correct lightmap index along
             this.lightmapTexture.channel = 1;
-            const mat = this.gameObject.material;
-            if (Array.isArray(mat)) {
-                for (const entry of mat) {
-                    this.assignLightmapTexture(entry as any);
+            for (const mat of this.renderer.sharedMaterials) {
+                if (mat) this.assignLightmapTexture(mat);
+            }
+        }
+    }
 
-                }
+    private ensureLightmapUvs(object: Object3D | Group | Mesh) {
+        if (object instanceof Mesh) {
+            if (!object.geometry.getAttribute("uv1")) {
+                object.geometry.setAttribute("uv1", object.geometry.getAttribute("uv"));
             }
-            else if (mat) {
-                this.assignLightmapTexture(mat);
+        }
+        else if (object instanceof Group) {
+            for (const child of object.children) {
+                this.ensureLightmapUvs(child);
             }
         }
     }
@@ -127,7 +124,7 @@ export class RendererLightmap {
             if (material["NEEDLE:lightmap-material-version"] == undefined) {
                 if (debug) console.warn("Cloning material for lightmap " + material.name);
                 const mat: Material = material.clone();
-                if(!mat.name?.includes("(lightmap)")) mat.name = material.name + " (lightmap)";
+                if (!mat.name?.includes("(lightmap)")) mat.name = material.name + " (lightmap)";
                 material = mat;
                 material.onBeforeCompile = this.onBeforeCompile;
             }
@@ -152,6 +149,7 @@ export class RendererLightmap {
 
         // assign the lightmap
         material.lightMap = this.lightmapTexture;
+        material.needsUpdate = true;
         // store the version of the material
         material["NEEDLE:lightmap-material-version"] = material.version;
     }

package/src/engine-components/SeeThrough.ts

@@ -0,0 +1,256 @@
+import { Material, Object3D, Vector3 } from "three";
+
+import { Gizmos } from "../engine/engine_gizmos.js";
+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 { Behaviour } from "./Component.js";
+import { Renderer } from "./Renderer.js";
+
+const debugSeeThrough = getParam("debugseethrough");
+
+type MaterialState = {
+    opacity: number,
+    transparent: boolean,
+    alphaHash: boolean
+}
+
+type MaterialWithState = Material & {
+    /** Original values */
+    userData: {
+        seeThrough: {
+            initial: MaterialState,
+        }
+    }
+};
+
+let i = 0;
+
+
+/**
+ * Makes the object fade out when it is obscuring the reference point from the camera. This component can be put on any object in the scene. It will affect all Renderer components on the same object and child objects. 
+ * 
+ * Useful for e.g. making walls transparent when the camera is outside or hiding object's that would otherwise block the view.  
+ * 
+ * Requires a Renderer component on the same object or a child object.
+ * 
+ * - Example https://see-through-walls-z23hmxbz1kjfjn.needle.run/
+ */
+export class SeeThrough extends Behaviour {
+
+    /**
+     * Assign a reference point - if this point will be obscured from the camera by this object then this object will fade out.  
+     * If no reference point is assigned the scene's root object will be used as reference point.
+     */
+    @serializable(Object3D)
+    referencePoint: Object3D | null = null;
+
+    /** 
+     * Fade Duration in seconds 
+     * @default 0.05
+    */
+    @serializable()
+    fadeDuration: number = .05;
+
+    /** 
+     * Minimum alpha value when fading out (0-1)
+     * @default 0
+     */
+    @serializable()
+    minAlpha: number = 0;
+
+    /**
+     * When useAlphaHash is enabled the object will fade out using alpha hashing, this means the object can stay opaque. If disabled the object will set to be transparent when fading out.
+     * @default true
+     */
+    @serializable()
+    useAlphaHash: boolean = true;
+
+    /**
+     * Set this to force updating the reference point position and direction
+     */
+    set needsUpdate(val: boolean) {
+        this._needsUpdate = val;
+    }
+    get needsUpdate() {
+        return this._needsUpdate;
+    }
+
+    /**
+     * Override the alpha value, -1 means no override
+     * @default -1
+     */
+    @serializable()
+    overrideAlpha: number = -1;
+
+    /**
+     * 
+     */
+    @serializable()
+    autoUpdate: boolean = true;
+
+
+    private readonly _referencePointVector: Vector3 = new Vector3();
+    private readonly _referencePointDir: Vector3 = new Vector3();
+    private _distance: number = 0;
+    private _renderer: Renderer[] | null = null;
+    private _needsUpdate = true;
+    private _id = i++;
+
+    /** * @internal */
+    onEnable() {
+        this._needsUpdate = true;
+        this._renderer = null;
+    }
+
+    /**  @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);
+        });
+    }
+
+    /**
+     * @internal
+     */
+    update(): void {
+
+
+        if (this._needsUpdate) {
+            this._needsUpdate = false;
+            this._renderer = this.gameObject.getComponentsInChildren(Renderer);
+
+            // NOTE: instead of using the object's anchor (gameObject.worldPosition) we could also get the object's bounding box center:
+            // getBoundingBox(this.gameObject); // < import { getBoundingBox } from "@needle-tools/engine";
+            this.updateDirection();
+        }
+        else if (this.autoUpdate && (this.context.time.frame + this._id) % 20 === 0) {
+            this.updateDirection();
+        }
+
+
+
+        if (!this.autoUpdate) return;
+        if (!this.referencePoint) return;
+
+
+        const dot = this._referencePointDir.dot(this.context.mainCamera.worldForward);
+        const shouldHide = dot > .2;
+
+        if (debugSeeThrough && this.referencePoint) {
+            const wp = this.gameObject.worldPosition;
+            Gizmos.DrawArrow(getTempVector(wp), wp.sub(this._referencePointDir), shouldHide ? 0xFF0000 : 0x00FF00);
+            Gizmos.DrawWireSphere(this.referencePoint.worldPosition, .05, 0x0000FF);
+        }
+
+        if (shouldHide) {
+            this.updateAlpha(this.minAlpha, this.fadeDuration);
+        }
+        else {
+            this.updateAlpha(1, this.fadeDuration);
+        }
+    }
+
+    private readonly rendererMaterials = new WeakMap<Renderer, Array<MaterialWithState>>();
+    private readonly rendererMaterialsOriginal = new WeakMap<Renderer, Array<Material>>();
+
+    private updateDirection() {
+        this.referencePoint ??= this.context.scene;
+        this._referencePointVector.copy(this.gameObject.worldPosition.sub(this.referencePoint.worldPosition));
+        this._distance = this._referencePointVector.length();
+        this._referencePointDir.copy(this._referencePointVector)
+            .multiply(getTempVector(1, .5, 1)) // Reduce vertical influence
+            .normalize();
+    }
+
+
+    /**
+     * Update the alpha of the object's materials towards the target alpha over the given duration.
+     * @param targetAlpha Target alpha value (0-1)
+     * @param duration Duration in seconds to reach the target alpha. 0 means immediate. Default is the component's fadeDuration.
+     */
+    updateAlpha(targetAlpha: number, duration: number = this.fadeDuration) {
+
+        if (this.overrideAlpha !== undefined && this.overrideAlpha !== -1) {
+            targetAlpha = this.overrideAlpha;
+        }
+
+        this._renderer?.forEach(renderer => {
+
+            if (targetAlpha < .9) {
+                renderer.gameObject.raycastAllowed = false;
+            }
+            else {
+                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 (!materials) return;
+
+            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;
+
+                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.needsUpdate = true;
+                }
+            }
+        });
+    }
+
+}

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

@@ -145,6 +145,7 @@ export { RendererLightmap } from "../RendererLightmap.js";
 export { Rigidbody } from "../RigidBody.js";
 export { SceneSwitcher } from "../SceneSwitcher.js";
 export { ScreenCapture } from "../ScreenCapture.js";
+export { SeeThrough } from "../SeeThrough.js";
 export { ShadowCatcher } from "../ShadowCatcher.js";
 export { RemoteSkybox } from "../Skybox.js";
 export { SmoothFollow } from "../SmoothFollow.js";

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

@@ -59,7 +59,19 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
             this.sRGBColor.copy(this._color);
             this.sRGBColor.convertLinearToSRGB();
             _colorStateObject.backgroundColor = this.sRGBColor;
-            _colorStateObject.backgroundOpacity = this._color.alpha * this._alphaFactor;
+            _colorStateObject.backgroundOpacity = this._color.alpha;
+
+            // E.g. when a button is setting states, we need to merge the state color with the base color
+            const activeStateName = this.uiObject["_simpleState__activeStates"]?.[0];
+            if (activeStateName) {
+                const active = this.uiObject["_simpleState__states"]?.[activeStateName];
+                if (active) {
+                    if ("backgroundColor" in active) _colorStateObject.backgroundColor = active["backgroundColor"];
+                    if ("backgroundOpacity" in active) _colorStateObject.backgroundOpacity = active["backgroundOpacity"];
+                }
+            }
+
+            _colorStateObject.backgroundOpacity *= this._alphaFactor;
             this.applyEffects(_colorStateObject, this._alphaFactor);
             this.uiObject.set(_colorStateObject);
             this.markDirty();