自定义着色器 ​

主要关注点：编写自定义 GLSL 片段着色器。

可用 Uniforms ​

本页实际 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);
                }
---

示例：简单渐变 ​

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);
}