javascript - 是否有一种简单的方法可以在 p5.js 中的不同 shadertoy 着色器之间进行分阶段?
问题描述
我正在寻找一种在来自 shadertoy.com 的着色器的多个着色器之间切换的方法
我的问题是,如何循环显示一个着色器到下一个着色器?这是我到目前为止的 javascript 文件。我知道我需要使用函数绘制循环并调用我预加载的两个不同的着色器,但是由于我对编码非常陌生,所以在语法上遇到了一些问题。任何帮助,将不胜感激!
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
在draw中使用。使用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);
}
推荐阅读
- kotlin - 在没有类型推断的情况下在 lambda 文字上指定接收者
- laravel - 如果链接的css与我的项目相同,为什么链接的css在我的同事中不起作用?拉拉维尔
- python - 如何将单纯形添加到 scipy Delaunay 三角剖分对象
- ruby-on-rails - Rails:Pycall 无法从“sklearn.feature_extraction.text”导入 CountVectorizer
- javascript - 使用 PHP 数据制作动态 highstock
- c - 如何仅使用 fork() 和 if 连续打印多个内容?
- php - 网络上的 PHP file_get_contents
- javascript - Javascript / API Blank Resolved Promise 和来自请求的非全局数据
- ocaml - 使用递归来反转 Ocaml 中的列表
- python-2.7 - 使用 ruamel.yaml 转储到字符串时如何删除 yaml 中的注释