Chrome for Android 上的 devicePixelRatio 影响 WebGLRenderer.setSize 函数

Question

我一直在测试对 Three.js 的移动支持，并在涉及 setSize 函数和多个视图时发现了一个怪癖。这是场景。

在 Chrome for Android (29.0.1547.59) 中，在我的 Nexus 7 (Android OS 4.3) 上加载 webgl_multiple_views 示例时，整个渲染窗口未对齐，如此屏幕截图所示。

起初我怀疑与 setViewport 相关的问题，但在进一步检查后确定 WebGLRenderer.js 函数 setSize 试图通过乘以 devicePixelRatio 来纠正 WebGL 画布上下文大小，如下所示：

_canvas.width = width * this.devicePixelRatio;
_canvas.height = height * this.devicePixelRatio;

在我看来，这似乎是一个完全合理的方法，但这里的问题是，对于某些 Android 设备，计算似乎已被系统暗示，从而导致场景倾斜。

我发现通过暗示默认像素比为 1 我可以纠正这个问题，但我预计它可能会破坏许多行为正常的移动设备。如果你愿意，这里是“修复”：

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false, devicePixelRatio: 1 } );

我的问题是，有没有其他人遇到过这种情况？有没有人对通常缩放画布上下文有更一致的修复，以便它尊重设备像素比，但不会破坏某些 android 设备？

感谢您的任何建议/帮助。

Answer 1

试试这个功能。我已经对其进行了广泛的测试，它为我尝试过的每个设备报告了正确的设备宽度、高度和计算的像素比...

function getDeviceDimensions()                  // get the width and height ofthe viewing device based on its OS
{
    screenWidth = window.screen.width;                                                  // get the width
    screenHeight = window.screen.height;                                                // get the height 
    var computedPixelRatio =  (window.screen.availWidth / document.documentElement.clientWidth);                        // a more reliable measure of device pixel ratio due to android firefox bugs...
    computedPixelRatio = window.devicePixelRatio >= computedPixelRatio ? window.devicePixelRatio : computedPixelRatio;  // select whichever value is larger between pixel ratio methods
    if (navigator.userAgent.indexOf('Android') != -1)                                   // if the client is on an android system
    {
        screenWidth = screenWidth / computedPixelRatio;                                 // divide the reported width by the pixel ratio
        screenHeight = screenHeight / computedPixelRatio;                               // divide the reported height by the pixel ratio
    }
    //alert(screenWidth + " " + screenHeight + " " + window.devicePixelRatio + " " + computedPixelRatio);
}