¡Expandamos la Realidad!

Rate this content
Bookmark

¿Cuánto tiempo llevamos viendo películas sobre la realidad y lo emocionante que se ve! Es posible que no te hayas dado cuenta, pero la realidad virtual ya está en nuestras vidas, incluso en nuestros navegadores. Cada vez hay más formas de aplicar estas tecnologías. Echemos un vistazo a la RV y RA y veamos cómo se ven en la vida real.

Vasilika Klimova
Vasilika Klimova
12 min
11 Jun, 2021

Video Summary and Transcription

Trabajo como desarrollador front-end con experiencia en tareas 3D utilizando WebGL y el framework 3DS. Exploremos la realidad virtual y WebXR, que permite una inmersión completa en un entorno digital. En la RV, podemos explorar mundos virtuales, movernos y rotar dentro de ellos, interactuar con objetos e incluso utilizar la RV para la educación. La realidad aumentada (RA) es diferente de la RV, ya que te permite ver el mundo real mientras superpones objetos virtuales. La realidad XR engloba tanto la RV como la RA, y ya es un estándar con buen soporte en los navegadores.

Available in English

1. Introducción a la Realidad Virtual y WebXR

Short description:

Trabajo como desarrollador front-end con experiencia en tareas 3D utilizando WebGL y el marco 3DS. También organizo una escuela de capacitación en línea en Luxemburgo, enseñando los conceptos básicos de la web. Vamos a explorar la realidad virtual y WebXR, que permite una inmersión completa en un entorno digital. En WebXR y WebGL, tienes tres dimensiones y seis grados de libertad, lo que permite movimientos y rotaciones a lo largo de cada eje.

Trabajo como desarrollador front-end, pero en realidad, en la escuela, soñaba con convertirme en desarrollador de juegos. Y conseguí un trabajo en una empresa Artec donde tenía diferentes tareas interesantes de 3D con WebGL y el marco 3DS.

Y en los últimos dos años organicé una escuela de capacitación en Luxemburgo y enseño a las personas los conceptos básicos de la web aquí. Y también es una escuela en línea. Así que la realidad virtual. Hoy hablamos de esto. ¿Cuánto tiempo hemos escuchado estas palabras? Creo que es bastante tiempo. Y la primera película que encontré fue en 1982, tenía efectos de 3D muy divertidos. Y ahora es mucho más interesante. Así que veamos qué tenemos ahora en los navegadores y conozcamos WebXR.

Realidad virtual. ¿Cómo entender qué es? Es cuando usas gafas, por ejemplo, o usas tu teléfono con Google Cardboard, un lugar especial donde puedes colocar tu teléfono, y tienes una inmersión total en un entorno digital, estás en un mundo virtual con tus ojos y solo ves el mundo virtual. En todo 3D y en WebXR y WebGL, tienes tres ejes, tres dimensiones y tienes seis grados de libertad. ¿Qué significa eso? Significa que tienes, en primer lugar, movimientos a lo largo de cada eje. Tres ejes, tres movimientos hacia adelante y hacia atrás, y luego tienes la capacidad de rotar alrededor de cada eje. Tenemos tres más tres, eso significa seis grados de libertad.

2. Realidad Virtual y WebXR

Short description:

Si queremos usar escenas WebGL con RV, necesitamos hacer pequeños ajustes a la posición de la cámara. El complemento de Mozilla para la emulación de WebXR es útil para el desarrollo. En RV, podemos explorar mundos virtuales, movernos y rotar dentro de ellos, interactuar con objetos e incluso utilizar la RV para la educación.

Si queremos ver cómo es la escena de ejemplo de RV, observemos la escena. En primer lugar, era una escena similar a la de WebGL, pero si queremos usarla con RV, necesitamos tener la misma escena, pero con una pequeña diferencia en la posición de la cámara.

Entonces, la cámara de RV, observaremos la escena, pero para cada ojo, debe haber una pequeña diferencia en la posición. En la parte inferior de esta diapositiva, puedes ver el complemento especial de Mozilla para la emulación de dispositivos WebXR. Puede ser muy útil para el desarrollo.

Entonces, ¿qué podemos hacer en RV? Resumamos. Solo podemos ver el mundo virtual. Podemos movernos por este mundo virtual. Podemos rotar en este mundo virtual. Vemos diferentes objetos y podemos interactuar con todos estos objetos virtuales. Así que también tenemos un ejemplo muy antiguo, cuando, creo, vimos la realidad virtual. Es cuando te pones gafas de sol en atracciones y diferentes parques. Puedes ver algunos videos especiales. Y en YouTube, también puedes ver este video y puedes usar tus gafas y ver este video con las gafas, y será como una inmersión total en un viaje así.

3. AR, XR y WebXR

Short description:

También, un sistema educativo. Lo usamos con diferentes educaciones, podría ser como un cine donde interactúas con todas estas cosas con tus manos. AR, realidad aumentada, es diferente de la RV ya que te permite ver el mundo real mientras superpones objetos virtuales. AR se puede utilizar en la educación y los negocios, proporcionando una forma más visual y comprensible de mostrar información. La realidad XR engloba tanto la RV como la RA, y ya es un estándar con un buen soporte de navegadores. Para trabajar con WebXR, también debes estar familiarizado con WebGL.

También, un sistema educativo. Lo usamos con diferentes educaciones, podría ser como un cine donde interactúas con todas estas cosas con tus manos. Mira a este chico, tiene dispositivos en sus brazos y puede hacer algo con esta herramienta. Así que hay bastantes videos diferentes con esta educación, y es como un juego para educar.

Vale, AR, realidad aumentada. ¿Qué es? ¿Cuál es la diferencia? La diferencia principal es que en AR realmente ves el mundo real. Entonces, usas otras gafas que son transparentes, y también puedes usar tu teléfono, pero miras tu teléfono con una cámara y ves algunos objetos especiales de un mundo digital a través de tu teléfono o a través de estas gafas. Entonces, con AR vemos el mundo real, podemos movernos en nuestro mundo real, podemos rotar en este mundo, y podemos ver algunos objetos adicionales del mundo virtual. Podemos interactuar con estos objetos del mundo virtual, objetos virtuales, y también podemos obtener data de algunos objetos del mundo real, como una mesa, no sé, un sofá, etc., lo que quieras. Y un ejemplo de AR también está en la educación, donde puedes ver diferentes objetos tan de cerca como nunca podrías verlos en la vida real. Por ejemplo, puedes ver esta cosa mexicana, una cosa muy antigua, y verla muy de cerca. Puedes ver a Jacondo en AR muy de cerca. Entonces, se puede usar en la educación, también en los negocios. Por ejemplo, soy una persona visual, me gusta ver todo, lo que quiero comer, me gusta un menú con imágenes, pero también puedes usarlo como un menú con objetos de AR. Podría ser una forma realmente más visual y comprensible de mostrar. Puede tener alguna aplicación especial donde puedas poner incluso para tener a veces diferentes tamaños de objetos porque quieres construir algo y entender qué tamaño necesitas, puedes verificarlo con esta aplicación.

Entonces, ¿por qué la realidad XR? Porque la RV, la RA no importa, solo XR, alguna realidad. Y por eso usamos X. Y primero debes saber que ya es un estándar, hay alguna especificación sobre los dispositivos que admiten esta tecnología. Y también tenemos un muy buen soporte en diferentes navegadores. Sí, funciona con complementos, pero en realidad el 71% de todos los navegadores son bastante buenos. Solo Safari e iPhone no admiten WebXR. Algunas herramientas especiales, generalmente las usamos para testing Android y para la emulación en el navegador podemos usar este complemento, que mencioné antes. Para el desarrollo de iPhone, puedes usar 8 servidores de pared y construir con él ya ahora para iPhone algunas aplicaciones. Y también hay una aplicación WebXR Viewer. La buena noticia es que cuando necesitas hacer algo con la tecnología WebXR, también necesitas saber WebGL. Ya sabíamos algo sobre WebGL. Puedes verificar en mi sitio web, mi presentación sobre WebGL y el marco 3GS. Entonces, algunas cosas básicas sobre 3D y WebGL. Lo principal en este tema es que hay una escena que es como un contenedor.

4. Creando Escenas y Sesiones XR

Short description:

Puedes crear una escena con objetos, una cámara y una función de renderizado para dibujar todo en la pantalla. En XR, debes verificar el soporte del dispositivo, iniciar una sesión XR, ejecutar la función de renderizado en un bucle para una escena animada y finalizar la sesión XR. Se recomienda utilizar un marco de trabajo para facilitar el desarrollo. Visita mixedrealitymozilla.org para obtener más ejemplos de WebXR. Recuerda disfrutar del mundo real con amigos y familiares.

Puedes colocar todo en la escena y luego verlo desde tu navegador, desde Google, desde gafas, no importa desde dónde. Entonces, la escena es el paso básico. Luego colocas todos los objetos allí. Luego necesitas una cámara, porque la cámara en realidad son tus ojos, es el lugar desde el cual miras esta escena. Y la cámara puede moverse cuando te mueves, por ejemplo. Y también hay algo importante, es el renderizado, es lo que llamamos, lo que convierte toda esta escena digital en píxeles y dibuja todo en nuestra pantalla.

Así que podría ser interesante, puedes visitar el sitio web para obtener más información al respecto. Si hablamos de XR, entonces aquí en realidad, lo principal, lo que necesitas es, en primer lugar, verificar si tienes soporte para dispositivos XR y luego puedes iniciar una sesión XR. Puede ser una sesión de RV o una sesión de RA. Luego ejecutas el renderizado, por lo que dibujamos tu escena y siempre lo hacemos en un bucle porque necesitas ver una escena animada y luego necesitas finalizar la sesión XR.

Entonces, si quieres comenzar, es mejor siempre usar un marco de trabajo, el marco de trabajo más famoso, porque es mucho más fácil para ti comenzar. Aquí tienes un pequeño ejemplo de mi escena WebXR. Es realidad aumentada en mi casa. Hay un chico bailando y ahora comencé a lanzarle tomates. Solo un ejemplo divertido. Un poco de código y puedes verificarlo con el código QR. Si quieres aprender más sobre WebXR, visita el sitio web mixedrealitymozilla.org. Tienen muchos ejemplos y puedes ver cómo funciona. Es divertido. Pero no olvides que el mundo real tal vez no sea el mejor lugar, pero es un lugar muy interesante para vivir y ser feliz con nuestros amigos y familiares. Echa un vistazo a este curso si estás interesado en WebXR. Solo inténtalo. Es interesante. Muchas gracias y espero que lo hayas disfrutado. Adiós.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Exploring AR Try-On with React Native
React Summit 2022React Summit 2022
20 min
Exploring AR Try-On with React Native
React Native can be much more than a toolkit for building mobile UIs in JavaScript. We’ll explore how to use features beyond the core library, and use the built-in native module system to integrate AR capabilities into your mobile app.
Gaming the System: How Video Games Can Help us Create More Effective Virtual Teams
DevOps.js Conf 2022DevOps.js Conf 2022
7 min
Gaming the System: How Video Games Can Help us Create More Effective Virtual Teams
What does Conway's Law have in common with the video game League of Legends? They can both teach us about how to organise development teams that achieve collective intelligence. When it comes to the art of software development, it's never a game of chance
Create Collaborative VR Environment in the Browser with React and GraphQL
React Summit 2020React Summit 2020
26 min
Create Collaborative VR Environment in the Browser with React and GraphQL
Virtual Reality gives us an ability to experience virtual worlds from the comfort of our homes. But it doesn't have to be experienced alone. In this talk we will see how we can use React, WebVR and GraphQL to create social VR experience in the browser.