WebGPU y modelado 3D con IA: la nueva forma de renderizar en la web

Respuesta corta: WebGPU es la nueva API gráfica de la web. Da acceso a la GPU con un modelo moderno (el de Vulkan, Metal y D3D12) y añade compute shaders, algo que WebGL nunca tuvo. Con Three.js ya puedes usarla hoy sin perder compatibilidad: el WebGPURenderer cae automáticamente a WebGL 2. Combinado con modelos 3D generados por IA, el costo de llevar una idea 3D a producción se desplomó.

Empecé a programar a los 16 años con una app en Three.js. Diez años después, el 3D en la web cambió más en los últimos 18 meses que en toda esa década.

WebGL vs WebGPU en una tabla

	WebGL 2	WebGPU
Modelo	Máquina de estados (OpenGL ES)	Pipelines y bind groups explícitos
Lenguaje de shaders	GLSL	WGSL (o TSL en Three.js)
Compute shaders	No	Sí
Sobrecarga por draw call	Alta	Baja
Casos que habilita	Escenas clásicas	Partículas masivas, simulación, IA en GPU, post-proceso pesado

La consecuencia práctica: cosas que antes requerían trucos (millones de partículas, físicas, instancing gigante, cálculos en texturas) ahora son código directo en la GPU.

Three.js con WebGPU y fallback

import * as THREE from 'three/webgpu'
import { color, positionLocal, sin, time } from 'three/tsl'

const renderer = new THREE.WebGPURenderer({ antialias: true })
await renderer.init() // usa WebGPU o cae a WebGL 2

const material = new THREE.MeshStandardNodeMaterial()
// TSL: el mismo nodo compila a WGSL o GLSL según el backend
material.colorNode = color(0x6366f1).mul(sin(time).mul(0.5).add(0.5))
material.positionNode = positionLocal.add(sin(time.add(positionLocal.y)).mul(0.05))

TSL (Three Shading Language) es lo que hace que esto sea sostenible: escribes shaders como funciones de JavaScript componibles y Three.js los traduce al backend correcto. Se acabó mantener dos versiones de cada shader.

Mi pipeline 3D actual

1. Generar. Parto de una imagen o concepto y genero una malla GLB con un modelo de IA de imagen a 3D. Lo que antes eran días en Maya para un prop ahora es un primer borrador en minutos.
2. Corregir. El modelo generado es un punto de partida: reviso topología, escala, pivote y materiales. El criterio de modelado sigue importando.
3. Optimizar. Con gltf-transform: deduplicar, simplificar, comprimir geometría (meshopt o Draco) y texturas (KTX2/WebP). Un GLB de 40 MB baja fácilmente a 2–4 MB.
4. Integrar. En Next.js, el canvas es un componente cliente cargado con next/dynamic y ssr: false, con un fallback estático (imagen) mientras carga.
5. Cuidar. Liberar geometrías, materiales y texturas al desmontar (dispose), pausar el loop fuera de pantalla y respetar prefers-reduced-motion.

import dynamic from 'next/dynamic'

const Scene = dynamic(() => import('./scene'), {
  ssr: false,
  loading: () => <img src="/hero-fallback.webp" alt="Vista previa de la escena" />,
})

Skills: cómo hago que un agente programe 3D bien

El 3D es donde más se nota un agente sin contexto: crea renderers en cada render, olvida dispose, carga texturas sin comprimir. Por eso trabajo con un set de skills especializadas (fundamentos, geometría, materiales, iluminación, shaders, loaders, post-proceso, animación, interacción) que codifican esas reglas. El agente no "sabe" Three.js mejor por arte de magia: sigue las reglas que yo ya aprendí rompiendo cosas.

Las reglas base que meto en cualquier proyecto 3D:

• Componentes 3D siempre "use client" y sin SSR.
• Un solo renderer por canvas; nada se instancia dentro del render de React.
• Todo recurso creado se libera al desmontar.
• Fallback estático y respeto a movimiento reducido.
• Assets comprimidos antes de llegar a public/.

Lo nuevo que podemos hacer

• Configuradores de producto con materiales PBR reales y cambios en tiempo real.
• Héroes interactivos con millones de partículas animadas por compute shaders.
• Visualización de datos 3D que antes exigía una app nativa.
• Inferencia en GPU dentro del navegador: WebGPU también acelera modelos de IA locales, sin servidor.

Cierre

WebGPU no es "WebGL más rápido": es la GPU tratada como ciudadano de primera clase en la web. Sumado a generación de modelos con IA y agentes que siguen reglas de producción, el 3D dejó de ser un lujo de estudios grandes. Si sabes JavaScript, hoy puedes publicar experiencias que hace tres años requerían un equipo.

Lee también: cómo el flujo de desarrollo se movió a la nube y cómo construí Roger-arq.

Preguntas frecuentes

¿Qué es WebGPU?

Es la API gráfica moderna del navegador, sucesora de WebGL. Se basa en el modelo de Vulkan, Metal y Direct3D 12: pipelines precompilados, menos sobrecarga por draw call y compute shaders de propósito general en la GPU.

¿Debo dejar de usar WebGL?

No hace falta reescribir nada. Con Three.js importas desde three/webgpu y el WebGPURenderer usa WebGPU cuando el navegador lo soporta y cae a WebGL 2 cuando no. Escribes los materiales una vez con TSL y corren en ambos backends.

¿Cómo se integra un modelo 3D generado con IA en un sitio web?

Generas el modelo (imagen a malla GLB), lo optimizas con gltf-transform (simplificación, meshopt o Draco, texturas KTX2 o WebP), lo cargas con GLTFLoader en un componente cliente sin SSR, liberas recursos al desmontar y ofreces un fallback estático y respeto a prefers-reduced-motion.