为什么RenderingContext.drawElements在绘制之前清除屏幕？

Question

RenderingContext.drawElements在绘制之前清除屏幕时是否正确？

考虑这些屏幕截图，显示调用drawElements的步骤，其中已绘制的对象将被删除。

Answer 1

WebGL 有效地在页面合成后清除屏幕。当你每次单步执行一行时，每次停止时它都会被合成。

如果您不希望它被清除，请在创建WebGL上下文时请求preserveDrawingBuffer: true

gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true });

至于为什么，from the spec

  

虽然有时需要保留绘图缓冲区，但它可能会在某些平台上造成严重的性能损失。只要有可能，该标志应保持为假并使用其他技术。诸如同步绘图缓冲区访问（例如，在呈现给绘图缓冲区的相同函数中调用readPixel或toDataURL）之类的技术可用于获取绘图缓冲区的内容。如果作者需要通过一系列调用渲染到同一个绘图缓冲区，则可以使用Framebuffer对象。

     

实现可以优化绘图缓冲区所需的隐式清除操作，只要可以保证作者无法访问另一个进程的缓冲内容。例如，如果作者执行明确的清除，则不需要隐式清除。

TL; DR版本为preserveDrawingBuffer: false（默认值）允许WebGL在合成时交换缓冲区（这并不意味着它将交换缓冲区，但如果它选择则可以）。 preserveDrawingBuffer: true表示它无法交换缓冲区，它必须复制缓冲区。复制比交换慢得多。