Charla junto al fuego con Ahad Shams

Rate this content
Bookmark

El metaverso abierto e interoperable y por qué Webaverse cree que la Web es el mejor medio para ello. Cómo esto dará lugar al desarrollo de juegos / 3D en la web.

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

FAQ

WebAverse es un proyecto que busca transicionar de la web 2D a una web 3D, facilitando que incluso los no desarrolladores puedan crear sus propias experiencias en un espacio más inmersivo y espacial. El objetivo es democratizar y descentralizar la creación de contenido 3D en la web.

Avier es el cofundador de WebAverse, previamente fue ingeniero fundador de Webflow y lanzó el primer navegador de realidad virtual de Magic Leap. Ha trabajado extensamente en tecnologías relacionadas con la web y ha contribuido al desarrollo de WebAverse a través de su experiencia en realidad virtual.

Para WebAverse, la interoperabilidad es crucial y se logra mediante el uso de estándares abiertos como GLB, GLTF y VRM para avatares, asegurando que los elementos desarrollados sean compatibles y transferibles entre diferentes plataformas y sistemas.

WebAverse enfatiza la privacidad mediante la implementación de tecnologías que permiten verificar el código fuente, asegurando que las herramientas y plataformas sean abiertas para auditorías públicas y manteniendo un enfoque transparente en sus desarrollos.

Sí, WebAverse es de código abierto, lo que permite a los desarrolladores y usuarios modificar, mejorar y personalizar sus plataformas. Esto fomenta la innovación, el aprendizaje entre pares y la rápida adaptación y mejora de las herramientas disponibles.

WebAverse utiliza tecnologías como WebGL y WebAssembly, y está explorando WebGPU para mejorar el rendimiento. Estas tecnologías permiten ejecutar experiencias 3D de alta calidad directamente en el navegador, facilitando la accesibilidad y la compatibilidad.

Los interesados pueden comenzar utilizando la documentación de usuario de WebAverse, que ofrece guías para crear experiencias mediante arrastrar y soltar, y plantillas basadas en JSON. Próximamente, también se añadirá un editor de niveles para facilitar aún más el diseño de entornos.

Ahad Shams
Ahad Shams
27 min
11 Apr, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla discute el concepto de una web más espacial y la importancia de los estándares abiertos, la privacidad y la transparencia en el desarrollo de WebAverse. Se enfatiza la participación con la comunidad de desarrolladores y los avances en la creación de experiencias 3D de alta fidelidad en la web. La charla también destaca los desafíos de construir un motor de juego de navegador y el soporte para VRM Fuzz y la orientación a creadores y comunidades. Se mencionan las ventajas de construir experiencias 3D en la web y el desarrollo de experiencias basadas en 2D.
Available in English: Fire-side chat with Ahad Shams

1. Introducción a WebAverse

Short description:

La realización principal es que la próxima versión de la informática debería ser una web más espacial. Creemos en la libertad de expresión y en la capacidad de cualquier persona para construir su propia web espacial. Es importante tener una infraestructura neutral y sin opiniones, que proporciona la web. La web es el medio más democrático.

Hola, Hesar, gracias por tenerme aquí. Y supongo que al menos algunos de ustedes asistieron al taller, que fue realizado por mi cofundador, Avier, ayer. Fue bastante extenso en el que básicamente dio una visión general de lo que estábamos tratando de hacer en WebAverse. Pero en el núcleo mismo, lo que estábamos tratando de hacer, la realización principal fue que, vale, cualquiera que sea la próxima versión de la informática, si es una presencia más espacial, tenemos que llevar la web 2D a una web 3D, ¿verdad?

Y mucha gente no piensa en la web como 3D porque ha pasado a aplicaciones nativas así como a tiendas de aplicaciones, ¿verdad? Como todas las aplicaciones 3D, simplemente las asociamos más con eso. Pero la vida de Aviar ha estado en torno a la web. Fue el ingeniero fundador de Webflow, luego básicamente lanzó el primer navegador de realidad virtual de Magic Leap. Y luego hizo su propio navegador de realidad virtual, Exo Kit. Y en el núcleo, lo que estamos tratando de hacer es creemos que cualquiera que sea el próximo, ya sabes, versión de la informática, la más espacial, inmersiva, necesita cumplir estas cuatro o cinco cosas, que creemos que la primera es la libertad de expresión, lo que significa que cualquiera debería poder construir sus propias cosas, que podrían incluir avatares, que podrían incluir entornos. Es el mismo concepto que la página web, ¿verdad? Como la gente podrá construir sus sitios web y alojarlos. Así que es el mismo concepto, pero ahora es un poco complicado. Así que sentimos que es extremadamente importante para nosotros al menos crear un sistema para que incluso los no desarrolladores puedan hacer eso, ¿verdad? Pueden construir su propia próxima versión de una web más espacial.

La segunda cosa en la que creemos es que es importante tener una infraestructura neutral y sin opiniones, que es lo que la web cumple de todos modos. Ya sabes, una vez que estás en tiendas de aplicaciones y plataformas, entonces tienes que vivir según las reglas de esas tiendas de aplicaciones y plataformas, que a veces pueden ser bastante opinionadas mientras que, ya sabes, cuando algo está en la web, es completamente democratizado, ¿verdad? Y hasta el día de hoy, la web es el medio más democrático.

2. Estándares Abiertos, Privacidad y WebAverse

Short description:

El tercero es muy importante. Creemos en aprovechar los estándares abiertos para la interoperabilidad en el desarrollo tanto en 2D como en 3D. En el mundo del 3D, estamos viendo la adopción de estándares como GLB, GLTF y VRM para avatares. Construir sobre formatos de archivo estándar permite una fácil portabilidad entre motores de juegos. Además, priorizamos garantías sólidas de privacidad y la importancia de la transparencia en los algoritmos. Estamos construyendo WebAverse con estos principios en mente, y ya hemos logrado una experiencia 3D de alta fidelidad en la web con herramientas de código abierto.

El tercero es muy importante. Y creo que para cualquier persona que desarrolle en la web, para ellos es muy intuitivo, aprovechar los estándares abiertos para la interoperabilidad. Lo hacemos en 2D todo el tiempo. Por ejemplo, usamos JPEG, PNG. ¡Lo mismo debe ser transportado al mundo del 3D, verdad? Entonces, en 3D comenzamos esto hace mucho tiempo, pero ya estamos viendo cierta adopción en términos de estándares, por ejemplo, para 3D, el formato de archivo que está surgiendo es GLB, GLTF, otro formato de archivo que estamos promoviendo. Y creo que hay una gran comunidad japonesa significativa que también está promoviendo VRM, eso es para avatares. Es como una versión mejorada. Es una extensión de GLTF solamente, pero es como una versión mejorada con movimientos humanoides ya definidos, así como emotes, etc. También se definen. De manera similar, también estamos utilizando algunas otras extensiones, pero todas están basadas en formatos de archivo estándar y todas son de código abierto.

Una cosa importante que es un poco diferente es lo que creemos es el derecho de salida y de todos modos, puedes lograrlo si construyes cualquier cosa en formatos de archivo estándar, porque luego puedes simplemente portar algo que construyas en un motor de juegos a otro y es súper fácil de hacer, ¿verdad? Y eso también es muy intuitivo para cualquier persona que haga desarrollo basado en la web. Pero puede que no sea muy intuitivo para las personas que lo construyen en motores de terceros cerrados y como plataformas cerradas, ¿verdad? Por ejemplo, si construyes una experiencia dentro de Roblox, no puedes simplemente portarla a otro motor, ¿verdad, no funciona así.

Y el último es, ya sabes, garantías sólidas de privacidad. Y eso es un poco más amplio. Pero básicamente lo que estamos tratando de hacer es, por ejemplo, hoy en día, como hablamos de motores de búsqueda, hablamos de redes sociales, no sabemos realmente en qué algoritmos se basan, ¿verdad? Y creo que cuando tengamos una presencia más espacial, la privacidad va a ser mucho más importante. Entonces, incluso si no es un producto de código abierto basado en una licencia comercial o MIT, al menos debería haber un componente de ver código fuente adjunto a él para que, ya sabes, no sea una cuestión de eso. No quieres ser malvado. Simplemente no puedes escribirlo porque siempre habrá una auditoría pública y los ojos siempre estarán puestos en ti. Así que estas son las cosas en las que comenzamos a construir WebAverse. Y siendo muy honesto, cuando comencé con WebAverse, tampoco creía que podríamos lograr algo así en la web. Pero cualquier persona puede ir y ver nuestra demostración en vivo. Estamos obteniendo una experiencia 3D de alta fidelidad en la web con un humanoide de cuerpo completo con física del cabello. Y es súper fácil construir cosas con él, ¿verdad? Literalmente puedes arrastrar y soltar tus activos 3D, él genera automáticamente la malla de colisión y puedes crear un entorno en cinco minutos y el hecho de que sea de código abierto, ya sabes, puedes ir y modificar el código y agregar tus sombreadores, etc. O hacerlo también. Algunas de las experiencias que hemos creado, si puedo compartirlas en algún enlace, estaría encantado de hacerlo. Pero compartimos muchas de nuestras cosas en nuestro Twitter, el nombre de usuario es webovers. Así que les pediría a todos que revisen la línea de tiempo y podrán ver. Básicamente, en este momento tenemos todo basado en física, ya sabes, puedes nombrar vehículos, mascotas, variables, armas, y todo se basa en formatos de archivo 3D estándar. Y lo bueno es que cuando es de código abierto, construimos una versión de ello y luego, ya sabes, cualquiera puede ir y construir cien versiones diferentes de ello, lo cual ya está sucediendo. Y ni siquiera hemos comenzado.

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.

Workshops on related 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.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
WorkshopFree
Avaer Kazmer
Avaer Kazmer
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.