I built a web-based Gaussian Splat viewer that supports camera path recording and deterministic MP4 export.
The viewer loads .ply / .splat scenes and allows users to:
- Record camera keyframes (position + quaternion rotation)
- Edit them in a draggable timeline
- Scrub preview in real time
- Export the animation to MP4
The export system renders offscreen frames using a dedicated WebGLRenderTarget and pipes raw frames to FFmpeg on a Node server.
A few design decisions that might be interesting:
• Keyframes are stored as immutable snapshots (vec3 + normalized quaternion).
• Interpolation uses slerp to avoid rotation artifacts.
• Paths can be saved to path.json and re-exported to produce identical output.
• Export rendering is isolated from the visible canvas to avoid layout thrashing and UI jitter.
• Added cancellation + progress reporting without corrupting partially written video files.
One challenge was GPU → CPU readback cost during frame extraction.
Another was ensuring deterministic replay when the interactive viewer state differs from export state.
I’d appreciate feedback on:
- Cleaner patterns for deterministic rendering in WebGL
- Better ways to pipeline frame encoding
- Architectural improvements for separating editor vs render state
I built a web-based Gaussian Splat viewer that supports camera path recording and deterministic MP4 export.
The viewer loads .ply / .splat scenes and allows users to:
- Record camera keyframes (position + quaternion rotation) - Edit them in a draggable timeline - Scrub preview in real time - Export the animation to MP4
The export system renders offscreen frames using a dedicated WebGLRenderTarget and pipes raw frames to FFmpeg on a Node server.
A few design decisions that might be interesting:
• Keyframes are stored as immutable snapshots (vec3 + normalized quaternion). • Interpolation uses slerp to avoid rotation artifacts. • Paths can be saved to path.json and re-exported to produce identical output. • Export rendering is isolated from the visible canvas to avoid layout thrashing and UI jitter. • Added cancellation + progress reporting without corrupting partially written video files.
One challenge was GPU → CPU readback cost during frame extraction. Another was ensuring deterministic replay when the interactive viewer state differs from export state.
I’d appreciate feedback on: - Cleaner patterns for deterministic rendering in WebGL - Better ways to pipeline frame encoding - Architectural improvements for separating editor vs render state
Repo: https://github.com/iab131/Scene-Gaussian-Splat-Viewer Demo: https://youtu.be/EPXJpeUkBSA
reply