Why does linewidth of LineBasicMaterial work on android but not on desktop

Questions
1

During my search for a solution of a problem I found the fatline feature. What I haven’t found is an explanation why linewidth of the core LineBasicMaterial works on android browsers.
Is the desktop version (and also IPad) using glLine but the mobile is not?

More context:

When I tested my app on my phone it looked like this

image
image1080×818 59.8 KB

While it looks like this on different desktop browsers and my IPad
image

The problem is with the lines that I add to intensify the edges of that box. Seems like I played around with the linewidth back then and forgot about the high value that I have set there (as it is not visible on desktop browsers)

const material = new LineBasicMaterial({
    color: ROOM_LINE_COLOR,
    linewidth: 1000 // seems not to work
});

Setting it to 1 leads to the same behavior on desktop an mobile.

Mobile browsers = Samung Internet v.22.0.3.1 and Chrome mobile 116.0.5845.163

2

The linewidth parameter of LineBasicMaterial comes from a time where CanvasRenderer was supported. With WebGL, line primitives are usually rendered 1 pixel wide. There might be devices/browsers which support more but you never can rely on this. If you need wide lines, use a solution based on meshes like presented in the following example:

https://threejs.org/examples/?q=fat#webgl_lines_fat

3

Thanks, yes, that’s what I meant with the fatline feature.

Your point about the CanvasRenderer is probably the answer to my question.
The mobile browsers may use the CanvasRenderer (no glLine)

4

FYI: CanvasRenderer has been removed for quite a while now.

1 Like