Question

我正在尝试使用webgl在画布上添加一些点，但遇到了一个奇怪的问题。我有一个向画布添加一个点的函数，如果我两次调用此函数，它将添加两个点，但是如果我延迟调用它，则会先清除画布，然后添加一个点。

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl'); 

// Add two points to canvas
drawPoint(0.5, 0.5, 0);
drawPoint(-0.5, -0.5, 0);

// Add another 5 seconds later
setTimeout(drawLater, 5000);

function drawALittleLater(){
	drawPoint(-0.5, 0.5, 0);
}

function drawLater(){
	drawPoint(0.5, -0.5, 0);
}
         
function drawPoint(x, y, z){
         
  var vertices = [
    x, y, z
  ];

  // Create an empty buffer object to store the vertex buffer
  var vertex_buffer = gl.createBuffer();

  //Bind appropriate array buffer to it
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

  // Pass the vertex data to the buffer
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  // Unbind the buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  /*=========================Shaders========================*/

  // vertex shader source code
  var vertCode =
      'attribute vec3 coordinates;' +

      'void main(void) {' +
      ' gl_Position = vec4(coordinates, 1.0);' +
      'gl_PointSize = 10.0;'+
      '}';

  // Create a vertex shader object
  var vertShader = gl.createShader(gl.VERTEX_SHADER);

  // Attach vertex shader source code
  gl.shaderSource(vertShader, vertCode);

  // Compile the vertex shader
  gl.compileShader(vertShader);

  // fragment shader source code
  var fragCode =
      'void main(void) {' +
      ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1);' +
      '}';

  // Create fragment shader object
  var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

  // Attach fragment shader source code
  gl.shaderSource(fragShader, fragCode);

  // Compile the fragmentt shader
  gl.compileShader(fragShader);

  // Create a shader program object to store
  // the combined shader program
  var shaderProgram = gl.createProgram();

  // Attach a vertex shader
  gl.attachShader(shaderProgram, vertShader); 

  // Attach a fragment shader
  gl.attachShader(shaderProgram, fragShader);

  // Link both programs
  gl.linkProgram(shaderProgram);

  // Use the combined shader program object
  gl.useProgram(shaderProgram);

  /*======== Associating shaders to buffer objects ========*/

  // Bind vertex buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

  // Get the attribute location
  var coord = gl.getAttribLocation(shaderProgram, "coordinates");

  // Point an attribute to the currently bound VBO
  gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

  // Enable the attribute
  gl.enableVertexAttribArray(coord);

  /*============= Drawing the primitive ===============*/

  // Enable the depth test
  gl.enable(gl.DEPTH_TEST);


  // Set the view port
  gl.viewport(0,0,canvas.width,canvas.height);

  // Draw the triangle
  gl.drawArrays(gl.POINTS, 0, 1);
}

<html>
   <body>
      <canvas width = "200" height = "200" id = "my_Canvas"></canvas>

      <script>
      
         
      </script>
   </body>
</html>

如何在以后保留以前的点的同时添加一些点？

WebGL，将点添加到画布

0 个答案: