Codificación de atmósfera AR/VR: uso de IA para construir prototipos de realidad inmersiva
La codificación Vibe es la palabra de moda del momento, y las herramientas de inteligencia artificial están brindando a los diseñadores de productos nuevos y enormes superpoderes, y con razón. Nos convierten a todos en “hacedores”. En este artículo, te mostraré cómo codificar dos proyectos diferentes usando Vivi: una aplicación de cocina con interfaz de usuario flotante y un juego de baloncesto XR.
Si bien Figma proporciona a los diseñadores una codificación atmosférica, este enfoque va mucho más allá de una sola herramienta. Hay un montón de herramientas increíbles que sirven para diferentes propósitos: herramientas centradas en el diseño, p. costura; Motor prototipo, p.e. Wersel, lindo, Estudio de inteligencia artificial de Googleasí como entornos listos para producción, como antigravedad o cursor. Vale la pena mencionar que incluso aquellos que clasifico como prototipos pueden enviar su código a GitHub, lo cual es un nuevo paso hacia el código listo para producción.
Después de pasar algún tiempo “codificando vibraciones” prototipos de aplicaciones web y móviles, me di cuenta de que estas herramientas también deberían poder manejar lienzos XR 3D. Esto generó un pensamiento… ¿podrían crear también un prototipo de una experiencia XR?
Definitivamente la tecnología está ahí. WebXR Es una API estándar para experiencias inmersivas en red y marcos similares. marco en A Proporciona componentes XR listos para usar que cubren entrada, primitivas, teletransportación, gestos, etc. Dado que las herramientas de codificación de IA ya pueden interactuar con bibliotecas externas, me di cuenta de que solo necesito proporcionar la intención y guiar a la IA para lograr los resultados espaciales que deseo.
Entonces, eso es exactamente lo que hice. Funcionó. De repente, podía decirle a la IA lo que quería y crearía un lienzo 3D con una cámara de seguimiento de cabeza, controladores manuales e interacciones funcionales. ¡Este es el comienzo de la codificación de vibraciones espaciales!
Mi método de codificación de la atmósfera espacial.
En la práctica, la codificación por vibración para experiencias inmersivas es similar a la codificación por vibración para dispositivos móviles o de escritorio, pero con una dimensión adicional.
Si bien no es necesario ser desarrollador para crear un prototipo de una función, cuanto más sepa sobre la pila de tecnología, más control tendrá. La codificación de atmósfera pura, que se centra únicamente en la intención sin considerar el “cómo”, es efectiva y, a menudo, es la mejor manera de evitar sesgos en la IA. Si le da libertad a un agente, normalmente encontrará el camino más eficiente. En cambio, si intentas microgestionarlo, terminarás con “dos cerebros” trabajando uno contra el otro en la misma tarea.
Sin embargo, comprender estas herramientas le permite hablar el mismo idioma que la IA, lo que mejora la velocidad y la precisión. Por ejemplo, un marco en A tiene un marco llamado Control de seguimiento manual. Si le dice a la IA que use este componente específico, generará una solución estandarizada y lista para usar que crea menos problemas que una solución personalizada.
¿Mi recomendación? Concéntrese en la intención, pero establezca “reglas” basadas en los componentes que sabe que funcionan mejor.
Estrategias motivacionales: libertad y prejuicio
Cuando se trata de proyectos técnicamente complejos, prefiero dejar que el agente principal de IA encuentre la solución en lugar de preguntar. segundo Inteligencia Artificial para refinar o “diseñar” mis indicaciones.
En mi experiencia, cuando otra IA toma mi consejo aproximado y lo “pule”, introduce sesgos. A menudo lleva al agente codificador resultante en direcciones que naturalmente no tomaría, lo que conduce a peores resultados. Obtengo mejores resultados cuando le digo a la IA que mejore las indicaciones sin dar comandos cómo para solucionarlo, o simplemente siga mis consejos originales basados en la intención.
Mensajes “basados en la intención” (exitosos en este caso)
Este es el mensaje original que creé. se centra en Quéen lugar de detalles cómo:
“Quiero que crees una aplicación de cocina MR. La aplicación debe proporcionar una experiencia de paso con un panel de interfaz de usuario representado dentro de ella. Cuando se publica la aplicación y se abre la URL en un visor de realidad virtual como Meta Quest 2 o 3, el usuario debe ver un botón estándar “Abrir en realidad virtual” en el navegador. Después de hacer clic en él, el usuario puede ingresar a la experiencia.
Utilice WebXR y A-framework. Me referiré frecuentemente a los componentes y primitivas de A-Frame, así que asegúrese de utilizar primitivas A-Frame nativas siempre que sea posible.
Asegúrese de que la interfaz de usuario se represente dentro de la experiencia de MR. Coloque el panel de la interfaz de usuario a la izquierda del usuario e inclínelo ligeramente hacia la cámara del usuario. Ahora, incluya elementos de marcador de posición en el panel: un título, una imagen y algo de texto.
El sistema de entrada debe ser seguimiento manual, utilizando el componente A-Frame raycaster. Prepare una estructura para agrupar todos los elementos de la interfaz de usuario, ya que la aplicación contendrá múltiples pantallas y navegación. Cree una interfaz de usuario utilizando primitivas A-Frame. “
resultado: Obtuve un lienzo 3D funcional, un sistema de entrada, un acceso directo y una interfaz de usuario. Aún no es perfecto, pero es una base sólida para la iteración.
Mensaje “sobrediseñado” (falló en este caso)
Luego intenté utilizar inteligencia artificial para “especializar” las indicaciones. Esta versión es demasiado estándar:
“Cree un prototipo WebXR funcional para una aplicación de cocina de realidad mixta (MR) utilizando el marco A-Frame.
1. Configuración de escena y entorno:
Inicializado para la configuración de paso AR/MR. Asegúrese de que el fondo sea transparente ( eliminado o transparente) para que los usuarios puedan ver el mundo real. Asegúrese de que el botón WebXR esté habilitado de forma predeterminada para que los usuarios puedan hacer clic en “Ingresar VR/AR” en el navegador Meta Quest 2/3.
2. Cámara y entrada:
Coloque el equipo de la cámara en la posición 0 1.6 0. Implemente controles de seguimiento manual. Utilice el componente de controles de seguimiento de manos para agregar manos izquierda y derechacomponentes. Adjunte un lanzador de rayos a la mano (configurado para interactuar con objetos de la interfaz de usuario) para que el usuario pueda señalar y pellizcar/seleccionar elementos.
3. Arquitectura de la interfaz de usuario:
crear un padreActúa como un “contenedor de pantalla” para agrupar todos los elementos de la interfaz de usuario. Esto permitirá cambiar fácilmente la visibilidad para una navegación futura. Ubicación: coloque este grupo de interfaz de usuario a la izquierda del usuario (aproximadamente x: -1, z: -1,5) y gírelo en el eje Y (aproximadamente rotación=”0 45 0") para que se incline hacia la cámara del usuario.
4. Diseño de interfaz de usuario (primitivo de marco A):
Dentro del grupo UI, useConstruya un panel como fondo (oscuro, ligeramente opaco). Agregar para la imagen del título de la receta Marcador de posición. añadir Sirve como marcador de posición para el título de la receta y la descripción. Asegúrese de que todos los elementos de la interfaz de usuario sean hijos del grupo principal y se representen correctamente en la vista MR. “
resultado: Este consejo lleva demasiado lejos al agente de IA. Terminó siguiendo estrictamente las instrucciones en lugar de encontrar una solución coherente, lo que resultó en un código roto. Es como microgestionar a un diseñador gráfico: si le dices exactamente dónde colocar cada píxel, no obtendrás su mejor trabajo.
diseño iterativo
Una vez establecidos los conceptos básicos, decidí aumentar la fidelidad. Noté algunos errores durante la sesión informativa inicial, específicamente al intentar crear interfaces de usuario complejas utilizando primitivas. Me di cuenta de que es mejor diseñar una interfaz de usuario de alta fidelidad en Figma, exportarla como PNG y luego importarla a la experiencia. Si bien una herramienta como Figma Make es un poco más difícil con sistemas de entrada de apuntar y hacer clic, es suficiente para visualizar cómo se verá una versión de producción.
Un paso más allá: interacciones complejas con Gemini 3 Pro
Para ir más allá del panel de la interfaz de usuario, elegí Gemini Pro en Google AI Studio.
Esto muestra que una sesión de 15 minutos puede producir un prototipo WebXR completamente funcional con física, mecánica de agarre y lógica de juego. La física resultante es impresionante y se siente muy fluida y realista.
Si bien este método requiere implementación a través de Cloud Run (en lugar de un simple botón Publicar), la configuración solo lleva dos minutos. El resultado es un prototipo que se puede utilizar en realidad virtual y realidad aumentada, creando transiciones perfectas entre mundos. A partir de este punto, añadir contadores, efectos de sonido o texturas es sólo una cuestión de conversación.
✨ ¡Agrega magia de nano-plátano! Al actualizar a imágenes de alta fidelidad, podemos ofrecer comunicaciones más persuasivas e impactantes.
Estos son experimentos iniciales, pero demuestran cuán accesible se ha vuelto la codificación de la atmósfera espacial. Estoy ansioso por probar este enfoque utilizando herramientas más poderosas como Antigravity, que combinadas con el último Blender o Unity MCP (Model Context Protocol) abrirán la puerta al código listo para producción (no solo prototipos).
La ganancia más importante No tan lejos herramienta Puedes caminar, pero ¿hasta dónde puedes llegar? I puedes ir Como no desarrollador. Ahora puedo concebir, diseñar y crear prototipos de juegos o aplicaciones XR por mi cuenta. Las barreras para crear realidades inmersivas nunca han sido tan bajas.
Gracias por leer y no dudes en dejar un comentario o iniciar una discusión. ¡Me encantaría saber de ti!
Codificación de atmósfera AR/VR: uso de IA para construir prototipos de realidad inmersiva Publicado originalmente en Colectivo de experiencia de usuario En Medium, la gente continúa la conversación destacando y respondiendo a esta historia.
