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？

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

整个外观应该是这样