p5.js 中的不同 shadertoy 着色器之间是否有一种简单的相位调整方法？

Question

我正在寻找一种在来自 shadertoy.com 的多个着色器之间切换的方法我一直在使用这些关于如何移植 shadertoys with p5.js 的说明，并且已经成功地将 sublime 与它或一个名为 glitch.com

的网站一起使用

我的问题是，如何循环显示一个着色器到下一个着色器？这是我目前拥有的 javascript 文件。我知道我需要使用函数 draw 进行循环并调用我预加载的两个不同的着色器，但由于我对编码还很陌生，所以在语法方面遇到了一些麻烦。如有任何帮助，我们将不胜感激！

let theShader;

function preload(){
  // load the shader
  theShader1 = loadShader('shader1.vert', 'shader1.frag');
  theShader2 = loadShader('shader2.vert', 'shader2.frag');
}

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

function draw() {  
  //sets the active shader with shader1
  shader(theShader1);
  
  theShader1.setUniform("iResolution", [width, height]);
  theShader1.setUniform("iFrame", frameCount);
  theShader1.setUniform("iMouse", [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

而不是在绘制中使用 theShader1。使用 theShader 然后基于某些东西（计时器、计数、用户点击某物）将 theShader 设置为 theShader1 或 theShader2


    let theShader;
    let oldTime;

    function preload(){
      // load the shader
      theShader1 = loadShader('shader1.vert', 'shader1.frag');
      theShader2 = loadShader('shader2.vert', 'shader2.frag');
      theShader = theShader1;  // start with theShader1
    }

    function setup() {
      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;
        theShader = theShader === theShader1 ? theShader2 : theShader1;
      }

      //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)]);

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

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

如果你有超过 2 个着色器，将它们放在一个数组中并保留一个索引。例如


    let theShader;
    let oldTime;
    let shaderNdx = 0;

    const shaders = [];

    function preload(){
      // load the shader
      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() {
      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 + 1) % 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)]);

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

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

p5.js 中的不同 shadertoy 着色器之间是否有一种简单的相位调整方法？

Is there an easy way to phase between different shadertoy shaders in p5.js?

javascript

p5.js