Question

我一直在尝试创建一个multiviewport webgl应用程序。

我使用viewport + 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;
    }
}

任何想法我怎么能达到这个效果？

非常感谢您提前

Answer 1

您可以使用preserveDrawingBuffer属性：

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

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

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

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

的相关信息

Webgl使用viewport + scissor更新区域

1 个答案: