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.

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({
    glContext?: WebGLRenderingContext | WebGL2RenderingContext; // (Default, undefined) Optionally pass in a WebGL context to avoid creating a temporary one internally
    failIfMajorPerformanceCaveat?: boolean; // (Default, true) Fail to detect if the WebGL implementation determines the performance would be dramatically lower than the equivalent OpenGL
    mobileTiers?: number[]; // (Default, [0, 15, 30, 60]) Framerate per tier
    desktopTiers?: 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
    };
    benchmarksURL?: string; // (Default, /benchmarks) Provide location of where to access benchmark data
  })

  // Example output:
  // {
  //   "tier": 1,
  //   "isMobile": false,
  //   "type": "BENCHMARK",
  //   "fps": 21,
  //   "gpu": "intel iris graphics 6100"
  // }
});

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.

Licence

My work is released under the MIT license.

detect-gpu uses both mobile and desktop benchmarking scores from https://gfxbench.com.