rigid void
How to detect good devicePixelRatio on windows. I have a problem where on my Mac scene looks scrispy clean because devicePixelRatio is well detected, but on windows, I have to manually set 2 to get crispy scene. What is the workaround here? How does one automatically detect good value on windows for renderer pixel ratio?
https://stackblitz.com/edit/vitejs-vite-yzqaf22i?file=src%2Fmain.ts
For reference 1st picture is taken with value 2 and 2nd one with window.devicePixelRatio which equals to 1.
clear tundra
if window.devicePixelRatio
is 1 on your windows system then that's the correct pixel ratio of that display device.
I would say to just go with it as manufacturers decide the pixel ratio
trying to compensate for that might lead to performance issues on other monitors displays.
rigid void
Hmm, I am just trying to understand why THREE is rendering much crispier with pixelRatio 2. As if my default should be 2. This is especially evident when drawing lines -> 1px lines are actually 2px wide etc.
distant cedar
At the WebGL level, the size of the rendered image is whatever width and height are set to in the canvas. The displayed size is then determined by css, the browser will scale the WebGL output to fit the space the canvas needs to occupy in the layout.
The usual way to set things up is to react to canvas resize and to use devicePixelRatio so that the webgl rendering target is 1:1 with the screen pixels it will end up occupying, so on a HiDPI screen you'll render more pixels.
If you use a scale of 2 even on regular DPI displays, you'll just render 4x the pixels that actually get displayed, but the browser will use filtering when downscaling it so it will probably look different/cleaner - it's an inefficient way to do anti-aliasing effectively.
rigid void
Oh, so do you recon that is what is happening? That would make sense, hmm.
distant cedar
Lines are also a bit odd - most GPUs only render 1px lines natively, so they will look thinner and thinner the more you scale up devicePixelRatio. See https://threejs.org/examples/#webgl_lines_fat to see the difference in line types (Line2 converts lines to quads which can then support arbitrary widths and give cleaner antialiasing on many drivers)
What resoltuion is your screen running at? If it's standard HD rather than 4k then devicePixelRatio of 1 is the correct value.
rigid void
Thanks a lot for that insight, I should actually test does antialiasing bring the same result, or decent one when compared to manually setting pixelRatio to double of default one.
rigid void
What resoltuion is your screen running at? If it's standard HD rather than 4k th...
2556x1440
distant cedar
Assuming it's a 24 inch or so that's probably devicePixelRatio 1 then