1 | # Detect GPU
|
2 |
|
3 | [![npm version](https://badge.fury.io/js/detect-gpu.svg)](https://badge.fury.io/js/detect-gpu)
|
4 | [![gzip size](https://img.badgesize.io/https:/unpkg.com/detect-gpu/dist/detect-gpu.esm.js?compression=gzip)](https://unpkg.com/detect-gpu)
|
5 | [![install size](https://packagephobia.now.sh/badge?p=detect-gpu)](https://packagephobia.now.sh/result?p=detect-gpu)
|
6 |
|
7 | 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.
|
8 |
|
9 | ## Demo
|
10 |
|
11 | [Live demo](https://pmndrs.github.io/detect-gpu/)
|
12 |
|
13 | ## Installation
|
14 |
|
15 | By default we use the [UNPKG](https://unpkg.com) 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](https://github.com/pmndrs/detect-gpu/raw/master/benchmarks.tar.gz) and serve it from a public directory.
|
16 |
|
17 | Make sure you have [Node.js](http://nodejs.org/) installed.
|
18 |
|
19 | ```sh
|
20 | $ npm install detect-gpu
|
21 | ```
|
22 |
|
23 | ## Usage
|
24 |
|
25 | ```ts
|
26 | import { getGPUTier } from 'detect-gpu';
|
27 |
|
28 | (async () => {
|
29 | const gpuTier = await getGPUTier();
|
30 |
|
31 | // Example output:
|
32 | // {
|
33 | // "tier": 1,
|
34 | // "isMobile": false,
|
35 | // "type": "BENCHMARK",
|
36 | // "fps": 21,
|
37 | // "gpu": "intel iris graphics 6100"
|
38 | // }
|
39 | })();
|
40 | ```
|
41 |
|
42 | `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.
|
43 |
|
44 | 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.
|
45 |
|
46 | ## API
|
47 |
|
48 | ```ts
|
49 | getGPUTier({
|
50 | /**
|
51 | * URL of directory where benchmark data is hosted.
|
52 | *
|
53 | * @default https://unpkg.com/detect-gpu@{version}/dist/benchmarks
|
54 | */
|
55 | benchmarksURL?: string;
|
56 | /**
|
57 | * Optionally pass in a WebGL context to avoid creating a temporary one
|
58 | * internally.
|
59 | */
|
60 | glContext?: WebGLRenderingContext | WebGL2RenderingContext;
|
61 | /**
|
62 | * Whether to fail if the system performance is low or if no hardware GPU is
|
63 | * available.
|
64 | *
|
65 | * @default true
|
66 | */
|
67 | failIfMajorPerformanceCaveat?: boolean;
|
68 | /**
|
69 | * Framerate per tier for mobile devices.
|
70 | *
|
71 | * @defaultValue [0, 15, 30, 60]
|
72 | */
|
73 | mobileTiers?: number[];
|
74 | /**
|
75 | * Framerate per tier for desktop devices.
|
76 | *
|
77 | * @defaultValue [0, 15, 30, 60]
|
78 | */
|
79 | desktopTiers?: number[];
|
80 | /**
|
81 | * Optionally override specific parameters. Used mainly for testing.
|
82 | */
|
83 | override?: {
|
84 | renderer?: string;
|
85 | /**
|
86 | * Override whether device is an iPad.
|
87 | */
|
88 | isIpad?: boolean;
|
89 | /**
|
90 | * Override whether device is a mobile device.
|
91 | */
|
92 | isMobile?: boolean;
|
93 | /**
|
94 | * Override device screen size.
|
95 | */
|
96 | screenSize?: { width: number; height: number };
|
97 | /**
|
98 | * Override how benchmark data is loaded
|
99 | */
|
100 | loadBenchmarks?: (file: string) => Promise<ModelEntry[]>;
|
101 | };
|
102 | })
|
103 | ```
|
104 |
|
105 | ## Support
|
106 |
|
107 | Special care has been taken to make sure all browsers that support `WebGL` are also supported by `detect-gpu` including `IE 11`.
|
108 |
|
109 | ## Changelog
|
110 |
|
111 | [Changelog](CHANGELOG.md)
|
112 |
|
113 | ## Licence
|
114 |
|
115 | My work is released under the [MIT license](https://raw.githubusercontent.com/pmndrs/detect-gpu/master/LICENSE).
|
116 |
|
117 | `detect-gpu` uses both mobile and desktop benchmarking scores from [https://gfxbench.com](https://gfxbench.com).
|