Need help with detect-gpu?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

TimvanScherpenzeel
470 Stars 23 Forks MIT License 509 Commits 10 Opened issues

Description

Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.

Services available

!
?

Need anything else?

Contributors list

# 103,066
C++
C
iphone
ktx
354 commits
# 24,468
JavaScr...
Swift
React N...
Windows
30 commits
# 492,186
Svelte
sapper
HTML
Three.j...
2 commits
# 48,730
React
Three.j...
Svelte
Vanilla...
1 commit
# 95,674
HTML
TypeScr...
benchma...
Three.j...
1 commit

Detect GPU

Build Status npm version gzip size install size

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.

Sponsor

BTC

ETH

DASH

LTC

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();

// 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.

API

getGPUTier({
  /**
   * URL of directory where benchmark data is hosted.
   *
   * @default https://unpkg.com/[email protected]{version}/dist/benchmarks
   */
  benchmarksURL?: string;
  /**
   * Optionally pass in a WebGL context to avoid creating a temporary one
   * internally.
   */
  glContext?: WebGLRenderingContext | WebGL2RenderingContext;
  /**
   * Whether to fail if the system performance is low or if no hardware GPU is
   * available.
   *
   * @default true
   */
  failIfMajorPerformanceCaveat?: boolean;
  /**
   * Framerate per tier for mobile devices.
   *
   * @defaultValue [0, 15, 30, 60]
   */
  mobileTiers?: number[];
  /**
   * Framerate per tier for desktop devices.
   *
   * @defaultValue [0, 15, 30, 60]
   */
  desktopTiers?: number[];
  /**
   * Optionally override specific parameters. Used mainly for testing.
   */
  override?: {
    renderer?: string;
    /**
     * Override whether device is an iPad.
     */
    isIpad?: boolean;
    /**
     * Override whether device is a mobile device.
     */
    isMobile?: boolean;
    /**
     * Override device screen size.
     */
    screenSize?: { width: number; height: number };
    /**
     * Override how benchmark data is loaded
     */
    loadBenchmarks?: (file: string) => Promise;
  };
})

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.