@preference-sl/pref-viewer 2.17.2-beta.1 → 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.1",
+    "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") {
@@ -3396,7 +3420,8 @@ export default class BabylonJSController {
             getViewport: () => ({ width: this.#canvas.clientWidth, height: this.#canvas.clientHeight }),
             getCulture: this.#viewCubeConfig.getCulture,
             onLayout: this.#viewCubeConfig.onLayout,
-            requestRender: () => this.#requestRender({ frames: 2 }),
+            // A cube drag is pointer interaction like a main-canvas drag: keep the loop continuous for the same window.
+            requestRender: (options) => this.#requestRender({ frames: 2, continuousMs: options?.interaction ? BabylonJSController.config.render.interactionMs : 0 }),
         });
     }
 

package/src/babylonjs-view-cube-controller.js

@@ -139,7 +139,7 @@ export default class BabylonJSViewCubeController {
      * @param {function(import("@babylonjs/core").Camera|null|undefined): boolean} host.isLocked - Reports whether navigation is forbidden for the supplied camera, including unavailable cameras or active XR.
      * @param {function(): (ViewCubeBounds|null)} host.getBounds - Returns current model-only world bounds and their eight corners; null when geometry is unusable. Excludes the environment.
      * @param {function(): {width: number, height: number}} host.getViewport - Returns the current scene viewport dimensions in CSS pixels.
-     * @param {function(): void} host.requestRender - Requests rendering through the host scheduler after accepted navigation.
+     * @param {function(Object=): void} host.requestRender - Requests rendering through the host scheduler after accepted navigation; `{ interaction: true }` marks a pointer drag step, for which the host keeps rendering continuously as it does for its own canvas drags.
      * @param {function(): string} [host.getCulture] - Returns the current localization culture; omitted callbacks use the translator's default culture.
      * @param {function(number, number): void} [host.onLayout] - Receives the measured cube viewport height and scene viewport height, in CSS pixels; zero cube height clears the menu offset, and disposal reports (0, 0).
      * @param {function(ViewCubeRendererOptions): BabylonJSViewCubeRenderer} [host.createRenderer] - Renderer factory, mainly for tests; defaults to a BabylonJSViewCubeRenderer with its own Engine.
@@ -581,7 +581,9 @@ export default class BabylonJSViewCubeController {
             const direction = directionFromAngles(applyDragDelta(angles, dAlpha, dBeta));
             this.#writePose(camera, pose.target.add(new Vector3(direction.x, direction.y, direction.z).scale(pose.distance)), pose.target, pose.distance);
         }
-        this.#host.requestRender();
+        // A drag is pointer interaction: the host keeps its loop continuous for its interaction window, as it does for a
+        // main-canvas drag. A plain one-frame request would let its idle throttle pace the drag (seen at ~8 fps).
+        this.#host.requestRender({ interaction: true });
     }
 
     /**

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).
      *