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

Question

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

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

Answer 1

WebGL 在页面合成后有效地清除屏幕。当您一次一行地浏览内容时，每次停止时都会对其进行合成。
如果您不希望它被清除，请询问 preserveDrawingBuffer: true当您创建 WebGL 上下文时

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

至于为什么， from the spec

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.

Implementations may optimize away the required implicit clear operation of the Drawing Buffer as long as a guarantee can be made that the author cannot gain access to buffer contents from another process. For instance, if the author performs an explicit clear then the implicit clear is not needed.

TL;DR 版本是 preserveDrawingBuffer: false (默认设置)允许 WebGL 在合成时交换缓冲区(这并不意味着它会交换缓冲区，但如果它愿意，它可以)。 preserveDrawingBuffer: true意味着它不能交换缓冲区，它必须复制缓冲区。复制比交换慢得多。