javascript - WebGL - 连续应用多个程序

Question

如何让 WebGl 连续应用多个程序，例如

• 画点东西
• 将其转换为黑白

在这个例子中，很容易将所有这些放在一个着色器中，但我希望能够将它们分开以便大型着色器的可重用性。

到目前为止，我有一些类似的东西

gl = canvas.getContext("webgl");
gl.viewport(0, 0, canvas.width, canvas.height);

fragmentShader = attachShader(fragmentShaderCode, gl, gl.FRAGMENT_SHADER);
vertexShader = attachShader(vertexShaderCode, gl, gl.VERTEX_SHADER);

program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

// attach textures and variables

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

而且我不确定如何添加第二遍以有效地从第一遍获取输入。我最好的猜测是使用第二个 Canvas ，将第一个 Canvas 作为纹理输入。但这听起来像是渲染了两次，这并不好。

Answer 1

除了 WebGL 术语之外，@ssube 所说的...

在初始化时

1. 您创建一个帧缓冲区 (gl.createFramebuffer)
2. 您将纹理附加到它 (gl.framebufferTexture2D)。
3. 如果您的场景需要深度缓冲区，您还需要将深度缓冲区附加到帧缓冲区(gl.renderbufferStorage、gl.framebufferRenderbuffer)。

在渲染时

1. 您通过帧缓冲区将场景渲染到纹理中。

   // make rendering render to framebuffer's attachments
   gl.bindFramebuffer(gl.FRAMEBUFFER, yourFramebuffer);
   
   // .. render scene ..
   

2. 然后使用后处理着色器将帧缓冲区的纹理渲染到 Canvas

   // make rendering render to canvas
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   
   // .. render framebuffer's texture to canvas with post processing shader..
   

正如@ssube 所说，要应用多个后处理效果，您可以创建带有附加纹理的帧缓冲区。您将场景渲染到第一个帧缓冲区纹理，然后使用第一个后​​处理效果将该纹理渲染到第二个纹理中，现在您可以使用下一个后处理效果将第二个纹理渲染回第一个纹理。最后的后期处理效果呈现在 Canvas 上。

For an example of applying multiple effects see this