javascript - 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:我已经 fork 了一些现有的示例并将其修改为具有(某种)我正在谈论的最小示例 - 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