https://github.com/1bye/threlte-postprocessing
📬 postprocessing for svelte three.js (threlte)
https://github.com/1bye/threlte-postprocessing
3d js postprocessing svelte svelte-postprocessing threejs threlte ts webgl
Last synced: 10 months ago
JSON representation
📬 postprocessing for svelte three.js (threlte)
- Host: GitHub
- URL: https://github.com/1bye/threlte-postprocessing
- Owner: 1bye
- License: mit
- Created: 2025-02-11T17:54:28.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-03-03T10:27:05.000Z (11 months ago)
- Last Synced: 2025-04-04T06:47:24.797Z (10 months ago)
- Topics: 3d, js, postprocessing, svelte, svelte-postprocessing, threejs, threlte, ts, webgl
- Language: TypeScript
- Homepage:
- Size: 1.3 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-threejs - threlte-postprocessing
README
# Threlte Postprocessing
[//]: # (
)
[//]: # ( 
)
[//]: # (
)
[](https://www.npmjs.com/package/threlte-postprocessing)
[](https://www.npmjs.com/package/threlte-postprocessing)
[](https://github.com/1bye/threlte-postprocessing/blob/main/LICENSE)
Threlte Postprocessing is a postprocessing effects library for [Threlte](https://threlte.xyz/), bringing powerful post-processing capabilities to your Svelte 3D applications. Built on top of [three.js](https://threejs.org/) and [postprocessing](https://github.com/pmndrs/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
import { Canvas } from "@threlte/core";
import Scene from "./Scene.svelte";
```
```svelte
import { EffectComposer } from 'threlte-postprocessing'
import { DepthOfFieldEffect, BloomEffect, NoiseEffect, VignetteEffect } from 'threlte-postprocessing/effects'
```
## Demo
Link to [demo](https://codesandbox.io/p/github/1bye/threlte-postprocessing/main)
## 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 📚
### Bloom
Adds a glow effect to bright areas of the scene.
```svelte
```
### BrightnessContrast
Adjusts the brightness and contrast of the scene.
```svelte
```
### ChromaticAberration
Simulates lens color separation artifacts.
```svelte
```
### ColorAverage
Reduces the image to a single average color.
```svelte
```
### ColorDepth
Reduces the color depth of the image.
```svelte
```
### ColorGrading
Applies color adjustments to the final render.
```svelte
```
### Depth
Renders the scene's depth buffer.
```svelte
```
### DepthOfField
Simulates camera focus effects by blurring objects based on their distance from the focal point.
```svelte
```
### DotScreen
Creates a dot-screen effect similar to halftone printing.
```svelte
```
### Glitch
Creates digital glitch effects.
```svelte
```
### GodRays
Creates volumetric lighting effects.
```svelte
```
### Grid
Overlays a grid pattern on the scene.
```svelte
```
### HueSaturation
Adjusts the hue and saturation of the scene.
```svelte
```
### Noise
Adds film grain or noise to the scene.
```svelte
```
### Pixelation
Creates a pixelated effect by reducing the resolution.
```svelte
```
### Scanline
Adds scanlines to the scene, similar to old CRT displays.
```svelte
```
### Sepia
Applies a sepia tone to the scene.
```svelte
```
### SMAA (Subpixel Morphological Antialiasing)
Provides high-quality antialiasing.
```svelte
```
### ToneMapping
Applies tone mapping to the scene.
```svelte
```
### Vignette
Darkens the edges of the scene.
```svelte
```
### Custom Fluid Effect
Fluid like in [react-fluid](https://github.com/whatisjery/react-fluid-distortion/tree/main)
```svelte
import { FluidEffect } from "threlte-postprocessing/custom";
```
### And more...
You can check more effects in [effects folder](./src/lib/effects)
## 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](https://threlte.xyz/)
- [three.js](https://threejs.org/)
- [postprocessing](https://github.com/pmndrs/postprocessing)
## License 📄
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
Made with ❤️ for the Threlte and Svelte community