A dithering shader implementation with React Three Fiber. This project demonstrates how to apply dithering and post-processing effects to 3D scenes with Three.js.
- Custom dithering effect with 4x4 pixel pattern
- Dynamic adjustment of grid size and pixel ratio
- Pre and post dithering bloom effects
- Configurable grayscale mode
- Interactive controls for all shader parameters
- 3D model with custom environment map lighting
- Responsive design
Start the application in development mode:
yarn startThe dithering shader implements a halftoning technique based on a 4x4 pattern matrix. The process works as follows:
- The image is first pixelated based on grid size and pixel size ratio
- Luminance is calculated for each pixel
- Based on pixel position and luminance, a dithering pattern is applied
- The effect can be applied in grayscale or color mode
The interface allows adjusting various parameters:
- Dithering Effect Resolution: Adjusts the dithering grid size
- Pixelation Strength: Intensifies the pixelation effect
- Grayscale Only: Toggles black and white mode
- Bloom (Pre/Post Dithering): Add bloom effects before or after dithering
- Environment Settings: Adjust lighting intensity and highlight color
- 3D Model: Jousting Helmet by The Royal Armoury, CC-BY-4.0 license
- Original Dithering Pattern by Klems: Shadertoy
- Environment lighting: Inspired by @0xca0a