Fire-side chat with Ahad Shams

Rate this content
Bookmark

The open interoperable metaverse and why Webaverse believe Web is the best medium for it. How this will give rise to game development / 3D on the web.

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

FAQ

The core goal of WebAverse is to transition the 2D web into a 3D web, enabling a more spatial and immersive web experience.

Avier is the co-founder of WebAverse and was the founding engineer at Webflow. He has extensive experience with web-based technologies and has worked on projects like the first VR browser at Magic Leap and his own VR browser, Exo Kit.

WebAverse aims to fulfill several key principles: freedom of expression, neutral and opinion-agnostic infrastructure, leveraging open standards for interoperability, right of exit, and strong guarantees of privacy.

Non-developers can build their own 3D web experiences on WebAverse using a drag-and-drop system or a simple JSON file template. WebAverse plans to release a level editor and support for exporting projects from Unity.

WebAverse supports open standard file formats like GLB, GLTF, and VRM for 3D assets, ensuring easy interoperability between different platforms and engines.

Yes, WebAverse is open source. This allows anyone to view, modify, and contribute to the code, fostering a collaborative and transparent development environment.

Building a 3D web engine involved convincing stakeholders of its feasibility and overcoming technical challenges. However, the open culture of web-based development and code sharing has been a significant advantage.

WebAverse uses WebRTC with a web socket or RTC implementation and an SFU architecture to handle real-time multiplayer functionality, allowing for hundreds of connections.

Building 3D experiences on the web offers greater accessibility and ease of use, as experiences can be accessed through a simple URL. The web's open standards and protocols also facilitate easier integration with external APIs and services.

Developers and creators can contribute to WebAverse by participating in the GitHub repository, creating issues, and submitting pull requests. They can also join the WebAverse Discord community for more direct collaboration and support.

Ahad Shams
Ahad Shams
27 min
11 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses the concept of a more spatial web and the importance of open standards, privacy, and transparency in the development of WebAverse. It emphasizes the engagement with the developer community and the breakthroughs in creating high-fidelity 3D experiences on the web. The Talk also highlights the challenges of building a browser game engine and the support for VRM Fuzz and targeting creators and communities. It mentions the advantages of building 3D experiences on the web and the development of 2D based experiences.

1. Introduction to WebAverse

Short description:

The core realization is that the next version of computing should be a more spatial web. We believe in freedom of expression and the ability for anyone to build their own spatial web. It is important to have neutral and opinion agnostic infrastructure, which the web provides. The web is the most democratic medium.

Hello, Hesar, thanks for having me. And I'm assuming that at least some of you attended the workshop, which was done by my co-founder, Avier, yesterday. It was quite extensive in which he basically gave an overview of what we were trying to do at WebAverse. But at the very core, what we were trying to do, the core realization was that, OK, it's whatever is the next version of computing, if it's a more spatial presence, we need to just take the 2D web into a 3D web, right?

And a lot of people don't think of the web as 3D because it has just gone to native applications as well as app stores, right? Like, all the 3D applications, we just associate more with that. But Aviar's, you know, life has been around the web. He was the founding engineer at Webflow, then basically went to ship the first VR browser out of Magic Leap. And then he made his own VR browser as well, Exo Kit. And at the core, what we're trying to do is we believe that whatever is the next, you know, version of computing, the more spatial, immersive one, it needs to fulfill these four or five things, which we believe the first one is freedom of expression, which means that anyone should be able to build their own stuff, which could include avatars, which could include environments. It's the same concept as the web page, right? Like, people will be able to build their websites and host it. So it's the same concept, but now it's a bit complicated. So we felt that it is extremely important for us to at least create a system so that even non-developers are able to do that, right? They are able to like build their own next version of a more spatial web.

The second one we believe is that it's important to have like neutral and opinion agnostic infrastructure, which is what web fulfills anyways. You know, once you are in app stores and platforms, then you have to live by the rules of those app stores and platforms, which could be quite opinionated sometimes, whereas, you know, whenever anything is on the web, it's completely democratized, right? And web to this day is the most democratic medium.

2. Open Standards, Privacy, and WebAverse

Short description:

The third one is very important. We believe in leveraging open standards for interoperability in both 2D and 3D development. In the world of 3D, we are seeing adoption of standards like GLB, GLTF, and VRM for avatars. Building on standard file formats allows for easy portability between game engines. Additionally, we prioritize strong guarantees of privacy and the importance of transparency in algorithms. We are building WebAverse with these principles in mind, and we have already achieved a high fidelity 3D experience on the web with open source tools.

The third one is very important. And I think anyone who does development on the web, for them it's very intuitive, is to leverage open standards for interoperability. We do it in 2D all the time. For example, we use JPEG, PNGs. The same thing needs to be just transported into the world of 3D, right? So in 3D we started this long time ago, but already we are seeing some adoption in terms of standards, for example, for 3D, the file format which is coming out is GLB, GLTF, another file format which we are pushing. And I think there's a big significant Japanese community, which is also pushing is VRM, that's for avatar. So it's like a ribbed version. It's an extension of GLTF only, but it's like a ribbed version with already humanoid movements to find, as well as emotes and et cetera. Also define. Similarly, we are using like some other extensions as well, but they're all based on standard file formats and all is open source.

One important thing which is I think a bit different is what we believe is the right of exit and that anyways, you are able to achieve if you build anything on standard file formats, because then you can just port something which you build on one game engine to the other and it's super easy to do it, right? And that's also come very intuitively to anybody who does web based development. But it might not be very intuitive to people who are building it on close party engines and like close that forms, right? Like for example, if you build an experience within roadblocks, you can't just like port it out to some other engine, right, like it doesn't work that way.

And the last one is, you know, strong guarantees of privacy. And that's a bit of a more broader arching team. But basically what we're trying to do is like, for example, today, like we talk about search engines, we talk about social media, we don't really know like what are the algorithms on which these work? And I think when we have more spatial presence, like privacy is going to become much more important. So even if it's not like commercial license or MIT license based product open source, at least there should be a view source component attached to it so that, you know, like it's not a question of that. You don't want to be evil. You just can't be able to write cause like the public audit and the eyes will always be on you. So these are the things on which we started building WebAverse. And to be very honest, when I started with WebAverse, I also did not believe that, you know, we'd be able to achieve something like this on the web. But like anybody can go and check out our live demo. We're getting like a full high fidelity 3d experience on the web with full body humanoid with hair physics. And it's super easy to build stuff with it, right? Like you can literally just like drag and drop your 3d assets in, it automatically generates the collision mesh, and you can create an environment within like five minutes and the fact that it's open source, you know, you can just like go and like mod the code and you know, you can add your shaders, etc. Or do it as well. Uh, some of the experiences which we have, uh, made, uh, if I can like share it on some link, uh, I'd be like happy to share it. But like, we sh we share a lot of our stuff on our Twitter, uh, the handle is webovers. So I would like request anybody to like just go through the timeline and they could see. Uh, basically like at this point in time we have physics based everything, you know, like you can name vehicles, pets, um, variables, uh, weapons, and it's all based on a, you know, like standard, like 3d file formats. And the beauty is that when it's open source, we build like one version of it and then, you know, anybody can just go and like build a hundred different versions of it, which is already happening. Like we haven't even started.

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

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
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.
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
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.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with 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.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
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.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
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.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.