use JavaScript to detect GPU used from within your browser

webgl-detect-gpu.js

var canvas = document.createElement('canvas');
var gl;
var debugInfo;
var vendor;
var renderer;

try {
  gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
} catch (e) {
}

if (gl) {
  debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
  vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
  renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
}

// Sample output:
//
// » console.log(renderer);
// ATI Technologies Inc. AMD Radeon R9 M370X OpenGL Engine

Just wonder what the console output in M1, can anyone tell me?😊

The above script with M1:

{
  debugInfo: {
    UNMASKED_RENDERER_WEBGL: 37446,
    UNMASKED_VENDOR_WEBGL: 37445
  },
  renderer: "Apple M1",
  vendor: "Apple"
}

Or using https://github.com/pmndrs/detect-gpu

{
  "gpu": "apple m1 (Apple M1)",
  "isMobile": false,
  "tier": 1,
  "type": "FALLBACK"
}

@danigb thanks bro

Using this method on M1, sometimes getting Google SwiftShader

do you have vue3 version. thanks in advance

Just a note for anyone who'll use this to detect M1; I get the same as @danigb on Firefox, but on Chrome I get the following:

{
  debugInfo: {
    UNMASKED_RENDERER_WEBGL: 37446,
    UNMASKED_VENDOR_WEBGL: 37445
  },
  renderer: "ANGLE (Apple, Apple M1 Pro, OpenGL 4.1)",
  vendor: "Google Inc. (Apple)"
}

Can anyone tell me what will be the output for android phone and Windows desktop. Both for chrome and mozilla.

Can anyone tell me what will be the output for android phone and Windows desktop. Both for chrome and mozilla.

Using Android Phone (Samsung S10e) I got:

vendor: Google Inc. (ARM)
renderer: ANGLE (ARM, Mali-G76, OpenGL ES 3.2)

On Windows 11 (Acer Aspire A315-56, Intel i3-1005G1 CPU) I got:

vendor: Google Inc. (Intel)
renderer: ANGLE (Intel, Intel(R) UHD Graphics Direct3D11 vs_5_0 ps_5_0, D3D11)