En agosto de 2022, estaba en la Patagonia armando la FIN: Fintual Intensivo Natales, una escuela gratuita de programación que duraría 3 meses.
Ahí, en medio del frío, scrolleando YouTube, me topé con un video de Charlie Gerard: "Machine Learning for Front-end Developers".
¿What? ¿Cómo podían juntarse estos dos mundos? El frontend, territorio de interfaces, botones y CSS por un lado (lo que ves de las páginas web o aplicaciones); y el machine learning, la inteligencia artificial, por otro. El punto de encuentro: la GPU, la "tarjeta gráfica" del computador, donde se procesan las imágenes digitales.
Desde ese día, me sumergí en la programación creativa hasta el punto de renunciar, hace un año, para dedicarme 100% a esto como freelancer.
Y fue durante estos ~30 meses de exploración, cuando descubrí cómo va a cambiar la web que creció con nosotros.
De webmaster a fullstack dev: 30 años de HTML
La web la desarrolló entre marzo y diciembre de 1989 el inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau (VAMOS BÉLGICA!!! Sí, soy belga) mientras trabajaban en el CERN en Ginebra, Suiza, y se publicó como una propuesta formal en 1991.
Ese mismo año, Tim Berners-Lee introduce el HTML 1.0 con 18 elementos que confirmaban el diseño inicial del HTML: <title>, <h1> a <h6>, <p>, <a> etc.
El concepto central era el hyperlink, la navegación en nodos y la estructuración con el HTML. Brillante.
El contenido evolucionó. La tecnología también: las primeras imágenes, el CSS para pintar el HTML con colores y layouts, luego el JavaScript (creado en 1995 en 10 días) para agregar lógica y poder interactuar y manipular el documento en HTML.
Hagamos un recorrido rápido de la web de 1996:
En esta misma época aparecen las primeras “app” reales en la web con Hotmail, eBay y Blogger.
Entre 2000 y 2010, con Google y Facebook, las herramientas para construir la web se profesionalizan. Poco a poco, aparecen los frameworks como Angular, Vue, y React; sistemas inteligentes para producir HTML, CSS y Javascript de manera industrial, a gran escala.
Los webmasters se transforman en “fullstack engineers”. La tecnología evoluciona muy rápidamente: "hay un nuevo framework de JavaScript cada día." se decía en ese entonces.
Dejo esto para los nerds que programan:
Pero si bien la web se industrializa, el output final de esta maquinaria compleja sigue siendo sorprendentemente simple.
En 2025, incluso teniendo tecnologías avanzadas como React, Next.js, TypeScript, etc., lo que se renderiza en el navegador no cambia mucho. Todo el "hype" de frameworks y librerías modernas se concentra en una capa de abstracción para organizar mejor el código y hacer más eficiente el desarrollo y el rendimiento, pero lo que se entrega al cliente es la misma base de siempre:
- HTML para la estructura
- CSS para el diseño
- JavaScript para la interactividad
Una página web sigue siendo una pila de rectángulos, de <div> bidimensionales con colores, textos, interacciones y, con un poco de suerte, microanimaciones.
<canvas> y la emancipación del HTML
WebGL
Mientras en el mundo tech se peleaban los frameworks de JavaScript, otra revolución se gestaba en silencio: WebGL.
En 2011, el mismo año que Facebook adoptaba React para su news feed, un grupo de ingenieros de Mozilla y Khronos Group lanzan WebGL 1.0. Por primera vez, los navegadores pueden hablar directamente con el GPU, el chip especializado en procesar gráficos 3D que hasta entonces solo usaban los videojuegos.
Con el elemento HTML <canvas>, se abre entonces un portal hacia un universo de posibilidades gráficas. Ya no estamos limitados al HTML avanzado: ahora podemos crear mundos enteros con vectores en el espacio, iluminarlos con fuentes de luz virtuales, vestirlos con texturas, y mover la cámara en este espacio.
Se abría un portal sobre otro mundo, aunque todavía bien escondido.
Programar en 3D en el navegador en 2011 era horrible porque WebGL requería manejar gráficos a bajo nivel manualmente con “shaders”, “buffers” y “matrices de transformación” entre otros. Un infierno para el desarrollador web promedio. Crear un cubo rojo que rota, iluminado por una luz básica, con una cámara que lo observa necesitaba una atrocidad incomprensible de código (que dejo aquí para los programadores curiosos).
Three.js
Luego, aparece un game changer: three.js. La biblioteca transforma la manera de programar 3D en el navegador. El mismo cubo rojo rotando ahora se podía crear con pocas líneas de código intuitivo.
Pero a pesar de esta revolución, el 3D en la web no despegó inmediatamente. ¿Por qué? Tres obstáculos principales bloqueaban el camino:
- Hardware insuficiente
- Internet lento: (los modelos 3D son archivos pesados).
- Ecosistema inmaduro: faltaban piezas cruciales del rompecabezas todavía.
Hoy, tenemos smartphones con más poderes gráficos que una Playstation 3, fibra óptica y conexiones en 5G. No todos. No siempre. Pero los obstáculos empiezan a ser historia.
React Three Fiber: el 3D sube a primera
En febrero 2019, Paul Henschel (@0xca0a), desarrollador open source, tira el primer commit de una genialidad: integrar el 3D con React, el framework que usan Facebook, Instagram, y millones de aplicaciones web modernas. De repente, el 3D podía usar las mismas herramientas y patrones que el resto del desarrollo web de alto nivel.
El 3D web se convirtió en un ciudadano de primera clase en el desarrollo web moderno.
Ahora el cubo rojo en rotación se vuelve muy familiar para un desarollador web promedio.
¿Qué tiene que ver esto con el “machine learning para frontend dev”?
En 2017, unos investigadores japoneses tuvieron una idea brillante: si WebGL era tan bueno para crear gráficos 3D, ¿por qué no "hackearlo" para otros usos? Descubrieron que WebGL, al ser un puente directo a la GPU, podía servir para algo completamente distinto: ejecutar inteligencia artificial en el navegador.
La clave estaba en que tanto los gráficos 3D como la IA necesitan hacer miles de cálculos en paralelo, y eso es exactamente para lo que las GPUs fueron diseñadas. La genial explicación de Adam y Jamie de MythBusters sobre la diferencia entre CPU y GPU lo deja muy claro:
Hoy, además de HTML, imágenes y video, tu navegador puede descargar un modelo completo de inteligencia artificial que se ejecuta directamente en tu dispositivo usando la GPU. Se convierte en un estudio creativo: puede capturar 30 puntos de tu rostro 60 veces por segundo para animar un avatar en tiempo real, detectar tus gestos para controlar interfaces sin tocar la pantalla, y mucho más.
Ahora es posible tener modelos de lenguaje corriendo directamente en el navegador, sin depender de servidores externos como OpenAI.
Con la reciente propuesta de The Web Neural Network (WebNN) API y la introducción de "window.ai" (que permite usar el modelo Gemini Nano directamente desde Chrome), vamos a poder hacer mico-intervenciones de IA en cosas como un onboarding o una landing page, sin tener que pagar una factura de consumo al fin del mes.
Ese fue el momento “mindblown” que tuve como desarrollador frontend, el invierno 2022 en la Patagonia: la experiencia que tenemos de la web (y por lo tanto, del branding) va a cambiar mucho con la aparición de una programación más creativa, con herramientas más potentes para explotar este canvas..
El GPU redefine los primitivos del web
Ahora los diseñadores y programadores de una nueva página pueden considerar estos nuevos elementos:
- Geometría: una forma abstracta como un cubo, un cilindro o una galaxia de puntos
- Textura: la materialidad, la superficie, cómo refleja la luz.
- Luz: de dónde viene, su dirreción, su color y potencia.
- Cámara: desde dónde se observa la escena.
- Shaders: fragmentos de código en un language dedicado que se ejecutan en el GPU y que manipulan cómo se renderizan luz, color y textura, añadiendo efectos dinámicos como blur, reflejos o distorsiones. Los glitches.
Y luego como el mouse, el teclado y el scroll afectan este rendering 3D (posición, rotación, movimiento de la cámara, de la luz, etc.).
A lo mejor estás pensando “pero yo quiero hacer una página simple, no un videojuego”.
Minimalismo y maximalismo
Estamos bien pegados con el “minimalismo”, en particular en el mundillo tech chileno.
Cuando el minimalismo se instaló cerca del 2010, era una revolución. Pero quince años después, ¿quién no quiere ser “minimalista”? Todos los founders se jactan de que su app sea “simple y minimalista”. Y está bien. Nadie quiere pedir un Uber con una interfaz difícil y sobrecargada.
Pero una cosa es la UX y otra es el branding. Si antes los dos podían compartir el minimalismo, ahora hay que repensarlo. Una identidad de marca “minimal” es demasiado fácil, fome y olvidable. ¿Por qué? Porque no toma riesgos. Después del aburrimiento de la pandemia, la película Everything Everywhere All At Once lo gritó: ahora necesitamos colores, psicodelia, movimiento, glitches, ciencia ficción, emociones, intensidad. Una personalidad de marca fuerte y memorable es la que no tiene miedo de tomar riesgos en sus afirmaciones estéticas. Lamentablemente para las democracias, parece que está pegando también en afirmaciones políticas con elecciones de líderes expresionistas, audaces y maximalistas.
Estoy convencido que la chilecon valley tiene que empezar a separar: tener una UX minimalista y funcional, pero una marca maximalista y expresiva.
Existe un entremedio muy interesante y potente.
Dos ejemplos:
Aprovechar WebGL para el toque maximalista
El acceso al GPU que permite un web 3D ha permitido a muchos dar ese toque maximalista a su marca.
Voy a tirar aquí una selección de ejemplos, no necesariamente los más lindos, pero que ilustran perfectamente cómo el cambio de “primitivos” (luz, cámara, geometría, textura, shaders) nos ayuda a dar un toque más expresivo a una página.
Por cada ejemplo, anoto los conceptos claves.
Fondo negro, forma 3D, textura metálica, reflexión de varias luces de distintos ángulos y colores, interacción con el mouse.
Fondo negro, forma 3D, textura metálica, reflexión de luz, interacción con el mouse.
Fondo de cielo con sol y nubes, logo en 3D, exploración del producto en 3D.
Reflexión de luz y de láseres, mapping del visual y del sonido con el movimiento del mouse.
Fondo blanco, luz muy fuerte (estilo “high-key lighting”), rotación con el mouse, gravitación, elementos que introducen sombra cuando caen.
Navegación en 3D, al entrar un libro, pasa al 2D. Toques metálicos en las letras de los libros para reflexión de luz.
Difracción de luz, transparencia, fondo 2D scrolleable clásico con el elemento 3D fijo pero en rotación encima.
Difracción de luz, transparencia, fondo 2D scrolleable classico con el elemento 3D fijo peor en rotación encima.
Fondo negro, fotometria, points cloud, control de la navegación con el rostro (webcam + IA) y glitches con shaders y movimientos de la mano.
En conclusión, la web en 3D todavía es un terreno de exploración. Quizás lo que le faltó al “metaverso” para funcionar, fue justo eso: no empujarlo “desde arriba”, sino que poco a poco, desde abajo, construir una nueva estética e interfaz de interacción fascinante.
PD: Todavía no he visto en Chile muchas tendencias “maximalistas” de branding que aprovechen la web 3D. Si tienes ejemplos, mándalos a cartas@fintual.com
