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

有许多关于渲染到纹理的材料，例如here。

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

1 个答案: