8

I want to check if WebGL 2 is enabled and supported in the user's browser.

There are a lot of posts for WebGL 1 but I found nothing related WebGL version 2.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
Neeraj
  • 652
  • 10
  • 18

2 Answers2

15

The way you're supposed to check is just to see if trying to get a webgl2 context succeeds or fails

const gl = document.createElement('canvas').getContext('webgl2');
if (!gl) {
  console.log('your browser/OS/drivers do not support WebGL2');
} else {
  console.log('webgl2 works!');
}

You can also check if window.WebGL2RenderingContext exists to try to guess if it's the browser that doesn't support WebGL2 or the user's OS/GPU/Drivers. 

const gl = document.createElement('canvas').getContext('webgl2');
if (!gl) {
  if (typeof WebGL2RenderingContext !== 'undefined') {
    console.log('your browser appears to support WebGL2 but it might be disabled. Try updating your OS and/or video card drivers');
  } else {
    console.log('your browser has no WebGL2 support at all'); 
  }
} else {
  console.log('webgl2 works!');
}
gman
  • 100,619
  • 31
  • 269
  • 393
  • note: @Nik Kyriakides had an answer that appeared to be correct but he had a tiny typo. I can't undelete his answer though so I posted this one. – gman Jan 28 '19 at 14:59
  • I undeleted it. Thanks for the edit :) +1 nonetheless since this is a more comprehensive answer. – nicholaswmin Jan 28 '19 at 15:05
  • the second one is not working on Angular 5, any idea, I am getting `Cannot read property 'WebGL2RenderingContext' of undefined`. – Neeraj Jan 29 '19 at 11:43
  • Sorry, old habits die hard. Changed it – gman Jan 29 '19 at 11:50
4

Check if webgl2 context is available on a canvas element like so:

const isWebGL2Supported = () => !!document.createElement('canvas').getContext('webgl2')

isWebGL2Supported() ? console.log('supported') : console.log('unsupported')
gman
  • 100,619
  • 31
  • 269
  • 393
nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
  • producing the wrong output, my browser didn't support WebGL 2 and your code saying it supports it. I think it is checking WebGL version 1, not 2. – Neeraj Jan 28 '19 at 12:11
  • @Neeraj which browser are you on? – nicholaswmin Jan 28 '19 at 12:11
  • Google Chrome, version 2, It support WebGl but this feature is not enabled, I also don't have the hardware to accelerate WebGL, sorry for the confusion but I want to check if WebGL is running. – Neeraj Jan 28 '19 at 12:13
  • This browser supports WebGL 2, but it is disabled or unavailable. Sometimes this is the result of older video drivers being rejected by the browser. Try updating your video drivers if possible. Also check out Get WebGL, or try installing the latest version of Chrome, or Firefox. This is what I am getting. – Neeraj Jan 28 '19 at 12:15