Detect GPU - GPUの性能を取得するライブラリ
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)です。