npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

detect-gpu-js

v1.0.7

Published

Detect and rate GPU based on its GFXBench scores

Downloads

622

Readme

Detect GPU

npm version gzip size install size

Detect and rate 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.

This project is a maintained fork of detect-gpu project rewritten in JavaScript.

Demo

Live demo

Installation

Make sure you have Node.js installed, then:

 $ npm install detect-gpu-js

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.

Alternatively, there is the detect-gpu.bundle.js build that comes with benchmark data embedded. This however requires 300KB+ more data downloaded over the network.

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-js 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-js@{version}/dist/benchmarks
     */
    benchmarksURL,
    /**
     * Optionally pass in a WebGL context to avoid creating a temporary one
     * internally.
     */
    glContext,
    /**
     * Whether to fail if the system performance is low or if no hardware GPU is
     * available.
     *
     * @default false
     */
    failIfMajorPerformanceCaveat,
    /**
     * Framerate per tier for mobile devices.
     *
     * @defaultValue [0, 15, 30, 60]
     */
    mobileTiers,
    /**
     * Framerate per tier for desktop devices.
     *
     * @defaultValue [0, 15, 30, 60]
     */
    desktopTiers,
    /**
     * Use HiDPI (Retina) resolution to find benchmark results.
     *
     * @defaultValue true
     */
    hidpiScreenSize,
    /**
     * Optionally override specific parameters. Used mainly for testing.
     */
    override: {
        renderer,
        /**
         * Override whether device is an iPad.
         */
        isIpad,
        /**
         * Override whether device is a mobile device.
         */
        isMobile,
        /**
         * Override device screen size.
         */
        screenSize: { width, height },
        /**
         * Override how benchmark data is loaded.
         */
        loadBenchmarks
    };
})

Support

Requires JavaScript modules to be supported, e.g. works on Chrome 61+, Firefox 60+, Safari 11+ (most versions dated back to 2017).

Changelog

Changelog

Licence

The project is released under the MIT license.

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