WebGL没有绘制线条

Question

我想在WebGL上下文中画一条线，但它不起作用。我可以清除画布颜色，所以我知道程序已编译，但不确定错误在哪里。

代码的主要部分是

  let canvas = document.getElementById("gl-canvas");

  let gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) {
    alert("WebGL isn't available");
  }
  let program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);
  gl.viewport(0, 0, canvas.width, canvas.height);

  gl.clearColor(0, 0, 0, 0.5);

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  let color = gl.getAttribLocation(program, "color");
  let colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1,0,0,1, 1,0,0,1]), gl.STATIC_DRAW);
  gl.vertexAttribPointer(color, 4, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(color);

  let vPosition = gl.getAttribLocation(program, "vPosition");
  let positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1,1,1,1, -1,-1,-1,1]), gl.STATIC_DRAW);
  gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vPosition);

  gl.drawArrays(gl.LINES, 0, 1);

可以找到完整的代码here

Answer 1

问题在于drawArrays来电：

  

计数   指定要渲染的索引的数量。

每一行都需要两个指数：起点和终点：

gl.drawArrays(gl.LINES, 0, 2);