Back to Playgrounds
✨
Shader Lab
Write custom shaders with live preview. Tweak uniforms, see fragment/vertex code side-by-side.
💡 Getting Started
1. Try a preset from the Shader Library below
2. Edit the shader code and see changes instantly
3. Adjust the color sliders to change the uniform values
4. Click learning points to understand shader concepts
Vertex Shader
Loading shader editor...
Fragment Shader
Loading shader editor...
Shader Library(Click to load)
Live Preview
60 FPS
Frame: 0
💡 Tip: Shaders run on the GPU, processing thousands of pixels in parallel!
Color Controls
Quick Colors
#804DCC
0.50 (128)
0.30 (77)
0.80 (204)
0x (Paused)3x (Fast)
Performance
FPS
60
Excellent
Status
Running
Frame: 0
Shader Concepts
varying vec2 vUv
UV coordinates (0.0 to 1.0) passed from vertex to fragment shader
uniform float uTime
Time value that increases continuously for animations
gl_FragColor
Final color output for each pixel (RGBA)
mix() function
Blends between two values: mix(a, b, t) where t is 0.0 to 1.0