Three.js: linewidth not respected in Mac OS Chrome 55.0.2883.95

[subvertallchris]

Description of the problem

LineBasicMaterial no work in Chrome. Works great in Firefox. Worked in in Chrome 54 until we updated to latest release. We get the lines, they have no width. I know this has been reported a million times in regard to Windows but I'm on Mac OS 10.11.6.

Three.js version

• [x] r82

Browser

• [x] Chrome
• [ ] Firefox

OS

• [x] Mac

Hardware Requirements (graphics card, VR Device, ...)

NVIDIA GeForce GT 750M

[subvertallchris]

Can also add that this is happening on two different Macs, OS 10.11 and 10.12, respecively. We saw it working in Chrome 54, updated to 55, immediately broke. On Ubuntu 16.04, same version of Chrome, Intel HD 520 graphics, it looks fine.

We're using https://threejs.org/examples/webgl_lines_splines.html to test it out.

[mrdoob]

Oh, so it was Chrome, I thought I broke something... I can reproduce this too. (OSX 10.10.5, Intel HD Graphics 6000)

https://threejs.org/examples/index.html#webgl_lines_colors

Chrome 55.0.2883.87 (Same result in Canary 57.0.2951.0)

Firefox 50.1.0

Safari 10.0.2 renders correctly too.

/ping @kenrussell

[mrdoob]

http://crbug.com/675308

[kenrussell]

Thanks for this report. Per http://crbug.com/675308 : it looks like Apple's OpenGL Core Profile driver does not support wide lines. Switching Chrome to use the Core Profile was a necessary prerequisite to shipping WebGL 2.0.

I'm not sure why Firefox doesn't have this problem, but the reason Safari doesn't is that they don't yet support WebGL 2.0.

I'd encourage switching Three.js's line implementation to something like @spite 's THREE.MeshLine. Is that feasible? Doing so will solve this problem for a lot of developers, and also solve longstanding issues like wide lines not being supported on Windows. (Implementing wide lines directly in the WebGL implementation, as opposed to the OpenGL driver, is non-trivial, and something we would rather not spend our development time on.)

[mrdoob]

Yeah, I guess we'll have to do the move.

Further reading:
https://mattdesl.svbtle.com/drawing-lines-is-hard
https://docs.unity3d.com/Manual/class-LineRenderer.html

[WestLangley]

@mrdoob From the Unity link

The Line Renderer ... renders billboard lines (polygons that always face the camera) that have a width in __world units__

World units. That means when you zoom, the line gets fatter. (I assume.)

At a minimum, I think we would need to support disabling line attenuation as in @spite's MeshLine. (Maybe in that case, width could be expressed in pixels, but that has its own complications.)

[yazancash]

I'm having this problem with Firefox 53.0 (32 bit) & Chrome 57.0
i wonder how you say Firefox 50.1 does not have this problem?
sounds this is related to Graphic diver?

[WestLangley]

@yazancash

https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/lineWidth

[kenrussell]

Unfortunately, when Chrome and Firefox upgraded to using the Core Profile on macOS (in order to provide WebGL 2.0 support), a limitation in the OpenGL specification was hit, where line widths greater than 1 were deprecated.

The best way to solve this is at the application level using a thin strip of triangles. Providing a fully OpenGL ES spec compliant emulation of wide lines -- which would be necessary to incorporate this into the browser -- is quite difficult.

[trusktr]

I'm new to lines. Is linewidth still a problem these days? I can't seem to modify linewidth in Chrome 64 or Firefox 58 in macOS 10.12.6.

In this pen linewidth: 10 looks like follows in both browsers:

[donmccurdy]

Still a problem, and unlikely to change in WebGL 1, see https://bugs.chromium.org/p/chromium/issues/detail?id=60124. There's a workaround in https://github.com/mrdoob/three.js/pull/11349.

[biojazzard]

This way?
https://threejs.org/examples/#webgl_lines_fat

[Mugen87]

@biojazzard Yep

[terracode]

https://threejs.org/examples/#webgl_lines_fat
Line styles are not supported in this example (f.e. dashed style).