A modern WebGL-powered tool for applying retro dithering effects to your images. Transform your photos into pixel art-style images with various dithering algorithms and color palettes.
- Process locally: All image processing runs entirely in your browser using WebGL, ensuring your images never leave your device.
- Multiple dithering algorithms:
- Bayer dithering (2x2, 4x4, and 8x8 matrices)
- Floyd-Steinberg error diffusion
- Ordered dithering
- Color palette options:
- Black and white
- CGA palette
- Gameboy colors
- Custom color palettes
- Image preprocessing:
- Contrast adjustment
- Highlights and midtones control
- Brightness threshold adjustment
- Performance optimizations:
- Optional downsampling for large images
- Hardware-accelerated processing using GPU
- OffscreenCanvas support for better performance (when available)
- Upload an image using the image upload area
- Adjust dithering options:
- Select dithering algorithm (Bayer, Floyd-Steinberg, Ordered)
- Choose color palette or create custom palettes
- Adjust image preprocessing settings
- Set optional downsampling for faster processing
- View the preview in real-time
- Download the processed image
The application is built using:
- Shadcn UI for the UI components
- WebGL for GPU-accelerated image processing
- Tailwind for styling
- Images are loaded and optionally downsampled
- WebGL shaders apply the selected dithering algorithm
- For Floyd-Steinberg dithering, a two-pass rendering approach is used:
- First pass: Calculate quantized colors and errors
- Second pass: Apply error diffusion
- The final image is rendered to canvas and can be downloaded
pnpm install
pnpm dev
pnpm build
- Switch to UnoCSS
- Process images in worker & offscreen-canvas for better performance
This project is licensed under the Apache License 2.0.