¿Cuál es mi GPU WebGL? Cómo exponen los navegadores tu tarjeta gráfica

Cada vez que abres una pestaña del navegador que utiliza WebGL (ya sea un mapa 3D, un juego en línea o una visualización de datos), JavaScript puede consultar tu GPU para obtener información detallada. Parte de esa información, como el modelo exacto de tu GPU, revela más de lo que la mayoría de la gente espera.

Este artículo explica qué expone la API WebGL sobre tu hardware de gráficos, cómo funciona la extensión WEBGL_debug_renderer_info, qué significan los parámetros clave y cuáles son las implicaciones para la privacidad.

¿Qué es WebGL y por qué necesita acceso a la GPU?

WebGL (Web Graphics Library) es una API de JavaScript que permite el renderizado 2D y 3D acelerado por hardware directamente en un elemento HTML <canvas>. Se basa en OpenGL ES (el mismo estándar de gráficos utilizado por las aplicaciones de Android e iOS) y está integrado en todos los navegadores principales sin necesidad de complementos (plugins).

WebGL necesita acceso directo a la GPU porque renderizar escenas 3D (calcular geometría, sombrear píxeles, aplicar texturas) es órdenes de magnitud más rápido en una GPU que en una CPU. Cuando visitas una página con una escena WebGL, el navegador crea un contexto WebGL, compila programas de sombreado (shaders) y envía llamadas de dibujo a tu controlador de gráficos.

Existen dos versiones en uso actualmente:

WebGL 2 es compatible con todos los navegadores de escritorio actuales y la mayoría de los navegadores móviles lanzados desde 2018.

Cómo lee el navegador el nombre de tu GPU

Por defecto, WebGL expone una cadena de renderizador enmascarada diseñada para proteger la privacidad. En Chrome en un equipo de gama alta, podría verse así:

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

La extensión opcional WEBGL_debug_renderer_info permite a JavaScript solicitar las cadenas sin máscara directamente al controlador de gráficos. Se llama de esta manera:

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 el navegador no expone la extensión, o la ha bloqueado por razones de privacidad, getExtension() devuelve null y ambas cadenas no estarán disponibles.

Parámetros clave de WebGL y qué significan

Más allá del nombre del renderizador, el contexto de WebGL expone un conjunto de constantes de capacidad que describen lo que tu GPU puede manejar:

Tamaño máximo de textura

gl.getParameter(gl.MAX_TEXTURE_SIZE) devuelve la textura cuadrada más grande que la GPU puede almacenar, normalmente 4,096, 8,192 o 16,384 píxeles por lado. Una textura que exceda este tamaño se rechaza o escala silenciosamente, lo que provoca la pérdida o corrupción de gráficos en las aplicaciones WebGL que no comprueban primero este límite.

Tamaño máximo del búfer de renderizado (render buffer)

gl.MAX_RENDERBUFFER_SIZE es el objetivo de renderizado fuera de pantalla (off-screen render target) más grande que admite la GPU. Es relevante para mapas de sombras, tuberías de postprocesamiento y renderizado diferido. Normalmente coincide o supera ligeramente el tamaño máximo de textura.

Dimensiones máximas del viewport

gl.MAX_VIEWPORT_DIMS devuelve el canvas en pantalla más ancho y alto que la GPU puede renderizar en una sola pasada. En la mayoría de las computadoras de escritorio, esto supera la resolución de la pantalla por un gran margen.

Antialiasing

gl.getContextAttributes().antialias indica si el navegador creó el contexto de WebGL con MSAA (Multi-Sample Anti-Aliasing) activado. Esto suaviza los bordes dentados de la geometría, pero requiere memoria adicional de la GPU por fotograma (frame).

Extensiones compatibles

gl.getSupportedExtensions() devuelve un array de todas las funciones opcionales de WebGL disponibles en este navegador y GPU. Las más comunes incluyen:

• EXT_texture_filter_anisotropic — texturas más nítidas cuando se ven en ángulo
• WEBGL_depth_texture — permite el uso del búfer de profundidad como una textura de muestreo (necesario para mapas de sombras)
• OES_texture_half_float — texturas de coma flotante de 16 bits (utilizadas para renderizado HDR y GPGPU)
• ANGLE_instanced_arrays — dibuja muchas copias de una geometría en una sola llamada (solo en WebGL 1; integrado de forma nativa en WebGL 2)

Un mayor número de extensiones generalmente significa que hay técnicas de renderizado más avanzadas disponibles.

WebGL y el fingerprinting del navegador

La combinación de tu modelo de GPU, versión del controlador, lista de extensiones admitidas y sutiles variaciones de renderizado por GPU crea un perfil altamente distintivo. Esto se conoce como fingerprinting de WebGL y es uno de los vectores de seguimiento más fiables disponibles para los sitios web que no utilizan cookies.

Los scripts de seguimiento siguen un proceso de dos pasos:

1. Leer el perfil de hardware — cadena de renderizado, lista de extensiones, tamaños máximos.
2. Renderizar un canvas oculto — dibujar una escena geométrica y calcular el hash del búfer de píxeles resultante. Las diferentes familias de GPU producen salidas ligeramente distintas incluso para un código idéntico, lo que genera una huella digital a nivel de hardware.

La firma resultante puede sobrevivir a la navegación privada, a la eliminación de cookies e incluso a las VPN, ya que refleja tu hardware físico y no tu identidad de red.

Cómo responden los navegadores orientados a la privacidad

Firefox, Brave y Safari toman medidas activas para limitar el fingerprinting de WebGL. Si utilizas alguno de estos navegadores, es probable que el renderizador de la GPU aparezca como no disponible o devuelva una cadena genérica en la herramienta de WebGL.

SwiftShader: cuando no hay GPU

Si tu GPU se muestra como "Google SwiftShader" o "SwiftShader Device", tu navegador está recurriendo a un renderizador por software. SwiftShader es una implementación de OpenGL ES basada en CPU incluida en Chrome que se activa cuando:

• La aceleración por hardware está desactivada en la configuración del navegador
• El controlador de la GPU está en la lista de bloqueo de Chrome (generalmente debido a fallos o errores conocidos)
• El dispositivo tiene gráficos integrados con versiones de controlador no compatibles
• Estás ejecutando el sistema en una máquina virtual o en un entorno sin cabezal (headless)

WebGL sigue funcionando en modo SwiftShader, pero las escenas 3D complejas se ejecutan mucho más lento porque cada cálculo de píxeles se realiza en la CPU en lugar de en la GPU. Para comprobar si la aceleración por hardware está activa en Chrome, visita chrome://gpu en la barra de direcciones.

Tu GPU importa más allá de los gráficos 3D

El papel de la GPU en el navegador se extiende mucho más allá de las escenas WebGL:

• Animaciones y composición CSS — las transformaciones, los cambios de opacidad y las capas will-change se componen a través de la GPU en los navegadores modernos.
• Aceleración de decodificación de video — los decodificadores de hardware H.264, VP9 y AV1 residen en la GPU, lo que reduce la carga de la CPU y el consumo de batería en páginas con mucho contenido de video.
• WebGPU — el sucesor de próxima generación de WebGL, que ofrece una API de nivel inferior más cercana a Vulkan y Metal. Se está implementando en Chrome y Firefox y eventualmente reemplazará a WebGL para cargas de trabajo de alto rendimiento.

Mantener el controlador de la GPU actualizado y la aceleración por hardware activada te proporcionará la mejor experiencia en todas estas características, no solo en el contenido 3D explícito.

Puedes ver todo lo que tu navegador expone actualmente (renderizador de GPU, fabricante, versión de WebGL, tamaño máximo de textura, número de extensiones y más) en la herramienta ¿Cuál es mi WebGL / GPU?. La detección se realiza íntegramente en tu navegador; no se envía ningún dato a nuestros servidores.