Question

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

连接这些点

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

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

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

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

我想在一个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）;

使用WebGL

1 个答案: