Volver a proyectos

Desarrollo Web · IA y Aprendizaje Automático

VRtor

Experiencias de aprendizaje en 3D gratuitas que se abren en el navegador de un visor de VR, del Apolo 11 al interior de una célula, sin instalar nada.

WebXR · Babylon.js · three.js · Cloudflare Workers · Durable Objects · WebRTC

Cuatro escenas de VRtor: el Taj Mahal, las terrazas de Machu Picchu, el rover Perseverance en Marte y una presentadora en el escenario de una conferencia.

Caso de estudio

VRtor es un conjunto de lecciones gratuitas en 3D que funcionan en el navegador de un visor de VR como el Quest. Sin tienda de apps, sin instalación, sin cuenta. Cada tema tiene una dirección corta (vrtor.io/apo para el Apolo 11, vrtor.io/cel para la célula) porque escribir con un control es un suplicio. Puedes sentarte dentro del Columbia en órbita lunar, recorrer Machu Picchu, sacar orgánulos de una célula ampliada 150.000 veces o entrenar una pequeña red neuronal con las manos. En los temas en 3D también puedes ver a otros visitantes y hablar con ellos con voz espacial. Cada tema es su propia app WebXR con Babylon.js en su propio Cloudflare Worker, y todo se sirve desde un solo origen.

El problema

La mayor parte del aprendizaje en VR está detrás de una tienda de apps, una cuenta y una descarga que un profesor o un niño curioso tiene que superar antes de que pase algo. Los navegadores de los visores ya pueden ejecutar WebXR, pero una escena 3D pesada tiene que mantener la tasa de fotogramas del Quest o la gente se marea, y escribir una URL larga con un control basta para perderlos.

El enfoque

vrtor.io es un Worker enrutador. Cada tema vive en su propia app dentro de un monorepo con npm workspaces y se despliega como su propio Worker, y el enrutador llega a él por un service binding, así que todo comparte un solo origen (un solo permiso de WebXR, almacenamiento compartido). Un paquete compartido, xr-shell, le da a cada tema la misma configuración de sesión ajustada al Quest, teletransporte, fundido de confort, regulador de fotogramas y tarjeta de información flotante. La presencia corre en un Durable Object por sala sobre WebSockets, y la voz va de par a par por WebRTC, señalizada a través de esa sala.

Decisiones destacadas

  • Códigos cortos de tres o cuatro letras (vrtor.io/mpc, vrtor.io/bdy), con la palabra completa como alias, porque es lo que de verdad alcanzas a escribir con un visor puesto.
  • Un Worker por tema detrás de service bindings. Un tema roto no tumba a los demás y cada uno se despliega por su cuenta.
  • El regulador de fotogramas y el fundido de confort viven en el shell compartido, así que cada tema nuevo arranca cómodo en un Quest en vez de arreglarse escena por escena.
  • Las salas admiten 12 personas y el resto pasa a salas numeradas. Los avatares son baratos (seis draw calls, un material compartido) y desaparecen con la distancia.
  • El micrófono sigue apagado hasta que eliges Hablar, las voces se apagan a los 30 m y silenciar a alguien solo lo silencia para ti.
  • Datos abiertos donde existen, como BodyParts3D para la anatomía, con los créditos junto a los recursos.

Estado

En línea en vrtor.io y creciendo cada semana. Espacio, Apolo 11, el Wright Flyer, Orca, Paracaídas, la Cybertruck, el Roadster, el Taj Mahal, Machu Picchu, el cuerpo humano, fundamentos de IA, la célula y Sound Lab ya están abiertos, y Mecánica, Matemáticas y Naturaleza vienen después.

¿Tienes un sistema que modernizar, una idea de IA que validar o un puesto senior que conversar?

Normalmente respondo en un día laborable.