> Development branch documentation · commit 327c05c78d2f528e4f4a679fcc7a77d9aa161f48
> Package versions: @zenfg/webgpu 0.1.0, @zenfg/snapshot 0.1.0, @zenfg/inspector 0.1.0, zenfg 0.1.0, zenfg-snapshot 0.1.0
> Source: https://github.com/uinosoft/zenfg/blob/327c05c78d2f528e4f4a679fcc7a77d9aa161f48/README.md

# 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](https://uinosoft.github.io/zenfg/playground/?example=three-interop&panel=inspector): two renderers share color and depth attachments, with mutual occlusion in one scene.

Also explore GPU culling and indirect drawing in the [Reference Renderer](https://uinosoft.github.io/zenfg/playground/?example=reference-renderer&panel=inspector),
[PlayCanvas Streaming GSplat](https://uinosoft.github.io/zenfg/playground/?example=playcanvas-gsplat-streaming-interop&panel=inspector) (network required), and
[TypeGPU Slime Mold](https://uinosoft.github.io/zenfg/playground/?example=typegpu-slime-mold&panel=inspector) compute and render nodes.
Each example documents its dependency versions and integration details.

## Start here

- **WebGPU / TypeScript** — Start with the
  [`@zenfg/webgpu` quick start](/zenfg/docs/packages/webgpu.md#quick-start), then
  explore the [complete TypeScript recipes](/zenfg/docs/guides/examples.md).
- **wgpu / Rust** — Follow the
  [`zenfg` quick start](/zenfg/docs/packages/zenfg.md#quick-start) and
  [Cargo examples](https://github.com/uinosoft/zenfg/blob/327c05c78d2f528e4f4a679fcc7a77d9aa161f48/crates/zenfg/examples).
- **Try it online** — Explore the
  [live examples](https://uinosoft.github.io/zenfg/playground/?example=interactive-background&panel=inspector)
  with their TypeScript source and Inspector captures, or open a Snapshot in
  the [Inspector](https://uinosoft.github.io/zenfg/inspector/). The Inspector
  runs entirely in the browser and does not upload imported snapshots.

Browse the [documentation index](/zenfg/docs/getting-started.md) for guides and reference
material. Before changing public semantics, examples, or release artifacts,
read [Contributing](https://github.com/uinosoft/zenfg/blob/327c05c78d2f528e4f4a679fcc7a77d9aa161f48/CONTRIBUTING.md).

## Integration levels

Connect an engine that keeps its own submissions, or build modules that record
work into the graph; both approaches can be combined. Technically, ZenFG offers
the three integration depths below.

Interoperability requires a shared device and queue, compatible resource formats
and usage contracts, and accurate access declarations. Import each shared native
resource once per recording. External-engine passes stay opaque; GPU timing
depends on device support and node coverage. Snapshots contain neither replayable
commands nor resource contents.

The application controls rendering policy and chooses how deeply each
subsystem integrates with the graph. ZenFG coordinates the work; scenes,
materials, and renderer architecture remain with the application.

| ZenFG owns | The application owns |
| --- | --- |
| Graph-visible dependencies and execution order | Scenes, materials, cameras, and renderer architecture |
| Retention roots and dead-work culling | Pipelines, bind groups, samplers, and draw/dispatch policy |
| Transient lifetimes, aliasing, and pooling | Devices, queues, surfaces, presentation, and device-loss policy |
| Validation, reports, Snapshot projection, and inspection | Long-lived resources, resource contents, and application state |

Three integration levels can be mixed in the same frame:

- **Native render, compute, and copy** nodes provide the richest validation and
  diagnostics.
- **Command integration** lets a subsystem encode custom work into a
  FrameGraph-owned command encoder.
- **Opaque external submission** lets an existing renderer keep its encoders
  and submission model while declaring an ordered graph boundary.

See [Core concepts](/zenfg/docs/concepts.md) for the complete ownership, content,
dependency, lifetime, and execution model.

## Packages

<!-- generated:packages:start -->
| Package | Purpose | Published version | Documentation |
| --- | --- | --- | --- |
| [`@zenfg/webgpu`](/zenfg/docs/packages/webgpu.md) | TypeScript/WebGPU FrameGraph runtime | [Published package](https://www.npmjs.com/package/@zenfg/webgpu) | [Guide](/zenfg/docs/packages/webgpu.md) |
| [`@zenfg/snapshot`](/zenfg/docs/packages/snapshot.md) | Snapshot 1.2 types, codec, validation and specification | [Published package](https://www.npmjs.com/package/@zenfg/snapshot) | [Guide](/zenfg/docs/packages/snapshot.md) |
| [`@zenfg/inspector`](/zenfg/docs/packages/inspector.md) | Embeddable DOM Inspector | [Published package](https://www.npmjs.com/package/@zenfg/inspector) | [Guide](/zenfg/docs/packages/inspector.md) |
| [`zenfg`](/zenfg/docs/packages/zenfg.md) | Rust/wgpu FrameGraph runtime | [Published package](https://crates.io/crates/zenfg) | [Guide](/zenfg/docs/packages/zenfg.md) |
| [`zenfg-snapshot`](/zenfg/docs/packages/zenfg-snapshot.md) | Rust Snapshot 1.2 codec, validation and migration | [Published package](https://crates.io/crates/zenfg-snapshot) | [Guide](/zenfg/docs/packages/zenfg-snapshot.md) |
<!-- generated:packages:end -->

## 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 is the first non-prerelease version. Public APIs may change before
1.0; integrations should pin exact package versions and review migration notes.

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](/zenfg/docs/compatibility.md) and
[changelog](/zenfg/docs/changelog.md).

## License

ZenFG is available under the [MIT License](https://github.com/uinosoft/zenfg/blob/327c05c78d2f528e4f4a679fcc7a77d9aa161f48/LICENSE).