How to setSize of renderer

[maxwellhankner]

I'm wondering what the equivalent of renderer.setSize(2048, 2048); is in R3F.

The reason is that the resolution of my canvas in R3F is slightly blurry.. Perhaps there is another way to increase the resolution of the canvas while maintaining the 100% width and height of the parent div.

Any help would be greatly appreciated! Thank you.

[drcmda]

pixelratio is 1 by default, you never have to mess with size, even in plain threejs that would imo be wrong bc you should be calling gl.setPixelRatio instead. in r3f that's super simple:

// so-so
<Canvas pixelRatio={2}>
// better
<Canvas pixelRatio={window.devicePixelRatio}>
// best: no lower than 1, no higher than 2, prefer 2 if window.devicePixelRatio allows
<Canvas pixelRatio={[1, 2]}>

this is because mobile device can have pixelratio as high as 4, maybe higher. you want to cap size at some point or else they face so many pixels their slow chips won't be able to cope.

ps. with v6 you can use a really high pixel density and regress temporarily on movement for improved performance similar to what sketchfab can do: #1070

here's an extreme example: https://codesandbox.io/s/gltf-simple-example-v6-gf5dn?file=/src/index.js:342-534 set "min" to 0.5 and it would show the scene with pixelratio 2 on stillstand and 1 on movement.

[maxwellhankner]

Awesome that’s exactly what I was looking for and yeah makes sense that setSize was not the ideal way to do it in the first place.