@kutlaytunc/vfx

GPU particle and visual effects for React Three Fiber. WebGPU-first, with a WebGL2 fallback that runs the same simulation code.

Status: pre-alpha. The API is not stable yet.

npm install @kutlaytunc/vfx three @react-three/fiber

import { VFXCanvas, VFX, Emitter, SpawnRate, InitialLifetime, Gravity, SpriteRenderer } from "@kutlaytunc/vfx";

<VFXCanvas>
  <VFX>
    <Emitter capacity={100_000}>
      <SpawnRate value={5000} />
      <InitialLifetime min={1} max={3} />
      <Gravity value={[0, -9.81, 0]} />
      <SpriteRenderer map={smoke} blending="premultiplied" softness={0.5} />
    </Emitter>
  </VFX>
</VFXCanvas>

Effects are authored as components. Each module compiles to a TSL node graph, which three.js lowers to WGSL on WebGPU and GLSL on WebGL2 — so one implementation runs on both backends.

Backend tiers

Compute runs on both backends: WebGPU uses compute pipelines, WebGL2 uses transform feedback. What differs is which memory operations are legal.

| | WebGPU | WebGL2 | |---|---|---| | Read + write own element | yes | yes | | Gather (read another element) | yes | yes, via a PBO mirror | | Scatter (write another element) | yes | no | | Atomics, shared memory | yes | no | | GPU sort | yes | no — CPU sort or unsorted additive |

Query this at runtime; the library never degrades silently.

const { backend, capabilities } = useVFX();

Documentation

See ARCHITECTURE.md for the design, and the generated API reference.

License

MIT