How to use detect-gpu - 3 common examples

To help you get started, we’ve selected a few detect-gpu examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github spleennooname / a-f38a4be8d18787007448086872f581f9d6550442 / src / js / demo.js View on Github external
function init() {

  GPUTier = getGPUTier({
     mobileBenchmarkPercentages: [10, 40, 30, 20], // (Default) [TIER_0, TIER_1, TIER_2, TIER_3]
     desktopBenchmarkPercentages: [10, 40, 30, 20], // (Default) [TIER_0, TIER_1, TIER_2, TIER_3]
   });

   //console.log(GPUTier);
  const log = 'devicePixelRatio=' + window.devicePixelRatio + ', applied: ' + getBestPixelRatio() + ' tier=' + GPUTier.tier + ' type=' + GPUTier.type;

  document.querySelector('.log').innerHTML = log;

  realToCSSPixels = getBestPixelRatio();
  fps = getBestFPS();
  interval = 1000 / fps;

  stats = new Stats();
  stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
  document.body.appendChild(stats.domElement);
github luruke / tubbbo / src / js / settings.js View on Github external
import { getGPUTier } from 'detect-gpu';

const tier = getGPUTier({
  mobileBenchmarkPercentages: [10, 40, 30, 20], // (Default) [TIER_0, TIER_1, TIER_2, TIER_3]
  desktopBenchmarkPercentages: [10, 40, 30, 20], // (Default) [TIER_0, TIER_1, TIER_2, TIER_3]
  // forceRendererString: 'Apple A11 GPU', // (Development) Force a certain renderer string
  // forceMobile: true, // (Development) Force the use of mobile benchmarking scores
});

// const dpr = Math.min(1.5, window.devicePixelRatio || 1);
const dpr = Math.min(1.5, window.devicePixelRatio || 1);

const settings = {
  tier,
  dpr,
  fxaa: dpr <= 1,
};

console.log(`⚙️ settings`, settings);
github marcofugaro / threejs-modern-app / src / lib / WebGLApp.js View on Github external
// initialize the controls-state
    if (options.controls) {
      const controlsState = State(options.controls)
      this.controls = options.hideControls ? controlsState : wrapGUI(controlsState)
      if (options.closeControls) {
        const controlsElement = document.querySelector('[class*="controlPanel"]')

        controlsElement.style.display = 'none'
        const controlsButton = document.querySelector('[class*="controlPanel"] button')
        controlsButton.click()
        controlsElement.style.display = 'block'
      }
    }

    // detect the gpu info
    const gpu = getGPUTier({ glContext: this.renderer.getContext() })
    this.gpu = {
      name: gpu.type,
      tier: Number(gpu.tier.slice(-1)),
      isMobile: gpu.tier.toLowerCase().includes('mobile'),
    }
  }

detect-gpu

Classify GPU's based on their benchmark score in order to provide an adaptive experience.

MIT
Latest version published 7 days ago

Package Health Score

82 / 100
Full package analysis

Popular detect-gpu functions