update viewer

viewer/index.css

@@ -242,6 +242,39 @@ button {
 #settingsPanel > .settingsRow > div:hover {
   color: #E0DCDD;
 }
+#settingsPanel .sliderContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+#settingsPanel .slider {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 4px 8px;
+}
+#settingsPanel .slider .sliderHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+#settingsPanel .slider .sliderHeader label {
+  font-size: 11px;
+  color: #AAA;
+  text-transform: uppercase;
+}
+#settingsPanel .slider .sliderHeader span {
+  font-size: 11px;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+}
+#settingsPanel .slider input[type=range] {
+  width: 100%;
+  cursor: pointer;
+  accent-color: #fff;
+}
 #settingsPanel > .divider {
   width: 100%;
   height: 1px;

viewer/index.html

@@ -18,7 +18,7 @@
             const posterUrl = url.searchParams.get('poster');
             const skyboxUrl = url.searchParams.get('skybox');
             const settingsUrl = url.searchParams.has('settings') ? url.searchParams.get('settings') : './settings.json';
-            const contentUrl = url.searchParams.has('content') ? url.searchParams.get('content') : './scene.ply';
+            const contentUrl = url.searchParams.has('content') ? url.searchParams.get('content') : './scene.compressed.ply';
 
             const sseConfig = {
                 poster: posterUrl && createImage(posterUrl),
@@ -27,6 +27,7 @@
                 contents: fetch(contentUrl),
                 noui: url.searchParams.has('noui'),
                 noanim: url.searchParams.has('noanim'),
+                minimal: url.searchParams.has('minimal'),
                 ministats: url.searchParams.has('ministats'),
                 colorize: url.searchParams.has('colorize'),
                 unified: url.searchParams.has('unified'),
@@ -91,13 +92,13 @@
 
                     <div class="spacer"></div>
 
-                    <button id="orbitCamera" class="controlButton toggle left">
+                    <button id="orbitCamera" class="controlButton toggle left hidden">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                             <g class='stroke'><use href="#orbitIcon"/></g>
                             <g class='fill'><use href="#orbitIcon"/></g>
                         </svg>
                     </button>
-                    <button id="flyCamera" class="controlButton toggle right">
+                    <button id="flyCamera" class="controlButton toggle right hidden">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                             <g class='stroke'><use href="#flyIcon"/></g>
                             <g class='fill'><use href="#flyIcon"/></g>
@@ -147,16 +148,54 @@
 
             <!-- Settings Panel -->
             <div id="settingsPanel" class="hidden">
-                <div class="settingsRow">
+                <div class="settingsRow hidden">
                     <div id="hqCheck" class="checkMark">✓</div>
                     <div id="hqOption">High Quality Render</div>
                 </div>
-                <div class="settingsRow">
+                <div class="settingsRow hidden">
                     <div id="lqCheck" class="checkMark">✓</div>
                     <div id="lqOption">Low Quality Render</div>
                 </div>
+                <div class="divider hidden"></div>
+                <div class="settingsRow sliderContainer">
+                    <div class="slider">
+                        <div class="sliderHeader">
+                            <label>Hue</label>
+                            <span id="bgHueValue">0°</span>
+                        </div>
+                        <input id="bgHue" type="range" min="0" max="360" step="1">
+                    </div>
+                    <div class="slider">
+                        <div class="sliderHeader">
+                            <label>Saturation</label>
+                            <span id="bgSaturationValue">0%</span>
+                        </div>
+                        <input id="bgSaturation" type="range" min="0" max="100" step="1">
+                    </div>
+                    <div class="slider">
+                        <div class="sliderHeader">
+                            <label>Lightness</label>
+                            <span id="bgLightnessValue">0%</span>
+                        </div>
+                        <input id="bgLightness" type="range" min="0" max="100" step="1">
+                    </div>
+                </div>
+                <div class="divider"></div>
+                <div class="settingsRow">
+                    <div class="slider">
+                        <div class="sliderHeader">
+                            <label>FOV</label>
+                            <span id="fovValue">0°</span>
+                        </div>
+                        <input id="fov" type="range" min="1" max="180" step="1">
+                    </div>
+                </div>
                 <div class="divider"></div>
                 <div class="settingsRow">
+                    <button id="screenshot">Capture Image</button>
+                </div>
+                <div class="divider hidden"></div>
+                <div class="settingsRow hidden">
                     <button id="frame">Frame</button>
                     <button id="reset">Reset</button>
                 </div>
@@ -196,8 +235,20 @@
                                 <span class="control-key">Left Mouse</span>
                             </div>
                             <div class="control-item">
-                                <span class="control-action">Fly</span>
-                                <span class="control-key">W,S,A,D</span>
+                                <span class="control-action">Fly Forward / Backward</span>
+                                <span class="control-key">W / S or Up / Down Arrows</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Fly Left / Right</span>
+                                <span class="control-key">A / D or Left / Right Arrows</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Fly Up / Down</span>
+                                <span class="control-key">Q / E</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Fast / Slow</span>
+                                <span class="control-key">Shift / Ctrl</span>
                             </div>
                             <div class="control-spacer"></div>
                             <div class="control-item">

viewer/index.js

@@ -101579,7 +101579,9 @@ const initUI = (global) => {
         'settings', 'settingsPanel',
         'orbitCamera', 'flyCamera',
         'hqCheck', 'hqOption', 'lqCheck', 'lqOption',
-        'reset', 'frame',
+        'reset', 'frame', 'screenshot',
+        'bgHue', 'bgSaturation', 'bgLightness', 'fov',
+        'bgHueValue', 'bgSaturationValue', 'bgLightnessValue', 'fovValue',
         'loadingText', 'loadingBar',
         'joystickBase', 'joystick',
         'tooltip'
@@ -101739,7 +101741,7 @@ const initUI = (global) => {
             state.animationPaused = true;
         });
         const updatePlayPause = () => {
-            if (state.cameraMode !== 'anim' || state.animationPaused) {
+            if (config.minimal || state.cameraMode !== 'anim' || state.animationPaused) {
                 dom.play.classList.remove('hidden');
                 dom.pause.classList.add('hidden');
             }
@@ -101747,12 +101749,16 @@ const initUI = (global) => {
                 dom.play.classList.add('hidden');
                 dom.pause.classList.remove('hidden');
             }
-            if (state.cameraMode === 'anim') {
+            if (!config.minimal && state.cameraMode === 'anim') {
                 dom.timelineContainer.classList.remove('hidden');
             }
             else {
                 dom.timelineContainer.classList.add('hidden');
             }
+            if (config.minimal) {
+                dom.play.classList.add('hidden');
+                dom.pause.classList.add('hidden');
+            }
         };
         // Update UI on animation changes
         events.on('cameraMode:changed', updatePlayPause);
@@ -101797,10 +101803,19 @@ const initUI = (global) => {
         });
     });
     // Camera mode UI
-    events.on('cameraMode:changed', () => {
+    const updateCameraMode = () => {
         dom.orbitCamera.classList[state.cameraMode === 'orbit' ? 'add' : 'remove']('active');
         dom.flyCamera.classList[state.cameraMode === 'fly' ? 'add' : 'remove']('active');
-    });
+    };
+    events.on('cameraMode:changed', updateCameraMode);
+    updateCameraMode(); // Initialize on load
+    // Hide mode buttons if nomode config is set
+    if (config.minimal) {
+        dom.orbitCamera.classList.add('hidden');
+        dom.flyCamera.classList.add('hidden');
+        dom.play.classList.add('hidden');
+        dom.timelineContainer.classList.add('hidden');
+    }
     dom.settings.addEventListener('click', () => {
         dom.settingsPanel.classList.toggle('hidden');
     });
@@ -101816,6 +101831,37 @@ const initUI = (global) => {
     dom.frame.addEventListener('click', (event) => {
         events.fire('inputEvent', 'frame', event);
     });
+    dom.screenshot.addEventListener('click', () => {
+        events.fire('captureImage');
+    });
+    // Background HSL
+    const updateSliders = () => {
+        dom.bgHue.value = state.bgHue.toString();
+        dom.bgSaturation.value = state.bgSaturation.toString();
+        dom.bgLightness.value = state.bgLightness.toString();
+        dom.fov.value = state.fov.toString();
+        dom.bgHueValue.textContent = `${state.bgHue}°`;
+        dom.bgSaturationValue.textContent = `${state.bgSaturation}%`;
+        dom.bgLightnessValue.textContent = `${state.bgLightness}%`;
+        dom.fovValue.textContent = `${Math.round(state.fov)}°`;
+    };
+    dom.bgHue.addEventListener('input', (event) => {
+        state.bgHue = parseInt(event.target.value, 10);
+    });
+    dom.bgSaturation.addEventListener('input', (event) => {
+        state.bgSaturation = parseInt(event.target.value, 10);
+    });
+    dom.bgLightness.addEventListener('input', (event) => {
+        state.bgLightness = parseInt(event.target.value, 10);
+    });
+    dom.fov.addEventListener('input', (event) => {
+        state.fov = parseInt(event.target.value, 10);
+    });
+    events.on('bgHue:changed', updateSliders);
+    events.on('bgSaturation:changed', updateSliders);
+    events.on('bgLightness:changed', updateSliders);
+    events.on('fov:changed', updateSliders);
+    updateSliders();
     // update UI based on touch joystick updates
     events.on('touchJoystickUpdate', (base, stick) => {
         if (base === null) {
@@ -102813,12 +102859,12 @@ class CameraManager {
         // set the global animation flag
         state.hasAnimation = !!controllers.anim;
         state.animationDuration = controllers.anim ? controllers.anim.animState.cursor.duration : 0;
-        // initialize camera mode and initial camera position
-        state.cameraMode = state.hasAnimation ? 'anim' : (isObjectExperience ? 'orbit' : 'fly');
+        // initialize camera mode and initial camera position - always start in fly mode
+        state.cameraMode = 'fly';
         this.camera.copy(resetCamera);
         const target = new Camera(this.camera); // the active controller updates this
         const from = new Camera(this.camera); // stores the previous camera state during transition
-        let fromMode = isObjectExperience ? 'orbit' : 'fly';
+        let fromMode = 'fly';
         // enter the initial controller
         getController(state.cameraMode).onEnter(this.camera);
         // transition time between cameras
@@ -102843,6 +102889,10 @@ class CameraManager {
             if (state.cameraMode === 'anim') {
                 state.animationTime = controllers.anim.animState.cursor.value;
             }
+            // sync fov state
+            if (state.fov !== this.camera.fov) {
+                state.fov = Math.round(this.camera.fov);
+            }
         };
         // handle input events
         events.on('inputEvent', (eventName, event) => {
@@ -102856,7 +102906,7 @@ class CameraManager {
                     controllers.orbit.goto(resetCamera);
                     break;
                 case 'playPause':
-                    if (state.hasAnimation) {
+                    if (state.hasAnimation && !global.config.minimal && !global.config.noanim) {
                         if (state.cameraMode === 'anim') {
                             state.animationPaused = !state.animationPaused;
                         }
@@ -102874,6 +102924,11 @@ class CameraManager {
                     break;
             }
         });
+        // handle external fov changes
+        events.on('fov:changed', (value) => {
+            this.camera.fov = value;
+            target.fov = value;
+        });
         // handle camera mode switching
         events.on('cameraMode:changed', (value, prev) => {
             // store previous camera mode and pose
@@ -103234,7 +103289,10 @@ class InputController {
         }
         this._state.shift += key[keyCode.SHIFT];
         this._state.ctrl += key[keyCode.CTRL];
-        if (state.cameraMode !== 'fly' && this._state.axis.length() > 0) {
+        // Switch to fly mode when using keyboard axis or zooming with wheel
+        const hasWheelZoom = wheel[0] !== 0;
+        const hasPinchZoom = pinch[0] !== 0;
+        if (state.cameraMode !== 'fly' && (this._state.axis.length() > 0 || hasWheelZoom || hasPinchZoom)) {
             state.cameraMode = 'fly';
         }
         const orbit = +(state.cameraMode === 'orbit');
@@ -103242,13 +103300,17 @@ class InputController {
         const double = +(this._state.touches > 1);
         const pan = this._state.mouse[2] || +(button[2] === -1) || double;
         const orbitFactor = fly ? camera.fov / 120 : 1;
+        // Speed multiplier for consistent movement (keyboard uses moveSpeed)
+        const speedMultiplier = this._state.shift ? 4 : this._state.ctrl ? 0.25 : 1;
         const { deltas } = this.frame;
         // desktop move
         const v = tmpV1.set(0, 0, 0);
         const keyMove = this._state.axis.clone().normalize();
-        v.add(keyMove.mulScalar(fly * this.moveSpeed * (this._state.shift ? 4 : this._state.ctrl ? 0.25 : 1) * dt));
-        const panMove = screenToWorld(camera, mouse[0], mouse[1], distance);
-        v.add(panMove.mulScalar(pan));
+        v.add(keyMove.mulScalar(fly * this.moveSpeed * speedMultiplier * dt));
+        // Pan movement - use minimum distance of 1 to ensure panning works in fly mode
+        const panDistance = Math.max(distance, 1);
+        const panMove = screenToWorld(camera, mouse[0], mouse[1], panDistance);
+        v.add(panMove.mulScalar(pan * this.moveSpeed * 0.15));
         const wheelMove = new Vec3(0, 0, -wheel[0]);
         v.add(wheelMove.mulScalar(this.wheelSpeed * dt));
         // FIXME: need to flip z axis for orbit camera
@@ -103260,8 +103322,10 @@ class InputController {
         deltas.rotate.append([v.x, v.y, v.z]);
         // mobile move
         v.set(0, 0, 0);
-        const orbitMove = screenToWorld(camera, touch[0], touch[1], distance);
-        v.add(orbitMove.mulScalar(orbit * pan));
+        // Touch pan movement - use minimum distance for fly mode compatibility
+        const touchPanDistance = Math.max(distance, 1);
+        const orbitMove = screenToWorld(camera, touch[0], touch[1], touchPanDistance);
+        v.add(orbitMove.mulScalar(orbit * pan * this.moveSpeed * 0.15));
         flyMove.set(leftInput[0], 0, -leftInput[1]);
         v.add(flyMove.mulScalar(fly * this.moveSpeed * dt));
         pinchMove.set(0, 0, pinch[0]);
@@ -103421,6 +103485,62 @@ class Viewer {
         };
         events.on('hqMode:changed', updateHqMode);
         updateHqMode();
+        // handle background HSL changes
+        const hslToRgb = (h, s, l) => {
+            h /= 360;
+            s /= 100;
+            l /= 100;
+            let r, g, b;
+            if (s === 0) {
+                r = g = b = l; // achromatic
+            }
+            else {
+                const hue2rgb = (p, q, t) => {
+                    if (t < 0)
+                        t += 1;
+                    if (t > 1)
+                        t -= 1;
+                    if (t < 1 / 6)
+                        return p + (q - p) * 6 * t;
+                    if (t < 1 / 2)
+                        return q;
+                    if (t < 2 / 3)
+                        return p + (q - p) * (2 / 3 - t) * 6;
+                    return p;
+                };
+                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                const p = 2 * l - q;
+                r = hue2rgb(p, q, h + 1 / 3);
+                g = hue2rgb(p, q, h);
+                b = hue2rgb(p, q, h - 1 / 3);
+            }
+            return new Color(r, g, b, 1);
+        };
+        const updateBackgroundColor = () => {
+            const color = hslToRgb(state.bgHue, state.bgSaturation, state.bgLightness);
+            camera.camera.clearColor = color;
+            app.renderNextFrame = true;
+        };
+        events.on('bgHue:changed', updateBackgroundColor);
+        events.on('bgSaturation:changed', updateBackgroundColor);
+        events.on('bgLightness:changed', updateBackgroundColor);
+        updateBackgroundColor();
+        // handle screenshot capture
+        events.on('captureImage', () => {
+            app.renderNextFrame = true;
+            app.once('frameend', () => {
+                const canvas = app.graphicsDevice.canvas;
+                const url = canvas.toDataURL('image/png');
+                const link = document.createElement('a');
+                // derive filename from contentUrl
+                const contentUrl = global.config.contentUrl || 'screenshot.png';
+                const filename = contentUrl.split('/').pop().split('?')[0].split('#')[0];
+                const basename = filename.includes('.') ? filename.substring(0, filename.lastIndexOf('.')) : filename;
+                link.download = `${basename || 'screenshot'}.png`;
+                link.href = url;
+                link.click();
+            });
+        });
         // construct debug ministats
         if (config.ministats) {
             const options = MiniStats.getDefaultOptions();
@@ -104288,7 +104408,7 @@ const main = (app, camera, settingsJson, config) => {
         hqMode: true,
         progress: 0,
         inputMode: 'desktop',
-        cameraMode: 'orbit',
+        cameraMode: 'fly',
         hasAnimation: false,
         animationDuration: 0,
         animationTime: 0,
@@ -104296,7 +104416,11 @@ const main = (app, camera, settingsJson, config) => {
         hasAR: false,
         hasVR: false,
         isFullscreen: false,
-        controlsHidden: false
+        controlsHidden: false,
+        bgHue: 0,
+        bgSaturation: 0,
+        bgLightness: 0,
+        fov: 0
     });
     const global = {
         app,
@@ -104306,6 +104430,38 @@ const main = (app, camera, settingsJson, config) => {
         events,
         camera
     };
+    // initialize HSL from background color
+    const color = global.settings.background.color;
+    const r = color[0] / 255;
+    const g = color[1] / 255;
+    const b = color[2] / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s;
+    const l = (max + min) / 2;
+    if (max === min) {
+        h = s = 0; // achromatic
+    }
+    else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    state.bgHue = Math.round(h * 360);
+    state.bgSaturation = Math.round(s * 100);
+    state.bgLightness = Math.round(l * 100);
+    state.fov = global.settings.cameras[0].initial.fov;
     // Initialize the load-time poster
     if (config.poster) {
         initPoster(events);