webgpu-vfx

WebGPU first particle and VFX library for Three.js.

Compute driven simulation. GPU sorting. Soft particles. Presets. Shipped textures.

Why GPU simulation

Instead of updating every particle on the CPU and uploading the whole result every frame. this library keeps particle state on the GPU.

That helps in three big ways.

• Less CPU work.
• Less CPU to GPU data traffic.
• Fewer draw calls because instancing reuses the same geometry many times.

A draw call is one CPU command telling the GPU to render something. Too many of them can become expensive.

Here the CPU mainly submits compute and render work. The GPU does the heavy repeated particle math.

Install

bun add webgpu-vfx three

Quick start

import { ParticleEffect, createFirePreset } from 'webgpu-vfx'

const fire = new ParticleEffect(
  createFirePreset({
    position: [0, 0, 0],
  })
)

scene.add(fire)

Presets

The package ships with ready made effect builders like these.

• createFirePreset
• createJetFlamePreset
• createSmokePreset
• createDustCloudPreset
• createSteamPlumePreset
• createAshPlumePreset
• createExplosionCloudPreset
• createImpactDustPreset
• createGroundMistPreset
• createPoisonCloudPreset
• createRainPreset
• createSnowPreset
• createSparkStreaksPreset
• createImpactSparksPreset
• createMagicWispPreset
• createMagicOrbPreset
• createMagicBeamPreset
• createHealingAuraPreset
• createEmberFountainPreset
• createBurstFlashPreset
• createMuzzleFlashPreset

Runtime controls

effect.pause()
effect.resume()
effect.reset()
effect.step(dt)
effect.triggerBurst()
effect.updateEmitter({ spawnRate: 0 })
effect.updateRenderer({ size: 0.2 })
effect.updateSimulator({ drag: 0.4 })

Textures

Import built in textures from the webgpu-vfx/textures subpath.

import { Flame, SmokePuffSoft, MagicWisp } from 'webgpu-vfx/textures'

Requirements

• three@^0.184.0
• A browser with WebGPU support

License

MIT.