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

Question

我正在尝试绘制点，因此使用

连接这些点

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

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

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

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

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

这是我的代码的摘录：

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);

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

Draw lines in different colors using WebGL

javascript

buffer

lines

webgl