Rehearsing AI Video in the Browser: A Three.js Blockout Workspace

Description and use

A browser‑based Three.js blockout workspace lets editors model scenes, preview timing, and export WebM videos before AI generation, catching composition and continuity errors early.

Problem

Generated AI video often misrepresents narrative details such as character entry direction, shot composition, and prop continuity, leading to costly re‑generation.

Outcome

The blockout workspace enabled earlier staging checks, a concrete comparison baseline after AI generation, and more precise revision discussions, though no quantitative reduction in retries was measured.

Workflow

• 1. Model a simplified scene in Three.js (characters, props, camera shots, script segments).
• 2. Use the scene command layer to validate and apply manual edits or AI‑proposed structured operations.
• 3. Preview the scene with synchronized actor poses, camera selection, and script timing.
• 4. Export the scene JSON and a WebM video from the browser canvas using MediaRecorder.
• 5. Review AI‑generated shots against the blockout to identify discrepancies.

Evidence

A generated video can look beautiful and still tell the wrong story.

Source

The workspace exports scene JSON and a real 1280 × 720 WebM camera-view video, with progress and cancellation.

Source

The clearest benefits we observed were earlier staging checks, a concrete comparison baseline after generation, and more precise discussions about revisions.

Source