Shader

Shader(props?: {
    fragmentShader?: string;
    uniforms?: Record<string, number | number[] | boolean>;
    timeEnabled?: boolean;
    mouseEnabled?: boolean;
    updateInterval?: number;
}): Component;

Shader({
    fragmentShader: `void mainImage(
        out vec4 fragColor, in vec2 fragCoord
    ) {
        fragColor = vec4(0.2, 0.5, 1.0, 1.0);
    }`
})
    .frame({ width: 200, height: 200 })

Shader({
    fragmentShader: `void mainImage(
        out vec4 fragColor, in vec2 fragCoord
    ) {
        vec2 uv = fragCoord / iResolution.xy;
        fragColor = vec4(uv.x, uv.y, 0.5, 1.0);
    }`
})
    .frame({ width: 300, height: 200 })

Shader({
    fragmentShader: `void mainImage(
        out vec4 fragColor, in vec2 fragCoord
    ) {
        vec2 uv = fragCoord / iResolution.xy;
        float t = iTime * 0.5;
        vec3 col = 0.5 + 0.5 * cos(t + uv.xyx + vec3(0, 2, 4));
        fragColor = vec4(col, 1.0);
    }`,
    timeEnabled: true
})
    .frame({ width: 300, height: 200 })

Shader({
    fragmentShader: `uniform float speed;
uniform vec3 baseColor;

void mainImage(
    out vec4 fragColor, in vec2 fragCoord
) {
    vec2 uv = fragCoord / iResolution.xy;
    float wave = sin(uv.x * 10.0 + iTime * speed);
    fragColor = vec4(baseColor * (0.5 + 0.5 * wave), 1.0);
}`,
    uniforms: {
        speed: 2.0,
        baseColor: [1.0, 0.5, 0.0]
    },
    timeEnabled: true
})
    .frame({ width: 300, height: 200 })

Shader({
    fragmentShader: `void mainImage(
        out vec4 fragColor, in vec2 fragCoord
    ) {
        vec2 uv = fragCoord / iResolution.xy;
        vec2 mouse = iMouse.xy / iResolution.xy;
        float d = distance(uv, mouse);
        float glow = 0.02 / d;
        fragColor = vec4(glow * vec3(0.3, 0.6, 1.0), 1.0);
    }`,
    mouseEnabled: true
})
    .frame({ width: 300, height: 300 })