メインコンテンツまでスキップ

デバイスピクセル比

備考

このドキュメントは、playcanvas/developer.playcanvas.com を元に翻訳されたものです。

ドキュメントはMITライセンスの下で提供されています。詳細については、https://github.com/playcanvas/developer.playcanvas.com/blob/main/LICENSE を参照してください。

デバイスピクセル比とは、ハードウェア画面上の物理ピクセルと論理ピクセル（画面の物理的なサイズに関連し、CSS解像度とも呼ばれます）の比率のことです。

プロジェクト設定でデバイスピクセル比を有効にすると、アプリケーションは画面のネイティブ解像度でレンダリングされ、非常に鮮明に見えます。ただし、フレームごとに塗りつぶしてレンダリングするピクセル数が増えるため、パフォーマンスのコストがかかります。

プロジェクト設定

以下は、デバイスピクセル比が有効および無効になっているModel Viewer Starter Kitの例です。フルサイズで表示するには、サムネイルをクリックしてください。

デバイスピクセル比

これは、高解像度スクリーンを備えているものの、グラフィック機能が低い、ローエンドまたはミドルレンジのモバイルデバイスなどのデバイスでは問題となる可能性があります。ハードウェアのフィルレートの制限により、デバイスピクセル比が有効になっている場合、フレームレートが低下する可能性があります。

理想的には、ハイエンドデバイスのユーザーは最高品質でレンダリングされ、ローエンドデバイスのユーザーは再生可能なフレームレートを維持するために比率を下げるといった、両方の利点を実現したいと考えます。

デバイスピクセル比は、実行時にpc.GraphicsDevice#maxPixelRatio プロパティを介して変更できます。

const device = pc.Application.getApplication().graphicsDevice;
if (highTierDevice) {
    // デバイスのデフォルトのデバイスピクセル比を使用します
    device.maxPixelRatio = window.devicePixelRatio;
} else {
    // CSS解像度のデバイスピクセル比を使用します
    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() {
    const renderer = pc.Application.getApplication().graphicsDevice.unmaskedRenderer;

    // モバイルの場合のみGPUをチェックします
    if (renderer && pc.platform.mobile) {
        // ローレベルGPU
        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;
};

また、アプリケーションにユーザーが画質レベルを切り替えられるオプションを用意することをお勧めします。これにより、ユーザーは快適なレベルを選択できるだけでなく、デバイスリソースの使用量を減らしてバッテリー寿命を延ばすために画質を下げることができます。