WebGL no hace que una web venda más por existir. Compensa cuando el producto se entiende mejor girándolo que mirándolo en una foto.
WebGL es la interfaz que deja al navegador dibujar usando la tarjeta gráfica, igual que un videojuego. Sin ella, una página solo puede pintar cajas, texto e imágenes. Con ella puede dibujar objetos tridimensionales, iluminarlos y moverlos a sesenta cuadros por segundo.
Eso abre una puerta y también una trampa. La puerta es enseñar algo que una foto no explica. La trampa es que casi todo el 3D que se ve por ahí podría haber sido una imagen bien hecha, y habría cargado en la décima parte del tiempo.
¿Qué es WebGL?
WebGL es una interfaz estándar del navegador que permite a una página dibujar gráficos usando la tarjeta gráfica del dispositivo, sin instalar nada. Es lo que hace posible mostrar objetos 3D, materiales con iluminación real y efectos visuales que se recalculan en cada cuadro. Está disponible en todos los navegadores modernos y es la base de librerías como Three.js.
Qué está pasando en realidad, en un párrafo
Conviene saber más o menos qué hace el navegador, porque explica dónde están los costes. Un objeto 3D es una lista de puntos, una lista de triángulos que los unen y un par de programas pequeños que deciden dónde cae cada punto en la pantalla y de qué color acaba cada píxel. El navegador le pasa eso a la tarjeta gráfica, que hace la aritmética de todos los píxeles en paralelo, y repite la operación entera para el cuadro siguiente.
De ahí salen dos consecuencias, y son las que importan comercialmente. Dibujar es barato, porque para eso existe el hardware. Llevar los datos hasta el hardware es caro, porque hay que descargarlos, descodificarlos y subirlos a la memoria de vídeo antes de que aparezca el primer cuadro.
Cuándo sí compensa
Hay un criterio que funciona bien: si el visitante necesita girar el objeto para entenderlo, el 3D paga. Un mueble modular, una máquina industrial, una pieza con acabados que cambian, un espacio por el que se camina. En esos casos la alternativa no es una foto, son quince, y aun así el usuario sigue sin poder mirar por detrás.
El segundo caso es el configurador: cuando el cliente elige color, material o medida y quiere verlo antes de comprar. Ahí el 3D no es decoración, es la herramienta de venta, y además elimina una categoría de devoluciones que vienen de que alguien se imaginó otra cosa.
El tercero es más blando y conviene decirlo con honestidad. Una web que se mueve bien transmite competencia técnica, y en sectores donde todos los competidores usan la misma plantilla eso vale dinero. Pero es un argumento de marca, no de conversión, y no hay que venderlo como si fuera lo segundo.
Cuatro salidas más baratas que hay que probar antes
Casi todos los encargos que llegan pidiendo WebGL están pidiendo la sensación de WebGL, y hay maneras más baratas de comprar esa sensación. Recorrer estas cuatro en orden ahorra mucho presupuesto.
- Una secuencia de imágenes renderizadas que avanza con el scroll. Parece 3D porque era 3D cuando se renderizó, no necesita nada en ejecución y cada cuadro está exactamente como se dirigió. Cuesta ancho de banda y no se puede tocar, cosa que muchas veces da igual.
- Un vídeo corto en bucle, que es el movimiento convincente más barato que hay y comprime mucho mejor que una secuencia de fotogramas sueltos.
- Las transformaciones 3D de CSS, que son perspectiva real y giro real, las lleva el compositor y no cuestan ninguna librería. Suficiente para tarjetas que se inclinan, paneles que se pliegan y objetos que giran sobre un eje.
- Un solo render de calidad, quieto, con la página moviéndose a su alrededor. Buena parte de lo que se lee como caro en las webs premiadas es una imagen estática y una tipografía disciplinada.
Si ninguna de las cuatro puede expresar la idea, el caso para WebGL es real. Si alguna puede, saldrá antes, funcionará en más dispositivos y se romperá menos.
Lo que cuesta de verdad
El coste real de WebGL no está en las horas de programación, está en el peso y en la memoria. Son dos números que casi nadie enseña en una propuesta, así que aquí van los de este mismo sitio.
Ese descuento del 27% no es compresión con pérdida: son atributos que el exportador escribió y que el renderizador nunca consulta, como coordenadas de textura en un modelo sin texturas. Es lo primero que hay que revisar en cualquier archivo 3D que llegue de un diseñador, y sale gratis.
En memoria de vídeo el reparto sorprende. La geometría de esos cuatro objetos ocupa 2,6 MB. Las tres texturas de uno solo de ellos, descomprimidas a color completo y con sus mipmaps, ocupan 16 MB. Seis veces más que toda la geometría junta.
El motivo conviene interiorizarlo, porque cambia qué se optimiza. Una textura descargada es un JPEG o un PNG comprimido. En memoria de vídeo son píxeles en crudo: una textura de 1024 por 1024 son cuatro megas antes de los mipmaps y unos 5,3 después, por pequeño que fuera el archivo. La geometría, en cambio, ocupa más o menos lo mismo en memoria que en disco.
Así que el peso que ves en la pestaña de red y el coste en memoria del dispositivo del visitante no tienen casi relación, y es el segundo el que hace que a un móvil se le caigan cuadros o se le recargue la pestaña.
¿Cuánto pesa una web con 3D?
Depende casi por completo de las texturas, no de la geometría. Un modelo bien optimizado puede pesar entre 100 y 500 KB, pero una sola textura de 1024 por 1024 píxeles ocupa unos 5 MB en memoria de vídeo al descomprimirse, y más con mipmaps. La regla práctica: revisa primero el tamaño de las texturas y si el modelo lleva atributos que el material no usa, porque ahí suele estar la mitad del peso.
El coste que nadie presupuesta: hacer el modelo
Los presupuestos de 3D para web suelen ser precisos con el código y callar sobre el activo, que es la mitad más grande y menos previsible.
Un modelo que ya existe, del fabricante o salido de un archivo CAD, casi nunca sirve tal cual. La geometría de CAD está hecha para tolerancias de mecanizado y lleva órdenes de magnitud más detalle del que necesita un navegador, así que hay que rehacerla, desplegarla, texturizarla y volver a exportarla. Eso es trabajo de especialista y se mide en días.
Un modelo que no existe hay que hacerlo a partir de fotos y planos, y eso se mide en semanas para cualquier cosa con un acabado de verdad. Después viene la iluminación, que es lo que decide si el resultado parece caro o parece un trabajo de clase, y la iluminación es dirección de arte, no ingeniería.
¿Cuánto cuesta una web con 3D?
La integración suele ser la partida pequeña. Para un solo objeto presentado en una página, el trabajo de front suele ir de 2.000 a 6.000 dólares según cuánta interacción tenga, mientras que el modelo va desde unos cientos de dólares si es simple y ya existe hasta varios miles si hay que modelar, texturizar e iluminar un producto desde cero. Un configurador con varios materiales y opciones es otra escala, porque cada combinación tiene que verse bien y probarse. Un presupuesto que pone precio al código sin decir quién produce el activo está presupuestando la mitad del proyecto.
Cuándo no compensa
Si el objeto se entiende en una foto, la foto gana siempre. Carga antes, funciona en cualquier dispositivo, la puede cambiar el cliente sin llamar a nadie y sale en los resultados de búsqueda de imágenes. Un 3D no hace ninguna de esas cuatro cosas.
Tampoco compensa si el público llega mayoritariamente desde móvil con conexión limitada, que en buena parte de Latinoamérica es la norma y no la excepción. Un modelo de dos megas en datos móviles es una barrera de entrada, no una demostración de capacidad. Y hay algo peor: los navegadores móviles reclaman memoria con dureza, así que una escena pesada no solo va lenta en un móvil de gama media, puede hacer que la pestaña se recargue y se pierda lo que el visitante hubiera escrito.
Y no compensa si no hay presupuesto para el modelo. Un 3D con materiales pobres e iluminación por defecto se ve peor que ninguno, porque señala exactamente lo contrario de lo que pretendía señalar.
Un caso más, que se menciona poco: cuando el contenido cambia a menudo. Una foto la cambia quien lleve la web. Un activo 3D necesita a quien lo hizo, lo que convierte en silencio una página de marketing en una dependencia permanente de un proveedor externo.
Si se hace, cómo hacerlo sin castigar al visitante
Cuatro decisiones separan un 3D que suma de uno que estorba, y las cuatro son de ingeniería, no de arte.
No cargar nada hasta que la sección esté cerca de verse, y soltarlo cuando ya no lo está. Un canvas fuera de pantalla no debería estar renderizando, y un observador más una comprobación de si el documento está oculto cubre tanto el caso de haberlo pasado con el scroll como el de haber cambiado de pestaña.
// Deja de renderizar cuando no se puede ver, por cualquiera de los dos motivos.
const io = new IntersectionObserver(([e]) => (visible = e.isIntersecting), {
rootMargin: '200px',
});
document.addEventListener('visibilitychange', () => {
awake = !document.hidden;
});
function frame() {
if (visible && awake) renderer.render(scene, camera);
requestAnimationFrame(frame);
}Limitar la resolución de render. En una pantalla retina, dibujar al doble de píxeles cuesta cuatro veces más y apenas se distingue en un objeto pequeño. Un techo de 2 es lo normal, y en un canvas grande a sangre un 1,5 suele ser invisible.
Tener siempre una versión estática para quien pida menos movimiento o llegue con un dispositivo que no lo aguante. No es solo una obligación de accesibilidad, es también el recurso sensato cuando se pierde el contexto gráfico, que en móviles reales pasa más de lo que la gente espera.
Y revisar las texturas antes que nada. Bajar una textura de 1024 a 512 píxeles reduce su coste en memoria a la cuarta parte, y en un objeto que nunca ocupa más de unos cientos de píxeles en pantalla no lo nota nadie.
Ninguna es opcional si la web tiene que funcionar para todo el mundo y no solo para quien la revisa en un portátil bueno con fibra.
La pregunta que hay que hacer antes de aceptar nada de esto
Hay una pregunta que resuelve casi todas estas conversaciones, y no es técnica. Qué va a poder entender el visitante después de esto que no entendiera antes.
Si hay una respuesta clara, el presupuesto está justificado y la ingeniería de arriba es cómo gastarlo bien. Si la respuesta honesta es que va a quedar impresionante, dilo tal cual, ponle precio de trabajo de marca y deja que el cliente decida con la disyuntiva real delante.
