Shadertoy：如何混合-加-乘任意两个着色器？

Question

有什么巧妙的技巧可以将两个着色器混合在一起吗？即将着色器添加在一起，否则将一个着色器渲染在中央正方形中并将另一个着色器渲染为框架？我们可以重命名一些输入输出参数并将它们添加到最终的图像混合元函数中吗？

即如果我改变

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{...}

更改为：

void mainImage( out vec4 A_FragColor, in vec2 fragCoord )
{...}

和

void mainImage( out vec4 B_FragColor, in vec2 fragCoord )
{...}

也许我可以将着色器 A 和 B 从 canvas 的左到右混合和 lerp？

Answer 1

您可以使用由 Shadertoy 缓冲区选项卡和 iChannel 映射启用的渲染到纹理。

为此，只需添加一个 BufA 选项卡并将您的第一个着色器代码放入其中，然后对 BufB 选项卡和您的第二个着色器代码执行相同的操作。

例如，我将生成两个渐变图像并将它们相加。 BufA 会画一些红到黑，BufB 会画一些黑到绿的渐变。

// Shader in buffer A returns a red to black gradient
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord / iResolution.xy;
    fragColor = vec4(uv.x, 0., 0., 1.);
}

// Shader in buffer B returns a black to green gradient
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord / iResolution.xy;
    fragColor = vec4(0., 1. - uv.x, 0., 1.);
}

启用底部面板中的 iChannel0 和 iChannel1，并将它们连接到 BufA 和 BufB。此时 ShaderToy 会将两个着色器渲染到 iChannel 纹理中，然后调用图像选项卡主着色器。

在图像选项卡中，您可以通过访问您映射的 iChannel[i] 来检索纹理，并使用 iChannelResolution[i] 计算 uv 坐标。

你可以随心所欲地混合一切

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uvA = fragCoord / iChannelResolution[0].xy;
    vec2 uvB = fragCoord / iChannelResolution[1].xy;

    // Output to screen
    // Fragment is the sum of both gradients: red to green
    fragColor = texture(iChannel0, uvA) + texture(iChannel1, uvB);
}

整个事情应该是这样的

Shadertoy：如何混合-加-乘任意两个着色器？

Shadertoy: How to mix-add-multiply any two shaders?

shader

gpu

webgl