Custom Shader ​

Primary focus: Write custom GLSL fragment shaders.

Available Uniforms ​

Actual Frontmatter ​

---
layout: home
hero:
    background:
        type: shader
        shader:
            fragmentShader: |
                precision mediump float;
                uniform float uTime;
                void main() {
                    vec2 uv = gl_FragCoord.xy / uResolution;
                    gl_FragColor = vec4(uv, sin(uTime), 1.0);
                }
---

Example: Simple Gradient ​

precision mediump float;
uniform float uTime;
uniform vec2 uResolution;

void main() {
    vec2 uv = gl_FragCoord.xy / uResolution;
    vec3 color = mix(
        vec3(0.2, 0.1, 0.5),
        vec3(0.8, 0.4, 0.2),
        uv.y + sin(uTime) * 0.2
    );
    gl_FragColor = vec4(color, 1.0);
}