WebブラウザでもGPUを利用する機会が増えてきています。3Dゲームを提供する、CSSアニメーションをする、さらに機械学習でWebGLを利用することもあります。しかしGPUはすべて同じではなく、性能の良し悪しがあります。一口にGPUといってもピンキリです。 今回紹介するDetect GPUはGPUの性能を簡易的に取得できるライブラリです。Detect GPUを使うことで、パフォーマンスのデフォルト値を設定しやすくなるでしょう。

Detect GPUの使い方

Detect GPUのコード例です。getGPUTierを実行すればほぼOKです。

import { getGPUTier } from 'detect-gpu';

(async () => {
  const gpuTier = await getGPUTier({
    benchmarksURL?: string; // (Default, "https://unpkg.com/detect-gpu@${PKG_VERSION}/dist/benchmarks") Provide location of where to access benchmark data
    failIfMajorPerformanceCaveat?: boolean; // (Default, false) Fail to detect if the WebGL implementation determines the performance would be dramatically lower than the equivalent OpenGL
    glContext?: WebGLRenderingContext | WebGL2RenderingContext; // (Default, undefined) Optionally pass in a WebGL context to avoid creating a temporary one internally
    desktopTiers?: number[]; // (Default, [0, 15, 30, 60]) Framerate per tier
    mobileTiers?: number[]; // (Default, [0, 15, 30, 60]) Framerate per tier
    override?: { // (Default, false) Override specific functionality, useful for development
      renderer?: string; // Manually override reported GPU renderer string
      isIpad?: boolean; // Manually report device as being an iPad
      isMobile?: boolean; // Manually report device as being a mobile device
      screenSize?: { width: number; height: number }; // Manually adjust reported screenSize
      loadBenchmarks?: (file: string) => Promise<tmodelentry [] | undefined>; // Optionally modify method for loading benchmark data
    };
  })
})();

デスクトップで実行した例です。

モバイルでも使えます。こちらはiPhone。

こちらはAndroid。

Detect GPUを実行することで、Webブラウザ上でゲームを快適に遊べるかどうかの判断ができるでしょう。WebGLが実装されているかどうかだけであれば、もっと簡単に取得できます。しかしDetect GPUを使うことでモバイルかどうか、デバイスが何かといったもう少し詳しい情報が取得できます。

Detect GPUはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

TimvanScherpenzeel/detect-gpu: Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.