Directing Ella's Forensics Hunt: Real-Time 3D WebGL Cinema & Voiceover Studio

Forensics HUNT! began as a hand-drawn 8-panel pencil and colored-crayon comic strip written and illustrated by 10-year-old Ella. To celebrate her storytelling and bring every panel of her detective mystery to life on the web, we transformed her comic into a real-time, 8-act interactive Three.js 3D WebGL movie hosted directly on robertscreations.com—complete with four fully rigged 3D characters, 20 custom PBR props, dynamic camera choreography, a procedural Web Audio mystery score, and an in-browser Voiceover Studio where Ella can record and play back her own character voices for every scene.

From 8-Panel Pencil Comic to Real-Time 3D WebGL Cinema

Every great animated production begins with a storyboard. Ella's original artwork laid out an imaginative detective mystery on a single sheet of paper divided into eight numbered panels, complete with speech bubbles, character expressions, dramatic lighting cues, and a surprise twist ending.

The 8-Act Detective Storyline

Rather than converting the comic into a passive video file, we preserved Ella's 8-panel structure as eight interactive 3D scenes that viewers can play continuously like a movie or inspect scene-by-scene from any camera angle:

• Act 1 — The Title Card & Saturn Cosmic Intro: A glowing ringed planet Saturn, twinkling stars, and floating detective magnifying glass introduce Forensics HUNT! by Ella.
• Act 2 — Bedtime in Katey's Room: Mom tucks 10-year-old Katey into her cozy bed under warm bedside lamp light and wishes her goodnight.
• Act 3 — The Midnight Scream: At 2:00 AM, a piercing scream echoes from downstairs! Katey bolts upright in bed under a dramatic red alarm flash.
• Act 4 — Discovering the Crime Scene: Katey rushes downstairs and gasps in horror—discovering Mom lying on the living room rug beside a crimson puddle.
• Act 5 — Calling Detective Friend Amy: Katey grabs her smartphone and dials her best friend Amy: "Amy, come quick! We have a forensics emergency!"
• Act 6 — Forensics Investigation & Clue Hunting: Equipped with magnifying glasses, evidence markers, and a forensics kit, Katey and Amy follow a trail of red footprints and spilled droplets toward the kitchen.
• Act 7 — Catching Little Sister Lizzy Red-Handed: In the kitchen, they corner little sister Lizzy holding a dripping bottle behind her back!
• Act 8 — The Ketchup Prank Reveal: Mom sits up laughing and reveals the plot twist—it was a late-night ketchup prank all along! Everyone celebrates as confetti rains down.

3D Character Modeling, Skeletal Rigging, and 20 Custom Scene Props

Using headless Blender 4.0 Python automation and the Model Context Protocol (MCP) 3D asset pipeline, we sculpted, textured, and rigged four expressive stylized characters exported as optimized glTF 2.0 binary assets (.glb):

• Katey (katey_3d.glb): The young protagonist and lead investigator, featuring articulated limbs, expressive facial geometry, and dynamic posture transitions from sleeping to sprinting and inspecting clues.
• Mom (mom_3d.glb): Featured in the warm bedtime tuck-in, the dramatic living-room prank pose, and the laughing finale reveal.
• Amy (amy_3d.glb): Katey's sharp-eyed forensics partner who arrives with investigative gear to analyze the footprint trail.
• Lizzy (lizzy_3d.glb): The mischievous younger sister caught red-handed with the ketchup bottle in Act 7.

Interactive WebGL Engine & In-Browser Voiceover Recording Studio

The runtime engine inside /forensics-hunt/app.js pairs a Three.js WebGLRenderer (configured with ACES Filmic tone mapping and soft shadow maps) with a multi-layered audio and camera sequencer:

3-Way Audio Priority Pipeline

To make sure Ella and her family can customize the movie's voices at any time, the audio engine resolves narration through a three-tier priority cascade:

• Tier 1 — Custom Browser Voiceover Recordings (IndexedDB): Clicking Record Voices opens an 8-scene recording studio powered by the MediaRecorder API. Ella can record her own voice for each panel, preview it immediately, or export the audio files.
• Tier 2 — Pre-Recorded Studio MP3 Tracks: High-clarity scene narration tracks (/forensics-hunt/audio/scene_1.mp3 through scene_8.mp3) stream automatically by default.
• Tier 3 — Procedural Web Audio Mystery Score & Sound Effects: A real-time synthesizer generates atmospheric mystery pads, the Act 3 midnight scream alert, telephone dialing tones, detective clue chimes, and finale celebration fanfare without external audio dependencies.

Production Engineering Breakdown: Traditional Studio vs. AI-Assisted Blender MCP Pipeline

Building a multi-character 8-scene 3D interactive web movie traditionally requires a multidisciplinary studio pipeline spanning concept art, character modeling, UV unwrapping, skeletal rigging, prop modeling, Three.js shader programming, and sound design:

Studio Discipline and Man-Hour Comparison Matrix