p5.js 中的 shadertoy 着色器之间的淡入淡出？

Question

我试图通过将它们导入 p5.js 来在 shadertoy 的几种不同类型的着色器之间淡入淡出，并试图找出最好的方法来做到这一点？我想弄清楚是否可以在加载着色器并循环遍历它们后以某种方式使用 tint() 函数来调整着色器的不透明度，但我不确定这是否可能。这是我目前所掌握的，如有任何帮助，我们将不胜感激。

这是我在 https://glitch.com/~outgoing-island-enthusiasm

的项目的完整 link

    let theShader;
    let oldTime;
    let shaderNdx = 0;

    const shaders = [];

    function preload(){
      // load the shaders
      shaders.push(loadShader('shader1.vert', 'shader1.frag'));
      shaders.push(loadShader('shader2.vert', 'shader2.frag'));
      shaders.push(loadShader('shader3.vert', 'shader3.frag'));
      theShader = shaders[0];  // start with the first shader
    }

    function setup() {
      //creates canvas
      createCanvas(windowWidth, windowHeight, WEBGL);
      noStroke();
    }

    function draw() {  
      // switch shaders every second
      let time = performance.now() / 1000 | 0;  // convert to seconds
      if (oldTime !== time) {
        oldTime = time;
        // increment shader index to the next shader but wrap around 
        // back to 0 at then of the array of shaders
        shaderNdx = (shaderNdx + 2) % shaders.length;
        theShader = shaders[shaderNdx]
      
      }

      //sets the active shader
      shader(theShader);

      theShader.setUniform("iResolution", [width, height]);
      theShader.setUniform("iFrame", frameCount);
      theShader.setUniform("iMouse", [mouseX, map(mouseY, 0, height, height, 0)]);
      theShader.setUniform("iTime", millis() / 1000.0);
      theShader.setUniform("u_resolution", [width, height]);
      theShader.setUniform("u_time", millis() / 1000.0);
      theShader.setUniform("u_mouse", [mouseX, map(mouseY, 0, height, height, 0)]);

      // rect gives us some geometry on the screen
      rect(0,0,width, height);
    }

    function windowResized(){
      resizeCanvas(windowWidth, windowHeight);
    }

Answer 1

编辑： 下面链接的 glitch.com 草图现在可以在三个着色器之间平滑过渡。始终有 2 个活动着色器（称为 foregroundShader 和 backgroundShader）。每 changeEvery 帧，当前的 foregroundShader 成为新的 backgroundShader 并为 foregroundShader 选择一个新的着色器。 backgroundShader 始终具有 1.0 的 alpha（不透明），而前景着色器的 alpha 值在一个 [=49] 的过程中从 0.0 线性增加到 1.0 =]，使用p5.js map()函数如下：

foregroundShader.setUniform(
    "backgroundAlpha",
    map(frameCount % changeEvery, 0, changeEvery-1, 0.0, 1.0)
);

原回答： 两个草图之间平滑过渡的可能解决方案（我在故障草图 here 中使用了您示例中的着色器 1 和 2）：

将两个着色器渲染在彼此之上，并为顶部的着色器赋予可变的 alpha（透明度）值，例如，

uniform float backgroundAlpha;

...

void main() {
    // Calculate r g b values of your colors somehow
    vec3 color = ...

    // Concatenate the alpha (transparency value)
    gl_FragColor = vec4(color.rgb, backgroundAlpha);
}

然后您可以使用 theShader.setUniform('backgroundAlpha', VALUE) 将 sketch.js 的 backgroundAlpha 值设置为某些 VALUE，其中 VALUE 可以是任何函数的输出（应该是在 0 和 1 之间）。

同样的原则也适用于三个着色器。

请注意，这首先无法使用您的故障草图，因为您使用的是旧版本的 p5.js，它仍然有一个 transparency bug。但是，使用 1.0.0 它有效（请参阅 index.html 文件中的更改）。

p5.js 中的 shadertoy 着色器之间的淡入淡出？

Fading between shadertoy shaders in p5.js?

javascript

java

shader

fade

p5.js