Threlte Postprocessing

[//]: # (

)

[//]: # ( )

[//]: # (

)


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.

``bash
npm install threlte-postprocessing
`

Quick start 🚀

`svelte





`

`svelte








`

Demo

Link to demo

Features ✨

- 🎯 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

Effects Documentation 📚

$3

Adds a glow effect to bright areas of the scene.

`svelte
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)
/>
`

$3

Adjusts the brightness and contrast of the scene.

`svelte
brightness={0} // Brightness adjustment (-1 to 1, default: 0)
contrast={0} // Contrast adjustment (-1 to 1, default: 0)
/>
`

$3

Simulates lens color separation artifacts.

`svelte
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)
/>
`

$3

Reduces the image to a single average color.

`svelte

`

$3

Reduces the color depth of the image.

`svelte
bits={16} // Number of bits per channel (default: 16)
/>
`

$3

Applies color adjustments to the final render.

`svelte
lut={texture} // Color lookup texture
lutSize={32} // Size of the lookup texture (default: 32)
intensity={1.0} // Effect intensity (default: 1.0)
/>
`

$3

Renders the scene's depth buffer.

`svelte
inverted={false} // Invert the depth values (default: false)
near={0} // Near plane distance (default: 0)
far={1} // Far plane distance (default: 1)
/>
`

$3

Simulates camera focus effects by blurring objects based on their distance from the focal point.

`svelte
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)
/>
`

$3

Creates a dot-screen effect similar to halftone printing.

`svelte
angle={1.57} // Pattern angle in radians (default: 1.57)
scale={1.0} // Pattern scale (default: 1.0)
/>
`

$3

Creates digital glitch effects.

`svelte
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)
/>
`

$3

Creates volumetric lighting effects.

`svelte
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)
/>
`

$3

Overlays a grid pattern on the scene.

`svelte
scale={1.0} // Grid scale (default: 1.0)
lineWidth={0.0} // Grid line width (default: 0.0)
/>
`

$3

Adjusts the hue and saturation of the scene.

`svelte
hue={0} // Hue adjustment (-Math.PI to Math.PI, default: 0)
saturation={0} // Saturation adjustment (-1 to 1, default: 0)
/>
`

$3

Adds film grain or noise to the scene.

`svelte
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
/>
`

$3

Creates a pixelated effect by reducing the resolution.

`svelte
granularity={5} // Size of pixels (default: 5)
/>
`

$3

Adds scanlines to the scene, similar to old CRT displays.

`svelte
density={1.25} // Line density (default: 1.25)
/>
`

$3

Applies a sepia tone to the scene.

`svelte
intensity={1.0} // Effect intensity (default: 1.0)
/>
`

$3

Provides high-quality antialiasing.

`svelte
preset={SMAAPreset.HIGH} // Quality preset (LOW, MEDIUM, HIGH, ULTRA)
edgeDetectionMode={EdgeDetectionMode.COLOR} // Detection mode (COLOR, DEPTH, LUMA)
/>
`

$3

Applies tone mapping to the scene.

`svelte
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)
/>
`

$3

Darkens the edges of the scene.

`svelte
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)
/>
`

$3


Fluid like in react-fluid
`svelte



`

$3

You can check more effects in effects folder

Contributing 🤝

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-effect)
3. Commit your changes (git commit -m 'Add amazing effect')
4. Push to the branch (git push origin feature/amazing-effect)
5. Open a Pull Request

Performance Tips 💨

- Only use the effects you need
- Adjust effect quality settings based on device capabilities
- Consider using the ` component for better control
- Enable effect pass switching for dynamic performance optimization

Credits 🙏

This library builds upon several amazing projects:
- Threlte
- three.js
- postprocessing

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ for the Threlte and Svelte community