事件处理程序中的 webGL 绘制似乎清除了画布答案

【问题标题】：webGL draw in event handler seems to clear the canvas事件处理程序中的 webGL 绘制似乎清除了画布
【发布时间】：2016-02-19 06:34:44
【问题描述】：

这是来自webglfundamentals.com 的一个经过轻微修改的介绍性示例。

http://codepen.io/anon/pen/mVYrZd

鼠标在画布上绘制一个新的矩形。先前绘制的矩形被清除。为什么？ for 循环和事件处理程序调用完全相同的函数。

相关代码：

// Draw 50 random rectangles in random colors.
// They draw on top of each other, as expected.
for ( var i = 0; i < 50; i += 1 ) {
  drawARandomRectangle( gl );
}

// Draw one rectangle on the canvas in response to a canvas mousedown.
// The buffer seems to be cleared, only a single new rectangle shows.
canvas.addEventListener("mousedown", function( e ){
  drawARandomRectangle( gl );
});

我发现使用 preserveDrawingBuffer 初始化上下文会导致 mousedown 矩形被绘制在现有矩形之上：

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

但我也读到preserveDrawingBuffer 的性能很差，它并不能完全解释为什么循环内调用和 mousedown 调用呈现不同的原因。

【问题讨论】：

贫穷是相对的。它可能慢不超过 10%，通常根本不慢。在任何支持抗锯齿和抗锯齿（默认）的机器上，速度没有区别，因为抗锯齿需要一个“解决”步骤，这实际上是一个副本。只是在某些手机上可能会变慢，如果您确实需要保留内容，则不会变慢。

标签： javascript webgl

【解决方案1】：

使用preserveDrawingBuffer: true

var gl = canvas.getContext( "webgl", { antialias: false, preserveDrawingBuffer: true} )

详情在这里WebGL drawing failure after mouse click

【讨论】：