デバイスピクセル比率( (DPI)

デバイスピクセル比率(Device Pixel Ratio)は、ハードウェアスクリーン上の物理的なピクセルと、論理的なピクセル(スクリーンの物理的なサイズに関連した、CSSによる)の比率です。

プロジェクト設定でDevice Pixel Ratio を有効にすることで、アプリケーションをスクリーンのネイティブ解像度でレンダリングし、非常に鮮明に見えるようになります。しかし、それはそれに対してパフォーマンスコストがかかります。つまり、毎フレームの描画に必要なピクセルが増えます。

Device Pixel Ratioが有効になっている場合、解像度が高いスクリーンを備えた低/中級モバイルデバイスなどでは問題が生じる可能性があります。ハードウェアのフィルレート制限のため、デバイスピクセル比率を有効にすると低いフレームレートが発生する可能性があります。

理想的には、高性能のデバイスのユーザーは最高品質でレンダリングし、低性能デバイスであってもプレイ可能なフレームレートを維持するために比率を減らせる、両方の利点を兼ね備えた状態にしたいものです。

理想的には、高性能デバイスのユーザーは最高品質でレンダリングし、低性能デバイスのユーザーはフレームレートを維持するために比率を下げるという、両方の良い点を得ることができます。

デバイスピクセル比は、プロパティpc.GraphicsDevice#maxPixelRatioを使ってランタイムで変更することができます。

var 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の名前を取得し、既知のパフォーマンス層のリストと照らし合わせる

GPUについての情報を得るためには、プロパティ pc.GraphicsDevice#unmaskedRenderer を使用します。これは情報を含む文字列を含むか、ブラウザがプロパティをサポートしていない場合は空の文字列になります。

文字列には次のようなものが含まれます。

ANGLE (NVIDIA GeForce GTX 1050 Direct3D11 vs_5_0 ps_5_0)

異なるGPUカードのベンチマークは、Video Card BenchmarkやNotebook Check Smartphone and Tablet listで見つけることができ、各GPUの能力を判断するのに役立ちます。しかし、利用可能なGPUカードの数が非常に多いため、デバイスの能力を評価するのは非常に難しいです。

モバイルの例は以下にあります（記述時点での情報、2020年7月30日（木））。

function isLowQualityGPU() {
    var 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;
};

また、ユーザーが品質レベルを切り替えることができるオプションをアプリケーションに設けることをお勧めします。これにより、ユーザーは自分が快適に感じるレベルを選択し、デバイスのリソースを節約しバッテリー寿命を延ばすために品質を下げることも可能になります。