WebGL 上下文无缘无故地完全重绘

Question

我正在尝试使用 WebGL，在我看来我遗漏了一些非常基本的东西，但仍然无法在文档和示例中找到确切的内容。所以想象一下我想画一个矩形，id 做这样的事情：

let points = rectangle(20, 20, 100, 100)
gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER, convertFloat32(points), WebGLRenderingContext.STATIC_DRAW)
gl.drawArrays(WebGLRenderingContext.LINE_STRIP, 0, points.length)

这行得通。我看到一个绘制的矩形，再高兴不过了。绘制尽可能多的矩形也是如此。

但是，每当我尝试添加如下内容时：

window.setTimeout(function() {
    let points = rectangle(120, 120, 100, 100)
    gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER, convertFloat32(points), WebGLRenderingContext.STATIC_DRAW)
    gl.drawArrays(WebGLRenderingContext.LINE_STRIP, 0, points.length)
}, 1000);

或者，说要在某些 DOM 事件处理程序中绘制矩形，之前绘制的所有内容都被删除了，我不知道为什么。

我的问题是 - 我到底错过了什么？

UPD：我分叉了一些现有示例并将其修改为具有（某种）我正在谈论的最小示例 - https://codepen.io/shabunc/pen/YRgzJq?editors=1010

Answer 1

getCcontext() 方法还有第二个参数 - 一些可选参数。

在您的示例中，尝试添加以下代码行：

var canvas = document.getElementById("c");

var NO_ANTIALIAS = false, 
    CLEAR_DRAWING_BUFFER = false,
    attributes = {antialias: !NO_ANTIALIAS, preserveDrawingBuffer: !CLEAR_DRAWING_BUFFER};

var gl = canvas.getContext("webgl", attributes);

说明：

antialias: 这只是对浏览器的提示 - 如果可用，请尝试平滑绘图边界
preserveDrawingBuffer: 您需要注意清除绘图自己缓冲

引用如下：WebGL Specification - Context creation

WebGL 上下文无缘无故地完全重绘

WebGL context is redrawn completely for no apparent reason

javascript

opengl-es

webgl