Detect GPU

Classify GPU's based on their benchmark score in order to provide an adaptive experience.

Demo

Live demo

Installation

Make sure you have Node.js installed.

 $ npm install detect-gpu

Usage

detect-gpu uses benchmarking scores in order to determine what tier should be assigned to the user's GPU. If no WebGLContext can be created or the GPU is blacklisted TIER_0 is assigned. One should provide a HTML fallback page that a user should be redirected to.

By default are all GPU's that have met these preconditions classified as TIER_1. Using user agent detection a distinction is made between mobile (mobile and tablet) prefixed using GPU_MOBILE_ and desktop devices prefixed with GPU_DESKTOP_. Both are then followed by TIER_N where N is the tier number.

In order to keep up to date with new GPU's coming out detect-gpu splits the benchmarking scores in 4 tiers based on rough estimates of the market share.

By default detect-gpu assumes 0% of the lowest scores to be insufficient to run the experience and is assigned TIER_0. 50% of the GPU's are considered good enough to run the experience and are assigned TIER_1. 30% of the GPU's are considered powerful and are classified as TIER_2. The last 20% of the GPU's are considered to be very powerful, are assigned TIER_3, and can run the experience with all bells and whistles.

You can tweak these percentages when registering the application as shown below:

import { getGPUTier } from 'detect-gpu';
 
const GPUTier = getGPUTier({
  glContext?: gl, // Optionally pass in a WebGL context to avoid creating a temporary one internally
  mobileBenchmarkPercentages?: [0, 50, 30, 20], // (Default) [TIER_0, TIER_1, TIER_2, TIER_3]
  desktopBenchmarkPercentages?: [0, 50, 30, 20], // (Default) [TIER_0, TIER_1, TIER_2, TIER_3]
  failIfMajorPerformanceCaveat?: true, // (Default) Fail to detect if the WebGL implementation determines the performance would be dramatically lower than the equivalent OpenGL implementation
  forceRendererString?: 'Apple A11 GPU', // (Development) Force a certain renderer string
  forceMobile?: true, // (Development) Force the use of mobile benchmarking scores
});

Development

$ yarn start
 
$ yarn serve
 
$ yarn lint
 
$ yarn test
 
$ yarn build
 
$ yarn parse-analytics
 
$ yarn update-benchmarks

Licence

My work is released under the MIT license.

detect-gpu uses both mobile and desktop benchmarking scores from https://www.notebookcheck.net/.

The unmasked renderers have been gathered using the analytics script that one can find in scripts/analytics_embed.js.