detect-gpu

What is detect-gpu?

The detect-gpu npm package is designed to detect the GPU (Graphics Processing Unit) of the user's device. It provides information about the GPU model, vendor, and performance tier, which can be useful for optimizing graphics-intensive applications.

What are detect-gpu's main functionalities?

Detect GPU Information

This feature allows you to detect the GPU information of the user's device. The `getGPUTier` function returns an object containing the GPU model, vendor, and performance tier.

const { getGPUTier } = require('detect-gpu');

(async () => {
  const gpuTier = await getGPUTier();
  console.log(gpuTier);
})();

Asynchronous GPU Detection

This feature allows you to perform GPU detection asynchronously with custom tier settings for mobile and desktop devices. The `getGPUTier` function can be customized to return different performance tiers based on the device type.

const { getGPUTier } = require('detect-gpu');

(async () => {
  const gpuTier = await getGPUTier({ mobileTiers: [0, 1, 2, 3], desktopTiers: [0, 1, 2, 3] });
  console.log(gpuTier);
})();

Other packages similar to detect-gpu

gpu.js

gpu.js is a JavaScript library for GPU-accelerated computing in the browser. It allows you to run complex computations on the GPU, which can significantly speed up performance for certain tasks. Unlike detect-gpu, which focuses on detecting GPU information, gpu.js is designed for leveraging the GPU for computational tasks.

webgl-detect

webgl-detect is a package that helps in detecting WebGL capabilities of the user's browser. It provides information about the WebGL version, supported extensions, and renderer details. While detect-gpu focuses on GPU detection, webgl-detect is more about understanding the WebGL capabilities of the browser.

README

Detect GPU

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

Stability and reporting issues

In the current state detect-gpu should be considered to be experimental and should not yet be used in production. There are many edge cases and I've only been able to test it on a small range of devices. It is very likely that some GPU's are not reported correctly. This is most likely due to entries in the benchmark test that are very similar to each other, use strange versioning schemes or the reported GPU does not expose its name and version correctly.

If you are interested in helping out and improving the stability of the library feel encouraged to open an issue with the following content:

• The reported GPU tier as reported by detect-gpu
• A copy of the full output of detect-features, this will include enough information for me to determine what could be wrong.

I'm hoping that through community effort we can create a more stable version of the library. Without your input (e.g. sharing ideas, PR's and making issues) it will be very difficult to improve the library. I simply only have access to a small range of devices and GPU's myself.

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 15% of the lowest scores to be insufficient to run the experience and is assigned TIER_0. 35% 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:

const GPUTier = DetectGPU.register({
  verbose: true, // enable logging to the console
  benchmarkTierPercentagesMobile: [15, 35, 30, 20], // [TIER_0, TIER_1, TIER_2, TIER_3]
  benchmarkTierPercentagesDesktop: [15, 35, 30, 20] // [TIER_0, TIER_1, TIER_2, TIER_3]
});

Development

$ npm start

$ npm run serve

$ npm run lint

$ npm run dist

$ npm run deploy

$ npm run 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/.