About š¬ postprocessing for svelte three.js (threlte)
[//]: # (
)
[//]: # (
)
[//]: # (
)


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
`svelte
`
`svelte
`
- šÆ 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
`svelte`
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)
/>
`svelte`
contrast={0} // Contrast adjustment (-1 to 1, default: 0)
/>
`svelte`
radialModulation={false} // Enable radial offset modulation (default: false)
modulationOffset={0.15} // Modulation offset (default: 0.15)
/>
`svelte`
`svelte`
/>
`svelte`
lutSize={32} // Size of the lookup texture (default: 32)
intensity={1.0} // Effect intensity (default: 1.0)
/>
`svelte`
near={0} // Near plane distance (default: 0)
far={1} // Far plane distance (default: 1)
/>
`svelte`
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)
/>
`svelte`
scale={1.0} // Pattern scale (default: 1.0)
/>
`svelte`
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)
/>
`svelte`
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)
/>
`svelte`
lineWidth={0.0} // Grid line width (default: 0.0)
/>
`svelte`
saturation={0} // Saturation adjustment (-1 to 1, default: 0)
/>
`svelte`
premultiply={false} // Whether to premultiply the noise (default: false)
blendFunction={BlendFunction.SCREEN} // Blend mode for the noise
/>
`svelte`
/>
`svelte`
/>
`svelte`
/>
`svelte`
edgeDetectionMode={EdgeDetectionMode.COLOR} // Detection mode (COLOR, DEPTH, LUMA)
/>
`svelte`
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)
/>
`svelte`
darkness={0.5} // Intensity of the darkening (default: 0.5)
eskil={false} // Use Eskil's vignette technique (default: false)
/>
svelte
`$3
You can check more effects in effects folderContributing š¤
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 RequestPerformance Tips šØ
- Only use the effects you need
- Adjust effect quality settings based on device capabilities
- Consider using the
This library builds upon several amazing projects:
- Threlte
- three.js
- postprocessing
This project is licensed under the MIT License - see the LICENSE file for details.
---
Made with ā¤ļø for the Threlte and Svelte community