WEBGL/OPENGLES - 如何将多个渲染合并为一个？

Question

这是我的问题:

我想在 4 个虚拟象限和我想要的每个象限中参与 Canvas 用不同的颜色(使用不同的片段着色器)渲染相同的场景，以实时比较一些效果。我不知道该怎么做。 我应该用 4 种不同的纹理渲染同一个场景 4 次，然后用这些纹理重新填充 4 个矩形吗？或者我应该制作另一个 fshader 并用这些纹理手动填充所有片段？是否可以使用渲染缓冲区对象来提高性能？

提前致谢

Answer 1

为此您不需要渲染到纹理(尽管这是一种方式)。实际上，使用 gl.viewport 可以更简单地完成。

gl.viewport 只是在要渲染到的 Canvas 上设置一个矩形。任何落在该矩形之外的东西都会被裁剪掉。通常，您将其设置为与 Canvas 相同的大小，因为您想要呈现全屏，但在您的情况下，您可以执行以下操作:

// Clears the entire scene. gl.clear does not respect the viewport
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Render upper left quadrant
gl.viewport(0, 0, canvas.width/2, canvas.height/2);
drawSceneWithShader(shader[0]);

// Render upper right quadrant
gl.viewport(canvas.width/2, 0, canvas.width/2, canvas.height/2);
drawSceneWithShader(shader[1]);

// Render lower left quadrant
gl.viewport(0, canvas.height/2, canvas.width/2, canvas.height/2);
drawSceneWithShader(shader[2]);

// Render lower right quadrant
gl.viewport(canvas.width/2, canvas.height/2, canvas.width/2, canvas.height/2);
drawSceneWithShader(shader[3]);

渲染时只需像正常情况一样渲染整个场景，您不需要做任何特殊的事情来考虑新的视口(viewport)。 (但是，如果您正在进行任何鼠标拾取或类似操作，则需要考虑视口(viewport)!)