Building 3D Web Apps in 2025 – React, XR & AI?

Hola a todos, soy Bela, mantenedor de código abierto en Pomondros y fundador de Drawcall.ai. Hoy vamos a echar un vistazo a cómo construir aplicaciones web 3D en 2025, especialmente con cómo podemos usar nuestro conocimiento de React para construir aplicaciones XR y cómo la IA puede ayudarnos en el proceso. Como dije, soy Bela Bolender, mantengo la biblioteca React to XR y también soy el mantenedor de React UI Kit, el marco de interfaz de usuario más popular para aplicaciones de realidad virtual y realidad aumentada en la web. He estado haciendo desarrollo web 3D y XR durante más de cinco años, construyendo varias páginas web, juegos web 3D, aplicaciones web 3D, y ahora manteniendo principalmente bibliotecas de código abierto para la web 3D. El 3D en la web ha llegado.

Lo que comenzó como un uso trivial del 3D en la web se ha convertido ahora en un diferenciador clave. Hoy en día, encontrarás páginas web impresionantes, herramientas de productividad 3D completas, e incluso juegos de VR totalmente inmersivos, todos ejecutándose en un navegador y a menudo impulsados por React. En esta charla, veremos las capas de abstracción comúnmente utilizadas al construir aplicaciones web 3D en la web, qué papel puede jugar React en la construcción de aplicaciones web 3D y por qué es útil, y finalmente, qué papel puede jugar la IA, específicamente los modelos de lenguaje grande, en el desarrollo para la web 3D y dónde los LLMs todavía están luchando.

Comencemos echando un vistazo a la base del desarrollo web 3D, la capa de abstracción más baja y cómo diferentes capas de abstracción simplifican el desarrollo. La primera capa, la API del navegador WebGL, expone el acceso para instruir a la GPU a dibujar triángulos individuales, lo cual es muy poderoso pero también increíblemente detallado porque necesitas comunicarte con la GPU en buffers y lenguajes de sombreado. Encima de la API de WebGL, 3GS, que es la biblioteca de desarrollo web 3D más popular, construye una capa de abstracción que se compone de una escena que contiene elementos como cámara, luces, mallas y materiales. Echaremos un vistazo más de cerca a esos elementos más adelante.

Y 3GS ha hecho que el desarrollo web 3D sea mucho más accesible, y es la base sobre la que se construyen hoy en día la mayoría de los motores web 3D de nivel superior. Ahora, en lugar de construir imperativamente la escena a mano, podemos usar el estilo declarativo de React para orquestar nuestra escena. Esto es posible usando la biblioteca React 3 fiber, y dado que la escena es una estructura de árbol, al igual que las interfaces de usuario HTML, React resultó ser una gran abstracción para declarar elementos 3D en una escena.

Echemos un vistazo más de cerca a React 3 fiber. Es un renderizador de React para 3GS, al igual que React DOM es un renderizador de React para HTML. Y por lo tanto, React 3 fiber gestiona elementos de 3GS en lugar de elementos HTML. Ahora la gente podría preguntar, ¿por qué es React una buena idea para construir aplicaciones web 3D? ¿No requieren las aplicaciones web 3D alto rendimiento? La razón por la que React es excelente para aplicaciones web 3D es porque simplifica la creación de escenas 3D complejas. Usando el modelo de React, podemos co-ubicar nuestro código, lo que reduce la probabilidad de no liberar recursos, y por lo tanto, fugas de memoria. Usar la sintaxis declarativa es mucho menos verboso, por lo que podemos expresar nuestras ideas en menos código.

Y podemos aprovechar todo el ecosistema de React y el ecosistema de 3GS combinados, lo que nos permite acceder a muchas bibliotecas, permitiéndonos acceder a cosas comunes como la gestión de estado, pero también a funcionalidades clave en 3D. El código en la parte inferior nos da una idea de cómo podemos usar la sintaxis de React para crear elementos de 3GS, como grupos y mallas. Si estás construyendo con React 3 fiber, tienes acceso a todo el ecosistema de React 3 para iniciar tu proceso de desarrollo. Esto es muy similar a cómo un motor de juego te proporciona elementos como física y el sistema de interfaz de usuario de inmediato.

La diferencia clave aquí es que esto no es un monolito, sino una pila de texto, como sabemos que es desde la web. Cada parte es intercambiable, fomentando la innovación. Pero en algunos casos, la funcionalidad que necesitas está ausente. Y surge la pregunta, ¿cómo podemos usar las bibliotecas 3GS existentes que ya resuelven nuestro problema con React 3 fiber?

Dado que React 3 fiber es un ejecutor de React, se integra sin esfuerzo con cualquier biblioteca 3GS, permitiéndote acceder a todo el ecosistema 3GS, como la biblioteca React 3 VRM para renderizar avatares VRM, la biblioteca Nufcat para pathending para tus agentes de IA, o la biblioteca 3Mesh BVH, que es súper útil para acelerar los cálculos de mallas personalizadas. Ahora, la pregunta que a menudo surge al construir aplicaciones web 3G es, ¿no deberíamos construir una aplicación nativa para esto, ya que los navegadores siempre están detrás de las aplicaciones nativas en rendimiento y acceso al hardware?

Sin embargo, esto está cambiando, ya que la brecha se está cerrando en áreas clave gracias a dos APIs principales. WebGPU, la próxima generación de API de gráficos que ofrece un rendimiento casi nativo y características modernas de GPU, y WebXR, que permite a los desarrolladores construir aplicaciones web para dispositivos AR y VR, incluyendo seguimiento de manos, anclajes espaciales y más. Estas APIs nos permiten construir aplicaciones que se sienten nativas, con nada más que JavaScript, y por lo tanto React. Aquí es donde React 3 XR entra en juego.

React 3 XR es parte del ecosistema React 3, permitiéndonos construir aplicaciones web usando el estándar WebXR. Por lo tanto, estas aplicaciones funcionan en casi todos los visores AR y VR. Esto significa que podemos construir aplicaciones que son verdaderamente multiplataforma, desde relojes inteligentes, teléfonos móviles de escritorio, hasta nuestros visores XR inmersivos, todo usando nuestra sintaxis declarativa de React y sin preocuparnos por la compatibilidad de dispositivos individuales.

En la práctica, esto incluso significa que podemos convertir nuestra aplicación 3D existente en una aplicación web VR con tres líneas de código, como se ve en este ejemplo de ragdoll. Esta es la aplicación 2D que no está hecha para VR, y en el lado derecho, podemos ver, usando tres líneas de código, convirtiendo esta aplicación en una aplicación de realidad virtual. Sin embargo, no solo podemos convertir una aplicación existente en una aplicación AR o VR, sino que podemos dar a nuestra aplicación algunas características avanzadas, incluyendo la comprensión espacial del entorno del usuario.

Al construir una aplicación de realidad aumentada, algunos dispositivos exponen la posición y el tamaño de ciertos objetos, como sillas, sofás, ventanas, paredes. Específicamente, estos objetos son ya sea planos para objetos planos, como paredes, o mallas para objetos con volumen, como sillas. Además, usando el concepto de capas, podemos renderizar medios 2D de alta calidad, como videos, eficientemente a una pantalla virtual en el entorno del usuario, permitiéndonos construir experiencias de cine de alta calidad o interfaces de usuario de alta calidad.

En algunos casos, una aplicación web podría querer anclar algo al entorno del usuario que debería persistir incluso al cerrar la aplicación. Para este caso de uso, podemos usar la función de anclaje persistente. Con todas estas características fuera del camino, comencemos realmente de manera simple construyendo nuestra primera aplicación React 3 XR usando el comando npm create react3. Esto inicia un CLI donde podemos seleccionar el paquete 3, handle, XR y UIKit del ecosistema React 3, que necesitaremos para esta aplicación de muestra.

Este CLI inicia automáticamente nuestro proyecto, al cual podemos acceder ya sea a través de nuestro visor o el emulador XR directamente en nuestro navegador de escritorio. Ahora echemos un vistazo al código fuente del proyecto. Aquí podemos ver el componente canvas de React 3 Fiber y el componente XR de React 3 XR envolviendo nuestra aplicación. También vemos un componente de environment de React 3 Drei y una luz ambiental estándar de 3JS y dos cajas, que son nuestros componentes personalizados que muestran cajas giratorias clicables.

El componente clave en esta configuración es el componente canvas. Crea una escena, redimensiona automáticamente el canvas a su padre, configura una cámara y reenvía eventos desde el canvas a la escena 3D, haciendo que nuestra aplicación sea inmediatamente interactiva usando eventos como onClick. A continuación, para expresar qué elementos se renderizan en la pantalla, necesitamos introducir el concepto de una malla. Una malla combina tanto la geometría, también llamada su forma, como el material de un objeto. Combinado con la posición, rotación y escala, representan exactamente dónde y cómo la malla se muestra al usuario desde la cámara del usuario.

Ahora, cuando se trata de agregar interacción de estado y construir componentes personalizados, podemos aprovechar todo el conocimiento de React con el estado local, incluidas soluciones de estado global como Zastand e interacciones como onClick y todos los demás eventos de puntero que funcionan en todos los dispositivos. La gran diferencia para desarrollar aplicaciones 3D es el bucle de fotogramas. Existe porque las aplicaciones a menudo cambian cada fotograma, lo que incluye animaciones, física, entrada del usuario y más. El bucle de fotogramas necesita asegurarse de que todos los cambios de estado de entrada del usuario y las funciones de actualización personalizadas se apliquen antes de renderizar un nuevo fotograma en la pantalla. Esto es crucial para una experiencia de usuario fluida y el bucle de fotogramas necesita ejecutarse típicamente alrededor de 30 o hasta 100 veces por segundo. Para mantener esta velocidad, no podemos volver a renderizar toda nuestra aplicación React en cada fotograma.

Como se ve en este ejemplo, modificamos imperativamente la rotación del cubo en cada fotograma. Esta forma imperativa de actualizar un valor es muy atípica para el desarrollo con React, pero necesaria para mantener un alto rendimiento. La regla general es que una vez que algo necesita ser actualizado regularmente varias veces por fotograma, debemos moverlo a un hook useFrame y actualizarlo imperativamente.

Ahora hablemos de AI, porque también está cambiando cómo construimos para la web 3D. Específicamente, AI cambia cómo podemos codificar aplicaciones web 3D, pero también cómo podemos generar activos, como modelos 3D, texturas, sonidos y animaciones. Los enfoques de AI para, por ejemplo, la generación de modelos 3D han avanzado mucho y son excelentes para prototipos y especialmente útiles para nuevos desarrolladores que aún no están familiarizados con el a veces muy complejo panorama de herramientas en el mundo 3D.

Sin embargo, la calidad de producción y un alto nivel de control creativo aún requieren años de experiencia y un conocimiento profundo, por lo que siempre puedo recomendar aprender estas herramientas, como Blender, en el camino para convertirse en un experto en web 3D. Desarrollar AI, específicamente modelos de lenguaje grandes, para el desarrollo de aplicaciones web 3D es un desafío por tres razones. Primero, la mayoría de los modelos de lenguaje grandes no han visto suficientes ejemplos específicos de 3D. Pueden crear escenas básicas, pero una vez que pides características avanzadas o APIs específicas del ecosistema comienzan a alucinar. En segundo lugar, el panorama de React 3 y WebXR se mueve rápidamente. Nuevas bibliotecas, nuevas APIs, cambios disruptivos, por lo que los modelos se desactualizan rápidamente. Y por último, los LLMs aún no piensan bien en 3D.

Pueden describir pero no visualizar geometría o relaciones espaciales con precisión. Para combatir estas limitaciones, recomiendo dar a los LLMs acceso a la documentación más actualizada para la biblioteca específica que deseas usar, y usar bibliotecas con un alto nivel de abstracción que sean similares al ecosistema web para que los LLMs puedan transferir su conocimiento. Pero suficiente de las limitaciones teóricas. Usemos AI para convertir nuestro aburrido proyecto inicial en un configurador de zapatillas. Primero, usamos Trellis, una AI de generación de modelos 3D, para convertir una imagen de una zapatilla blanca en un modelo 3D. A continuación, eliminamos las cajas giratorias de nuestra aplicación y añadimos nuestro modelo de zapatilla usando el componente glTF de la biblioteca React 3.3. Y usamos el componente handle de la biblioteca React 3.0 handle para hacer que el modelo sea manipulable.

Luego, usamos la aplicación DrawCode.ai para generar una interfaz de usuario 3D para nuestro configurador de zapatillas, que genera código usando la biblioteca React 3.0 UIKit, que podemos copiar directamente en nuestra aplicación.