设备像素比

设备像素比是屏幕物理像素与逻辑像素之间的比例，逻辑像素也称 CSS 分辨率，与屏幕物理尺寸有关。

在项目设置中启用 Device Pixel Ratio，会按屏幕原生分辨率渲染，画面更清晰，但每帧需要填充和渲染更多像素，因此增加性能开销。

下面对比 Model Viewer Starter Kit 启用和禁用设备像素比的效果，点击缩略图可查看原尺寸。

中低端移动设备可能具有高分辨率屏幕，却只有较低图形性能。启用设备像素比后，可能因硬件填充率限制而降低帧率。

理想情况是高端设备以最高质量渲染，低端设备降低比例，以保持可用帧率。

运行时可通过 pc.GraphicsDevice#maxPixelRatio 修改：

const device = pc.Application.getApplication().graphicsDevice;
if (highTierDevice) {
    // Use the default device pixel ratio of the device
    device.maxPixelRatio = window.devicePixelRatio;
} else {
    // Use the CSS resolution device pixel ratio
    device.maxPixelRatio = 1;
}

关键是判断设备性能，可采用：

应用启动时运行基准测试，并观察帧率。
查询 WebGL 渲染器信息，获取 GPU 名称，再对照已知性能等级列表。

通过 pc.GraphicsDevice#unmaskedRenderer 获取 GPU 信息。支持时返回包含信息的字符串，不支持时返回空字符串。

字符串大致如下：

ANGLE (NVIDIA GeForce GTX 1050 Direct3D11 vs_5_0 ps_5_0)

可参考 Video Card Benchmark 和 Notebook Check 手机与平板 GPU 列表评估性能。但 GPU 型号繁多，准确判断设备能力非常困难。

下面给出移动端示例，数据以撰写时的 2020 年 7 月 30 日为准：

function isLowQualityGPU() {
    const renderer = pc.Application.getApplication().graphicsDevice.unmaskedRenderer;

    // Only check the GPU if we are on mobile
    if (renderer && pc.platform.mobile) {
        // low level GPU's
        if(renderer.search(/Adreno\D*3/) !== -1 ||
           renderer.search(/Adreno\D*4/) !== -1 ||
           renderer.search(/Adreno\D*505/) !== -1 ||
           renderer.search(/Adreno\D*506/) !== -1 ||
           renderer.search(/Mali\D*4/) !== -1 ||
           renderer.search(/Mali\D*5/) !== -1 ||
           renderer.search(/Mali\D*6/) !== -1 ||
           renderer.search(/Mali\D*T7/) !== -1 ||
           renderer.search(/Mali\D*T82/) !== -1 ||
           renderer.search(/Mali\D*T83/) !== -1)
        {
            return true;
        }
    }

    return false;
};