Three.js: setPixelRatio() is not really correspond to device pixel ratio
In the doc of setPixelRatio() in WebGLRenderer, it says:
Sets device pixel ratio.
But I think how it implemented in WebGLRenderer is not.
From reading the code of WebGLRenderer, it's actually making
canvas.width = canvas.style.width * WebGLRenderer's.pixelRatio
Which means
WebGLRenderer's pixels = CSS pixels * WebGLRenderer's.pixelRatio.
On mobile devices, the web page can be scaled(I think by default it'll be scaled if you don't define the scale in viewport meta). And the actual DevicePixels is:
Device Pixels = CSS pixels * zoom level * devicepPixelRatio
If we want to match the WebGLRenderer's pixels with device pixels, then you will get:
WebGLRenderer's.pixelRatio = zoom level * devicepPixelRatio
Do you think the document is correct?
larrylin28
>All comments
You can avoid the zoom nightmare by adding this to your website's <head>:
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
mrdoob
on 13 Apr 2017
Related issues
clawconduce
路
3Comments
jens-duttke
路
3Comments
ghost
路
3Comments
alexprut
路
3Comments
akshaysrin
路
3Comments
Most helpful comment
You can avoid the zoom nightmare by adding this to your website's
<head>: