Classify GPU's based on their benchmark score in order to provide an adaptive experience.
Make sure you have Node.js installed.
$ npm install detect-gpudetect-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]
forceRendererString?: 'Apple A11 GPU', // (Development) Force a certain renderer string
forceMobile?: true, // (Development) Force the use of mobile benchmarking scores
});$ yarn start
$ yarn serve
$ yarn lint
$ yarn test
$ yarn build
$ yarn parse-analytics
$ yarn update-benchmarksMy 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.