@codepawlhq/67js

67js is a WebGL2 renderer with addons for terrain, vegetation, characters, liquid, vehicles and media export. A scene is plain data: each part has a geometry, a matrix and a material. An agent builds and changes a scene through an MCP server, looks at PNG previews and renders stills or MP4 video. The goal is to be as capable as Blender and as light as three.js. docs/goal.md defines each part. See the showcase, the documentation, the guide for agents and the changelog.

Showcase

Each picture below is a 67js render. The linked ones open live in the browser.

Airport ramp	AI data center	Container port

Bistro cafe corner	Bistro plaza

Install

Let your agent do it. Paste this prompt into Claude Code, Codex, Cursor, Gemini CLI or OpenCode. The agent installs the package, reads the guide and connects the MCP server.

Install 67js from npm as `67js@npm:@codepawlhq/67js` and connect its MCP server with `npx 67js-mcp`. Read
https://67js.codepawl.com/llms.txt first and follow it.

Claude Code plugin. One command adds the MCP server and both skills. The server starts from the published npm package with npx, so nothing is built locally.

/plugin marketplace add codepawl/67.js
/plugin install 67js@67js

By hand

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

The registry name is @codepawlhq/67js. The command installs it under the alias 67js, so imports stay short. The package is ESM. The tools need Node.js 20.19 or later, and rendering needs a WebGL2 browser.

Quick start

import { Renderer67, box, sphere } from '67js';

// Column-major 4x4 matrix: scale, then move.
const placed = ([x, y, z], [width, height, depth] = [1, 1, 1]) =>
  new Float32Array([width, 0, 0, 0, 0, height, 0, 0, 0, 0, depth, 0, x, y, z, 1]);

const parts = [
  {
    name: 'Floor',
    geometry: box(),
    matrix: placed([0, 0, 0], [8, 0.1, 8]),
    material: { color: [0.4, 0.42, 0.45], metallic: 0, roughness: 0.9, emission: 0 },
  },
  {
    name: 'Ball',
    geometry: sphere(48, 24),
    matrix: placed([0, 1, 0]),
    material: { color: [0.8, 0.3, 0.2], metallic: 0, roughness: 0.35, emission: 0 },
  },
];

const canvas = document.querySelector('canvas');
const renderer = new Renderer67(canvas, parts, { samples: 4, memoryBudgetMiB: 256 });
renderer.render({ eye: [4, 3, 6], target: [0, 1, 0] });

Call renderer.updateParts(parts) to move or recolour parts without a new upload. Call renderer.resize() after the canvas changes size, and renderer.dispose() before you replace the renderer. The guide covers cameras, lights, effects and every material field. To save a PNG from a script, use the render-from-a-script recipe.

For agents

The package includes an MCP server that connects an agent to a persistent browser renderer. The server needs a local Chrome installation.

npx 67js-mcp --backend gpu --memory 192

Use --backend cpu on a machine without a GPU. With bun, bunx 67js-mcp takes the same flags; CI runs the packaged server under bun on every pull request. An agent authors a JSON recipe, sets lights and fog, imports GLB assets and adds motion. It gets PNG previews back, compares up to four views in a review grid and runs render jobs for stills and MP4 video. The server accepts no arbitrary code and no remote asset URLs. The MCP reference lists its tools.

Two skills teach an agent to drive the MCP tools: build-67js-scene for scenes and materials, and render-67js-media for image and video export. For a plain-text guide, give the agent llms.txt.

viz3d uses 67js. It is a skill that turns places, systems and events into 3D apps and films, and it renders its films and stills in 67js. To add it in Claude Code, run /plugin marketplace add codepawl/viz3d, then /plugin install visualize-in-3d@codepawl.

Addons

Each addon is a separate import, so a page loads only what it uses.

The documentation page lists every guide.

Render images and video

The render command exports a scene to PNG or MP4 through headless Chrome, on the GPU or on the CPU.

npm run render -- --kind image --scene nature --backend gpu --preset high --output artifacts/nature.png

Video export streams one frame at a time, so a film never sits in memory. The render skill lists every preset and flag.

Run the site locally

1. Install Node.js 22.12 or later.
2. Run npm ci.
3. Run npm run dev. Vite prints the local URL.

Performance claims

verification.md has the measured results and their limits. They compare matching scenes on the same hardware. They do not show a general speed advantage over three.js or visual parity with Blender.

Contributing

Read CONTRIBUTING.md before you open a pull request. It covers setup, checks, code style and the release flow. Coding agents start with AGENTS.md, and npm run preflight runs the pull request checks locally. Questions and bug reports: SUPPORT.md.

Credits

• gl-matrix supplies the matrix math.
• The glTF addon has its own parser. The Draco, meshopt and KTX2 decoders are three.js loaders that you pass in.
• The textures and the HDRI on the site are CC0 scans from Poly Haven and ambientCG. See the texture credits.
• The Bistro renders use Amazon Lumberyard Bistro (CC BY 4.0, from the NVIDIA ORCA library) under a CC0 Poly Haven sky.
• The showcase models and their sources are listed in each world's scene.json under public/showcase/.
• The banner wordmark uses Sora (SIL Open Font License).

License

MIT © CodePawl