@preference-sl/pref-viewer 2.16.0-beta.8 → 2.16.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.16.0-beta.8",
+    "version": "2.16.0-beta.9",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {

package/src/babylonjs-controller.js

@@ -51,6 +51,36 @@ function normalizeDirection(x, y, z) {
     };
 }
 
+const PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY = "prefViewerSimplifiedTransmission";
+
+export function markPrefViewerSimplifiedTransmissionMaterial(mat) {
+    if (!mat) return mat;
+    mat.metadata = {
+        ...(mat.metadata ?? {}),
+        [PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY]: true,
+    };
+    return mat;
+}
+
+export function isPrefViewerTransparentRenderOrderMaterial(mat) {
+    if (!mat) return false;
+    const isTransmissive = isPrefViewerPhysicalGlassMaterial(mat);
+    const isSimplifiedTransmission = mat.metadata?.[PREF_VIEWER_SIMPLIFIED_TRANSMISSION_METADATA_KEY] === true;
+    const alpha = typeof mat.alpha === "number" ? mat.alpha : 1;
+    const isAlphaBlended =
+        alpha < 1 ||
+        mat.transparencyMode === PBRMaterial.PBRMATERIAL_ALPHABLEND ||
+        mat.transparencyMode === PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND ||
+        mat.needAlphaBlending?.() === true ||
+        mat.needAlphaTesting?.() === true;
+
+    return Boolean(isTransmissive || isSimplifiedTransmission || isAlphaBlended);
+}
+
+export function isPrefViewerPhysicalGlassMaterial(mat) {
+    return Boolean(mat?.subSurface?.isRefractionEnabled || mat?.subSurface?.isTranslucencyEnabled);
+}
+
 export function getLightingCycleProfile(timeOfDay = 0.5) {
     const normalizedTime = clamp01(timeOfDay);
     const timeHours = normalizedTime * 24;
@@ -1628,6 +1658,81 @@ export default class BabylonJSController {
         });
     }
 
+    /**
+     * Fixes cross-GLTF transparency ordering. Detects transparent/transmissive meshes
+     * (alpha-blended, alpha-tested, simplified environment transmission, or
+     * KHR_materials_transmission) across all loaded containers and moves them to
+     * renderingGroupId=1 with depth-write disabled.
+     * This ensures opaque scene geometry (e.g. lamp cups behind a model window) is
+     * written to the depth buffer first (group 0) so the glass layer composites on top
+     * without occluding it.
+     * @private
+     * @returns {void}
+     */
+    #applyTransmittanceRenderOrder() {
+        if (!this.#scene) return;
+
+        const envMeshIds = new Set(
+            this.#containers.environment?.assetContainer?.meshes.map((m) => m.uniqueId) ?? []
+        );
+        const modelMeshIds = new Set(
+            this.#containers.model?.assetContainer?.meshes.map((m) => m.uniqueId) ?? []
+        );
+
+        // Map each material to the model meshes using it — needed to detect shared materials
+        // before modifying an env mesh's material (must clone to avoid breaking model glass).
+        const matToModelMeshes = new Map();
+        this.#scene.meshes.forEach((mesh) => {
+            if (!modelMeshIds.has(mesh.uniqueId) || !mesh.material) return;
+            if (!matToModelMeshes.has(mesh.material)) matToModelMeshes.set(mesh.material, new Set());
+            matToModelMeshes.get(mesh.material).add(mesh.uniqueId);
+        });
+
+        this.#scene.meshes.forEach((mesh) => {
+            const mat = mesh.material;
+            if (!mat) return;
+            const isTransmissive = isPrefViewerPhysicalGlassMaterial(mat);
+            const isTransparentLike = isPrefViewerTransparentRenderOrderMaterial(mat);
+            if (!isTransparentLike) return;
+
+            if (envMeshIds.has(mesh.uniqueId)) {
+                // Environment mesh carrying a transmissive material introduced by a material swap
+                // (initial-load materials are pre-simplified in #assetContainer_simplifyTransmissiveMaterials).
+                // Clone if shared with a model mesh so the model's physical glass is not affected.
+                let targetMat = mat;
+                if (matToModelMeshes.has(mat)) {
+                    targetMat = mat.clone(`${mat.name}_env_simplified`);
+                    mesh.material = targetMat;
+                }
+                if (isTransmissive) {
+                    this.#simplifyTransmissiveMaterial(targetMat);
+                }
+                mesh.renderingGroupId = 1;
+                targetMat.disableDepthWrite = true;
+                targetMat.alphaIndex = 0;
+            } else if (modelMeshIds.has(mesh.uniqueId)) {
+                // Model transparent materials render after all group-0 geometry.
+                mesh.renderingGroupId = 1;
+                mat.disableDepthWrite = true;
+
+                // Physical model glass keeps transmission, but strips volume absorption (tintColor)
+                // and roughness because those blur/darken transmitted geometry. Do not apply this
+                // tuning to plain alpha-blended model materials: render-order and physical glass
+                // material tuning are separate concerns.
+                if (isTransmissive && mat.subSurface) {
+                    mat.subSurface.tintColor = Color3.White();
+                    mat.roughness = 0;
+                }
+                mat.alphaIndex = 1;
+            } else {
+                // Unknown container (future-proof safe default).
+                mesh.renderingGroupId = 1;
+                mat.disableDepthWrite = true;
+                mat.alphaIndex = 1;
+            }
+        });
+    }
+
     /**
      * Applies the showroom tonemapping curve and lighting bias used by the 3D viewer.
      * @private
@@ -2522,6 +2627,40 @@ export default class BabylonJSController {
         assetContainer.lights = [];
     }
 
+    /**
+     * Strips KHR_materials_transmission, KHR_materials_ior and KHR_materials_volume from
+     * environment-container (scene) materials, converting them to simple alpha blending.
+     * Babylon.js cannot render two physical-transmission materials (from separate GLTF
+     * containers) through each other: the scene decorative glass (lamp cups, etc.) is
+     * simplified so the model's physical glass keeps full correct transmission.
+     * @private
+     * @param {AssetContainer} assetContainer
+     * @returns {void}
+     */
+    #assetContainer_simplifyTransmissiveMaterials(assetContainer) {
+        assetContainer.materials?.forEach((mat) => {
+            if (!(mat instanceof PBRMaterial)) return;
+            if (!mat.subSurface?.isRefractionEnabled && !mat.subSurface?.isTranslucencyEnabled) return;
+            this.#simplifyTransmissiveMaterial(mat);
+        });
+    }
+
+    /**
+     * Converts a single PBRMaterial from physical KHR_materials_transmission to simple alpha
+     * blending. Shared helper used by both the at-load simplification and the post-swap pass.
+     * @private
+     * @param {PBRMaterial} mat
+     * @returns {void}
+     */
+    #simplifyTransmissiveMaterial(mat) {
+        const intensity = mat.subSurface.refractionIntensity ?? 1.0;
+        mat.subSurface.isRefractionEnabled = false;
+        mat.subSurface.isTranslucencyEnabled = false;
+        mat.alpha = Math.max(0.28, 1.0 - intensity * 0.65);
+        mat.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHABLEND;
+        markPrefViewerSimplifiedTransmissionMaterial(mat);
+    }
+
     /**
      * Assigns unique ids to every imported camera so Babylon.js does not reuse stale SSAO effects between reloads.
      * @private
@@ -2695,6 +2834,9 @@ export default class BabylonJSController {
                         if (container.state.name === "model" || container.state.name === "environment") {
                             this.#assetContainer_retagCameras(assetContainer);
                         }
+                        if (container.state.name === "environment") {
+                            this.#assetContainer_simplifyTransmissiveMaterials(assetContainer);
+                        }
                         this.#replaceContainer(container, assetContainer);
                         container.state.setSuccess(true);
                     } else {
@@ -2721,6 +2863,7 @@ export default class BabylonJSController {
                 this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
                 this.#setMaxSimultaneousLights();
                 this.#enhanceTextureQuality();
+                this.#applyTransmittanceRenderOrder();
                 this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#containers.model.assetContainer);
                 // Apply stored highlight settings so fresh page loads respect persisted state
                 this.#setHighlightConfig({
@@ -3203,6 +3346,7 @@ export default class BabylonJSController {
     setMaterialOptions() {
         this.#stopRender();
         const materialsOptionsSetted = this.#setOptions_Materials();
+        this.#applyTransmittanceRenderOrder();
         this.#startRender();
         return materialsOptionsSetted;
     }
@@ -3384,4 +3528,4 @@ export default class BabylonJSController {
             this.#requestRender({ frames: 2 });
         }
     }
-}
+}