Upgrade viewer export format to v2 with per-pose FOV and loop mode (#831)

Author: slimbuck

src/camera-pose-gizmos.ts

@@ -108,12 +108,9 @@ class CameraPoseGizmos extends Element {
             return;
         }
 
-        const boundSize = this.scene.bound.halfExtents.length();
-        const iconScale = boundSize > 0 ? boundSize * 0.04 : 0.2;
-
-        const depth = iconScale * 2;
-        const halfW = iconScale * 1.2;
-        const halfH = iconScale * 0.9;
+        const depth = 0.08;
+        const halfW = 0.06;
+        const halfH = 0.04;
 
         const numVerts = poses.length * VERTS_PER_CAMERA;
         const positions: number[] = [];

src/camera-poses.ts

@@ -8,7 +8,8 @@ type Pose = {
     name: string,
     frame: number,
     position: Vec3,
-    target: Vec3
+    target: Vec3,
+    fov?: number
 };
 
 /**
@@ -60,12 +61,12 @@ class CameraAnimTrack implements AnimTrack {
 
         const existingIndex = this.poses.findIndex(p => p.frame === frame);
 
-        // camera.getPose returns plain {x,y,z} objects, convert to Vec3
         const newPose: Pose = {
             name: `camera_${this.poses.length}`,
             frame,
             position: new Vec3(pose.position.x, pose.position.y, pose.position.z),
-            target: new Vec3(pose.target.x, pose.target.y, pose.target.z)
+            target: new Vec3(pose.target.x, pose.target.y, pose.target.z),
+            fov: pose.fov
         };
 
         if (existingIndex === -1) {
@@ -121,12 +122,12 @@ class CameraAnimTrack implements AnimTrack {
             this.poses.splice(toIndex, 1);
         }
 
-        // Clone the pose data to the new frame
         this.poses.push({
             name: `camera_${this.poses.length}`,
             frame: toFrame,
             position: source.position.clone(),
-            target: source.target.clone()
+            target: source.target.clone(),
+            fov: source.fov
         });
 
         this.rebuildSpline();
@@ -149,7 +150,8 @@ class CameraAnimTrack implements AnimTrack {
             name: p.name,
             frame: p.frame,
             position: p.position.clone(),
-            target: p.target.clone()
+            target: p.target.clone(),
+            fov: p.fov
         }));
     }
 
@@ -158,7 +160,8 @@ class CameraAnimTrack implements AnimTrack {
             name: p.name,
             frame: p.frame,
             position: p.position.clone(),
-            target: p.target.clone()
+            target: p.target.clone(),
+            fov: p.fov
         }));
         this.rebuildSpline();
         this.events.fire('track.keysLoaded');
@@ -172,7 +175,8 @@ class CameraAnimTrack implements AnimTrack {
             return;
         }
 
-        // If a pose already exists at this frame, update it
+        pose.fov ??= this.events.invoke('camera.fov') ?? 60;
+
         const idx = this.poses.findIndex(p => p.frame === pose.frame);
         if (idx !== -1) {
             this.poses[idx] = pose;
@@ -212,24 +216,25 @@ class CameraAnimTrack implements AnimTrack {
         .filter(a => a.frame < duration)
         .sort((a, b) => a.frame - b.frame);
 
-        // construct the spline points to be interpolated
         const times = orderedPoses.map(p => p.frame);
         const points: number[] = [];
         for (let i = 0; i < orderedPoses.length; ++i) {
             const p = orderedPoses[i];
             points.push(p.position.x, p.position.y, p.position.z);
             points.push(p.target.x, p.target.y, p.target.z);
+            points.push(p.fov);
         }
 
         if (orderedPoses.length > 1) {
             const spline = CubicSpline.fromPointsLooping(duration, times, points, smoothness);
             const result: number[] = [];
-            const pose = { position: new Vec3(), target: new Vec3() };
+            const pose = { position: new Vec3(), target: new Vec3(), fov: 0 };
 
             this.onTimelineChange = (frame: number) => {
                 spline.evaluate(frame, result);
                 pose.position.set(result[0], result[1], result[2]);
                 pose.target.set(result[3], result[4], result[5]);
+                pose.fov = result[6];
                 this.events.fire('camera.setPose', pose, 0);
             };
         } else {
@@ -281,25 +286,29 @@ const registerCameraPosesEvents = (events: Events) => {
                     name: pose.name,
                     frame: pose.frame,
                     position: pack3(pose.position),
-                    target: pack3(pose.target)
+                    target: pack3(pose.target),
+                    fov: pose.fov
                 };
             })
         }];
     });
 
-    events.function('docDeserialize.poseSets', (poseSets: any[]) => {
+    events.function('docDeserialize.poseSets', (poseSets: any[], documentCameraFov?: number) => {
         if (!poseSets || poseSets.length === 0) {
             return;
         }
 
         const fps = events.invoke('timeline.frameRate');
 
+        const defaultFov = documentCameraFov ?? events.invoke('camera.fov') ?? 60;
+
         const loadedPoses: Pose[] = poseSets[0].poses.map((docPose: any, index: number) => {
             return {
                 name: docPose.name,
                 frame: docPose.frame ?? (index * fps),
                 position: new Vec3(docPose.position),
-                target: new Vec3(docPose.target)
+                target: new Vec3(docPose.target),
+                fov: docPose.fov ?? defaultFov
             };
         });
 

src/camera.ts

@@ -81,6 +81,10 @@ class Camera extends Element {
 
     controlMode: 'orbit' | 'fly' = 'orbit';
 
+    // during fly-mode look, stores the camera position that must stay fixed
+    // while the azim/elev tween smoothly converges
+    lookCameraPos: Vec3 | null = null;
+
     picker: Picker;
 
     mainCamera: Entity;
@@ -206,9 +210,29 @@ class Camera extends Element {
     }
 
     setFocalPoint(point: Vec3, dampingFactorFactor: number = 1) {
+        this.lookCameraPos = null;
         this.focalPointTween.goto(point, dampingFactorFactor * this.scene.config.controls.dampingFactor);
     }
 
+    // Fly mode: rotate camera around itself, keeping the camera position fixed
+    look(dx: number, dy: number) {
+        const sensitivity = this.scene.config.controls.orbitSensitivity;
+        const d = this.distance * this.sceneRadius / this.fovFactor;
+
+        Camera.calcForwardVec(forwardVec, this.azim, this.elevation);
+        const cameraPos = this.focalPoint.add(forwardVec.clone().mulScalar(d));
+
+        const azim = this.azim - dx * sensitivity;
+        const elev = this.elevation - dy * sensitivity;
+
+        Camera.calcForwardVec(forwardVec, azim, elev);
+        const focalPoint = cameraPos.clone().sub(forwardVec.clone().mulScalar(d));
+
+        this.setAzimElev(azim, elev);
+        this.focalPointTween.goto(focalPoint, this.scene.config.controls.dampingFactor);
+        this.lookCameraPos = cameraPos;
+    }
+
     setAzimElev(azim: number, elev: number, dampingFactorFactor: number = 1) {
         // clamp
         azim = mod(azim, 360);
@@ -229,6 +253,8 @@ class Camera extends Element {
     }
 
     setDistance(distance: number, dampingFactorFactor: number = 1) {
+        this.lookCameraPos = null;
+
         const controls = this.scene.config.controls;
 
         // clamp
@@ -550,9 +576,17 @@ class Camera extends Element {
         const distance = this.distanceTween.value;
 
         Camera.calcForwardVec(forwardVec, azimElev.azim, azimElev.elev);
-        cameraPosition.copy(forwardVec);
-        cameraPosition.mulScalar(distance.distance * this.sceneRadius / this.fovFactor);
-        cameraPosition.add(this.focalPointTween.value);
+
+        if (this.lookCameraPos) {
+            cameraPosition.copy(this.lookCameraPos);
+            if (this.azimElevTween.timer >= this.azimElevTween.transitionTime) {
+                this.lookCameraPos = null;
+            }
+        } else {
+            cameraPosition.copy(forwardVec);
+            cameraPosition.mulScalar(distance.distance * this.sceneRadius / this.fovFactor);
+            cameraPosition.add(this.focalPointTween.value);
+        }
 
         this.mainCamera.setLocalPosition(cameraPosition);
         this.mainCamera.setLocalEulerAngles(azimElev.elev, azimElev.azim, 0);

src/controllers.ts

@@ -6,7 +6,6 @@ const fromWorldPoint = new Vec3();
 const toWorldPoint = new Vec3();
 const worldDiff = new Vec3();
 const moveVec = new Vec3();
-const forwardVec = new Vec3();
 
 // calculate the distance between two 2d points
 const dist = (x0: number, y0: number, x1: number, y1: number) => Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);
@@ -24,29 +23,8 @@ class PointerController {
             camera.setAzimElev(azim, elev);
         };
 
-        // Fly mode: rotate camera around itself (keep camera position fixed)
         const look = (dx: number, dy: number) => {
-            // Use TARGET values to calculate target camera position (not current interpolated)
-            const distance = camera.distance * camera.sceneRadius / camera.fovFactor;
-
-            // Calculate target camera position from target focal point and angles
-            Camera.calcForwardVec(forwardVec, camera.azim, camera.elevation);
-            const targetCameraPos = camera.focalPoint.add(forwardVec.clone().mulScalar(distance));
-
-            // Calculate new azim/elev
-            const azim = camera.azim - dx * camera.scene.config.controls.orbitSensitivity;
-            const elev = camera.elevation - dy * camera.scene.config.controls.orbitSensitivity;
-
-            // Calculate the new forward vector based on new angles
-            Camera.calcForwardVec(forwardVec, azim, elev);
-
-            // Calculate new focal point to keep camera at target position
-            // Camera position = focalPoint + forwardVec * distance
-            // So: focalPoint = cameraPosition - forwardVec * distance
-            const newFocalPoint = targetCameraPos.clone().sub(forwardVec.clone().mulScalar(distance));
-
-            camera.setAzimElev(azim, elev);
-            camera.setFocalPoint(newFocalPoint);
+            camera.look(dx, dy);
         };
 
         const pan = (x: number, y: number, dx: number, dy: number) => {

src/doc.ts

@@ -121,7 +121,7 @@ const registerDocEvents = (scene: Scene, events: Events) => {
             }
 
             events.invoke('docDeserialize.timeline', document.timeline);
-            events.invoke('docDeserialize.poseSets', document.poseSets);
+            events.invoke('docDeserialize.poseSets', document.poseSets, document.camera?.fov);
             events.invoke('docDeserialize.view', document.view);
             scene.camera.docDeserialize(document.camera);
 

src/editor.ts

@@ -708,12 +708,17 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         const focalPoint = camera.focalPoint;
         return {
             position: { x: position.x, y: position.y, z: position.z },
-            target: { x: focalPoint.x, y: focalPoint.y, z: focalPoint.z }
+            target: { x: focalPoint.x, y: focalPoint.y, z: focalPoint.z },
+            fov: camera.fov
         };
     });
 
-    events.on('camera.setPose', (pose: { position: Vec3, target: Vec3 }, speed = 1) => {
+    events.on('camera.setPose', (pose: { position: Vec3, target: Vec3, fov?: number }, speed = 1) => {
         scene.camera.setPose(pose.position, pose.target, speed);
+        if (pose.fov !== undefined) {
+            scene.camera.fov = pose.fov;
+            events.fire('camera.fov', pose.fov);
+        }
     });
 
     // hack: fire events to initialize UI

src/file-handler.ts

@@ -174,11 +174,20 @@ const loadCameraPoses = async (file: ImportFile, events: Events) => {
                 // Use fixed offset along Z-axis direction instead of variable dot product
                 vec.copy(z).mulScalar(10).add(p);
 
+                // compute max FOV from intrinsics (vertical or horizontal, whichever is larger)
+                let fov = 60;
+                if (pose.fx && pose.fy && pose.width && pose.height) {
+                    const fovX = 2 * Math.atan(pose.width / (2 * pose.fx)) * (180 / Math.PI);
+                    const fovY = 2 * Math.atan(pose.height / (2 * pose.fy)) * (180 / Math.PI);
+                    fov = Math.max(fovX, fovY);
+                }
+
                 events.fire('camera.addPose', {
                     name: pose.img_name ?? `${file.filename}_${i}`,
                     frame: i,
                     position: new Vec3(-p.x, -p.y, p.z),
-                    target: new Vec3(-vec.x, -vec.y, vec.z)
+                    target: new Vec3(-vec.x, -vec.y, vec.z),
+                    fov
                 });
             }
         });

src/publish.ts

@@ -59,7 +59,7 @@ type PublishSettings = {
     listed: boolean;
     serializeSettings: SerializeSettings;
     experienceSettings: ExperienceSettings;
-    overwriteId?: string;   // for republishing an existing scene
+    overwriteId?: string;
 };
 
 const origin = location.origin;
@@ -312,7 +312,7 @@ const registerPublishEvents = (events: Events) => {
                     type: 'info',
                     header: localize('popup.publish.succeeded'),
                     message: localize('popup.publish.message'),
-                    link: response.url
+                    link: `${origin}/scene/${response.hash}/edit`
                 });
             }
         } catch (error) {

src/splat-overlay.ts

@@ -112,8 +112,8 @@ class SplatOverlay extends Element {
         material.update();
 
         // subscribe to sorter updates for dynamic count
-        this.onSorterUpdated = (count: number) => {
-            mesh.primitive[0].count = count;
+        this.onSorterUpdated = () => {
+            mesh.primitive[0].count = instance.sorter.pendingSorted?.count ?? mesh.primitive[0].count;
         };
         instance.sorter.on('updated', this.onSorterUpdated);