如何在尝试转换为JS时在WebGL Javascript中实现Shadertoy缓冲区？

Question

我正在尝试将Shadertoy转换为Javascript和WebGL,以便它可以独立于Shadertoy运行.Shadertoy具有缓冲区的概念,在此示例中,它重新循环缓冲区并改善输出图像.它在Buf A选项卡上执行此操作.

https://www.shadertoy.com/view/MdyGDW

它通过将其输出写入与iChannel0绑定的缓冲区A然后在每个绘制周期从同一iChannel0读取来完成此操作.如何在WebGL Javascript片段着色器中实现缓冲区的概念,WebGL使用GLSL语言.特别是在这种情况下,它能够写入缓冲区,然后在下一个渲染周期从同一缓冲区读取.

Answer 1

Shadertoy使用称为渲染的技术来构造纹理.假设gl是我们的WebGL上下文.首先我们需要创建一个纹理,第一遍将绘制到:

// desired size of the texture
const W = 800, H = 600;
const textureA = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textureA);
// allocate texture data.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, W, H, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
// may be change texture parameters (at least magnification and
// minification filters since we won't render mip levels.

然后我们创建framebuffer对象,以便我们可以绘制到我们的纹理:

const framebufferA = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebufferA);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureA, 0);

现在我们可以画:

gl.bindBuffer(gl.FRAMEBUFFER, framebufferA);
gl.viewport(0, 0, W, H);

// draw first pass, the one which supposed to write data for the channel 0
// it'll use fragment shader for bufferA

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

// pass textureA as channel 0
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, textureA);
gl.uniform1i(channel0Uniform, 0);

// draw second pass, the one with uses channel 0

有很多关于渲染到纹理的材料,例如这里.