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上下文被完全重绘，没有明显的原因

1 个答案: