Webgl使用视口+剪刀更新区域

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

对于每个视图，我使用视口+剪刀将所有内容渲染得非常好。 但现在我想改进渲染并只渲染更新的视图，因此跳过过度绘制。 我做了一个小演示来展示这个想法：http://kile.stravaganza.org/lab/js/scissor/ http://kile.stravaganza.org/lab/js/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;
    }
}

知道我怎样才能达到这种效果吗？

预先非常感谢

您可以使用preserveDrawingBuffer属性：

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

不建议在生产中使用它。这WebGL 规范 http://www.khronos.org/registry/webgl/specs/latest/ states:

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

这个问题还包含有关的相关信息preserveDrawingBuffer: WebGL何时决定更新显示？ https://stackoverflow.com/questions/9491417/when-webgl-decide-to-update-the-display