I'm trying to work out whether a certain website is using WebGL. I'm fortable using Chrome's developer tools, but I'm not quite sure what I'm looking for. I see various variables and classes with "webgl" in the name, but no call to initWebGL() for instance.

Is there a reliable, perhaps simpler, way to tell?

I'm trying to work out whether a certain website is using WebGL. I'm fortable using Chrome's developer tools, but I'm not quite sure what I'm looking for. I see various variables and classes with "webgl" in the name, but no call to initWebGL() for instance.

Is there a reliable, perhaps simpler, way to tell?

• javascript
• webgl
• code-analysis

3 Answers 3

First, there should be a <canvas> element in the body. If not, it can't be WebGL.

Second, open the chrome debugger and press Ctrl+Shift+F (Command+Option+F for MacOS). At the very bottom, expand the search pane if necessary. Search for "bindBuffer". You absolutely must bind buffers to do anything with WebGL. It will be used.

In Google Chrome Version 97 this worked for me:

1. Open the "Elements" tab in Chrome DevTools
2. Select the <canvas> in the DOM which you want to inspect, so it shows == $0 next to it (see screenshot below)
3. Open the "Console" tab in Chrome DevTools
4. Enter $0.getContext('2d'), when it shows null then it's a WebGL-powered canvas, when it shows CanvasRenderingContext2D then it's a plain 2D canvas

Here are some sites to try:

WebGL Canvas - https://get.webgl/

Non-WebGL Canvas - http://www.professorcloud./mainsite/canvas-nebula.htm

Screenshot:

Its been awhile since the original question but thought I would share: If you use the "Profile" tab in Chrome Dev Tools, and record a second or two you should see in the results a row with the name "GPU". If there is a <canvas/> in the DOM, but it's not using WebGL, the GPU row won't be there.

With WebGL

Without WebGL