67.js

A WebGL2 3D engine that AI agents drive.

Showcase · Documentation · Guide for agents · Changelog

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. Issue #23 tracks the work.

AI data center

Container port

Install

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.
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 the engine: 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.

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 showcase models and their sources are listed in each world's scene.json under public/showcase/.

MIT © CodePawl