Antes de comparar nada, conviene separar cuatro cosas que casi siempre se mezclan. Cuando alguien dice «esto está hecho con three.js» está nombrando una sola de las cuatro.
| Qué es | La imagen mental | |
|---|---|---|
| El hueco | Un rectángulo que la página reserva | El marco colgado en la pared |
| La herramienta | Con qué se dibuja dentro de ese hueco | Pinceles, o hablar con la tarjeta gráfica |
| El ayudante | Código que usa esa herramienta por ti | three.js, Spline |
| El idioma de la tarjeta | Órdenes que ejecuta la tarjeta gráfica, no el navegador | El idioma que solo ella entiende |
Un hueco pide una herramienta y ya no la cambia. Y el malentendido más caro del sector: creer que three.js compite con las herramientas de hacer páginas. No están en la misma capa. Una monta el marco; three.js pinta dentro.
Qué tiene el navegador desde el que lees esto
Las tablas de compatibilidad envejecen mal, así que esto le pregunta a tu navegador ahora mismo:
Esto no es una tabla de compatibilidad copiada de ningún sitio: es lo que soporta el navegador en el que estás leyendo, preguntado ahora.
- CSS 3D (transform-style: preserve-3d)UniversalEspacio 3D real, pero de cajas planas: girar, mover y escalar. Nada de curvar.Comprobando
- Filtros SVG sobre contenidoCasi universalLa única casilla del mapa donde deformar no mata el texto.Comprobando
- Canvas 2DUniversalMiles de objetos simples. Para un lector de pantalla, un cuadro en blanco.Comprobando
- WebGL 2Casi universalMover puntos de uno en uno. Si aquí sale ✕, el problema es el dispositivo, no el navegador.Comprobando
- WebGPUCon plan BHablar con la tarjeta cuesta menos. Nunca sin una versión en WebGL detrás.Comprobando
- HTML dentro del lienzo (drawElementImage)No usable todavíaLa pieza que falta desde hace quince años. Solo Chrome, detrás de un interruptor manual.Comprobando
La lista se parte en dos mitades. La de arriba lleva una década funcionando en todas partes. La de abajo todavía se está negociando, y quien la usa hoy asume que a una parte de su público no le va a funcionar.
Las cinco, de la más humilde a la más potente
1. CSS · mover trozos de la página
CSS es el lenguaje que da forma a cualquier web. Lo que casi nadie sabe es que también sabe de profundidad: puede coger cualquier trozo de la página —un texto, una foto, un botón— y girarlo, alejarlo o acercarlo en un espacio de tres dimensiones real.
La bandera en CSS se hace partiéndola en 36 tiras verticales, cada una con un trozo de la imagen, y meciendo cada tira con un pequeño retraso respecto a la anterior. De lejos ondea. De cerca se ven las costuras entre tiras, y los bordes hacen escalera.
Su límite es que solo sabe mover cajas planas, como naipes flotando en el aire. No tiene luz, ni materiales, ni relieve. Y es frágil: media docena de efectos corrientes —una transparencia, una sombra, un recorte— aplastan ese espacio 3D de vuelta al plano sin avisar.
Lo que gana a cambio es enorme: lo que hay dentro sigue siendo la página. El texto se selecciona, los enlaces funcionan, Google lo lee y un lector de pantalla para personas ciegas también.
2. SVG · dibujo de figuras que no sabe de profundidad
SVG es el formato de los logos y los iconos: figuras hechas de puntos y líneas que se pueden agrandar sin pixelarse. No entiende nada de 3D, y ese es todo el asunto: la profundidad la calculas tú aparte y le pasas el dibujo ya resuelto, plano.
La bandera en SVG no se parte en tiras: se empujan los píxeles de la imagen de un lado a otro con un filtro, como si el dibujo estuviera sobre agua. Sale sin costuras y con solo 14 líneas de código —es la más corta de las cinco—, pero se nota que no ondea: se abolla. Se mueve en una sola dirección, y los bordes quedan mordisqueados.
Su gracia: es la única de las que deforman que no mata el contenido. Si dentro hay un texto, sigue siendo texto mientras tiembla.
3. Canvas · un lienzo donde se pinta cada fotograma
Un canvas es literalmente un lienzo en blanco dentro de la página. Se pinta encima, y lo pintado deja de existir como objeto: ya no hay una bandera ni una cara de un cubo, solo la huella de color. Si quieres moverlo, borras y vuelves a pintarlo todo, sesenta veces por segundo.
La bandera en canvas se dibuja en 120 tiras finísimas, tantas que las costuras desaparecen. Sale mucho mejor que en CSS y sigue funcionando en cualquier dispositivo, sin depender de la tarjeta gráfica.
El precio es el que tiene todo lienzo: lo que pintas ahí dentro deja de ser contenido. Un texto pintado en un canvas no se puede seleccionar, ni buscar, ni copiar. Y para un lector de pantalla, un canvas es un cuadro en blanco.
4. WebGL · hablar directamente con la tarjeta gráfica
Aquí se cruza la frontera. WebGL no dibuja formas: le pasa triángulos a la tarjeta gráfica del dispositivo, la misma pieza que mueve los videojuegos. Una superficie deja de ser una imagen y pasa a ser una malla de miles de puntos que se pueden mover uno a uno.
La bandera en WebGL ondea de verdad: se mueve en las dos direcciones a la vez, se tapa a sí misma cuando un pliegue pasa por delante de otro, y la luz se calcula sola según cómo esté doblada en cada punto. Es la única que no finge.
Cuesta unas 110 líneas y dos programas escritos en el idioma de la tarjeta. Y sigue teniendo el problema del lienzo: lo que entra ahí sale convertido en imagen muda.
5. three.js · el ayudante que usa WebGL por ti
three.js no es otra forma de hacer 3D: es una biblioteca de código que usa WebGL por ti. En vez de describir triángulos, pides «una caja», «una luz», «una cámara». La diferencia de esfuerzo es brutal… hasta cierto punto.
Y ese punto es el hallazgo más útil de toda la comparación. Para un cubo girando, three.js ahorra el 87% del código. Para la bandera ondeando, solo el 68%. La razón:
Un ayudante te regala todo lo que es común a todo el mundo. Pero el efecto concreto que se te ha ocurrido a ti no te lo regala nadie: no existe una pieza prehecha llamada «bandera». Acabas escribiendo exactamente las mismas instrucciones para la tarjeta, dentro de un envoltorio que además hay que aprender.
Dicho corto: una librería ahorra muchísimo mientras pidas cosas que ya existen, y deja de ahorrar justo cuando pides algo original. Y lo que uno quiere hacer siempre acaba siendo lo segundo. A cambio, hay que descargarla: son cientos de kilobytes que el visitante paga en tiempo de carga.
Las cuatro, ondeando a la vez
Aquí están las cuatro que se pueden enseñar sin descargar nada. Cambia de pestaña y compara: todas ondean, pero cada una renuncia a algo distinto.
dibujando la tela…
36 tiras rígidas, cada una con un trozo de la misma imagen y un retraso distinto.
Dónde se rompe: Costuras visibles en los picos y bordes en escalera. Una tira no puede doblarse: solo inclinarse entera.
Las cuatro usan la misma imagen, generada con código al abrir la página: así ninguna tiene ventaja y nada depende de la red.
| CSS | SVG | Canvas | WebGL | |
|---|---|---|---|---|
| Cómo lo hace | 36 tiras rígidas | Empuja los píxeles | 120 tiras finas | Mueve 5.000 puntos |
| Ondula en las dos direcciones | No | Solo se abolla | No | Sí |
| Se tapa a sí misma | A trozos | No | No | Sí |
| Luz y sombra | Pintadas a mano | Ninguna | Pintadas a mano | Calculadas |
| El texto de dentro… | sigue vivo | sigue vivo | muere | muere |
| Líneas de código | 30 | 14 | 45 | 110 |
Fíjate en la penúltima fila, que es la que decide de verdad: las dos que peor ondean son las dos únicas que no matan el contenido. Las que ondean perfecto lo convierten todo en una imagen muda. No hay ninguna casilla que lo tenga todo, y por eso las mejores piezas no eligen: usan una mientras el usuario mira y otra cuando el usuario lee.
Todas van bien con una. El problema empieza con mil
Con un solo objeto, las cuatro van igual de fluidas y no se aprende nada. Las diferencias aparecen al subir la cantidad. Prueba a pasar de 1 a 400 en cada pestaña:
6 divs girados. Cero JavaScript en el bucle.
Los fotogramas por segundo son reales, medidos ahora mismo en tu equipo. Con un cubo las cuatro van igual: sube a 400.
Lo que ahí se ve tiene dos causas que casi nadie separa. Una es lo que cuesta dibujar. La otra es lo que cuesta darle las órdenes a la tarjeta, y esa es la que ahoga a los móviles: una escena simplísima puede ir a tirones porque se están dando diez mil órdenes por fotograma en vez de una.
Y encima está el multiplicador que nadie cuenta: las pantallas de móvil pintan dos o tres puntos reales por cada punto de diseño. Un teléfono a tres por punto está dibujando nueve veces más superficie de la que se ve. Todo lo que en tu ordenador parece barato se multiplica por nueve en el peor móvil de tu público.
Lo que se pierde al pasar al lienzo
El texto de una página tiene cuatro superpoderes que no se notan hasta que faltan: se selecciona y se copia, se busca, lo lee en voz alta un lector de pantalla y lo indexa Google. Al convertirse en píxeles de un lienzo, los cuatro desaparecen a la vez.
La consecuencia es cara. Cualquier interfaz dibujada en un lienzo tiene que construir y mantener una segunda página invisible —qué es un botón, qué dice, dónde está— sincronizada a mano. Flutter, la tecnología de Google para hacer aplicaciones, hace exactamente eso en la web. Y el detalle que lo dice todo: esa segunda página viene desactivada de fábrica, por rendimiento. Cuando la solución cuesta tanto que se apaga por defecto, el problema no está resuelto.
De ahí sale la única regla que aguanta: deja el texto real donde estaba y pon el efecto detrás o encima, nunca en su lugar.
Y si no quieres programar nada
No todo pasa por escribir código. Spline es un editor 3D que funciona dentro del navegador: modelas, pones luces y materiales, defines qué ocurre al pasar el ratón o al hacer clic, y publicas la escena como un enlace que se incrusta en la web. Es la forma más corta que existe hoy de llevar una idea 3D a una página real.
De la misma casa sale Hana, que no es 3D: es un lienzo para interacciones y animaciones en 2D, con estados, disparadores (un clic, una tecla) y trabajo en equipo en tiempo real, y se publica igual, por enlace o exportando fotogramas.
Merece la pena saber dónde encajan: por debajo siguen siendo lienzo. Todo lo del apartado anterior —el texto que deja de ser texto, el peso que paga el visitante— sigue aplicando. Son un atajo excelente para la pieza protagonista de una página, y una mala idea para construir la página entera.
Lo que viene: meter la página dentro del lienzo
El hueco que queda por tapar lleva quince años ahí: coger un trozo de página vivo, con su texto y sus botones, y meterlo dentro de una escena sin convertirlo antes en una foto. Hoy hay que fotografiarlo, y la foto se congela: no puedes escribir en ella ni pulsar nada.
Google lo está construyendo a la vista de todos, en la propuesta HTML-in-Canvas: un permiso que se le da al lienzo (layoutsubtree), una orden para dibujar dentro un elemento vivo (drawElementImage) y un aviso cada vez que ese contenido cambia. Está solo en Chrome y tras un interruptor manual (chrome://flags/#canvas-draw-element), y solo funciona con contenido colocado dentro del lienzo desde el principio: no puedes coger una tarjeta que ya existe en tu página y meterla.
Lo más interesante es lo que se niega a pintar a propósito: contenido de otras webs, los enlaces que ya has visitado, los colores de tu sistema, lo que el navegador tenía guardado para autorrellenar. Ahí está la explicación de todo este terreno. Que nunca haya existido una forma limpia de fotografiar un trozo de página no es un problema de dificultad técnica: una foto de tu pantalla cuenta cosas sobre ti. Todo esto está construido sobre esa desconfianza, y por eso avanza tan despacio.
Cómo elegir, en una frase por caso
- Una tarjeta que gira, un producto que se abre, algo que flota → CSS. Treinta líneas, funciona en todo y el contenido sigue siendo contenido.
- Un temblor suave sobre algo que hay que leer → SVG. Es la única que deforma sin matar el texto.
- Un protagonista visual en 2D que tiene que ir bien en cualquier móvil → Canvas.
- Tela de verdad, con luz y volumen → WebGL. Y asume que eso deja de ser contenido.
- Una escena entera con varias cosas dentro → three.js. El ahorro está en todo lo que rodea al efecto, no en el efecto.
- Una pieza vistosa sin escribir código → Spline o Hana, incrustadas, y el resto de la página en HTML normal.
La pregunta útil nunca es cuál es más potente. Es cuál es la más sencilla que resuelve esto, y quedarse ahí. Casi todo lo que parece necesitar 3D se resuelve con seis cajas giradas.
