WebGl LINE_STRIP 宽度

Question

我正在绘制一个充满顶点的 vbo，如下所示：[x, y, r, g, b, ...] 使用渲染模式：LINE_STRIP.

我使用以下函数向我的 vbo 添加一个值：

this.gameBuffer.vertices[this.gameBuffer.vertices.count * this.gameBuffer.vertices.step + 0] = circle.x;
  this.gameBuffer.vertices[this.gameBuffer.vertices.count * this.gameBuffer.vertices.step + 1] = circle.y;
  this.gameBuffer.vertices[this.gameBuffer.vertices.count * this.gameBuffer.vertices.step + 2] = circle.r;
  this.gameBuffer.vertices[this.gameBuffer.vertices.count * this.gameBuffer.vertices.step + 3] = circle.g;
  this.gameBuffer.vertices[this.gameBuffer.vertices.count * this.gameBuffer.vertices.step + 4] = circle.b;
  this.gameBuffer.vertices.count++;
  this.setFloatValues();

然后我这样称呼它：

this.addBufferValue({x: x, y: y, r: 1, g: 1, b: 1});

这是我的渲染代码：

  this.gl.vertexAttribPointer(this.defaultShader.prog.attribs['vertexPos'], 2, this.gl.FLOAT,  false, 20, 0);
  this.gl.vertexAttribPointer(this.defaultShader.prog.attribs['acolour'], 3, this.gl.FLOAT,  false, 20, 8);
  this.drawDynamic(this.gameBuffer, this.gl.LINE_STRIP, this.gameBuffer.vertices.length / this.gameBuffer.vertices.step, 1);

  Game.prototype.drawDynamic = function(updatedData, method, count, step) {
     this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, updatedData.floatVertices);
     this.gl.drawArrays(method, 0, count * step);
  }

然而，我的线宽似乎只有 1px，经过进一步调查，这似乎是唯一可用的粗细。我的问题是：是否可以使用 LINE_STRIP 实现这种效果，如果可以，我将如何实现。如果不是，还有其他方法可以实现我的目标吗？

Answer 1

目前 windows 浏览器仅支持 1px 线宽（由于使用了 DirectX Angle Layer）。正如您在此处看到的 - http://alteredqualia.com/tmp/webgl-linewidth-test/（在 Chrome，即和 Firefox 中尝试过）

您需要做的是通过创建三角形来模拟您的线宽。

这需要在着色器中做更多的工作，并添加额外的顶点和属性。

背后的主要思想是根据线条的角度，将每个顶点添加两次不同的属性偏移量，并在着色器中相应地偏移顶点（当然要考虑分辨率）。

WebGl LINE_STRIP 宽度

WebGl LINE_STRIP Width

javascript

webgl

vbo