WebGL Shaders

Create stunning visual effects using GLSL shaders in your WebGL applications.

🚀 Try the Editor

Shader Types

Vertex Shader

attribute data for per-vertex processing
varying for data to fragment shader

attribute vec4 a_position;
void main() {
    gl_Position = a_position;
}

Fragment Shader

uniform access to per-pixel data
gl_FragColor output

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

Shader Pipeline

Vertex Processing

Transform vertices
Clip to view frustum
Generate triangles

Pixel Processing

Interpolate attributes
Apply lighting
Output color values

Shader Editor

Shader Parameters

Uniforms

uniform float time;
uniform vec2 resolution;
uniform sampler2D texture;

Attributes

attribute vec4 a_position;
attribute vec2 a_texCoord;

Next Steps

3D Models

Learn to load and render 3D content

Shader Effects

Create advanced GLSL effects