WebGL - 依次应用多个程序答案

【问题标题】：WebGL - apply several programs successivelyWebGL - 依次应用多个程序
【发布时间】：2016-08-27 17:53:00
【问题描述】：

如何让 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);

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

【问题讨论】：

标签： javascript webgl post-processing

【解决方案1】：

@ssube 所说的除了 WebGL 术语...

在初始化时

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

在渲染时

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

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

// .. render scene ..

然后使用后期处理着色器将帧缓冲区的纹理渲染到画布上

// make rendering render to canvas
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

// .. render framebuffer's texture to canvas with post processing shader..

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

For an example of applying multiple effects see this

【讨论】：

【解决方案2】：

您确实想再次渲染，但您需要获取第一遍的输出并将其用作第二遍的输入纹理。

交换纹理和绘制一个矩形（两个三角形）很便宜，尤其是在现代可编程硬件上。

对于简单的效果（使用可见图像作为输入，而不是几何或深度的效果），您：

像平常一样将场景绘制到可读纹理。
将该纹理绑定为下一个程序的输入。
使用您的程序和之前的输出绘制一个矩形。

您可以重复 #2 和 #3 来运行多个效果。这最多需要两个纹理（一个作为输入，一个作为输出，然后交换）。这适用于模糊、黑白、光晕等简单效果。

更复杂的效果可能需要额外的输入纹理（包括深度）并可能使用额外的数据。

【讨论】：