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<script lang="ts">
import { Canvas } from "@threlte/core";
import Scene from "./Scene.svelte";
</script>
<Canvas>
<Scene />
</Canvas><script lang="ts">
import { EffectComposer } from 'threlte-postprocessing'
import { DepthOfFieldEffect, BloomEffect, NoiseEffect, VignetteEffect } from 'threlte-postprocessing/effects'
</script>
<EffectComposer>
<DepthOfFieldEffect focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
<BloomEffect luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
<NoiseEffect opacity={0.02} />
<VignetteEffect eskil={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.
<BloomEffect
intensity={1.0} // The intensity of the bloom effect (default: 1.0)
luminanceThreshold={0.9} // Minimum luminance required for bloom (default: 0.9)
luminanceSmoothing={0.025}// Smoothing of the luminance threshold (default: 0.025)
mipmapBlur={false} // Whether to use mipmap blur (default: false)
height={480} // Render height (default: 480)
/>Adjusts the brightness and contrast of the scene.
<BrightnessContrastEffect
brightness={0} // Brightness adjustment (-1 to 1, default: 0)
contrast={0} // Contrast adjustment (-1 to 1, default: 0)
/>Simulates lens color separation artifacts.
<ChromaticAberrationEffect
offset={[0.002, 0.002]} // RGB offset vector (default: [0.002, 0.002])
radialModulation={false} // Enable radial offset modulation (default: false)
modulationOffset={0.15} // Modulation offset (default: 0.15)
/>Reduces the image to a single average color.
<ColorAverageEffect />Reduces the color depth of the image.
<ColorDepthEffect
bits={16} // Number of bits per channel (default: 16)
/>Applies color adjustments to the final render.
<ColorGradingEffect
lut={texture} // Color lookup texture
lutSize={32} // Size of the lookup texture (default: 32)
intensity={1.0} // Effect intensity (default: 1.0)
/>Renders the scene's depth buffer.
<DepthEffect
inverted={false} // Invert the depth values (default: false)
near={0} // Near plane distance (default: 0)
far={1} // Far plane distance (default: 1)
/>Simulates camera focus effects by blurring objects based on their distance from the focal point.
<DepthOfFieldEffect
focusDistance={0.0} // Distance to the focus point (default: 0.0)
focalLength={0.02} // Focal length of the simulated camera (default: 0.02)
bokehScale={2.0} // Size of the bokeh effect (default: 2.0)
height={480} // Render height (default: 480)
/>Creates a dot-screen effect similar to halftone printing.
<DotScreenEffect
angle={1.57} // Pattern angle in radians (default: 1.57)
scale={1.0} // Pattern scale (default: 1.0)
/>Creates digital glitch effects.
<GlitchEffect
delay={[1.5, 3.5]} // Min/max delay between glitches (default: [1.5, 3.5])
duration={[0.6, 1.0]} // Min/max glitch duration (default: [0.6, 1.0])
strength={[0.3, 1.0]} // Min/max glitch strength (default: [0.3, 1.0])
mode={GlitchMode.CONSTANT} // Glitch mode (CONSTANT, SPORADIC)
/>Creates volumetric lighting effects.
<GodRaysEffect
decay={0.95} // Light decay factor (default: 0.95)
density={0.96} // Ray density (default: 0.96)
weight={0.4} // Ray weight (default: 0.4)
exposure={0.6} // Ray exposure (default: 0.6)
samples={60} // Number of samples (default: 60)
/>Overlays a grid pattern on the scene.
<GridEffect
scale={1.0} // Grid scale (default: 1.0)
lineWidth={0.0} // Grid line width (default: 0.0)
/>Adjusts the hue and saturation of the scene.
<HueSaturationEffect
hue={0} // Hue adjustment (-Math.PI to Math.PI, default: 0)
saturation={0} // Saturation adjustment (-1 to 1, default: 0)
/>Adds film grain or noise to the scene.
<NoiseEffect
opacity={0.02} // Noise opacity (default: 0.02)
premultiply={false} // Whether to premultiply the noise (default: false)
blendFunction={BlendFunction.SCREEN} // Blend mode for the noise
/>Creates a pixelated effect by reducing the resolution.
<PixelationEffect
granularity={5} // Size of pixels (default: 5)
/>Adds scanlines to the scene, similar to old CRT displays.
<ScanlineEffect
density={1.25} // Line density (default: 1.25)
/>Applies a sepia tone to the scene.
<SepiaEffect
intensity={1.0} // Effect intensity (default: 1.0)
/>Provides high-quality antialiasing.
<SMAAEffect
preset={SMAAPreset.HIGH} // Quality preset (LOW, MEDIUM, HIGH, ULTRA)
edgeDetectionMode={EdgeDetectionMode.COLOR} // Detection mode (COLOR, DEPTH, LUMA)
/>Applies tone mapping to the scene.
<ToneMappingEffect
mode={ToneMappingMode.REINHARD} // Tone mapping mode (REINHARD, OPTIMIZED, ACES, HEJL)
exposure={1.0} // Exposure level (default: 1.0)
maxLuminance={16.0} // Maximum luminance (default: 16.0)
middleGrey={0.6} // Middle grey point (default: 0.6)
whitePoint={16.0} // White point (default: 16.0)
/>Darkens the edges of the scene.
<VignetteEffect
offset={0.5} // Offset of the effect (default: 0.5)
darkness={0.5} // Intensity of the darkening (default: 0.5)
eskil={false} // Use Eskil's vignette technique (default: false)
/>Fluid like in react-fluid
<script lang="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