Wondering what’s next for npm?Check out our public roadmap! »

    detect-gpu
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    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/detect-gpu@{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: numberheightnumber };
        /**
         * Override how benchmark data is loaded
         */
        loadBenchmarks?: (file: string) => Promise<ModelEntry[]>;
      };
    })

    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.

    Install

    npm i detect-gpu

    DownloadsWeekly Downloads

    19,286

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    478 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar