Detect GPU
Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications. Think of it like a user-agent detection for the GPU but more powerful.
Demo
Live demo
Installation
By default we use the UNPKG CDN to host the benchmark data. If you would like to serve the benchmark data yourself download the required benchmarking data from benchmarks.tar.gz and serve it from a public directory.
Make sure you have Node.js installed.
$ npm install detect-gpu
Usage
import { getGPUTier } from 'detect-gpu';
(async () => {
const gpuTier = await getGPUTier();
})();
detect-gpu
uses rendering benchmark scores (framerate, normalized by resolution) in order to determine what tier should be assigned to the user's GPU. If no WebGLContext
can be created, the GPU is blocklisted or the GPU has reported to render on less than 15 fps
tier: 0
is assigned. One should provide a fallback to a non-WebGL experience.
Based on the reported fps
the GPU is then classified into either tier: 1 (>= 15 fps)
, tier: 2 (>= 30 fps)
or tier: 3 (>= 60 fps)
. The higher the tier the more graphically intensive workload you can offer to the user.
API
getGPUTier({
benchmarksURL?: string;
glContext?: WebGLRenderingContext | WebGL2RenderingContext;
failIfMajorPerformanceCaveat?: boolean;
mobileTiers?: number[];
desktopTiers?: number[];
override?: {
renderer?: string;
isIpad?: boolean;
isMobile?: boolean;
screenSize?: { width: number; height: number };
loadBenchmarks?: (file: string) => Promise<ModelEntry[]>;
};
})
Support
Special care has been taken to make sure all browsers that support WebGL
are also supported by detect-gpu
including IE 11
.
Changelog
Changelog
Licence
My work is released under the MIT license.
detect-gpu
uses both mobile and desktop benchmarking scores from https://gfxbench.com.