An implementation of raymarched screen space volumetrics in Three.JS, compatible with the pmndrs postprocessing
library.
Useful for adding clouds, fog, and other volumetric effects to your Three.JS scenes.
Interactive Demo: https://three-volumetric-pass.ameo.design/
npm install three-volumetric-pass postprocessing
import { EffectComposer, RenderPass } from 'postprocessing';
import { VolumetricPass } from 'three-volumetric-pass';
const composer = new EffectComposer(renderer, { frameBufferType: THREE.HalfFloatType });
composer.addPass(new RenderPass(scene, camera));
const volumetricPass = new VolumetricPass(scene, camera, {
halfRes: true,
// other params go here
});
const animate = () => {
composer.render();
animate();
};
animate();
Several parts of the core shader implementation were inspired by this "Clouds" ShaderToy demo by Inigo Quilez: https://www.shadertoy.com/view/XslGRr
Some shader components involving the depth buffer were taken from three-good-godrays
which contains code originally written by n8programs