@preference-sl/pref-viewer 2.17.2-beta.2 → 2.18.0-beta.0

package/README.md

@@ -521,6 +521,8 @@ Render settings are persisted in `localStorage` under the `pref-viewer/render-se
 
 The showroom daylight background uses a shared linear HDR color calibrated with exposure and ACES tone mapping for the current light studio gray target, `#d9d9d9`, in a scene-less view. Both the static look and time-of-day cycle use this same daylight value; the cycle retains its dark night endpoint. Scene geometry can cover the background. The internal `BabylonJSController.config.look.showroom.backgroundDay` value is not a public background-color option and must be recalibrated if tone mapping or exposure changes.
 
+The model's transmissive glass (`KHR_materials_transmission`, as authored by the SDK) also carries a base color alpha of `0.15`, which would multiply its reflection away and leave it flat grey. The viewer sets that alpha to `1` and `metallicF0Factor` to `3` (`BabylonJSController.config.look.glass`, internal like the showroom look) so the environment reflection reads while the glass stays see-through through transmission. Glass in the environment glTF is unaffected: it is simplified to alpha blending instead.
+
 ## Environment map and scene lights
 
 `options.ibl.url` accepts two formats, chosen by the URL's extension (query and hash ignored):

package/package.json

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

package/src/babylonjs-controller.js

@@ -216,6 +216,14 @@ export default class BabylonJSController {
                 // Re-solve these if exposure, contrast or the tonemapping curve change.
                 backgroundDay: [1.424, 1.424, 1.424],
             },
+            // The model's physical glass (KHR_materials_transmission). The SDK also authors it with a
+            // baseColor alpha of 0.15, which multiplies the reflection away; the viewer sets the alpha
+            // to 1 and raises the dielectric F0 (MaterialUtils.tunePhysicalGlassMaterial) so the
+            // environment reads on the glass while transmission keeps it see-through.
+            glass: {
+                alpha: 1,
+                metallicF0Factor: 3,
+            },
         },
         pointerPicking: {
             movePickIntervalMs: 50, // Cap expensive scene.pick calls to ~20 Hz while moving the pointer
@@ -2863,6 +2871,21 @@ export default class BabylonJSController {
         assetContainer.lights = [];
     }
 
+    /**
+     * Gives the model container's physical glass (KHR_materials_transmission) a visible reflection.
+     * Model container only: environment glass is simplified instead (see
+     * #assetContainer_simplifyTransmissiveMaterials), so it is never tuned here.
+     * @private
+     * @param {AssetContainer} assetContainer - Model container whose glass materials should be tuned.
+     * @returns {void}
+     */
+    #assetContainer_tuneModelGlass(assetContainer) {
+        const look = BabylonJSController.config.look.glass;
+        assetContainer.materials?.forEach((mat) => {
+            MaterialUtils.tunePhysicalGlassMaterial(mat, look);
+        });
+    }
+
     /**
      * Strips KHR_materials_transmission, KHR_materials_ior and KHR_materials_volume from
      * environment-container (scene) materials, converting them to simple alpha blending.
@@ -3078,6 +3101,7 @@ export default class BabylonJSController {
                         if (container.state.name === "model") {
                             this.#assetContainer_deleteLights(assetContainer);
                             this.#assetContainer_stopAnimations(assetContainer);
+                            this.#assetContainer_tuneModelGlass(assetContainer);
                             newModelMetadata = { ...(container.state.update.metadata ?? {}) };
                         }
                         if (container.state.name === "model" || container.state.name === "environment") {

package/src/material-utils.js

@@ -47,6 +47,36 @@ export default class MaterialUtils {
         return Boolean(mat?.subSurface?.isRefractionEnabled || mat?.subSurface?.isTranslucencyEnabled);
     }
 
+    /**
+     * Gives the model's physical glass a visible reflection.
+     *
+     * The SDK authors window glass with KHR_materials_transmission AND a baseColor alpha of 0.15 in
+     * alpha-blend. Babylon's transmission extension turns on `transparencyAsCoverage` for the whole
+     * GLB, which makes `useSpecularOverAlpha` / `useRadianceOverAlpha` false, so the ~4 % Fresnel
+     * reflection is multiplied by that alpha and the glass reads as flat grey. Setting the alpha to
+     * 1, raising the dielectric F0 and re-enabling the over-alpha reflections lets the environment
+     * show up on the glass while transmission keeps it see-through.
+     *
+     * Only physical glass (see `isPrefViewerPhysicalGlassMaterial`) is touched; `transparencyMode`
+     * and `subSurface` are left as authored so the glass stays in the transparent pass.
+     * @public
+     * @static
+     * @param {import("@babylonjs/core").PBRMaterial|null|undefined} mat - Material to tune.
+     * @param {{ alpha?: number, metallicF0Factor?: number }} [look] - Glass look; defaults to alpha 1 and F0 factor 3.
+     * @returns {boolean} True when the material was physical glass and has been changed.
+     */
+    static tunePhysicalGlassMaterial(mat, look = {}) {
+        if (!MaterialUtils.isPrefViewerPhysicalGlassMaterial(mat)) {
+            return false;
+        }
+
+        mat.alpha = look?.alpha ?? 1;
+        mat.metallicF0Factor = look?.metallicF0Factor ?? 3;
+        mat.useSpecularOverAlpha = true;
+        mat.useRadianceOverAlpha = true;
+        return true;
+    }
+
     /**
      * Returns true when a material should be placed in the transparent rendering group (renderingGroupId=1).
      *