Libraries / L30 · Library · Shaders & lighting
Volumetric light shafts (god-rays) through a translucent medium
Loading the demo.
pnpm add @quartifex/volumetricNot on npm yet: the first release is pending. The quickstart, API table, browser support and limitations are in the README.
The light drifts slowly and dust rises through it; motes glow only inside the shafts. Concept visual: a grove built in code.
// WebGL: inside the R3F Canvas (it draws the final frame)
<VolumetricLight sun={[-7, 24, -26]} settings={{ density: 0.65, scatter: 0.7, temperature: 4800 }}
quality={qualityFor({ gpuTier, quality: useQuality(understudy) })} />
// Canvas: over a reel sequence or a hero image
<div style={{ position: "relative" }}>
<canvas ref={reelCanvas} />
<VolumetricOverlay settings={{ density: 0.65, scatter: 0.7, temperature: 4800 }} />
</div>