Construyendo el Metaverso Interconectado y Traversable

Rate this content
Bookmark

Basado en gran medida en Free Association en el Metaverso - Avaer @Exokit - M3, Avaer demostrará algunas de las formas en que los estándares abiertos permiten la travesía abierta y gratuita de usuarios y activos en todo el metaverso interconectado.

This workshop has been presented at JS GameDev Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

El Metaverso se refiere a un universo virtual donde los usuarios pueden interactuar con ambientes y otros usuarios. Relacionado con la web, significa que estos mundos virtuales se pueden acceder y gestionar a través de tecnologías de navegador estándar, utilizando APIs de navegador para cargar activos desde cualquier parte de la web, lo que facilita un entorno abierto y accesible.

Exokit es un navegador que fue desarrollado para explorar y utilizar las capacidades del Metaverso a través de la web. Permite a los usuarios acceder y interactuar con contenido virtual directamente desde el navegador, aprovechando la tecnología de código abierto para crear y experimentar mundos virtuales.

Los activos en el Metaverso se pueden cargar utilizando una API de navegador web estándar para acceder a contenido de diferentes fuentes como IPFS, GitHub y otros sitios web. Esto se logra mediante un motor de traducción que utiliza JavaScript para cargar activos a través de URLs, facilitando así la importación de elementos virtuales en el Metaverso.

Totem es la tecnología utilizada para hacer traducciones y conexiones de activos al motor de juego en el Metaverso. Funciona identificando URLs y utilizando plantillas y generación de código para convertir activos en versiones 3D que pueden ser integradas y operadas en entornos virtuales, promoviendo un sistema abierto y modulable de creación de contenido.

Desarrollar el Metaverso en la web ofrece ventajas como la accesibilidad universal, la capacidad de usar código abierto, y la interoperabilidad entre diferentes dispositivos y plataformas. Esto permite una mayor facilidad de uso, innovación y colaboración en la creación de experiencias virtuales.

Los NFT se integran en el Metaverso mediante URLs que pueden apuntar a direcciones de Ethereum, permitiendo cargar y utilizar activos NFT directamente en ambientes virtuales. Esta integración se facilita utilizando tecnologías web estándar, lo que permite a los usuarios interactuar con sus activos NFT de forma natural en el entorno del Metaverso.

Avaer Kazmer
Avaer Kazmer
103 min
12 Apr, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El Masterclass discutió el potencial del Metaverso y los mundos virtuales abiertos en la web. Destacaron el uso de la integración de IA, proyectos de código abierto y herramientas estándar para construir un Metaverso abierto y orientado al futuro. El enfoque se centró en la optimización del rendimiento, el renderizado y la carga asíncrona, así como en la integración de NFT 3D y metadatos. El Masterclass también exploró la generación procedural, la personalización de avatares y la sincronización multijugador. Se enfatizó la importancia de la interoperabilidad y el potencial de la web como la mejor plataforma de juegos.

1. Introducción al Metaverso

Short description:

¡Echemos un vistazo! El objetivo principal es abrir tus ojos a lo que es posible en los mundos virtuales abiertos en la web. Otro objetivo es convencerte de que el Metaverso puede ser bueno. Mi objetivo personal es aprender algo hoy. He estado desarrollando tecnologías relacionadas con el Metaverso durante ocho años, constantemente sorprendido por lo que es posible en la web. Escribí un navegador llamado Exokit. Tenemos los ingredientes para importar el metaverso utilizando una API de navegador web. Todo lo que necesitas es un motor de traducción y código JavaScript para cargar activos. Estamos creando el primer videojuego distribuido del mundo utilizando Totem. Todo en el juego es un activo con una URL. En el futuro, proporcionaremos servicios como VRChat con soporte de AR y VR e integración con KaleidoKit.

¡Echemos un vistazo! Sí, otro título para esta sala podría haber sido Importar el Metaverso. Tengo algunos objetivos que espero lograr aquí. El principal es simplemente abrir tus ojos, tal vez a lo que es posible en los mundos virtuales abiertos en la web. Un objetivo desafiante es convencerte de que el Metaverso puede ser bueno. Sé que hay mucho escepticismo y controversia al respecto en estos días. Y mi objetivo personal es, no sé, espero aprender algo hoy.

He escrito algunas notas de guion que quería cubrir, pero espero que cualquier persona que tenga preguntas sobre las cosas locas de las que voy a hablar, simplemente participe. Me encantaría profundizar en las partes que a la gente le parezcan más interesantes.

Así que un poco de antecedentes sobre mí, he estado desarrollando tecnologías relacionadas con el Metaverso durante unos ocho años. Y todo eso ha sido en la web. Básicamente comencé en la web y nunca me fui. Y constantemente me sorprendía de lo que podía hacer simplemente utilizando lo que está disponible en el navegador. Las herramientas de código abierto que ya existen, solo para crear experiencias, mundos e incluso mis propios navegadores.

Escribí un navegador llamado Exokit. Me sorprendió mucho que todo esto sea posible en una tecnología abierta como la web. Básicamente, cualquier persona puede alojarlo, cualquier persona puede experimentarlo en cualquier dispositivo. Y parece que yo era la única persona que lo estaba haciendo. Cada vez que mostraba una de las nuevas y geniales cosas que había creado, ya sea el navegador funcionando en Magic Leap o algunos emuladores inmersivos de N64 que escribí que básicamente te permiten jugar Legend of Zelda en tu HTC Vive en el navegador, utilizando WebVR. Eso es lo que se llamaba en ese momento.

Así que básicamente empecé a frecuentar a todas las personas que pensaban que, como, wow, esto es realmente genial, como no sabía que esto era posible. Y sí, comenzamos a construir esta caja de herramientas tecnológicas con todas estas cosas diferentes que hemos estado lanzando básicamente de código abierto desde el primer día y trabajando juntos en ellas. Y eventualmente, lo que comenzó a parecer era que básicamente teníamos los ingredientes para, entre comillas, importar el metaverso, lo que significa que puedes usar una API de navegador web estándar para cargar activos desde cualquier parte de la web. Desde diferentes lugares, incluyendo, por ejemplo, IPFS, el alojamiento en GitHub, básicamente cualquier sitio web, o incluso cosas como NFT.

Y resulta que esto en realidad no es tan difícil de hacer. Lo único que realmente tienes que hacer es agregar un motor de traducción que pueda tomar una URL y luego escribir algún código JavaScript que pueda cargar ese activo. Entonces, lo que estás viendo aquí, básicamente todo esto es solo una declaración de importación en JavaScript. Así que esto es en realidad un archivo GLB. No estoy seguro si es un archivo GLB o se genera de forma procedural. Este es un archivo JSON que describe esa pistola y hace referencia a todos los activos y el propio personaje es un archivo VRM que acabamos de importar al mundo. Y la forma en que funciona es que en realidad tenemos un sistema en el backend que toma esas URL y básicamente utiliza plantillas y alguna generación de código inteligente para darte un cargador. Para el frontend que te dará la versión 3D de ese activo. Y eso se conecta a través de algunas API al resto de un supuesto motor de juego, que proporciona los servicios que necesitarías para algo así, donde puedes caminar, interactuar con el entorno. Puedes hacer que las cosas te sigan Y puedes tener un inventario que puedes equipar en ti mismo.

Así que básicamente comenzamos a conectar todas estas cosas y nos dimos cuenta de que, hey, en realidad estamos creando posiblemente el primer videojuego distribuido del mundo donde todos estos activos están simplemente conectados utilizando un cliente en el que todos estamos de acuerdo en usar. Entonces, esa tecnología que estamos utilizando para hacer todas estas traducciones y conectarla al motor de juego. Terminamos llamándola Totem, porque básicamente estamos tratando de desarrollar una cultura de crear arte a partir de los ingredientes crudos de la web. Y básicamente estamos uniendo cosas. Las cosas se importan. Interactúan entre sí. Y básicamente estamos apilando arte juntos. Estamos creando estos tótems virtuales en cierto sentido. Todo en el juego es un activo con una URL y eso incluso puede ser un archivo local si lo estás alojando localmente. Yo lo estoy haciendo ahora mismo. Puede ser algo en un repositorio de GitHub, IPFS o, como mencioné, incluso NFT si solo quieres apuntarlo a una dirección de Ethereum. Sí. Y en el futuro, hay muchas cosas realmente locas que podremos hacer una vez que tengamos este juego base funcionando. Una de las cosas es proporcionar servicios simples para recrear el software que a mucha gente le encanta, como VRChat. Donde básicamente tienes tu avatar, que puede animarse. Tiene expresiones faciales. Tienes espejos y pronto también tendremos soporte de AR, así como soporte de VR e integración con KaleidoKit.

2. Construyendo Mundos y Creando Relaciones Espaciales

Short description:

Esto nos permite construir mundos y atravesarlos, creando relaciones espaciales. Las escenas pueden estar contenidas unas dentro de otras, proporcionando un nivel de detalle sin ruido de fondo. La calle es una representación direccional de los mundos virtuales, con diferentes secciones de contenido. Los metadatos definen elementos del juego como misiones. Nuestro objetivo es construir el primer videojuego distribuido, utilizando tecnología de código abierto. Utilizamos three.js, CryEngine y PhysX para el renderizado. React se utiliza para la interfaz de usuario. Admitimos arrastrar y soltar y animaciones suaves. Nuestra caja de herramientas tiene como objetivo hacer que estos elementos funcionen juntos sin problemas.

Entonces, básicamente, esta es una forma en la que puedes usar tu cámara web para v-tubear tu avatar aquí al lado. Y otra cosa que esto nos permite hacer es construir mundos para poder atravesarlos y compartir en el sentido de que tengo alguna forma de identificar dónde estoy en este supuesto metaverso. Y puedo ir a tu lugar y podemos tener una relación espacial entre esos dos lugares.

Entonces, en realidad, esto todavía es un poco problemático, pero voy a hacerlo un poco más manejable. Porque estamos cargando todo a través de estas declaraciones de importación estructuradas, nos permite básicamente tener una escena contenida dentro de otra escena. Y que las escenas sean un concepto de primera clase que puede ser, por ejemplo, capturado... para que puedas obtener vistas previas de la escena y básicamente obtener un nivel de detalle de un activo distante sin tener que lidiar con el fondo de la escena.

Entonces, ahí lo tienes, la escena perfecta que se ha creado para una escena y básicamente obtener un nivel de detalle de un activo distante sin tener que ir allí. Entonces, lo que va a suceder ahora es que este es un lugar que llamamos la calle. Básicamente, se supone que es una representación direccional de los mundos virtuales, y cada sección de la calle tiene un contenido diferente. A medida que me acerco, lo que debería hacer en realidad es cargar esa escena, tomar una captura de pantalla virtual en 3D y luego darme una versión de baja resolución que está LOD antes de que siquiera vaya allí. Esto es básicamente sí, así que en realidad tengo que apagar la niebla allí. Pero lo que realmente hizo es que todo eso es código JavaScript que se ejecutó al lado y básicamente te dio un poco de detalle. Si apagas la niebla, incluso verías que está completamente texturizado.

Y lo que también vamos a hacer para mejorarlo es usar marching cubes para dar básicamente una malla 3D completa con textura del mundo virtual que estará allí cuando vayas. Y, por supuesto, puedes simplemente ir allí y ahora estás en alguno de estos mundos virtuales. Otra cosa que esto nos permite hacer es usar metadatos para definir los tipos de cosas que querrías en un juego video, como por ejemplo, misiones. En este mundo, en realidad hay una misión. Dice: destruye a todos los Reavers en el área y hay una recompensa de algún activo virtual. Así que si puedo encontrarlo, no estoy seguro de dónde está. Esto podría estar roto, pero también tenemos un sistema de búsqueda de ruta para geolocalizarte en el mundo virtual para que puedas localizar tu objetivo. Y luego, si hay algunos Reavers, puedes ir y matarlos y obtener tu seda virtual, lo que eso signifique. Así que todo esto en realidad es de código abierto. Y nuestro objetivo es básicamente construir el primer tipo de juego video distribuido. Cualquiera puede bifurcar estas cosas. Y una de mis prioridades en este momento es en realidad conectar todas las diferentes comunidades virtuales que ya han comenzado a construir sobre esto. En cuanto a la tecnología en el renderizado, en términos de motor, muchas de las cosas son cosas que construí y muchas de ellas son solo código de código abierto. Como por ejemplo, todo es three.js. Hay un gráfico de escena. No hay nada realmente loco en lo que estamos haciendo, excepto que usamos los shaders de Bloom y SSAO de Unreal Engine. Lo siento, no es Unreal. Este es CryEngine. Pero eso es lo que da a los mundos. Si defines correctamente la configuración de renderizado, este efecto brumoso realmente agradable. Usamos PhysX, que es el mismo motor PhysX que todos están usando, incluido Unity. Está integrado en WebAssembly y lo estamos cargando de esa manera. Para la interfaz de usuario, simplemente estamos usando React, aunque hay mucho WebGL, por ejemplo, para renderizar este tipo de paneles y estos diferentes shaders. En realidad, todo es solo código de react bajo el capó. El IK del avatar es en realidad un proyecto de Unity de código abierto que portamos a JavaScript. Así es como obtienes todas las diferentes animaciones suaves y básicamente la capacidad de animar cualquier personaje independientemente de cuál sea su activo. De hecho, déjame mostrarte un poco de reorientación de animaciones. Vamos a cambiar de personaje. Esto está utilizando exactamente las mismas animaciones, pero el personaje todavía funciona. Igual que antes. También admitimos arrastrar y soltar en este juego. Si tienes tus propios activos virtuales, puedes arrastrarlos. Eso se carga en un servidor y luego se descarga nuevamente. Si quieres soltarlos en el mundo, puedes hacerlo. Y si es un avatar, puedes usarlo. Y básicamente, estamos tratando de construir el mejor conjunto de herramientas del mundo que conocemos para hacer que este tipo de cosas funcionen juntas en el contexto de un juego video.

Watch more workshops on topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.

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

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
¡Mejora el rendimiento de tus juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el rendimiento de tus juegos WebGL Unity!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Mejora el rendimiento de tus juegos utilizando Canvas
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Mejora el rendimiento de tus juegos utilizando Canvas
The Talk discusses the use of the canvas element in games and web applications to improve performance. It compares the Canvas API and WebGL API, highlighting the advantages and disadvantages of each. The Canvas API allows for both CPU and GPU rendering, while WebGL API only uses GPU and hardware acceleration. Using the canvas element can significantly enhance performance, but it comes with increased complexity and development costs.