使用 WebGL 绘制不同颜色的线条

Question

我正在尝试绘制点，因此使用连接这些点

 gl.drawArrays(gl.LINE_STRIP, 0, points.length);

将这些点连接在一起会给我一个完整的形状，也许是一个多边形。问题在于绘制的点，线条被打破。我了解 gl.LINES 和 gl.LINE_STRIP 之间的区别；使用后者将通过连接彼此相邻的所有顶点来完成多边形形状。

我不知何故认为使用 gl.LINES 将是最好的选择，因为使用 gl.LINE_STRIP 不仅将顶点（点）连接在一起，而且还将一个形状的终点与下一个形状的起点连接起来（因为它在 2 个相邻点之间画线）。我当然不希望这样，我想绘制单独的形状。

其次，我尝试使用索引缓冲区。这也没有奏效，因为我的代码事先不知道每个形状需要多少个顶点（因为每个形状都是随意的形状）。

我想在一次 draw() 调用中绘制许多这样的形状。所以我最好的猜测是使用一个使用 gl.LINE_STRIP 的 drawArray() 调用，并说对于每个形状，以不透明颜色绘制形状以及将第一个形状的终点连接到起点的线下一个形状，使其透明着色。这样，我会绘制出单独的形状。但我很困惑使这项工作。我怎么知道形状有不同的颜色，而多余的线有不同的颜色？

这是我的代码的摘录：

buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

// enable the 'points' attribute in the shader to receive buffer
var attributeLoc = gl.getAttribLocation(pointProgram, 'points');
gl.enableVertexAttribArray(attributeLoc);

// tell webgl how buffer is laid out (pairs of x,y coords)
gl.vertexAttribPointer(attributeLoc, 2, gl.FLOAT, false, 0, 0);

其余的着色器链接和编译是相同的样板代码。

我的 drawArrays() 看起来像这样：

 gl.lineWidth(7);
 gl.drawArrays(gl.LINE_STRIP, 0, points.length); 

我尝试使用这样的颜色缓冲区：

  var colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  var colors = [0.0, 0.0, 0.0, 1.0, //this is for the shapes
                0.0, 0.0, 0.0, 0.3]; //this is for the extra lines, to make them transparent
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

 var aVertexColor = gl.getAttribLocation(pointProgram, "aVertexColor");
 gl.enableVertexAttribArray(aVertexColor);
 gl.vertexAttribPointer(aVertexColor, 2, gl.FLOAT, false, 0, 0);

这似乎不起作用。我哪里错了？

Answer 1

您可以在顶点缓冲区内交错顶点颜色，例如：

x,y,z,r,g,b,a

和：

gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 16, 0);

gl.vertexAttribPointer(aVertexColor, 4, gl.UNSIGNED_BYTE, true, 16, 12);