Threlte Postprocessing is a postprocessing effects library for Threlte, bringing powerful post-processing capabilities to your Svelte 3D applications. Built on top of three.js and postprocessing, it provides a set of ready-to-use effects that can be easily integrated into your Threlte scenes.
npm install threlte-postprocessing<scriptlang="ts">import { Canvas } from"@threlte/core";importScenefrom"./Scene.svelte";</script>
<Canvas>
<Scene />
</Canvas><scriptlang="ts">import { EffectComposer } from'threlte-postprocessing'import { DepthOfFieldEffect, BloomEffect, NoiseEffect, VignetteEffect } from'threlte-postprocessing/effects'</script>
<EffectComposer>
<DepthOfFieldEffectfocusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
<BloomEffectluminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
<NoiseEffectopacity={0.02} />
<VignetteEffecteskil={false} offset={0.1} darkness={1.1} />
</EffectComposer>Link to demo
- 🎯 Seamless integration with Threlte and Svelte
- ⚡️ Simple, declarative API
- 🎨 Rich set of post-processing effects
- 📦 Tree-shakeable effects
- 🔧 Fully typed with TypeScript
- 🎮 Real-time effect parameter updates
Adds a glow effect to bright areas of the scene.
<BloomEffectintensity={1.0} // Theintensityofthebloomeffect (default: 1.0)
luminanceThreshold={0.9} // Minimumluminancerequiredforbloom (default: 0.9)
luminanceSmoothing={0.025}// Smoothingoftheluminancethreshold (default: 0.025)
mipmapBlur={false} // Whethertousemipmapblur (default:false)
height={480} // Renderheight (default: 480)
/>Adjusts the brightness and contrast of the scene.
<BrightnessContrastEffectbrightness={0} // Brightnessadjustment (-1 to 1, default: 0)
contrast={0} // Contrastadjustment (-1 to 1, default: 0)
/>Simulates lens color separation artifacts.
<ChromaticAberrationEffectoffset={[0.002, 0.002]} // RGBoffsetvector (default: [0.002, 0.002])
radialModulation={false} // Enableradialoffsetmodulation (default:false)
modulationOffset={0.15} // Modulationoffset (default: 0.15)
/>Reduces the image to a single average color.
<ColorAverageEffect />Reduces the color depth of the image.
<ColorDepthEffectbits={16} // Numberofbitsperchannel (default: 16)
/>Applies color adjustments to the final render.
<ColorGradingEffectlut={texture} // ColorlookuptexturelutSize={32} // Sizeofthelookuptexture (default: 32)
intensity={1.0} // Effectintensity (default: 1.0)
/>Renders the scene's depth buffer.
<DepthEffectinverted={false} // Invertthedepthvalues (default:false)
near={0} // Nearplanedistance (default: 0)
far={1} // Farplanedistance (default: 1)
/>Simulates camera focus effects by blurring objects based on their distance from the focal point.
<DepthOfFieldEffectfocusDistance={0.0} // Distancetothefocuspoint (default: 0.0)
focalLength={0.02} // Focallengthofthesimulatedcamera (default: 0.02)
bokehScale={2.0} // Sizeofthebokeheffect (default: 2.0)
height={480} // Renderheight (default: 480)
/>Creates a dot-screen effect similar to halftone printing.
<DotScreenEffectangle={1.57} // Patternangleinradians (default: 1.57)
scale={1.0} // Patternscale (default: 1.0)
/>Creates digital glitch effects.
<GlitchEffectdelay={[1.5, 3.5]} // Min/maxdelaybetweenglitches (default: [1.5, 3.5])
duration={[0.6, 1.0]} // Min/maxglitchduration (default: [0.6, 1.0])
strength={[0.3, 1.0]} // Min/maxglitchstrength (default: [0.3, 1.0])
mode={GlitchMode.CONSTANT} // Glitchmode (CONSTANT, SPORADIC)
/>Creates volumetric lighting effects.
<GodRaysEffectdecay={0.95} // Lightdecayfactor (default: 0.95)
density={0.96} // Raydensity (default: 0.96)
weight={0.4} // Rayweight (default: 0.4)
exposure={0.6} // Rayexposure (default: 0.6)
samples={60} // Numberofsamples (default: 60)
/>Overlays a grid pattern on the scene.
<GridEffectscale={1.0} // Gridscale (default: 1.0)
lineWidth={0.0} // Gridlinewidth (default: 0.0)
/>Adjusts the hue and saturation of the scene.
<HueSaturationEffecthue={0} // Hueadjustment (-Math.PItoMath.PI, default: 0)
saturation={0} // Saturationadjustment (-1 to 1, default: 0)
/>Adds film grain or noise to the scene.
<NoiseEffectopacity={0.02} // Noiseopacity (default: 0.02)
premultiply={false} // Whethertopremultiplythenoise (default:false)
blendFunction={BlendFunction.SCREEN} // Blendmodeforthenoise
/>Creates a pixelated effect by reducing the resolution.
<PixelationEffectgranularity={5} // Sizeofpixels (default: 5)
/>Adds scanlines to the scene, similar to old CRT displays.
<ScanlineEffectdensity={1.25} // Linedensity (default: 1.25)
/>Applies a sepia tone to the scene.
<SepiaEffectintensity={1.0} // Effectintensity (default: 1.0)
/>Provides high-quality antialiasing.
<SMAAEffectpreset={SMAAPreset.HIGH} // Qualitypreset (LOW, MEDIUM, HIGH, ULTRA)
edgeDetectionMode={EdgeDetectionMode.COLOR} // Detectionmode (COLOR, DEPTH, LUMA)
/>Applies tone mapping to the scene.
<ToneMappingEffectmode={ToneMappingMode.REINHARD} // Tonemappingmode (REINHARD, OPTIMIZED, ACES, HEJL)
exposure={1.0} // Exposurelevel (default: 1.0)
maxLuminance={16.0} // Maximumluminance (default: 16.0)
middleGrey={0.6} // Middlegreypoint (default: 0.6)
whitePoint={16.0} // Whitepoint (default: 16.0)
/>Darkens the edges of the scene.
<VignetteEffectoffset={0.5} // Offsetoftheeffect (default: 0.5)
darkness={0.5} // Intensityofthedarkening (default: 0.5)
eskil={false} // UseEskil's vignette technique (default: false)/>Fluid like in react-fluid
<scriptlang="ts">import { FluidEffect } from"threlte-postprocessing/custom";</script>
<!-- Don't forget to wrap it with <EffectComposer>! -->
<FluidEffect />You can check more effects in effects folder
We welcome contributions! Here's how you can help:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-effect) - Commit your changes (
git commit -m 'Add amazing effect') - Push to the branch (
git push origin feature/amazing-effect) - Open a Pull Request
- Only use the effects you need
- Adjust effect quality settings based on device capabilities
- Consider using the
<EffectComposer>component for better control - Enable effect pass switching for dynamic performance optimization
This library builds upon several amazing projects:
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ for the Threlte and Svelte community