鼠标点击改变了 WebGL 代码的行为

Question

我有一个由三组顶点组成的数组，用于在屏幕上绘制三个点。在最初用三个顶点初始化它之后，我使用 javascript 的 push() 方法向我的顶点数组添加了另一个顶点。我想看看我是否可以在初始化数组后成功添加一个新顶点并在屏幕上显示该点，我可以使用以下代码来做到这一点

     var vertices = [
       -0.25, 0.0, 0.0,
       -0.25,0.25,0.0,
       -0.25, 0.5, 0.0,

     ];

     var vertex_buffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
     var coord = gl.getAttribLocation(shaderProgram, "coordinates");
     gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
     gl.enableVertexAttribArray(coord);
     gl.clearColor(0.5, 0.5, 0.5, 0.9);
     gl.clear(gl.COLOR_BUFFER_BIT);
     gl.drawArrays(gl.POINTS, 0, 3);

     //pushing a new vertex
     vertices.push(-0.25, 0.75, 0.0);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
     gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
     gl.enableVertexAttribArray(coord);
     gl.drawArrays(gl.POINTS, 3, 1);

这会产生以下图像

然后我决定把我的代码改成这样：最初屏幕上会有三个点，在我做一个 mouseClick 事件之后，另一个点会被添加到屏幕上。因此，我创建了一个 mouseclick 事件，并将向数组添加新顶点并将其绘制到该事件的代码剪切粘贴，如下所示：

    canvas.onmousedown = function(){
        vertices.push(-0.25, 0.75, 0.0);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(coord);
        gl.drawArrays(gl.POINTS, 3, 1);
      
        
     };

但是，结果是，当我运行程序时，我最初在灰色背景上看到三个点，这是应该的。但是在点击鼠标后，灰色背景和三个点消失了，我只看到白色背景上的一个点是这样的：

现在，我不明白为什么会这样，因为我只是在 mouseclick 事件中复制粘贴了我之前的代码，如果之前的代码显示四个点，为什么当前代码最初显示三个点而只是鼠标点击后一点？在这里，你还会注意到，在我之前的代码中，当我在绘制三个点之后绘制第四个点时，我并没有重新绘制之前的所有三个点，我只是在绘制第四个点。代码是

  gl.drawArrays(gl.POINTS, 3, 1);

但是，在添加鼠标点击之后，如果我像这样绘制所有点，那么我最初可以看到三个点，然后在鼠标点击之后添加另一个点：

gl.drawArrays(gl.POINTS, 0, 4);

这令人惊讶，因为我没有使用 gl.clear(gl.COLOR_BUFFER_BIT);清除缓冲区，但似乎在调用 onMouseDown() 时缓冲区正在被清除。有人可以帮忙吗？

Answer 1

我们必须像这样打开preserveDrawingBuffer来保留缓冲区：

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

更多细节可以在这里找到WEBGL drawing failure after mouseclick