Webgl更新区使用视口+剪刀 [英] Webgl update region using viewport+scissor

问题描述

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

我使用viewport + scissor为每个视图渲染相当不错的东西。
但是现在我想改进渲染，只是渲染更新的视图，所以跳过overdrawing。
我做了一个小演示，展示了这个想法： 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， 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 ）; 
 
 //只渲染一次
 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; 
} 
} 
  

任何想法如何实现这种效果？ p>

非常感谢您提前

解决方案

c $ c> preserveDrawingBuffer 属性：

  gl = canvas.getContext（experimental-webgl {preserveDrawingBuffer：true}）; 
  

不建议在生产中使用。 WebGL规范说明：

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

此SO问题还包含有关 preserveDrawingBuffer 的相关信息：当WebGL决定更新显示时？

I've been trying to create a multiviewport webgl application.

I got everything rendering quite nice using viewport+scissor for each view. But now I would like to improve rendering and just render the view which is updated, so skip overdrawing. I've made a little demo showing the idea: http://kile.stravaganza.org/lab/js/scissor/

As I understand scissor it's suposse that it will just render the current scissor box and keep the rest of the canvas untouched. But it seems that it just keeps clearing the whole canvas on each frame, no matter what I tried :(

This is the rendering code (The last view it's supossed to be rendered just once and keep it on each frame):

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;
    }
}

Any idea how could I achieve this effect?

Thank you very much in advance

解决方案

You can use the preserveDrawingBuffer attribute:

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

It isn't recommended to use this in production. The WebGL specifications states:

While it is sometimes desirable to preserve the drawing buffer, it can cause significant performance loss on some platforms. Whenever possible this flag should remain false and other techniques used. Techniques like synchronous drawing buffer access (e.g., calling readPixels or toDataURL in the same function that renders to the drawing buffer) can be used to get the contents of the drawing buffer. If the author needs to render to the same drawing buffer over a series of calls, a Framebuffer Object can be used.

This SO question contains also relevant information regarding preserveDrawingBuffer: When WebGL decide to update the display?

这篇关于Webgl更新区使用视口+剪刀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！