React-three-fiber: Canvas is blurry despite using devicePixelRatio, only doubling pixelRatio works

[flxsu]

I'm on a Macbook with a retina screen and a devicePixelRatio of 2.

Doesn't matter whether I use <Canvas pixelRatio={window.devicePixelRatio}> or manually adjust with gl.setPixelRatio(window.devicePixelRatio) within a useEffect() hook, the canvas remains blurry.

If I manually use 4, i.e. double my screen's normal pixel ratio, I get a sharp canvas.

window.devicePixelRatio:

Manually set to 4:

There was a similar issue here #32 where a contributor mentioned that react-three-fiber divides the pixel ratio by two, which seems to point in the right direction, but supposedly it was fixed. Not sure if I'm doing something wrong or if this is a bug to be honest.

[gsimone]

What version of three and r3f?

[flxsu]

"react-three-fiber": "^4.2.21",
"three": "^0.120.1"

[drcmda]

im using a mbp 2019, pixelRatio is definitively working.

the issue you are referring to is old, it doesn't divide, pixelratio is 1 by default. if you do pixelRatio={window.devicePixelRatio} it has to be crisp. please dump your case into a live codesandbox - there has to be an error that you make, css scaling issue, transform scale3d(...) or something like that.

[flxsu]

I fixed it! Antialiasing was on by default, whereas vanilla three has it off by default.
https://threejs.org/docs/#api/en/renderers/WebGLRenderer.antialias

Can confirm <Canvas gl={{ antialias: false }} pixelRatio={window.devicePixelRatio}> is perfectly crisp.
Manually setting the pixelRatio to 4 weakens the antialiasing effect so that's why that _seemed_ to fix it.