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

package/README.md

@@ -309,7 +309,7 @@ Increasing the factor makes the fitted model smaller. The other axis can have mo
 
 The default orbital camera starts without `lowerBetaLimit` or `upperBetaLimit` and disables upside-down orbiting, whether or not the cube is enabled. ViewCube navigation keeps the camera up direction on world **+Y**, including top/bottom views and subsequent orbiting. Automatic loading preserves authored camera composition and navigation limits; an explicit unlocked cube action may relax incompatible orbit limits and adjust clipping/radius ranges to reach and fit the selected view. Locked cameras retain their view and limits.
 
-Use the mouse wheel over the 3D canvas to zoom an unlocked orbital camera. The default camera uses Babylon's native `zoomToMouseLocation`: pointing at an off-center detail shifts the target toward that region as you zoom in, with the ViewCube shown or hidden. Selecting any cube preset, including the current view, cancels pending wheel motion and recenters the target on the visible model's world-bounds center using the existing fit. This does not guarantee an exact surface point stays at the same screen pixel.
+Use the mouse wheel over the 3D canvas to zoom an unlocked orbital camera. The default camera uses Babylon's native `zoomToMouseLocation` focused on the visible model surface under the pointer: the picked model point stays at the same screen pixel as you zoom, and the target moves toward it, with the ViewCube shown or hidden. Only visible, enabled, pickable model meshes supply the focus; environment geometry never does. When the pointer is not over the model, the focus falls back to Babylon's native plane through the current target. Selecting any cube preset, including the current view, cancels pending wheel motion and recenters the target on the visible model's world-bounds center using the existing fit.
 
 Babylon's native input applies a radius-proportional increment once, so the same wheel input moves less at a smaller radius. Input wakes idle rendering, which continues until native wheel inertia settles. Named imported orbital cameras retain their existing input settings, and Free/Universal wheel navigation remains unchanged. The internal orbital wheel sensitivity (`wheelDeltaPercentage`) is 0.015. Wheel sensitivity has no public attribute or config option.
 
@@ -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):
@@ -612,7 +614,7 @@ Focused regressions for this work live in `tests/babylonjs-selection-controller.
 - `src/view-cube-orbit-math.js`: pure helpers for orbit angles, the 26 view directions, drag deltas and the cube size rule, without Babylon or DOM dependencies.
 - `src/babylonjs-camera-framing.js`: stateless `BabylonJSCameraFraming` with static `getModelBounds`, `calculateCameraFit` and `isCameraSupported` utilities. Bounds use only visible, enabled geometry in the supplied model container; fit calculations preserve camera state and projection, use the shared camera margin and return a destination for the caller to apply. Default-camera automatic fitting uses these same utilities, preserving the current orientation and applying the destination immediately.
 - `src/babylonjs-camera-zoom-controller.js`: independent `BabylonJSCameraZoomController` for model-only dynamic radius protection and authored-floor restoration. It works without cube resources.
-- `src/babylonjs-camera-wheel-motion.js`: internal boundary for inspecting and cancelling the coupled native wheel inertia during rendering, geometry protection and camera lifecycle changes. Babylon computes the zoom; this boundary isolates version-sensitive native input state.
+- `src/babylonjs-camera-wheel-motion.js`: internal boundary for inspecting and cancelling the coupled native wheel inertia during rendering, geometry protection and camera lifecycle changes, and for focusing the native mouse-location zoom on the model surface under the pointer. Babylon computes the zoom; this boundary isolates version-sensitive native input state.
 - `src/babylonjs-controller.js`: owns the scene, active camera, containers, native wheel settings and render scheduler; coordinates both controllers.
 - `src/pref-viewer-3d.js` and `src/pref-viewer.js`: bridge lazy visibility, queued config, localization and measured menu layout. The root stores the layout callback in `#handlers` and removes its listener during teardown. Shared styles place dialogs above viewer overlays.
 

package/package.json

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

package/src/babylonjs-camera-wheel-motion.js

@@ -4,6 +4,12 @@
  * camera offsets. Keep that version-sensitive access here; Babylon still computes all zoom.
  */
 export default class BabylonJSCameraWheelMotion {
+    /**
+     * Native focal lookups replaced by surface focus, keyed by the wheel input that owns them.
+     * @type {WeakMap<object, {original: (function(): object), hadOwn: boolean, getMeshes: function(): (Array<object>|null|undefined)}>}
+     */
+    static #patched = new WeakMap();
+
     /**
      * Returns the active native mouse-location input, without creating or replacing inputs.
      * @param {object|null|undefined} camera - Camera to inspect.
@@ -51,4 +57,69 @@ export default class BabylonJSCameraWheelMotion {
         input._inertialPanning?.setAll(0);
         input._hitPlane = null;
     }
+
+    /**
+     * Makes native mouse-location zoom focus on the model surface under the pointer.
+     * Babylon otherwise intersects the pointer ray with a plane through the camera target, so the
+     * visible surface drifts. Returning the picked point keeps Babylon's coupled pan an exact homothety
+     * around it. Falls back to the native lookup on a miss, without eligible meshes or with a screen offset.
+     * Idempotent: repeated calls only replace the mesh provider.
+     * @param {object|null|undefined} camera - Camera whose native wheel input is patched.
+     * @param {function(): (Array<object>|null|undefined)} getMeshes - Returns the current model meshes; the caller must exclude environment meshes.
+     * @returns {void}
+     */
+    static focusOnSurface(camera, getMeshes) {
+        const input = this.#input(camera);
+        if (!input || typeof getMeshes !== "function") {
+            return;
+        }
+        const state = this.#patched.get(input);
+        if (state) {
+            state.getMeshes = getMeshes;
+            return;
+        }
+        const entry = { original: input._getPosition, hadOwn: Object.prototype.hasOwnProperty.call(input, "_getPosition"), getMeshes };
+        this.#patched.set(input, entry);
+        input._getPosition = () => this.#surfacePoint(input, entry) ?? entry.original.call(input);
+    }
+
+    /**
+     * Restores the native focal lookup replaced by focusOnSurface.
+     * @param {object|null|undefined} camera - Camera whose wheel input was patched.
+     * @returns {void}
+     */
+    static releaseSurfaceFocus(camera) {
+        const input = camera?.inputs?.attached?.mousewheel;
+        const entry = input && this.#patched.get(input);
+        if (!entry) {
+            return;
+        }
+        if (entry.hadOwn) {
+            input._getPosition = entry.original;
+        } else {
+            delete input._getPosition;
+        }
+        this.#patched.delete(input);
+    }
+
+    /**
+     * Picks the eligible model mesh under the pointer.
+     * @param {object} input - Patched native wheel input.
+     * @param {{getMeshes: function(): (Array<object>|null|undefined)}} entry - Patch state.
+     * @returns {object|null} World-space surface point, or null when native behavior must apply.
+     */
+    static #surfacePoint(input, entry) {
+        const camera = input.camera;
+        const scene = camera?.getScene?.();
+        if (!scene || camera.targetScreenOffset?.x || camera.targetScreenOffset?.y) {
+            return null;
+        }
+        const meshes = new Set((entry.getMeshes() ?? []).filter((mesh) =>
+            !mesh.isDisposed() && mesh.isPickable && mesh.isEnabled() && mesh.isVisible && mesh.visibility > 0));
+        if (meshes.size === 0) {
+            return null;
+        }
+        const point = scene.pick(scene.pointerX, scene.pointerY, (mesh) => meshes.has(mesh), false, camera)?.pickedPoint;
+        return point && Number.isFinite(point.x) && Number.isFinite(point.y) && Number.isFinite(point.z) ? point.clone() : null;
+    }
 }

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
@@ -1084,6 +1092,19 @@ export default class BabylonJSController {
         this.#applyShowroomCameraFraming(this.#camera);
         this.#camera.attachControl(this.#canvas, true);
         this.#scene.activeCamera = this.#camera;
+        this.#focusWheelZoomOnModel(this.#camera);
+    }
+
+    /**
+     * Makes native mouse-location wheel zoom focus on the visible model surface under the pointer.
+     * Only meshes of the current visible model container are eligible; environment geometry never is.
+     * Falls back to Babylon's target-plane focus when the pointer is not over the model.
+     * @private
+     * @param {import("@babylonjs/core").ArcRotateCamera} camera - Camera with native mouse-location zoom.
+     * @returns {void}
+     */
+    #focusWheelZoomOnModel(camera) {
+        BabylonJSCameraWheelMotion.focusOnSurface(camera, () => this.#containers.model?.state?.isVisible ? this.#containers.model.assetContainer?.meshes : null);
     }
 
     /**
@@ -2863,6 +2884,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 +3114,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") {
@@ -3472,6 +3509,7 @@ export default class BabylonJSController {
     async disable() {
         BabylonJSCameraWheelMotion.cancel(this.#scene?.activeCamera);
         BabylonJSCameraWheelMotion.cancel(this.#camera);
+        BabylonJSCameraWheelMotion.releaseSurfaceFocus(this.#camera);
         this.#cameraZoom?.dispose();
         this.#cameraZoom = null;
         this.#viewCubeSuspended = 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).
      *