尝试转换为 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.

然后我们创建帧缓冲区对象，以便我们可以绘制到我们的纹理：

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

有很多关于渲染纹理的资料，例如这里或这里。