window.devicePixelRatio support?

[mrdoob]

I'm struggling to decide whether three.js should handle window.devicePixelRatio internally or not.

This would mean adding this kind of code to each renderer:

var ratio = window.devicePixelRatio || 1;

canvas.width = width * ratio;
canvas.height = height * ratio;

canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

The good thing is that people wouldn't have to worry about having to implement it on their end. But I don't know what the bad things would be. I'm sure this could lead to some confusion at some point.

[mrdoob]

Uhm... probably just simpler to implement it as a renderer flag such as:

var renderer = new THREE.CanvasRenderer( { useDevicePixelRatio: false } ); // true by default

[mrdoob]

Going for a walk made me come up with a better implementation:

var renderer = new THREE.CanvasRenderer( { devicePixelRatio: 1 } ); // if undefined then it gets set by using window.devicePixelRatio

[mrdoob]

And... implemented. 2feae0e

[gprasanth]

Thanks. This fix helped me -

threejs fix low fps for high dpi devices like macbook pro

p.s just leaving a comment here for people searching for it

[that-ben]

MY FACE WHEN I DISCOVERED renderer.setPixelRatio(1)

Thanks Ricardo for talking about this! That small detail by itself made my 3D FPS implementation achieve almost 60fps without changing anything else. Incredibly useful for mobile devices and horrible laptop GPU's.

[mrdoob]

😊