Dither Shader
A WebGL-powered dithering shader component built with Three.js. Supports procedural noise, waves, and patterns.
Interactive Playground
Configure the shape, scale, and dithering style of the WebGL material.
#ED00B5
#000000
MayaDitherShader Props API
| Prop / Event | Type | Default | Description |
|---|---|---|---|
shape | String | "simplex" | The pattern shape: simplex, warp, dots, wave, ripple, swirl, sphere. |
type | String | "8x8" | The Bayer matrix dithering level: random, 2x2, 4x4, 8x8. |
size | Number | 3 | Pixel size of the dithering grid grid (1–10 recommended). |
fit | String | "none" | Fit mode inside the canvas: none, contain, cover. |
scale | Number | 1 | Overall zoom/scale multiplier. |
speed | Number | 1 | Animation speed multiplier. |
colorFront | String | "#ED00B5" | Foreground (ink) color in CSS hex format. |
colorBack | String | "#000000" | Background color in CSS hex format. |
rotation | Number | 0 | Rotation in degrees (0–360). |