Webgl 使用 viewport+scissor 更新区域

Question

我一直在尝试创建一个多视口 webgl 应用程序。

我使用 viewport+scissor 为每个视图渲染得非常好。 但现在我想改进渲染并只渲染更新的视图，所以跳过过度绘制。 我做了一个小演示来展示这个想法：http://kile.stravaganza.org/lab/js/scissor/

据我了解 scissor 是假设它只会渲染当前的剪刀框并保持画布的其余部分不受影响。但似乎它只是不断清除每一帧上的整个画布，无论我尝试什么:(

这是渲染代码（它应该只渲染一次并保留在每一帧上的最后一个视图）：

function drawScene()
{
    gl.clearColor(1.0, 0.0, 0.0, 0.0);
    gl.scissor(0,0,200,200);
    gl.viewport(0,0,200,200);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    drawFigures();

    gl.clearColor(0.0, 1.0, 0.0, 0.0);
    gl.scissor(200,0,200,200);
    gl.viewport(200,0,200,200);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    drawFigures();

    gl.clearColor(0.0, 0.0, 1.0, 0.0);
    gl.scissor(200,200,200,200);
    gl.viewport(200,200,200,200);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    drawFigures();

    // Render just once   
    if (first)
    {
        gl.clearColor(1.0, 1.0, 0.0, 0.0);
        gl.scissor(0,200,200,200);
        gl.viewport(0,200,200,200);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        drawFigures();
        first=false;
    }
}

知道如何实现这种效果吗？

非常感谢您

Answer 1

你可以使用preserveDrawingBuffer属性：

gl = canvas.getContext("experimental-webgl", { preserveDrawingBuffer: true });

不建议在生产中使用它。 WebGL specifications 声明：

虽然有时需要保留绘图缓冲区，但它可以 在某些平台上导致显着的性能损失。每当 可能此标志应保持为假并使用其他技术。 同步绘图缓冲区访问等技术（例如，调用 readPixels 或 toDataURL 在呈现给 绘图缓冲区）可用于获取绘图缓冲区的内容。 如果作者需要通过一系列渲染到同一个绘图缓冲区 调用时，可以使用 Framebuffer 对象。

此 SO 问题还包含有关 preserveDrawingBuffer 的相关信息：When WebGL decide to update the display?