Thin curve looking jagged

[marcelpi]

Hi guys,

I've got a thin tube based on a CatmullRomCurve and I've noticed that the edges look jagged, especially when zoomed out.
Is there any way to avoid this? Maybe some different settings on the WebGLRenderer? Anyone have any idea what's causing it?

Here's a sandbox so you can check it out:
https://codesandbox.io/s/jagged-curve-vf98w?file=/sandbox.config.json

Any advice would be appreciated.
Thanks!

[drcmda]

it's too low res

    <Canvas
      dpr={[1, 2]}

[marcelpi]

You mean the canvas device pixel ratio?

I tried dpr={[1, 2]} and the results are the same.

Only if I bump it up to dpr={[2, 3]} it gets smoother at the cost of performance.
Isn't this related in any way to the anti-aliasing algorithm?

Thanks man.

[drcmda]

it has to be 1, 2. 2, 3 is way too high. i see a clear difference.

it means no lower than 1, no higher than 2 if window.devicePixelRatio allows

[marcelpi]

Yes, I've been trying dpr={[1, 2]} on a regular device with window.devicePixelRatio = 1 which is probably why I didn't see a difference.
On a retina display it looks better indeed.

Should I use dpr={[1, 2]} or dpr={window.devicePixelRatio} ? Any advice?

Thanks for your feedback, Paul.

[drcmda]

id always use 1, 2. that will also be the standard going forward (v8). this is because on some mobile platform pixel ratio can go as high as 4 but these mobile gpus can never take that many pixels. you can think of it like a system-aware clamp.

[marcelpi]

Thanks for clarifying, will use [1, 2].