A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
- Physics
- Alpha blending
- Post alpha eye rendering
- Rim lighting
- Bloom
- Outlines
- MSAA 4x anti-aliasing
- Bone and morph api
- VMD animation
- Ik solver
export default function Scene() { const canvasRef = useRef < HTMLCanvasElement > null const engineRef = useRef < Engine > null const initEngine = useCallback(async () => { if (canvasRef.current) { try { const engine = new Engine(canvasRef.current) engineRef.current = engine await engine.init() await engine.loadModel("/models/塞尔凯特/塞尔凯特.pmx") engine.runRenderLoop(() => {}) } catch (error) { console.error(error) } } }, []) useEffect(() => { void (async () => { initEngine() })() return () => { if (engineRef.current) { engineRef.current.dispose() } } }, [initEngine]) return <canvas ref={canvasRef} className="w-full h-full" /> }- MiKaPo - Online real-time motion capture for MMD using webcam and MediaPipe
- Popo - Fine-tuned LLM that generates MMD poses from natural language descriptions
- MPL - Semantic motion programming language for scripting MMD animations with intuitive syntax
Learn WebGPU from scratch by building an anime character renderer in incremental steps. The tutorial covers the complete rendering pipeline from a simple triangle to fully textured, skeletal-animated characters.