Previz

Direct your vision. Let AI choreograph every frame.

Comment

Project Story

About the project

Previz is a browser-based 3D blocking and camera previsualization tool built for human–agent collaboration. Directors can stage characters, animate cameras, mark important positions, and describe creative goals in natural language. A WebMCP-enabled agent can then inspect the complete scene, propose a shot plan, calculate precise trajectories, validate them, and update the visible project.

Inspiration

Film previsualization tools are powerful, but turning an idea like “follow the character, hide the second performer, then reveal both in one continuous shot” into animation often requires manually editing hundreds of positions, rotations, and keyframes.

We wanted to explore a more natural workflow: the human directs while the agent handles calculation. Instead of controlling the interface through fragile mouse coordinates, the agent receives structured access to the same scene the director sees.

WebMCP made that relationship possible.

What it does

Previz provides a browser-based workspace for:

  • Adding and positioning characters and cameras in a 3D scene
  • Creating character and camera keyframes on a timeline
  • Previewing the selected camera in real time
  • Adding world-space and camera-space annotations
  • Importing scene geometry and changing its visualization style
  • Saving, importing, and autosaving project data
  • Exporting camera previews as video
  • Exposing the project to agents through WebMCP

The accompanying previz-director Codex skill turns directorial intent into validated character blocking and camera motion. It reads the scene, discusses a creative plan with the user, calculates trajectories, checks continuity and safety, and writes the approved result back into the editor.

How we built it

The interactive editor uses Three.js and WebGL for the scene, characters, camera frustums, lighting, imported geometry, transform controls, and real-time camera previews. The timeline and editing interface are implemented with HTML, CSS, and JavaScript.

The application is packaged with React, Vinext, Vite, and Cloudflare’s runtime tooling so it can run locally or as a hosted web application.

WebMCP is implemented through two tools registered with document.modelContext.registerTool(...):

  • read_state returns the complete project and its current revision.
  • write_state accepts a complete project and an expected revision, validates the data, updates the editor, creates an undo snapshot, and autosaves the result.

Both tools use JSON Schema. Revision checking prevents an agent from overwriting newer human edits.

We also created the previz-director skill, which defines a two-stage workflow:

  1. Read the scene and agree on the directorial plan.
  2. Calculate, validate, and execute the approved character and camera trajectories.

Challenges we ran into

One major challenge was connecting creative language to exact 3D motion. A request can be visually clear to a director while leaving many mathematical details unspecified: timing, path shape, camera distance, target transitions, angle continuity, and collision clearance.

Camera movement introduced additional problems. Smooth positions do not guarantee smooth framing, and direct look-at calculations can cause sudden rotations during close passes or near-vertical shots. We needed to consider speed, acceleration, angular motion, occlusion, and composition together.

Another challenge was safe human–agent collaboration. The agent may spend time calculating a scene while the user continues editing it. Revision-based writes ensure that stale calculations cannot silently replace newer work.

Finally, we had to keep the visual editor responsive while rendering multiple views, imported geometry, shadows, annotations, playback, and video exports.

Accomplishments that we're proud of

We are especially proud that Previz does not treat WebMCP as a remote-control layer. The agent works with meaningful project concepts—characters, cameras, annotations, frames, and trajectories—instead of imitating clicks and drags.

Other accomplishments include:

  • Transactional, revision-protected project updates
  • Immediate synchronization between agent writes and the visible editor
  • Per-frame trajectory support for precisely calculated movement
  • A reusable directing skill that separates creative approval from execution
  • World-space and camera-space annotation workflows
  • Browser-based video preview and export
  • Automated coverage across 62 application tests
  • A completely browser-based workflow with no traditional 3D application required

What we learned

We learned that the strongest agent experiences divide responsibility clearly.

Humans are best at narrative intent, taste, rhythm, and deciding what an audience should feel. Agents are valuable when a creative decision expands into hundreds of dependent calculations and consistency checks.

We also learned that structured state is much more reliable than visual automation. Giving the agent a small, well-described tool surface produced safer and more understandable behavior than exposing every interface control individually.

Most importantly, planning and execution need a clear boundary. Having the agent present its interpretation before writing the scene keeps the user in control and prevents technically valid motion from becoming the wrong creative choice.

What's next for Previz

Next, we want to add:

  • Adjustable focal length and camera sensor controls
  • Look-at and subject-tracking constraints
  • Editable easing and motion curves
  • Motion paths and onion-skin visualization
  • Keyframe copy and paste
  • More detailed collision and occlusion diagnostics
  • glTF and USD camera export
  • Multi-user and multi-agent collaboration
  • Additional WebMCP tools for targeted, incremental scene operations
  • A reusable library of blocking and cinematography patterns

Our long-term goal is to make Previz a shared creative surface where people direct ideas and agents turn those ideas into precise, editable cinematic motion.

Built With

Share this project:

Updates

Submission history