3D en el navegador: tecnologías y frameworks
3D en el navegador: tecnologías y frameworks
La web se ha convertido silenciosamente en una plataforma seria para experiencias 3D. Lo que comenzó como simples cubos giratorios ha evolucionado a configuradores de productos para grandes marcas, visualizaciones de datos para científicos, juegos a gran escala y experiencias inmersivas de RA/RV — todo funcionando en una pestaña del navegador, sin necesidad de instalación.
Las tecnologías centrales que impulsan la Web 3D
En la base, hay algunas tecnologías clave que hacen posible todo esto. Piense en ellas como las capas de un pastel — cada una se construye sobre la anterior.
WebGL 2 es la línea base universal. Ha estado en todos los navegadores durante años, es estable y tiene un ecosistema masivo de herramientas y bibliotecas. Si está construyendo para la web hoy, WebGL 2 es en lo que su código se ejecuta finalmente, ya sea que lo escriba directamente o use un framework encima.
WebGPU es la nueva llegada brillante. Es una API gráfica moderna de bajo nivel que brinda a los desarrolladores un control más directo sobre la GPU — similar a Vulkan, Metal o DirectX 12 en plataformas nativas. Permite shaders de cómputo (usar la GPU para matemáticas generales, no solo gráficos), mejor multihilo y un rendimiento más predecible. El soporte del navegador está creciendo rápido: está disponible en Chrome y Edge, disponible detrás de una bandera en Firefox y en Safari Technology Preview. Para proyectos nuevos donde el rendimiento importa, vale la pena prestarle atención.
WebXR es cómo llevar la realidad virtual y aumentada al navegador. Es la API estándar para cascos de RV como Meta Quest, Apple Vision Pro e incluso visores simples de Cardboard, así como RA en teléfonos y tabletas. WebXR maneja el trabajo complejo de rastrear la posición de la cabeza, renderizar vistas estéreo y gestionar la entrada del controlador — para que pueda concentrarse en construir la experiencia.
WebAssembly (Wasm) también merece una mención. Permite ejecutar código escrito en C++, Rust u otros lenguajes a velocidad casi nativa en el navegador. Así es como motores pesados como Unity, Unreal y Godot pueden exportar a la web — compilan su núcleo C++ a WebAssembly y lo ejecutan junto con JavaScript.
Finalmente, los formatos de compresión de texturas GPU como Basis Universal y KTX2 le permiten enviar texturas que permanecen comprimidas en la memoria de la GPU, ahorrando ancho de banda y memoria — crucial para dispositivos móviles.
Frameworks de alto nivel: probablemente no quiera escribir WebGL puro
Escribir WebGL puro es como construir un motor de automóvil desde cero — posible, pero rara vez es el mejor uso de su tiempo. Los frameworks manejan el código repetitivo, proporcionan abstracciones útiles y le permiten pensar en términos de escenas, objetos y materiales en lugar de buffers, shaders y llamadas de dibujo.
Three.js es el rey indiscutible del ecosistema. Ha existido desde 2010, tiene una comunidad masiva, documentación excelente y funciona con todos los formatos 3D principales. Le proporciona un grafo de escena (un árbol de objetos), cámaras, luces, materiales, geometrías, sistemas de animación, efectos de postprocesamiento y cargadores para GLTF, OBJ, FBX y más. El ecosistema React lo ha adoptado a través de React Three Fiber (R3F), que le permite escribir escenas Three.js de forma declarativa como componentes React — un cambio de juego si ya está construyendo con React.
Babylon.js adopta un enfoque diferente — es más como un motor de juego completo en el navegador. Tiene un potente editor visual, física integrada, un editor de materiales basado en nodos, excelente soporte TypeScript y una implementación WebXR de primera clase. Si está construyendo algo parecido a un juego o necesita un flujo de trabajo impulsado por un editor, Babylon.js es una opción fantástica.
PlayCanvas es único porque es nativo de la nube. El editor se ejecuta en su navegador, su proyecto vive en la nube y varias personas pueden colaborar en tiempo real. Utiliza una arquitectura de sistema entidad-componente y es popular entre equipos que construyen anuncios jugables, juegos instantáneos y herramientas 3D colaborativas.
A-Frame adopta un enfoque declarativo, similar a HTML. Escribe escenas 3D como elementos HTML personalizados:
OGL es la elección del minimalista — solo unos pocos kilobytes, sin opiniones, solo una capa delgada sobre WebGL. Ideal para proyectos con restricciones de tamaño como anuncios de banner o cuando desea construir sus propias abstracciones desde cero.
El ecosistema React: 3D impulsado por componentes
Si es un desarrollador React, React Three Fiber (R3F) es transformador. Es un renderizador React para Three.js — lo que significa que escribe su escena 3D usando JSX, como su interfaz de usuario.
El ecosistema R3F se ha enriquecido con ayudantes. @react-three/drei le da docenas de componentes listos para usar: controles de órbita, superposiciones HTML, texto, mapas de entorno, cargadores y más. @react-three/postprocessing trae efectos de postprocesamiento. @react-three/rapier y @react-three/cannon-es añaden física. Puede construir aplicaciones 3D sorprendentemente complejas con muy poco código repetitivo.
Para WebXR en React, está React XR, que trae el mismo enfoque declarativo al desarrollo AR/VR.
Formatos de archivo: glTF es el JPEG del 3D
Si está poniendo 3D en la web, glTF 2.0 (GL Transmission Format) es el estándar. A menudo se le llama el "JPEG del 3D" — un formato libre de regalías, eficiente y listo para ejecución, mantenido por el Khronos Group (las mismas personas detrás de WebGL y WebGPU).
glTF viene en dos sabores: .gltf (JSON + archivos de datos binarios separados) y .glb (todo en un solo archivo binario). Para la web, .glb es generalmente preferido — un archivo, una solicitud, fácil almacenamiento en caché.
glTF admite materiales de renderizado basado en física (PBR) listos para usar — flujo de trabajo metálico/rugosidad, mapas normales, mapas de oclusión, mapas emisivos. Maneja animaciones, rigging esquelético (skinning) y objetivos de morphing (blend shapes). Para compresión, Draco reduce drásticamente el tamaño de la geometría, y KTX2/Basis Universal maneja la compresión de texturas que permanece comprimida en la GPU.
Existen otros formatos — USDZ para AR Quick Look de Apple, FBX y OBJ como formatos de intercambio heredados — pero para la entrega web, glTF es la respuesta. Evite FBX/OBJ para uso web en producción; son verbosos, carecen de estandarización y no se comprimen bien.
El pipeline de activos: del modelado al navegador
Obtener un modelo 3D de su software de modelado al navegador de manera eficiente implica algunos pasos.
El modelado se realiza en herramientas como Blender (gratuito y excelente), Maya, Cinema 4D o Modo. Al exportar, use el exportador oficial de Khronos glTF para Blender — es mantenido por los autores de la especificación y produce la salida más limpia.
La optimización es donde ocurre la magia para el rendimiento web. glTF Transform (una herramienta de línea de comandos) puede aplicar compresión de geometría Draco, redimensionar y comprimir texturas a KTX2/BasisU, generar mipmaps, eliminar datos no utilizados y más. Meshoptimizer comprime aún más los buffers de vértices e índices. El glTF Validator detecta violaciones de especificación antes de que envíe.
Para el alojamiento, use un CDN con encabezados CORS adecuados y soporte para solicitudes HTTP Range — esto permite la carga progresiva de modelos grandes. Algunos equipos usan CDN 3D especializados que manejan la conversión de formato y la optimización sobre la marcha.
Física e interacción: haciéndolo sentir real
El 3D estático es bonito; el 3D interactivo es atractivo. Para física, las principales opciones en el mundo JavaScript/Wasm son Cannon-es (un puerto ligero de Cannon.js), Rapier (un motor moderno y rápido basado en Rust compilado a Wasm, con excelente integración R3F a través de @react-three/rapier), Ammo.js (un puerto de la física Bullet estándar de la industria — potente pero pesado) y Jolt Physics (un puerto Wasm más nuevo y muy rápido).
Para la interacción, el raycasting es la técnica fundamental — disparar un rayo invisible desde la cámara a través de la posición del ratón/dedo para ver qué objeto 3D fue golpeado. Las bibliotecas proporcionan controles listos para usar: OrbitControls para girar alrededor de un objeto, DragControls para mover cosas, TransformControls para traducción/rotación/escala tipo gizmo. En WebXR, obtiene interacción basada en controlador — apuntar, agarrar, teletransportar — manejada por la integración XR del framework.
Presupuestos de rendimiento: manteniéndolo fluido
La web es un entorno hostil para el rendimiento. Los usuarios están en todo, desde teléfonos insignia hasta portátiles de cinco años. Apuntar a 60 fotogramas por segundo significa que tiene 16,6 milisegundos por fotograma. Para RV, necesita 90fps (11,1ms) o incluso 120fps (8,3ms).
Presupuestos aproximados a los que apuntar: menos de 100k triángulos para móvil, menos de 1M para escritorio. Menos de 50 llamadas de dibujo es ideal; menos de 200 es aceptable. Memoria de textura inferior a 100MB en móvil, 500MB en escritorio. La complejidad del shader importa — evite la bifurcación dinámica, limite las muestras de textura, mantenga bajos los recuentos de instrucciones.
Las herramientas de perfilado son sus amigas. La pestaña Rendimiento de Chrome DevTools, Spector.js para captura de fotogramas, el panel de estadísticas integrado de three.js y detect-gpu para clasificar dispositivos en tiempo de ejecución. La idea clave: mida en dispositivos reales, no solo en su máquina de desarrollo.
Mejora progresiva: degradación elegante
No todos los dispositivos pueden ejecutar su escena 3D elegante. La mejora progresiva significa proporcionar una experiencia utilizable en todas partes, luego agregar 3D donde sea compatible.
Comience con un respaldo 2D — una imagen hero, un carrusel, un gráfico estático. Detecte el soporte de WebGL (y WebGPU, WebXR) en tiempo de ejecución. Para dispositivos de gama baja, sirva modelos de bajo polígono, texturas más pequeñas y desactive efectos costosos como sombras, bloom o reflejos de pantalla. Herramientas como detectGPU de three.js o el WebGL Report pueden ayudar a clasificar los niveles de capacidad del dispositivo.
El objetivo no es hacer que todo se vea idéntico en todas partes — es hacer que la experiencia central funcione en todas partes, y hacer que brille donde el hardware lo permita.
Trabajemos juntos
¿Necesitas más información, ayuda con tu proyecto o desarrollar una idea?
Ya sea una pregunta sencilla, una duda rápida o una charla de 5 minutos, envíame un mensaje—no cuesta nada y siempre estoy listo para ayudar. Me gusta escuchar para entender el problema, ser creativo en las soluciones y centrarme en ideas simples, confiables y fáciles de implementar rápidamente.
Contáctame →