Exploring mobile support for Three.js led me to uncover an interesting quirk involving the setSize function and multiple views. Let me paint you a picture of the situation.
When attempting to load the webgl_multiple_views demo on my trusty Nexus 7 running Android OS 4.3 using Chrome for Android (version 29.0.1547.59), I noticed that the entire rendered window appeared misaligned, as evidenced by this screenshot.
Initially, I suspected that there might be an issue with setViewport. However, upon closer inspection, it became apparent that the setSize function in WebGLRenderer.js was adjusting the WebGL canvas context size by multiplying it by the devicePixelRatio like so:
_canvas.width = width * this.devicePixelRatio;
_canvas.height = height * this.devicePixelRatio;
While this approach seems logical, the problem arises with certain Android devices where the system seemingly already accounts for this calculation, resulting in a distorted scene.
I discovered that by assuming a default pixel ratio of 1, I could resolve the issue. However, I am concerned that this fix may disrupt properly functioning mobile devices. Here's the proposed "fix":
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false, devicePixelRatio: 1 } );
My inquiry is this - has anyone else faced a similar challenge? Is there a more reliable solution for scaling a canvas context to accommodate device pixel ratio without causing issues on some android devices?
Thank you in advance for any guidance or insight provided.