update viewer

app.py

@@ -322,7 +322,7 @@ def viewer_url_for_output(ply_filename: str, settings_filename: str) -> str:
     # Use absolute paths with /gradio_api/file= prefix for content and settings
     content_path = f"/gradio_api/file=outputs/{ply_filename}"
     settings_path = f"/gradio_api/file=outputs/{settings_filename}"
-    return f"/gradio_api/file=viewer/index.html?content={content_path}&settings={settings_path}&noanim"
+    return f"/gradio_api/file=viewer/index.html?content={content_path}&settings={settings_path}&noanim&minimal"
 
 
 def viewer_placeholder_html() -> str:

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>
@@ -123,7 +124,7 @@
                             <g class='fill'><use href="#infoIcon"/></g>
                         </svg>
                     </button>
-                    <button id="settings" class="controlButton">
+                    <button id="settings" class="controlButton hidden">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                             <g class='stroke'><use href="#settingsIcon"/></g>
                             <g class='fill'><use href="#settingsIcon"/></g>
@@ -196,8 +197,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

@@ -101739,7 +101739,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 +101747,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 +101801,20 @@ 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.classList.add('hidden');
+    }
     dom.settings.addEventListener('click', () => {
         dom.settingsPanel.classList.toggle('hidden');
     });
@@ -102813,12 +102827,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
@@ -102856,7 +102870,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;
                         }
@@ -103234,7 +103248,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 +103259,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 +103281,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]);
@@ -104288,7 +104311,7 @@ const main = (app, camera, settingsJson, config) => {
         hqMode: true,
         progress: 0,
         inputMode: 'desktop',
-        cameraMode: 'orbit',
+        cameraMode: 'fly',
         hasAnimation: false,
         animationDuration: 0,
         animationTime: 0,