Reze Engine

· Live demo

Zero-runtime-dependency WebGPU engine for real-time MMD/PMX rendering — renderer, animation, IK, physics, and a multi-effect VFX system, all in TypeScript.

One piece of the Reze MMD family, covering the whole MMD workflow on the web:

reze-engine	This repo — the WebGPU foundation, anime-character rendering and physics
reze-design	Scene design, rendering and sharing
reze-studio	Animation editing on a professional timeline and curve editor
MiKaPo	Real-time motion capture in the browser, exporting straight to VMD
reze-rig	Retarget FBX animations to MMD VMD format, Mixamo and Unity tested

npm install reze-engine

Features

Models and motion

• PMX models, VMD motion with MMD's own bezier packing, IK with per-chain enable, append-inherit bones and fixed-axis twist bones, VMD export
• Vertex / group / bone / material morphs (multiply and add), vertex morphs on a GPU compute path
• MMD draw disciplines reproduced: author-order transparency with depth write, per-mesh interleaved outline hulls, the eyes-through-bangs stencil pass, sphere maps as graph nodes
• In-house sequential-impulse physics for PMX rigs — rigid bodies, joints, deterministic wind, a world floor
• Stages as environments, not characters: a stage PMX takes the same materials, graphs and style groups a character does, and keeps the bone and material morphs its author rigged for doors, lifts and colour switches — while skipping physics, IK and idle pose work, and owning the floor so the built-in ground steps aside. A stage keeps the light it was built under: setModelSun and setModelFill give one model its own sun colour and fill apart from the scene's, so a room ported from a game is lit by its own daylight while the cast keeps the scene's key
• A model can ride another's bone — MMD's 外部親 — so a weapon, a phone or a second character follows a hand without being parented in the file; setModelParentKeys keys that parent over the scene, for a prop handed over, put down, or thrown and left to gravity

Rendering

• Shader-graph materials: every look is a Blender-style node graph compiled to WGSL; style groups bind any materials to any graph; ungrouped materials render a Principled BSDF default
• HDR pipeline end to end — bloom, 4× MSAA, three view transforms (Filmic, Standard, AgX from Blender's own LUT), bladed-bokeh depth of field
• Colour grading over the tonemapped image: ASC CDL slope / offset / power with contrast and saturation, uniforms-only so dragging a slider rebuilds no pipeline — and the background layer stays ungraded, so a grade shapes the scene without staining the sky behind it
• Two shadow cascades fitted to the camera every frame, the way Blender's are: the near one to the stretch around what it looks at, the far one to everything it sees, both reaching along the light to the scene's bounds — so a stage's window frames shadow its floor to the far wall, and a lone dancer keeps a crisp near map
• Floor mirror: a planar reflection pass reusing the scene pipelines, with depth-proportional blur and the reflection composited as its own ground layer
• HDRI worlds (.hdr): the sky renders through the same view transform as the scene and lights the cast via spherical-harmonic irradiance — the sun keeps the toon ramp — and a Principled surface reflects it along the reflection vector at a level its roughness picks, so a polished floor mirrors the room and a metal mirrors the sky
• Positional lights, placed in the scene or emitted by effect shaders — stage rigs, firework bursts, a hand ribbon lighting the dancer as it passes — lit by Blender's law: inverse square windowed to zero at the lamp's reach, Lambert over π, a lamp's intensity its candela over 683 and the sun's its W/m², so a scene built in Blender lights here as it lit there. Every lamp that reaches a Principled surface puts its highlight on it; forty candles on a polished floor are forty glints
• Eye tracking: a gaze that follows the camera or a point within the rig's own range, and the cast interface reports where she is looking so an effect can follow it
• setModelDissolve takes a character apart in her own material — a per-triangle threshold burn with a glowing front, run identically by the colour pass, depth prepass, shadow map and outline hull, so nothing of her is left standing; setModelPhysicsWhileHidden keeps a hidden model's cloth moving, so a costume swapped in arrives already in motion

Effects

• N simultaneous scene effects, each one WGSL file declaring its mounts: fullscreen background/foreground, GPU particles, bone-trail ribbons, a persistent simulation grid, and lights
• Scheduled and parameterised from the source: setEffectSchedule gives an effect any number of windows, each with its own clock starting at zero and its own blend in and out, while #param lines declare the dials a host shows — turning one writes a uniform rather than recompiling
• Effects read the scene through data interfaces — the cast (bones, velocities, trail history), the audio analysis, MIDI notes, .lrc lyrics with their words rasterised for the shader to draw, and per-pixel object/material ids
• Particles and ribbons are scene geometry: depth-tested, bloomed, and reflected in the mirror
• Install-time compile diagnostics per effect; a broken effect fails alone

Pipeline

• GPU frustum culling writing indirect draw arguments, replayed through render bundles — the CPU re-encodes only when scene structure changes
• Deterministic by construction: everything runs on the scene clock, so offline export (renderFrame at any resolution) reproduces the live scene exactly
• Camera: orbit, bone-follow, or a driven MMD camera VMD; GPU picking, gizmos, morph/material editing surfaces
• Every emitted shader is compiled on a real GPU device by the repo's validation tool (engine/tools/validate-wgsl.mjs) before release

Quick start

import { Engine } from "reze-engine"

const engine = new Engine(canvas)
await engine.init()

const model = await engine.loadModel("reze", "/models/reze/reze.pmx")
await engine.autoStyleGroups("reze")

await model.loadVmd("dance", "/animations/dance.vmd")
model.show("dance")
model.play()

engine.runRenderLoop()

autoStyleGroups reads the model's own material names and gives each group a shader graph, so hair, eyes and skin come out looking like MMD with no shading code of your own.

Architecture

One frame, top to bottom. The CPU describes the scene once and the GPU runs it: culling and effect simulation in compute, shadows and the floor mirror feeding a scene pass that draws MMD the way MMD artists expect — author order, outlines, the eye/hair stencil — then bloom, film tone mapping, and depth of field finish the image.

License

MIT