Specify opacity in LineMaterial object properties

[EmperorJack]

Change

When using LineMaterial I would like to specify an opacity value to create transparent lines. Currently, you must dive into the uniforms to set the opacity like this:

// To initialise a LineMaterial with an opacity value
var matLine = new THREE.LineMaterial({
  color: 0xff0000,
  transparent: true,
  linewidth: 5
});
matLine.uniforms.opacity.value = 0.5;

// To update a LineMaterial's opacity
matLine.uniforms.opacity.value = 0.25;

This pull request changes LineMaterial so that a more direct approach can be used to set the opacity:

// To initialise a LineMaterial with an opacity value
var matLine = new THREE.LineMaterial({
  color: 0xff0000,
  transparent: true,
  opacity: 0.5,
  linewidth: 5
});

// To update a LineMaterial's opacity
matLine.opacity = 0.25;

This change makes LineMaterial more consistent with existing materials, despite not being properly "wired-in" as a built-in material yet (#11349 (comment)).

Testing

To test this change you can modify the webgl_lines_fat_wireframe.html example. E.g: Add transparent: true and opacity: 0.1 to matLine which is defined on line 102.

[WestLangley]

Thank you for your contribution. I chose not to support opacity for fat lines because they have artifacts when rendered with transparency -- and that invariably leads to user complaints.

It can be improved somewhat by not writing to the depth buffer.

[WestLangley]

In other words, as it stands now, I would not be inclined to add opacity support.

Can you please explain your use-case?

[EmperorJack]

Thank you for your reply. I understand your concern with the artifacts. My use-case is a data visualisation composed of many flat shaded or wireframe polygons. The visualisation must work on different platforms/browsers and looks best when using lines that are both fat and transparent (better readability). The artifacts don't affect my use-case much as the joins are obfuscated by other geometry, though, disabling depthWrite does improve things a little.

Does this use-case make sense or is it clasping at the edges of what LineMaterial was intended for? Is there any other solutions for creating fat, transparent lines that work consistently across platforms/browsers. For example, I can't use LineBasicMaterial because of this issue: #10357.

Regardless, I can keep using LineMaterial using the uniforms trick, but it's not as nice to work with, e.g: I can't treat a list of MeshPhongMaterial and LineMaterial's in a generic manner if they don't both support opacity.

Also, what is the future plan for LineMaterial, will it eventually be built-in? If you opted to support opacity, is it possible that the documentation could mention how depthWrite improves the quality?

[WestLangley]

Try THREE.MeshLlne. It bevels corners, instead.

[EmperorJack]

I have attempted to use MeshLine but unfortunately it doesn't support BufferGeometry, which I need for translating a polygon mesh (e.g: ConvexGeometry) into a wireframe. I tried converting my mesh through EdgesGeometry and then into regular geometry (using fromBufferGeometry) but no luck. I also tried converting through WireframeGeometry2 but that didn't work either.

My use-case requires that I can draw the wireframes of meshes, of which LineMaterial works nicely with WireframeGeometry2 and Wireframe. I suppose another option would be to generate individual line objects for each edge given I don't care about the corners.

[WestLangley]

Are you drawing only the wireframes of meshes?

If so, you can just render the mesh, discarding the center of each triangle. I would expect such a technique would support opacity.

https://codeflow.org/webgl/barycentric-wireframe/www/
https://stackoverflow.com/questions/30632159/three-js-wireframe-model-from-vtk-file

And this three.js example, but it is old and needs work: https://threejs.org/examples/webgl_materials_wireframe.html

[Mugen87]

Closing since #16570 (comment) explained why transparency is not supported for wide lines. The alternative solutions mentioned in #16570 (comment) are reasonable workarounds.