I'm drawing a vbo filled with vertices which look like this: [x, y, r, g, b, ...] using the render mode: LINE_STRIP.

I add a value to my vbo using the following function:

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

I then call it like so:

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

and this is my rendering code:

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

However the width of my lines seems to only be 1px and after further investigation this seems to be the only thickness available. My question is: is it possible to achieve this effect with LINE_STRIP and if it is, how would I achieve that. If it isn't are there any other ways to achieve my goal?

I'm drawing a vbo filled with vertices which look like this: [x, y, r, g, b, ...] using the render mode: LINE_STRIP.

I add a value to my vbo using the following function:

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

I then call it like so:

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

and this is my rendering code:

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

However the width of my lines seems to only be 1px and after further investigation this seems to be the only thickness available. My question is: is it possible to achieve this effect with LINE_STRIP and if it is, how would I achieve that. If it isn't are there any other ways to achieve my goal?

• javascript
• webgl
• vbo

1 Answer 1

Currently the windows browsers support only line width 1px (due to use of DirectX Angle Layer). As you can see here - http://alteredqualia./tmp/webgl-linewidth-test/ (tried in Chrome, ie, and Firefox)

What you will have to do is to simulating your line width by creating triangles.

This require a bit more work in the shader, and adding extra vertices and attributes.

The main idea behind is to add each vertex twice with different attribute offset according to the angle of the line, and in the shader offsetting the vertex accordingly (with consideration of the resolution of course).