Quel est mon GPU WebGL ? Comment les navigateurs révèlent votre carte graphique

Chaque fois que vous ouvrez un onglet de navigateur utilisant WebGL — qu'il s'agisse d'une carte 3D, d'un jeu en ligne ou d'une visualisation de données — JavaScript peut interroger votre GPU pour obtenir des informations détaillées. Certaines de ces informations, comme le modèle exact de votre GPU, sont plus révélatrices que la plupart des gens ne le pensent.

Cet article explique ce que l'API WebGL expose concernant votre matériel graphique, comment fonctionne l'extension WEBGL_debug_renderer_info, ce que signifient les paramètres clés et quelles en sont les implications pour la confidentialité.

Qu'est-ce que WebGL et pourquoi a-t-il besoin d'accéder au GPU ?

WebGL (Web Graphics Library) est une API JavaScript qui permet un rendu 2D et 3D accéléré par le matériel directement dans un élément HTML <canvas>. Elle est basée sur OpenGL ES — le même standard graphique utilisé par les applications Android et iOS — et est intégrée à tous les principaux navigateurs sans plug-in.

WebGL a besoin d'un accès direct au GPU car le rendu de scènes 3D — le calcul de la géométrie, l'ombrage des pixels, l'application de textures — est infiniment plus rapide sur un GPU que sur un processeur (CPU). Lorsque vous visitez une page contenant une scène WebGL, le navigateur crée un contexte WebGL, compile les programmes de shaders et distribue les appels de dessin à votre pilote graphique.

Deux versions sont utilisées aujourd'hui :

WebGL 2 est pris en charge par tous les navigateurs de bureau actuels et la plupart des navigateurs mobiles sortis depuis 2018.

Comment le navigateur lit le nom de votre GPU

Par défaut, WebGL expose une chaîne de moteur de rendu masquée conçue pour protéger la vie privée. Dans Chrome sur une machine haut de gamme, cela pourrait ressembler à ceci :

ANGLE (NVIDIA, NVIDIA GeForce RTX 4070 Direct3D11 vs_5_0 ps_5_0, D3D11)

L'extension facultative WEBGL_debug_renderer_info permet à JavaScript de demander les chaînes non masquées directement au pilote graphique. Vous l'appelez ainsi :

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
const ext = gl.getExtension('WEBGL_debug_renderer_info');

if (ext) {
  const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
  const vendor   = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);
  console.log(renderer); // e.g. "NVIDIA GeForce RTX 4070/PCIe/SSE2"
  console.log(vendor);   // e.g. "NVIDIA Corporation"
}

Si le navigateur n'expose pas l'extension — ou l'a bloquée pour des raisons de confidentialité —, getExtension() renvoie null et les deux chaînes restent indisponibles.

Paramètres clés de WebGL et leur signification

Au-delà du nom du moteur de rendu, le contexte WebGL expose un ensemble de constantes de capacité décrivant ce que votre GPU peut gérer :

Taille maximale des textures

gl.getParameter(gl.MAX_TEXTURE_SIZE) renvoie la plus grande texture carrée que le GPU peut charger — généralement 4 096, 8 192 ou 16 384 pixels de côté. Une texture qui dépasse cette limite est silencieusement rejetée ou redimensionnée, ce qui provoque des graphismes manquants ou corrompus dans les applications WebGL qui ne vérifient pas cette limite au préalable.

Taille maximale du render buffer

gl.MAX_RENDERBUFFER_SIZE est la plus grande cible de rendu hors écran (off-screen render target) prise en charge par le GPU. Elle est utile pour les cartes d'ombres, les pipelines de post-traitement et le rendu différé. Elle correspond généralement ou dépasse légèrement la taille maximale des textures.

Dimensions maximales du viewport

gl.MAX_VIEWPORT_DIMS renvoie la largeur et la hauteur maximales du canvas à l'écran que le GPU peut afficher en une seule passe. Sur la plupart des ordinateurs de bureau, cela dépasse largement la résolution de l'écran.

Anti-aliasing

gl.getContextAttributes().antialias vous indique si le navigateur a créé le contexte WebGL en activant le MSAA (Multi-Sample Anti-Aliasing). Cela permet de lisser les bords crénelés de la géométrie, mais nécessite de la mémoire GPU supplémentaire par image.

Extensions prises en charge

gl.getSupportedExtensions() renvoie un tableau de toutes les fonctionnalités WebGL facultatives disponibles sur ce navigateur et ce GPU. Les plus courantes sont :

• EXT_texture_filter_anisotropic — textures plus nettes lorsqu'elles sont vues sous un angle incliné
• WEBGL_depth_texture — permet d'utiliser le tampon de profondeur comme texture d'échantillonnage (nécessaire pour les cartes d'ombres)
• OES_texture_half_float — textures flottantes 16 bits (utilisées pour le rendu HDR et le GPGPU)
• ANGLE_instanced_arrays — dessine de nombreuses copies d'une géométrie en un seul appel (WebGL 1 uniquement ; intégré à WebGL 2)

Un nombre d'extensions plus élevé signifie généralement que des techniques de rendu plus avancées sont disponibles.

WebGL et le fingerprinting du navigateur

L'association de votre modèle de GPU, de la version du pilote, de la liste des extensions prises en charge et de subtiles variations de rendu propres à chaque GPU crée un profil extrêmement distinctif. C'est ce que l'on appelle le fingerprinting WebGL — et c'est l'un des vecteurs de suivi les plus fiables pour les sites sans cookies.

Les scripts de suivi procèdent en deux étapes :

1. Lire le profil matériel — chaîne du moteur de rendu, liste des extensions, tailles maximales.
2. Afficher un canvas masqué — dessiner une scène géométrique et générer un hash du tampon de pixels résultant. Différentes familles de GPU produisent des résultats légèrement différents pour un même code, créant une empreinte numérique au niveau matériel.

La signature ainsi obtenue peut résister à la navigation privée, à la suppression des cookies et même aux VPN — car elle reflète votre matériel physique, et non votre identité réseau.

Comment réagissent les navigateurs axés sur la confidentialité

Firefox, Brave et Safari prennent tous des mesures actives pour limiter le fingerprinting WebGL. Si vous utilisez l'un de ces navigateurs, le moteur de rendu GPU s'affichera probablement comme indisponible ou renverra une chaîne générique sur l'outil WebGL.

SwiftShader — quand il n'y a pas de GPU

Si votre GPU s'affiche sous le nom "Google SwiftShader" ou "SwiftShader Device", votre navigateur utilise un moteur de rendu logiciel de secours. SwiftShader est une implémentation d'OpenGL ES basée sur le processeur incluse dans Chrome qui s'active lorsque :

• L'accélération matérielle est désactivée dans les paramètres du navigateur
• Le pilote graphique figure sur la liste de blocage de Chrome (généralement en raison de bugs ou de plantages connus)
• L'appareil dispose d'une carte graphique intégrée avec des versions de pilote non prises en charge
• Vous travaillez dans une machine virtuelle ou un environnement sans interface graphique (headless)

WebGL fonctionne toujours en mode SwiftShader, mais les scènes 3D complexes s'affichent beaucoup plus lentement car chaque calcul de pixel est effectué par le processeur au lieu du GPU. Pour vérifier si l'accélération matérielle est active dans Chrome, saisissez chrome://gpu dans la barre d'adresse.

Votre GPU compte au-delà des graphismes 3D

Le rôle du GPU dans le navigateur va bien au-delà des scènes WebGL :

• Animations et composition CSS — les transformations, modifications d'opacité et couches will-change sont toutes assemblées par le GPU sur les navigateurs modernes.
• Accélération du décodage vidéo — les décodeurs matériels H.264, VP9 et AV1 se trouvent sur le GPU, réduisant la charge du processeur et la consommation d'énergie sur les pages riches en vidéos.
• WebGPU — le successeur de nouvelle génération de WebGL, offrant une API de plus bas niveau plus proche de Vulkan et Metal. Elle est en cours d'intégration dans Chrome et Firefox et finira par remplacer WebGL pour les tâches exigeant de hautes performances.

Le fait de maintenir le pilote de votre GPU à jour et d'activer l'accélération matérielle vous garantit une expérience optimale sur l'ensemble de ces fonctionnalités, et pas seulement pour les contenus 3D explicites.

Vous pouvez voir tout ce que votre navigateur expose actuellement — moteur de rendu du GPU, fabricant, version de WebGL, taille maximale des textures, nombre d'extensions, et plus encore — sur l'outil Quel est mon WebGL / GPU. La détection s'effectue entièrement dans votre navigateur ; aucune donnée n'est transmise à nos serveurs.