鼠标点击改变了 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