Crear Entorno de Realidad Virtual Colaborativo en el Navegador con React y GraphQL

Este es el final del video. Gracias por ver. Nos vemos en el próximo video.

Hasta entonces, que tengas un buen día. Y como siempre, gracias por ver.

Aquí está mi Twitter. Gracias por ver. Que tengas un buen día. Adiós. Gracias. Que tengas un buen día. Adiós. Adiós. Gracias. Que tengas un buen día. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós.

Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós.

Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Adiós. Entonces, ¿cuáles son nuestras soluciones hoy si queremos crear algún tipo de experiencia de realidad virtual? Y estoy usando Chrome aquí, y seguiremos usando VR. Entonces, con webVR y webXR, si no tienes webXR habilitado en el navegador, se establece por defecto a un entorno en 3D, y experiencias similares a juegos, y así sucesivamente. Lo cual también es bueno, y es agradable. Lo veremos hoy.

Entonces, con webVR y webXR, en realidad puedes obtener la posición de tu sensor, puedes obtener tu posición de auricular, y en base a eso, puedes interactuar con la interfaz de usuario. Para eso, puedes usar diferentes herramientas. Una es para desarrollar eso. Una es Aframe, que es una increíble biblioteca y una gran comunidad que básicamente envuelve, como, 3GS y te brinda muchas capacidades, como física, efectos de partículas, movimiento, controladores, transmisión, lo que sea. Muchas cosas. Y realmente puedes crear experiencias complicadas con eso, solo usando su llamado sistema de componentes NT y usando JavaScript. Ahora, si usa JavaScript, obviamente, también podemos integrarlo en React, y hoy veremos cómo se hace. Otra opción es simplemente volver a las mejores prácticas en términos de motores de juegos. Entonces podemos usar Unity game engine y desarrollar algo en C-Sharp, o podemos usar Unreal Engine y desarrollar en C++, o su llamada característica, característica llamada Blueprints. Pero no estamos aquí para hablar de Unreal Unity, así que estamos aquí para hablar tanto de A-Frame como de React 360. Principalmente sobre React 360. Entonces, continuemos.

Echemos un vistazo a A-Frame y veamos los ejemplos de experiencias que puedes obtener. No tengo habilitada la VR aquí porque estoy en Chrome, pero aún puedo navegar por el entorno presionando las teclas de flecha y simplemente mirando alrededor de esta pared de formas básicas, ¿verdad? Así que esta es una experiencia agradable, pero es muy simple, ¿verdad? Quiero ver algo más complejo. Entonces, para algo más complejo, entremos en un directorio de diferentes ejemplos. Uno de esos ejemplos es un mundo similar a Minecraft, bloques de RV, puedes recorrerlo, navegar Y es bastante impresionante lo que puedes hacer solo con el poder de A-Frame y JavaScript, ¿verdad? Puedes obtener todas estas cosas geniales aquí. Aparte de eso, echemos un vistazo a algo más complejo, algo más como Beat Saber tipo de cosa, si has jugado en el Quest u otros dispositivos, así que podemos obtener algo como esto también desarrollado en A-Frame. Creo que es bastante agradable, también la música es agradable aquí. Definitivamente no puedes crear algo así en React 360. Entonces, con A-Frame puedes hacer experiencias realmente asombrosas e hipnotizantes, ¿verdad? Bastante genial lo que puedes hacer con eso. Ahora, lo que utiliza A-Frame. A-Frame utiliza sistemas de coordenadas. No solo A-Frame.

Básicamente, todos los entornos 3D utilizan sistemas de coordenadas y uno de estos... Este sistema es básicamente ya sea zurdo o diestro. Y la idea es que si tomas tu mano y señalas con el dedo medio hacia ti, entonces el eje Z estará apuntando hacia ti. Esto significa que el eje X positivo estará a la derecha y el eje X negativo a la izquierda lado. Si necesitas posicionar algo frente al espectador, será menos Z y así sucesivamente. Por lo tanto, utilizamos sistemas de coordenadas diestros.

Entonces, cuando veas coordenadas, ten en cuenta que tendremos estos sistemas de coordenadas, tanto en A-Frame, en React 360, y así sucesivamente. La dirección X también cambia cuando se aplica una rotación, por lo que si rotamos algo hacia la derecha, entonces todos los X cambian, y debemos tener esto en cuenta.

A-Frame utiliza un sistema de entidad-componente, lo que significa que consta de entidades, componentes, y sistemas. Las entidades son contenedores a los que se pueden adjuntar componentes. Entonces, cuando veas el código, se parece más a que las entidades son como componentes de React, los componentes son como props, y los sistemas son los sistemas globales como servicios y cosas así. La razón por la que es así es porque en los motores de juegos, el sistema de entidad-componente es un patrón bastante común, y A-Frame imita ese sistema. Unity también utiliza el sistema de entidad-componente, por lo que es bastante similar.

Si observamos el código de A-Frame, veremos algo como esto. Vamos a verlo. Esto acaba de cargarse, así que puedo navegar y tener estas formas básicas. Como puedes ver, solo necesito importar A-Frame, agregar un montón de estilos, y luego esto es el componente de escena, estos son componentes de activos, entidad. Lo llamo componente pero en A-Frame, se llaman entidades, y como, fondo, niebla, y escala, rugosidad, segmentos de ancho, todos esos son componentes. Es un poco confuso porque en React estamos acostumbrados a que todo sea un componente, ¿verdad? Y estos son props, pero en A-Frame, en la documentación, verás que estos son entidades y estos son componentes. El punto principal de mostrar esto es que puedes ver fácilmente que puedes tomar esto y abstraerlo en un componente de React y comenzar a usarlo. ¿Correcto? Entonces, hay una biblioteca de React A-Frame, pero no estoy seguro de que se mantenga, creo que no se ha mantenido durante un tiempo. Entonces, puedes crear tus propios envoltorios y, como puedes ver, es bastante sencillo aquí pasar diferentes datos a ellos, y así sucesivamente.

¿Y qué hay de React 360? Entonces, React 360 está diseñado para interfaces de usuario en 360 grados, de ahí el nombre. La idea principal es que no creas estas experiencias sofisticadas. No te mueves. Solo miras las pantallas curvas e interactúas con las pantallas curvas en realidad virtual o en general en un entorno 3D en la web. Por lo tanto, la arquitectura de React 360 se basa en la arquitectura de React Native. Tenemos React ejecutándose en un trabajador web. Cuando inicializas un nuevo proyecto, verás un index.js. Este código no tiene acceso a las API del navegador.

Simplemente se ejecuta en un trabajador web. Tenemos un puente de React nativo que utiliza MessageQueue para pasar todos los mensajes asíncronos al navegador, a client.js. Ahora, en client.js, es necesario definir módulos nativos, que básicamente tienen acceso a las API del navegador. Para comenzar, ejecutas npx React 360 CLI init. Obtendrás tu aplicación de demostración y luego obtendrás este tipo de componentes. Este es client.js, el que tiene acceso a las API del navegador. Tienes la función init, tienes una serie de creaciones de instancias de React y pasas un montón de cosas, como obtener superficies predeterminadas, establecer el fondo de todo el entorno, y así sucesivamente. Veremos ejemplos más complicados aquí, pero esto es lo que obtendrás una vez que crees un nuevo proyecto.

Ahora puedes renderizar algo en diferentes superficies. Hay varios tipos de superficies. Las más importantes son el cilindro y el plano. En realidad, se supone que este es un cilindro, pero de todos modos. El cilindro te rodea y al renderizar algo encima de este cilindro, tendrás algo curvado frente a ti, por lo que se verá mejor en la interfaz de usuario. Es la mejor práctica en la experiencia de usuario de RV, en el diseño de RV, colocar interfaces de usuario planas en superficies curvas para que se vea más natural, por así decirlo. Y si colocas una superficie plana, simplemente es una superficie plana que puedes posicionar como desees, como establecer un ángulo, y eso es todo.

Para interactuar con el navegador, es necesario definir diferentes módulos nativos. Así es como podemos definirlos. Importamos el módulo de Reactor 16. Simplemente definimos una clase aquí, y tenemos el estado del juego y el ID del juego y el ID del usuario. Y entenderás un poco qué es este estado del juego porque se relaciona con la demostración que mostraré al final de la charla. Luego registras estos módulos y los registras agregando una matriz de módulos nativos aquí y agregando una función que obtendrá el contexto. Y puedes devolver un nuevo módulo de juego, pasando el contexto de vuelta. Así puedes usar el contexto para pasar devoluciones de llamada y demás. Es algo muy interesante que puedes crear diferentes superficies, puedes crear el módulo de juego para compartir básicamente tu lógica entre diferentes superficies, porque se renderizan en diferentes lugares, básicamente. En el lado de React, se utilizan componentes regulares de React y se utilizan diferentes componentes proporcionados por React 360. Por ejemplo, tienes el botón de RV y tienes diferentes devoluciones de llamada para eso, como al entrar, al salir, al hacer clic. Ahora, en RV, tienes un concepto general en entornos 3D. Tienes un concepto de raycasting. Cuando proyectas un rayo invisible que va en una dirección específica, cuando golpea el objetivo, devolverá el objetivo que golpeó.

Al tratar con controladores de RV o auriculares de RV en general, se proyecta un rayo desde la cámara o se proyecta desde el controlador, y golpea el botón o golpea el objetivo o golpea algo así. Entonces, en React 360, el botón de RV hace eso internamente. Si simplemente miras el botón en RV, depende del auricular o apuntas con un controlador y entras en el espacio del botón con el retículo del controlador, entonces se activará al entrar o se activará al salir si lo abandonas. Es como en el evento mouse enter o mouse leave, pero en RV.

Tenemos nuestro componente aquí, GameTile, y eso es todo. Es bastante similar a React Native. Tenemos vistas. Tenemos diferentes estilos que podemos proporcionar para los botones. Hay estilos específicos para la posición y demás. Podemos animar usando Animated, similar a React Native, y básicamente usar prácticas que conocemos y hemos estado utilizando durante varios años.

Entonces, ¿qué pasa con los data? ¿Cómo podemos integrar los data en nuestro entorno de RV? Y además de eso, ¿cómo podemos hacerlo en tiempo real? Estamos hablando de entornos de RV colaborativos. Necesitamos traer algunos data. Necesitamos tener los data actualizados constantemente, y así sucesivamente.

Para eso utilizaremos GraphQL. GraphQL, como probablemente todos saben, es un lenguaje de consulta para la API, y es como magia que simplemente funciona. Estoy realmente apasionado por GraphQL. Hablo mucho sobre GraphQL, así que esta charla no es diferente. Hablaremos de eso también.

La idea con GraphQL es que podemos enviar una solicitud al servidor y obtener todos los data que necesitamos, y la forma de los data será la misma que solicitamos. Nos brinda muchos beneficios al tener los data cuando los necesitamos y en la forma que necesitamos, y tener toda la introspección de lo que está sucediendo en el servidor.

Así es como se ve GraphQL en un entorno de sandbox, bastante simple. Y debajo del capó, enviamos la consulta y obtenemos los data de vuelta. La consulta se envía en formato de cadena con variables, y obtenemos los data en formato JSON. Ahora esto es más como un formato realista, cómo se verá en producción. Esto es como una API de Star Wars. Tenemos diferentes directivas, tenemos variables, tenemos diferentes tipos, así que GraphQL se trata de tipos. Entonces sí, GraphQL es increíble, y también lo usaremos en nuestra charla.

Entonces, ¿qué hay de la arquitectura y especialmente cómo arquitectar algo colaborativo, ¿verdad? Muchas cosas sucediendo de forma asíncrona. Tenemos diferentes APIs de terceros, tenemos muchas partes móviles y obviamente, en cuanto a la arquitectura , necesitamos pensar más en términos de microservicios o arquitectura.

Entonces, teniendo diferentes microservicios aquí y APIs de terceros y todo combinado en una fachada GraphQL que devolverá todo de vuelta. Y la mejor práctica en mi experiencia es utilizar algo llamado arquitectura de tres factores hacia arriba. Y la arquitectura es algo similar a eso.

Tienes una aplicación que se comunica con la API GraphQL en tiempo real. Actualiza algún tipo de estado en la base de datos o donde quieras y desencadenará eventos. Ahora, los eventos desencadenarán una función serverless que actualizará el estado y básicamente hará el procesamiento que necesita. Y cuando se actualiza el estado, todo se propaga de vuelta al cliente utilizando suscripciones.

Entonces, para nuestro ejemplo, utilizaremos Hasura, que es un motor de código abierto y gratuito, que proporciona una API en tiempo real generada automáticamente, y se basa en PostgreSQL nuevo y existente. Y tiene muchas características de las que no hablaré ahora, pero puedes leer eso después de la charla en las diapositivas. Hay muchas y muchas características. Esto es solo la punta del iceberg.

Para ver en acción nuestro entorno, podemos ir a la consola de Hasura y ver algo como esto. Podemos tener, tenemos un juego con muchos movimientos sucediendo. Podemos ver estos movimientos, como si se estuviera ejecutando una suscripción, y obtenemos muchos datos de vuelta. Esta es una suscripción que estoy llamando. Y siempre puedo insertar un nuevo movimiento y esto se actualizará. Ahora, de lo que se trata esto, este backend sirve a esta demostración.

Básicamente, tengo un juego de tres en raya y aquí tengo un montón de... Puedo cambiar mi fondo, puedo cambiarlo de ser una cuadrícula a ser un fondo de Skyrim. Puedo tener un chat, puedo desplazarme en este chat. Lo más genial aquí es que tenemos suscripciones en su lugar, y todo es en tiempo real. Por ejemplo, si hago clic en algo aquí, verás que esto se actualizó. Y déjame hacer clic aquí de nuevo, tengo otro movimiento actualizado aquí. Ahora, a su vez, si voy y lo detengo, ejecutará un movimiento. Digamos que tenemos una fila número 0 y columna 2. Escribamos movimiento aquí, 0, 2. Insertamos un movimiento. ¿Qué pasará? Oh, sí, es como una carrera.

Comienza desde 0. Así que tenemos este agregado, o agreguemos otro, insertar movimiento. Y verás que todo se actualiza en VR y en tiempo real. Esto es bastante genial, cómo podemos hacer esto con React 360 y Hasura juntos y crear este tipo de entorno.

Y también, podemos chatear aquí. El código está en GitHub. Así que puedes revisar el código. Vamos a echar un vistazo rápido a eso. Pero puedes revisar más de cerca el código y comentar sobre eso, y así sucesivamente.

Entonces, cómo agregamos cosas a VR, cómo agregamos cosas, por ejemplo, aquí en A-Frame, básicamente agregamos Apollo, Apollo Provider. Tenemos nuestro enlace HTTP. Tenemos un enlace WebSocket. Y envolvemos todo con Apollo Provider.

Ahora aquí, en el ejemplo de A-Frame, se ve bastante feo, porque A-Frame no está diseñado para algo como esto. Está diseñado más para juegos e interacción. Así que hice las otras cosas alrededor. El juego de tres en raya era un juego en React 360. En A-Frame, es como una lista de publicaciones de blog en A-Frame. Tal vez sea un mal ejemplo. Pero de todos modos, puedes ir a las publicaciones aquí, y obtendrá la suscripción, obteniendo todos los datos de vuelta. Y puedes ver que puedes actualizar muchas cosas. Hay diferentes puntos finales, por lo que verás cosas diferentes aquí. Así que puedes jugar con eso después de la charla.

¿Cómo agregar cosas a React 360? Agregas un proveedor de encuestas. Agregas nuestro tablero de juego. Y básicamente, ejecutas suscripciones. Ejecutas consultas.

Ahora, antes de finalizar esta charla, echemos un vistazo rápido al código aquí. Y aquí vemos nuestro client.js. Y client.js tendrá múltiples cosas.

Tendremos superficies cilíndricas que renderizarán todo el tablero de juego. Y tenemos nuestro panel de chat de VR que se renderizará en el lado derecho de las cosas y la reunión del juego que se renderizará en el lado izquierdo donde puedes cambiar el fondo. Y toda la lógica se realiza a través de los módulos nativos.

Aquí tenemos un módulo nativo llamado GameModule, y se compartirá más adelante. No ahora, pero se puede compartir entre estas instancias y otras instancias aquí. Sí, se puede compartir en todo el conjunto.

También podemos ver Index.js. Index.js está registrando múltiples componentes. Ahora tienes que registrar un componente, VRChatPanelComponent, para usarlo o GameGallery. Tienes que registrarlo, porque son diferentes raíces. Y básicamente, envuelves cada uno de ellos con un envoltorio polar. Y puedes usar suscripciones en su interior.

Entonces aquí puedo renderizar en negrita. Y la idea principal del renderizado en negrita es que tengo la matriz por la que paso y básicamente ejecuto mutaciones cada vez que hago clic. Una advertencia, el React 360, desafortunadamente, no se ha actualizado a la versión más reciente de React. Así que desafortunadamente no podemos usar hooks. Todavía usamos el método antiguo de render props con mutaciones y tienes un montaje de componentes y todas esas cosas. Espero que los hooks estén disponibles pronto, pero no depende de mí. Así que cuando esté listo, estará listo. Mientras tanto, puedes usar A-frame fácilmente con hooks y contexto y todas las nuevas características de React simplemente agregando componentes de A-frame y así sucesivamente.

Así que volvamos aquí, y antes de terminar, quiero agradecer, en primer lugar, gracias, gracias al organizador de la Cumbre de React por invitarme, y quiero animarte a adentrarte en VR y AR probar cosas y tratar de crear estas increíbles demos que se crearon para A-frame. Crea demos increíbles para React 360. Experimenta. Juega con el código. La realidad virtual está comenzando, está llegando al navegador. Aún no es compatible en todas partes, pero lo será. Así que adéntrate en esto, trata de aprender cosas nuevas, gracias por tenerme y disfruta de la conferencia. ¡Adiós! ¡Hasta luego! ♪♪♪