Thickness of lines using THREE.LineBasicMaterial

Thickness of lines using THREE.LineBasicMaterial

I am using the code below to create hundreds of lines in my three.js scene
edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);
edgesMat[i] = new THREE.LineBasicMaterial({
color: 0x6699FF, linewidth: 1, fog:true});
edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]);
edge[i].type = THREE.Lines;
scene2.add(edge[i]);

It works just fine, but when i change the value of “linewidth” to a bigger OR smaller value, i see NO difference in the scene.
How should i change the thickness of the lines? Any ideas?
Thanks, Dimitris

Solutions/Answers:

Solution 1:

Are you using Windows?
I remember this not working on Windows because it wasn’t implemented in ANGLE.

Solution 2:

1) Use native OpenGL

You can achieve rendering of line thicknesses with a workaround by setting your browser to use native OpenGL instead of ANGLE. You can read here on how to do this on Chrome.
Keep in mind that you will experience performance differences if you swap to native OpenGL.

EDIT:

The master MrDoob himself posted here how to do this for both Chrome and Firefox.

Related:  How to do associative array/hashing in JavaScript

Solution 3:

This occurs in Windows Chrome and Firefox, both using ANGLE (WebGL to DirectX wrapper).

The issue is still not solved by the ANGLE project. You can star the issue here to get higher priority and get a notification if it’s going to be implemented:

https://code.google.com/p/angleproject/issues/detail?id=119

Solution 4:

This is no longer an issue just in ANGLE it’s an issue on all platforms. Browsers needed to switching to the OpenGL 4+ core profile to support WebGL2 and the OpenGL 4+ core profile does not support line widths greater than 1. From the OpenGL 4.0+ spec, section E.2.1

E.2.1 Deprecated But Still Supported Features

The following features are deprecated, but still present in the core profile. They may be removed from a future version of OpenGL, and are removed in a forward compatible context implementing the core profile.

  • Wide lines – LineWidth values greater than 1.0 will generate an INVALID_VALUE error.

To draw thicker lines you need generate geometry. For three.js there is this library (pointed out by Wilt as well)

Related:  How to ignore user's time zone and force Date() use specific time zone

https://github.com/spite/THREE.MeshLine

Solution 5:

You can use CanvasRenderer instead of Webglrenderer. Check out the ifficial documentation here where each shape has a border of linewidth = 10;

Solution 6:

You can achieve the same effect using extrude-polyline to generate a simplicial complex for the thickened (poly)line and three-simplicial-complex to convert this to a three.js Mesh:

const THREE = require('three');
const extrudePolyline = require('extrude-polyline');
const Complex = require('three-simplicial-complex')(THREE);

function thickPolyline(points, lineWidth) {
  const simplicialComplex = extrudePolyline({
    // Adjust to taste!
    thickness: lineWidth,
    cap: 'square',  // or 'butt'
    join: 'bevel',  // or 'miter',
    miterLimit: 10,
  }).build(points);

  // Add a z-coordinate.
  for (const position of simplicialComplex.positions) {
    position[2] = 0;
  }

  return Complex(simplicialComplex);
}

const vertices = [[0, 0], [10, 0], [10, 10], [20, 10], [30, 00]];
const geometry = thickPolyline(vertices, 10);

const material = new THREE.MeshBasicMaterial({
  color: 0x009900,
  side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Here’s a complete example along with the source. (There’s currently an issue on requirebin that prevents it from rendering the source example).

If you want to texture map the polyline, things get a little more complicated.

Related:  How to stub a method of jasmine mock object?

References