How to Tell if a Website Uses WebGL (and Which 3D Library)

October 21, 2026

4 min readIncludes a console snippet and measured data

To tell if a website uses WebGL, check whether the page created a WebGL context. Looking for a canvas element is the usual first step and it misleads in both directions: plenty of canvases are plain 2D, and plenty of WebGL pages do not show one. Below are four methods that work, what each one misses, and what seven real sites turned out to do.

Why is a canvas element not proof of WebGL?

A <canvas> is just a drawing surface. What it draws with depends on which context the page asks it for: 2d for flat graphics, or webgl and webgl2 for the GPU. Charts, signature pads and animated backgrounds are often 2D.

The reverse also happens. When we measured igloo.inc, the capture found two WebGL 2 contexts and 180 compiled shaders while counting no canvas elements in the document. A check that stops at “is there a canvas?” would have said no for one of the heaviest WebGL sites on the web.

Method 1: Ask a tool that watches the page load

The most reliable way is to watch for the context being created, which means installing a hook before the page’s scripts run. That is what the WebGL checker does, and it is why it can also count shaders. Doing it from the console after the page has loaded is mostly not possible, because the context already exists. Its limit: a scene that starts only after a click may not appear in a short visit.

Method 2: Read the library from the console

Open DevTools, go to the Console and run:

window.THREE?.REVISION ?? window.__THREE__

A number such as 178 means Three.js revision r178. undefined means it is not exposed, which is different from not used. The same idea works for other engines: BABYLON.Engine.Version for Babylon.js and PIXI.VERSION for PixiJS.

This is quick but can only see what the page leaves on window. A library bundled without a global is invisible here, which is the same limit the Animation Detector extension (on the Chrome Web Store soon) has, since it reads the same globals.

Method 3: Record the WebGL calls

The Spector.js extension captures a frame and lists every WebGL call, with the shaders and textures it used. It is the best free way to see how a scene is built once you know it is WebGL, and it needs you to be on the page with the scene visible.

Method 4: Look at what the page loads

In the Network tab, filter by glb, gltf, hdr or ktx2. Those are 3D models, environment maps and compressed textures. Finding them is strong evidence of a 3D scene, even when the library is bundled and hides its name.

What did real sites do?

Measured with the same capture the free tool runs, on 21 October 2026. Each site was captured three times and the middle result is shown. Contexts and library were identical every time; shader counts moved by a couple.

Two things stand out. Stripe and GitHub, neither of them a 3D site, both ship Three.js, so a site does not have to look 3D to use it. And Linear is the opposite lesson: it looks as animated as any of them and creates no WebGL context at all, so there is no shader to go and copy.

One caution about the method, learned while measuring. Some pages draw on a timer or after the browser is idle, and a short visit can catch their WebGL on one run and miss it on the next. threejs.org was detected in one of three runs. When a result matters, check more than once, and read “no” as “none seen in this visit”.

What do the contexts and shaders tell you?

Contexts are the GPU surfaces a page asked for. One is a single scene. Stripe’s seven suggest several separate effects rather than one big one. Shaders are the small GPU programs, often a vertex and fragment pair per material. About a dozen, as on this site, is a couple of materials. One hundred and eighty is custom work throughout.

If you want to rebuild the effect

Knowing a site uses Three.js r165 tells you which API docs to read. Rebuilding it means getting the shader source and the scene setup, which the page does not hand you as text. Our guide on recreating a WebGL shader effect from a website covers that, and Three.js and GSAP behind every award-site hero explains why the two show up together so often. If it is the motion library you are after, start with how to check if a website uses GSAP.

FAQ