ZenFG
Build rendering features, compose GPU systems, and understand every frame.
ZenFG coordinates rendering and compute through an explicit FrameGraph. Build domain-specific features with WebGPU or wgpu, connect existing engines, and compose their work in one frame. You control scenes, materials, pipelines, and rendering policy; ZenFG coordinates declared dependencies, execution order, transient resource lifetimes, and diagnostics. Idiomatic TypeScript and Rust runtimes share semantics and portable Snapshots, with an embeddable Inspector.
Why ZenFG
- Build independently — Use native GPU APIs or compatible libraries while keeping your own renderer architecture.
- Compose existing work — Combine external engines with graph-native rendering and compute modules through explicit shared resources and execution boundaries.
- Understand actual frames — Inspect graphs, resources, and optional CPU/GPU timings. Export Snapshots alongside code for human or AI-assisted analysis, then capture again to verify changes.
- Coordinate dependencies and resources — Retain required work, cull unused work, and manage transient allocation, lifetimes, aliasing, and pooling.
Three.js Co-rendering: two renderers share color and depth attachments, with mutual occlusion in one scene.
Also explore GPU culling and indirect drawing in the Reference Renderer, PlayCanvas Streaming GSplat (network required), and TypeGPU Slime Mold compute and render nodes. Each example documents its dependency versions and integration details.
Start here
- WebGPU / TypeScript — Start with the
@zenfg/webgpuquick start, then explore the complete TypeScript recipes. - wgpu / Rust — Follow the
zenfgquick start and Cargo examples. - Try it online — Explore the live examples with their TypeScript source and Inspector captures, or open a Snapshot in the Inspector. The Inspector runs entirely in the browser and does not upload imported snapshots.
Browse the documentation index for guides and reference material. Before changing public semantics, examples, or release artifacts, read Contributing. Source development uses pnpm for JavaScript and Cargo for Rust; install workspace dependencies with pnpm install --frozen-lockfile.
AI coding assistants
Development builds provide English Agent Skills for WebGPU integration, Snapshot data, and Inspector embedding. Each package README explains release availability and pnpm installation/approval. This support is not yet available in the current npm releases.
Integration levels
The application owns its device, rendering policy and presentation. ZenFG coordinates declared work. Read the package guides for recording, resource, execution and integration contracts:
Packages
| Package | Purpose | Published version | Documentation |
|---|---|---|---|
@zenfg/webgpu | TypeScript/WebGPU FrameGraph runtime | Published package | Guide |
@zenfg/snapshot | Snapshot 1.2 types, codec, validation and specification | Published package | Guide |
@zenfg/inspector | Embeddable DOM Inspector | Published package | Guide |
zenfg | Rust/wgpu FrameGraph runtime | Published package | Guide |
zenfg-snapshot | Rust Snapshot 1.2 codec, validation and migration | Published package | Guide |
Direction
We are exploring reusable GPU-driven mesh, particle, and post-processing modules, so independently built rendering features can come together in real applications.
Status
ZenFG 0.1.0 was the first non-prerelease version. Packages are released independently; the registry badges above show their current published versions. Public APIs may change before 1.0. Pin exact package versions and review the migration from 0.1.0 before upgrading.
TypeScript and Rust share semantics and portable diagnostics, not source-level API parity. Snapshot wire format versioning is independent from package versions; see the compatibility matrix and changelog.
License
ZenFG is available under the MIT License.