viz3d

!Six builds made with viz3d: a canal lock with cherry trees, a cutaway wristwatch plate, a point-cloud map of the Bosphorus, a glowing ASCII cockroach, a cutaway plate of RMS Titanic and an air traffic space-time cube

Films and stills render in 67js, our WebGL2 engine that agents drive through an MCP server: JSON scene recipes, PNG review grids, and GPU or CPU export to images and video with bounded memory. viz3d works without it, and looks better with it. See Films and stills with 67js.

Start in three steps

1. Install the plugin.
2. Type /viz3d with nothing after it (/visualize-in-3d:viz3d in Claude Code with the plugin). The agent shows the menu of modes and looks.
3. Type a mode, a look if you want one, and the subject: /viz3d film white model the Chernobyl accident.

You can also skip the command and ask in your own words. The agent picks the mode and the look from the subject.

What do you want to make?

| You want to | Type | |---|---| | Tell a story or an event as a film | /viz3d film the 1906 San Francisco earthquake | | Show creatures, machines or characters in action | /viz3d action two mechs fighting in a flooded city | | Show off one object, product or model | /viz3d showcase glow a cockroach | | Show how a place or a system runs | /viz3d app a container port | | Teach how a thing works, step by step | /viz3d lesson an Arduino that fades an LED | | Open up one big object or building, room by room | /viz3d book the Titanic | | Let people play it | /viz3d game pixel a worm that eats its way through a city | | Show your leads something this week | /viz3d prototype our warehouse, from last week's CSV export | | Put a live 3D view in your own dashboard | /viz3d embed our fleet, the feed is at /api/fleet/events |

Modes

The nine modes fall into three groups, by what people do with the result.

Watch it

• Documentary film (film): a 2 to 4 minute film of an event, told in order. It is built from a sourced fact

• Action short (action): creatures, machines or characters doing something, such as a fight, a chase or a

• Showcase (showcase): a film or a set of stills that shows off one object, product or model. The model stays

Explore it

• Live app (app): a three.js app with a dashboard around a 3D world of the place. A seeded simulation moves the

• Lesson app (lesson): a step-by-step lesson on a real object at real size, such as an Arduino and a

• Book (book): a 3D illustrated cutaway plate of one big object or building, such as a liner or a castle.

• Game (game): a free browser game people play. The player steers one creature or unit through an open world

Put it in your product

• Quick prototype (prototype): a live app in one pass from three.js primitives, with no Blender. Use it when you

• Live embed (embed): the 3D view as a web component () or an iframe page. It goes into the

| Documentary film | Action short | |---|---| | !A documentary map: a red route from a farm to a hardware store across a county | !A steam-driven mechanical spider walking over pipes on a prototype grid | | Showcase | Live app | | !A cockroach drawn in glowing ASCII glyphs on a dark dithered floor | !A canal lock app: a container ship selected, its card open on the right, and the stage timeline at the bottom | | Lesson app | Book | | !An Arduino lesson: an LED fading on a breadboard, the current code line highlighted and the PWM signal drawn on the right | !An illustrated cutaway plate of RMS Titanic with labelled rooms and the people aboard | | Game | Quick prototype | | !A browser game: a swarm of red worms spreading through a low-poly forest, with the worm count in the corner | !An electric bus depot built from three.js primitives, with pantograph chargers over the buses | | Live embed | Stage cameras in a live app | | !A transit company dashboard with the 3D depot view inside it, a bus card open and a live status mark | !A metro app with the stage bar at the top and the speed controls at the bottom |

Every live app has stage cameras on number keys, a guided tour and a follow camera, as in the metro app above. Playback runs from 0.25x to 10x.

Looks

The thirteen looks fall into four families. Put the look word in your command, or leave it out and the agent uses the default look for the mode.

| Family | Look | Word | Fits | |---|---|---|---| | Clean product | Clean ops world | ops | The default for a system that runs: a white-grey world with one accent colour, framed like a real operations product | | | Toy isometric | toy | A friendly diorama of a place or system | | | Lived-in isometric | lived-in | Ordinary buildings where people live or work and a crisis plays out inside | | Real and cinematic | Photoreal terrain | terrain | Something spreading over real land, such as a wildfire or a flood | | | Dark documentary | documentary | A case or an event told as a film | | | White model documentary | white model | A case told as an architect's white model | | | Layer build film | layer build | One locked aerial camera while a place is built up layer by layer | | Technical | Point-cloud survey | point cloud | A scanned, technical view of land, sea or a site | | | Illustrated cutaway plate | plate | One big object or building cut open, for the book mode | | | Space-time cube | space-time | Movers under spacing rules, such as air traffic: the map is the floor, time goes up, and you drag a tube to fix a breach | | Stylized art | Pixel diorama | pixel | Pixel-art sprites on a 3D stage, for battles, games and small worlds | | | Dither + ASCII showcase | ASCII | A film that shows off a model, a tool or a product: the model stays clean, the world around it turns to ASCII | | | Gradient glow ASCII | glow | A creature or object that is itself the art, drawn in glowing ASCII |

| Toy isometric | Illustrated cutaway plate | |---|---| | !A canal lock diorama: a narrowboat in the chamber between two timber gates, cherry trees in bloom on the banks | !A cutaway plate of a mechanical wristwatch in ink and watercolour, each wheel labelled with its job and speed | | Point-cloud survey | Space-time cube | | !The Bosphorus as a white point cloud: ships in orange moving through the strait, with live counts in the corner | !An airport radar as a green phosphor space-time cube: flights as tubes of rings rising over the scope, one tube being dragged to fix a wake spacing breach | | Layer build | ASCII | | !A city built up layer by layer, shown here at its white model stage | !An ASCII dungeon game: the hero and a spell drawn in glyphs inside a cave |

Default looks: apps, prototypes, embeds and lessons use clean ops world. Films use dark documentary, showcases use Dither + ASCII and books use the cutaway plate. You can show the agent a reference video of a new look. It studies the frames and writes the look up for next time.

Real places

A real place starts from its real layout. The agent draws the plan from OpenStreetMap data and builds the 3D world on the same coordinates, so the two line up. Things then work as they do in reality. Aircraft follow the taxiway centre lines and give way to each other. Jet bridges and service vehicles attach to the real doors and ports, and the agent measures every gap before it records.

!Singapore Changi: the aerodrome plan drawn from OpenStreetMap on the left, the same layout in 3D on the right

How the agent works

1. It writes a plan file: the real parts of the subject, what moves, the beats, the look and the camera.
2. It gets the models: ready models and scans first, then Blender builds from reference pictures.
3. It builds the app or the film from the plan file.
4. It checks its own frames on contact sheets for up to three rounds and fixes what it finds.
5. It sends you a fast low-quality preview of the whole film. The full render waits for your sign-off.

It learns the style from a picture

The agent never builds a look from words alone. It finds a reference in the same look, writes a style card (camera, palette, light, brightness, density, hero props) and checks every round against it with measured gates:

• compare-look.py compares brightness, saturation and hue with the reference and fails when the render drifts.
• ground-share.py fails a frame where one flat colour covers more than a quarter of it.
• The subject must fill at least a third of the default view.
• Grass, trees and props come from CC0 and CC BY packs, never from code-built blades or boxes.

!Two builds before and after one review round. Top: the Bosphorus point cloud, where the strait grows from a thin line to most of the frame. Bottom: the wristwatch plate, where a faceted box becomes a round case with Geneva stripes, jewels and ink

Left: the first build. Right: the same subject after the agent applied its own review notes.

Install

In Claude Code, add this repository as a plugin marketplace and install the plugin:

/plugin marketplace add codepawl/viz3d
/plugin install visualize-in-3d@codepawl

From a shell, the same two steps are:

claude plugin marketplace add codepawl/viz3d
claude plugin install visualize-in-3d@codepawl

For Claude Code, Codex, Cursor and other agents that read skill folders, use the skills CLI:

npx skills add codepawl/viz3d

To install by hand, copy both folders in plugins/visualize-in-3d/skills/ (visualize-in-3d and the viz3d command) into your agent's skills folder:

| Agent | Skills folder | |---|---| | Claude Code | ~/.claude/skills/ | | Codex | ~/.agents/skills/ | | Cursor | ~/.cursor/skills/ (it also reads ~/.claude/skills/ and ~/.agents/skills/) | | Gemini CLI | ~/.gemini/skills/ | | OpenCode | ~/.config/opencode/skills/ |

Gemini CLI and OpenCode take slash commands from their own folders. To get /viz3d there, also copy the command file:

| Agent | Copy | To | |---|---|---| | Gemini CLI | harness/gemini/viz3d.toml | ~/.gemini/commands/ | | OpenCode | harness/opencode/viz3d.md | ~/.config/opencode/commands/ |

How you type the command depends on the agent:

| Agent | Command | |---|---| | Claude Code, plugin install | /visualize-in-3d:viz3d (Claude Code puts the plugin name in front of plugin commands) | | Claude Code, skills folder | /viz3d | | Codex | $viz3d, or pick it from /skills | | Cursor | /viz3d | | Gemini CLI, OpenCode | /viz3d, after you copy the command file |

Live embed

For a live embed, the agent builds a web component and an iframe page. Put the component in any page and point it at your feed:

<script type="module" src="/viz3d-world.js"></script>
<viz3d-world source="https://ops.example.internal/events" mapping="/mapping.json" chrome="panel"></viz3d-world>

mapping.json links your field names and status codes to the 3D view, so a new feed needs no code change. For a tool that only takes a URL, use embed.html?source=... in an iframe. To test without your real system, the skill's scripts/mock-feed.mjs replays a JSONL file as a live feed.

Films and stills with 67js

Apps, lessons, embeds and games stay in three.js, because people click and steer them. Documentaries, action shorts, showcases, cutaway films and stills render in 67js when it is installed:

• Addons give terrain, scanned trees and grass, baked liquid, vehicles on paths and skinned characters. Others give

• The agent builds the scene as a JSON recipe through MCP and checks it on labelled review grids. It tries two or

• A timeline of shots with fades and depth of field drives the clock. Any frame renders the same in any order.
• Render jobs export PNG and MP4 with the soundtrack and an audio sync check. Memory is planned before it is used.
• Films longer than one render job are split, joined and checked. A 70 s test film showed no jump or sound gap at the

Set it up in your project:

npm install 67js@npm:@codepawlhq/67js

claude mcp add 67js-scene -- npx --package @codepawlhq/67js 67js-mcp --backend gpu --memory 256

npx skills add codepawl/67.js

The last command adds the 67js skills (build-67js-scene and render-67js-media). The skill's references/67js.md has the full workflow, Windows notes and the faults we have seen. Showcase and docs are at 67js.codepawl.com. If viz3d is useful to you, a star on codepawl/67.js helps the engine behind it.

What you need

• Node 20 or later, with Playwright and Chromium for recording.
• ffmpeg on your PATH.
• A GPU that runs WebGL2 at 1080p.
• Blender 5.x is optional. It gives much better models for the full live app and

• 67js is optional. It renders the films and stills, as described above.

What is new

• Style from a reference: a style card in the plan file, checked by measured gates (compare-look.py,

• Ground cover from real assets: a CC0 ground texture under instanced grass tufts.
• Machines in cutaway plates move at their real gear ratios on one clock, in round cases with real plate finishes.
• viz3d now covers any subject, not only things that are hard to understand.
• The showcase mode: a film or stills that show off one object, product or model.
• /viz3d with nothing after it shows the menu. The menu groups the modes by what people do with them and the looks by family.
• Films and stills render in 67js when it is installed.
• The game mode: a playable browser game, balanced by bot playtests.
• A longer self-review fault list. It checks contact and support, camera flights through meshes, vehicles that

Also in this repository

build-minecraft-model-from-image turns a picture of an object into a Minecraft-style 3D model. The agent looks at the picture and writes the model as code: a few cuboids with pixel textures. It does not use a fine voxel grid or an image-to-3D network. You get a GLB, a viewer page, renders from every side and a sheet that compares them with the picture. It needs Python through uv and Blender 5.x for the renders.

!Four photos with the block model built from each: an iron kettle, an armchair, a rubber duck and a pink fire hydrant

/plugin install build-minecraft-model-from-image@codepawl

Photo credits for the picture above and the skill's examples/: kettle and armchair by Auckland War Memorial Museum (armchair photo by Gerald E Jones), CC BY 4.0. Rubber duck by Julian Lupyan, CC0. Fire hydrant by Tournasol7, CC BY 4.0. All from Wikimedia Commons.

build-house-from-plan turns a 2D house plan into a photoreal 3D house. The agent reads the walls, doors, windows and scale off the drawing into a plan file. A check overlays the built walls on the drawing's ink and fails when they do not line up. The house gets measured wall thickness, real frames and glass, CC0 scanned materials and real furniture models, and renders in Blender Cycles. You get stills, a film of the walls rising off the drawing, and whole streets. It needs Python through uv, Blender 5.x and a GPU.

!From a public domain drawing to a house and a street

/plugin install build-house-from-plan@codepawl

The plans behind the picture are public domain. They are Historic American Buildings Survey and Historic American Engineering Record sheets from the Library of Congress, and a USDA plan. Furniture includes CC BY models listed in the skill's example.

Contributing

Faults you saw, new looks, example topics and harness adapters are welcome. Read CONTRIBUTING.md. Coding agents read AGENTS.md.

License

MIT