我正在尝试通过将它们导入p5.js在shadertoy的几种不同类型的着色器之间淡入淡出,并试图找出实现此目的的最佳方法?我试图弄清楚我是否可以在加载它们并循环遍历它们后,使用tint()
函数来调整着色器的不透明度,但不完全知道是否可行。这是我到目前为止所拥有的,任何帮助将不胜感激。
这里是我的项目的完整链接,位于https://glitch.com/~outgoing-island-enthusiasm
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);
}
[两个草图之间的平滑过渡的可能解决方案(我在故障草图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);
}
然后您可以使用sketch.js
将VALUE
中的backgroundAlpha值设置为某些theShader.setUniform('backgroundAlpha', VALUE)
,其中VALUE
可以是任何函数的输出(应在0
和1
之间)。
相同的原理也应适用于三个着色器。
[请注意,这首先无法使用您的故障素描,因为您使用的是旧版本的p5.js,但仍带有transparency bug。但是,它使用1.0.0
起作用(请参阅index.html
文件中的更改)。