我正在寻找一种方法,可以在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);
}
而不是在平局中使用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);
}