WebXR? Virtual Reality and Augmented Reality Natively on Browsers

Rate this content
Bookmark

Dive into the exciting world of WebXR in my talk about bringing Virtual Reality (VR) and Augmented Reality (AR) directly to web browsers. As a developer, I've seen how technology can spark creativity. 


In this session, I'll introduce the A-Frame framework, showing how easy it is to create amazing and interactive experiences on the web. 


This isn't just a tutorial; it's an invitation for you to break away from the ordinary and explore the endless possibilities of making engaging web applications.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

FAQ

The main focus of Eric's talk at JS Nation is to motivate developers to explore the power of web technologies, particularly in creating virtual and augmented reality experiences using tools like WebXR and A-Frame.

Eric recommends using WebXR and A-Frame for developing VR and AR experiences on the web. He also mentions Three.js as a foundational library used by A-Frame.

WebXR is a web standard that combines augmented reality (AR) and virtual reality (VR) into a single API. It allows developers to create immersive experiences that can run on a variety of devices, including browsers, mobile devices, desktops, and VR headsets.

To start experimenting with WebXR and A-Frame, you can follow Eric's provided resources, including research, references, and links. He encourages developers to try creating their own projects and to use emulators or editors like the one from Niantic to facilitate development.

Common applications of augmented reality (AR) mentioned in the talk include location-based experiences like Pokemon Go, QR code-based interactions for marketing, and marker-based AR for interactive cards and advertisements.

Challenges associated with using VR and AR technologies include potential dizziness or discomfort when using devices like Google Cardboard, and the need for powerful hardware to render complex 3D models and animations smoothly.

A-Frame is an abstraction layer built on top of Three.js that simplifies VR and AR development. It allows developers to create immersive experiences with a single codebase that can run on multiple devices, including VR headsets, mobile phones, and desktops.

The MetaQuest 2 is significant in Eric's talk as it represents an affordable entry point for experimenting with VR. He discusses how he used it to explore independent VR content and open-source projects available on platforms like SideQuest.

Eric suggests focusing on the middleware APIs like WebXR that can run across different devices, rather than the hardware itself. He emphasizes the importance of having more options and powerful, yet affordable, AR/VR glasses.

Eric sees significant potential in the future of WebXR with Apple's involvement, especially with the new Vision OS. He believes this will lead to more widespread adoption and faster development of immersive web technologies.

Erick Wendel
Erick Wendel
28 min
13 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
JS Nation explores the power of the web, including virtual and augmented reality experiences. WebXR and A-Frame enable creating native-like experiences using web technologies. Tooling and resources are available to develop and experiment with WebXR. The possibilities for web development and creative projects are endless. Improving AR devices, enhancing PDF viewers, and utilizing AI assistants are areas of interest. JavaScript abstraction and positive audience feedback were highlighted.

1. Introduction to JS Nation and the Power of the Web

Short description:

Hello, JS Nation! I flew from Brazil to show you experiments and motivate you to see the power of the web. Take pictures, mention us on social media. Are you new to JS Nation? Let's talk about VR glasses, coding for VR, and Pokemon Go. Let's go beyond the 9 to 6pm routine and use technology to improve creativity. Let's explore virtual and augmented reality experiences. Have you tried Google Glasses or Cardboard? The Metaverse is more advanced. Look at this game running on glasses. Augmented reality is even more exciting.

♪♪♪ Hello, JS Nation! Whoo! It's so good to be here. A lot of faces right there. It's amazing. I flew all the way back from Brazil. And today I'm gonna show you a bunch of experiments and I'm trying to motivate you to see what we can do in the web and how powerful we are right now. Please, take as many pictures as you can. This helps me a lot. This helps the event as well, so don't forget to mention us in your social media. And let's get going.

So, first of all, who is the first time in the JS Nation here? Wow! A lot of people. So, this was me back in 2022. I was showing how I was using JavaScript to integrate on my house, how my wife was getting mad with me doing a lot of engineering there, but it was pretty amazing. So, yes, JS Nation is one of my favourite talks or conferences ever. Who here has been playing with VR glasses? Ooh, nice. Who has actually coded something for VR glasses? Ooh, just small people. It's amazing. What about Pokemon Go? Who still plays Pokemon Go? Don't be ashamed, it's fine. Okay. So, I wonder if you are playing in... Well, don't do like this guy, right? Technology is evolving so hard and so fast, but sometimes we think, well, I don't think this is normal at all, but I will definitely do this, right? Okay, every time I do some conference or some talk, I know I have just a short time to introduce some ideas, so I brought some goals for you to keep in mind throughout this presentation. First, I prepared all the research, all the references, all the links, and I put in a single video so you can follow along later. My goal here is not just for you to listen to this talk, but experiment with it at your own house, create something, and let me know because I love how the technology is evolving at all. And I'm very like, I told everyone, man, we should do something beyond the 9 from 6pm, right? We should use technology to improve our imagination, our creativity, and actually to make money on YouTube, right? And, as I tell people, we would see technology or programming as something fun, too, so you can have your own hobby as you're doing your job, so you're creating, you're using chat CPT, you're using web APIs, there are so many things we are doing beyond the crud that we are doing, which is sometimes boring at all. So, I started figuring out how I would create virtual reality experiences or augmented reality, so I started researching and I found out there are so many possibilities that I've never heard anyone talking about and it's actually much easier than I thought.

Before we go on, who here has had this Google Glasses or Google Cardboard? Well, I had this one I got from an event, too, but I figure I was feeling a bit dizzy, I couldn't find like the, I don't know, the sensation, the emotions there, I wasn't feeling that good, so I was like, well, this is just hype. Then I saw Uncle Mark playing with the Metaverse and it was like, this is the graphics we saw in Nintendo Wii ten years ago, come on! We have PS5, PS4, we have the computers, well, we should do something way nicer. Then I saw this game. Look how beautiful is this. So, this is running in the glasses, so I was like, wow, so probably there are a lot of things that I'm not looking at and something that got me even crazier is using augmented reality, so you can have your characters, your enemies and monsters interacting with your own environment. So, this got my idea, I was like, wow, now it's way beyond what Zuckenberg was showing in his presentation and we can do it.

2. Exploring the MetaQuest 2 and WebXR

Short description:

I bought the MetaQuest 2 and discovered the independent Metastore with open source projects. Instead of Beat Saber, I found Moon Rider, a web-based game using WebXR. It's crazy how web technologies can create native-like experiences. But be careful, it can also be dangerous. I accidentally pushed my wife and dog during a demo.

So, I bought the MetaQuest 2, which now is outdated, but it was the cheapest one I could find. And someone told me about a store, which is an independent store outside the Facebook store, the Metastore, and here you're going to see a lot of open source things, a lot of independent developers who's building projects, building games, and you can just start using right away. Most of them use C Sharp and Unit, but I was like, okay, nothing special right here, I could install a lot of things, let's just move on.

When I started asking my friends, well, what should I install, they said, well, Beat Saber. Beat Saber is amazing. But when I saw the price, I was like, well, no, I won't buy this. But then I started researching on SideQuest and I saw a reinterpretation of this one, which was open source. It's called Moon Rider. Something pretty interesting here. WebXR. I was like, wait, if it contains the name web on it, this means that it could run in the browser. So, how this works. I have my browser there, and I actually feel as a native application. See, it's pretty beautiful. I'm going to fast forward here just so we can see playing games, too. But it's the same thing. So, I didn't go to C Sharp, I didn't have to make anything. I can use the same environment, the same ideas we are using for web for this kind of application as well. This is crazy.

For the next section, I should warn you. This technology is amazing, but it's pretty dangerous. I'm going to show you why. So, I was recording the demos for here and suddenly... Let's see again. Well, I pushed so hard. Once I pushed my wife, once I pushed my dog... So, yeah.

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

The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Rome, a Modern Toolchain!
JSNation 2023JSNation 2023
31 min
Rome, a Modern Toolchain!
Top Content
Rome is a toolchain built in Rust that aims to replace multiple tools and provide high-quality diagnostics for code maintenance. It simplifies tool interactions by performing all operations once, generating a shared structure for all tools. Rome offers a customizable format experience with a stable formatter and a linter with over 150 rules. It integrates with VCS and VLSP, supports error-resilient parsing, and has exciting plans for the future, including the ability to create JavaScript plugins. Rome aims to be a top-notch toolchain and welcomes community input to improve its work.
Improving Developer Happiness with AI
React Summit 2023React Summit 2023
29 min
Improving Developer Happiness with AI
Watch video: Improving Developer Happiness with AI
GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.
Conquering Complexity: Refactoring JavaScript Projects
JSNation 2024JSNation 2024
21 min
Conquering Complexity: Refactoring JavaScript Projects
Today's Talk explores the complexity in code and its impact. It discusses different methods of measuring complexity, such as cyclomatic complexity and cognitive complexity. The importance of understanding and conquering complexity is emphasized, with a demo showcasing complexity in a codebase. The Talk also delves into the need for change and the role of refactoring in dealing with complexity. Tips and techniques for refactoring are shared, including the use of language features and tools to simplify code. Overall, the Talk provides insights into managing and reducing complexity in software development.
Static Analysis in JavaScript: What’s Easy and What’s Hard
JSNation 2023JSNation 2023
23 min
Static Analysis in JavaScript: What’s Easy and What’s Hard
Static analysis in JavaScript involves analyzing source code without executing it, producing metrics, problems, or warnings. Data flow analysis aims to determine the values of data in a program. Rule implementation in JavaScript can be straightforward or require extensive consideration of various cases and parameters. JavaScript's dynamic nature and uncertainty make static analysis challenging, but it can greatly improve code quality.
Automate the Browser With Workers Browser Rendering API
JSNation 2024JSNation 2024
20 min
Automate the Browser With Workers Browser Rendering API
The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!

Workshops on related topic

Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
JSNation 2023JSNation 2023
44 min
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
WorkshopFree
Ryan Albrecht
Ryan Albrecht
You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.
Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).