https://github.com/zavalit/bayer-dithering-webgl-demo
https://github.com/zavalit/bayer-dithering-webgl-demo
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zavalit/bayer-dithering-webgl-demo
- Owner: zavalit
- Created: 2025-07-18T10:58:40.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-07-18T11:47:57.000Z (7 months ago)
- Last Synced: 2025-07-18T15:49:30.249Z (7 months ago)
- Language: GLSL
- Size: 42 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Three.js Bayer Dither Playground
> 📣 Featured on [Codrops](https://tympanus.net/codrops/2025/07/30/interactive-webgl-backgrounds-a-quick-guide-to-bayer-dithering/)!
> 🚀 [Live Demo](https://tympanus.net/Tutorials/BayerDithering/)
A tiny demo that combines [**Astro**](https://astro.build/) and [**Three.js**](https://threejs.org/) to render an animated Bayer-dither shader in the background.
Four pages are prerendered from one template, each with its own mask geometry, pixel tint, and background colour.
Click anywhere to spawn ripples 🌊.
---
## 1 Demo
```bash
git clone https://github.com/zavalit/bayer-dithering-webgl-demo.git
cd bayer-dithering-webgl-demo
pnpm install
pnpm dev # http://localhost:4321