Let's Expand the Reality!

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

How long have we been watching movies about reality and how exciting it looks! You may not have noticed, but virtual reality is already in our lives, even in our browsers. There are more and more ways to apply these technologies. Let's take a look at VR and AR and see how they look in real life.

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

FAQ

The main difference between AR and VR is that AR overlays digital objects onto the real world through transparent glasses or a smartphone camera, allowing you to see both real and virtual elements simultaneously. VR, on the other hand, immerses you completely in a digital environment, typically using a headset that blocks out the real world.

The six degrees of freedom in virtual reality refer to the ability to move forward and backward, left and right, up and down, as well as the ability to rotate around three perpendicular axes (pitch, yaw, and roll), allowing full 3D movement and rotation within a virtual environment.

WebXR is a standard for accessing virtual and augmented reality capabilities in web applications. It allows developers to create immersive experiences directly in the browser without requiring native apps. WebXR is supported by most modern browsers, using plugins for emulation and testing, and integrates with WebGL for rendering 3D scenes.

The WebXR device emulation plugin allows developers to simulate VR and AR experiences in browsers, helping them test and debug their applications without needing physical VR or AR hardware. This makes it easier to develop and refine immersive experiences directly from their coding environment.

Yes, augmented reality can be used in education to enhance learning by allowing students to interact with 3D models and simulations overlaid onto their real-world environment. This can make abstract concepts more tangible and engaging, and can be used to explore objects and phenomena that are too large, small, or dangerous to experience directly.

With virtual reality, you can create a wide range of immersive experiences, from exploring virtual worlds and interactive games to educational simulations and virtual tours. VR allows users to interact with virtual objects and environments in a way that feels real, enhancing both entertainment and educational applications.

To start developing with WebXR, you need a basic understanding of 3D and WebGL technologies, as these are fundamental for creating scenes and rendering graphics in VR and AR. Additionally, checking for browser support and using a framework can simplify the development process, especially for beginners.

Vasilika Klimova
Vasilika Klimova
12 min
11 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
I work as a front-end developer with experience in 3D tasks using WebGL and 3DS framework. Let's explore virtual reality and WebXR, which allows full immersion in a digital environment. In VR, we can explore virtual worlds, move and rotate within them, interact with objects, and even use VR for education. AR, augmented reality, is different from VR as it allows you to see the real world while also overlaying virtual objects. XR reality encompasses both VR and AR, and it's already a standard with good browser support.
Available in Español: ¡Expandamos la Realidad!

1. Introduction to Virtual Reality and WebXR

Short description:

I work as a front-end developer with experience in 3D tasks using WebGL and 3DS framework. I also organize an online skill-up school in Luxembourg, teaching web basics. Let's explore virtual reality and WebXR, which allows full immersion in a digital environment. In WebXR and WebGL, you have three dimensions and six degrees of freedom, enabling movements and rotations along each axis.

I work as a front-end developer, but actually, at school, I dreamed of becoming a game developer. And I got a job in an Artec company where I had different interesting 3D tasks with WebGL and 3DS framework.

And the last two years I organized a skill-up school in Luxembourg and I teach people web basics here. And it's also an online school. So virtual reality. We talk today about this. And how long have we heard about these words? I think it's quite a long time. And the first movie which I found, it was in 1982, it was with very funny computer graphics 3D effects. And now it's much more interesting. So let's see what we have now in browsers and let's meet with WebXR.

Virtual reality. How to understand what it is. It's when you wear some glasses for example, or use your phone with Google Cardboard, special place where you can put your phone, and you have absolutely full immersion in digital environment, you're in virtual world with your eyes and see only virtual world. In all 3D and in WebXR and WebGL, you have three axis, three dimensions and you have six degrees of freedom. What does it mean? It means that you have firstly, movements along the each axis. Three axis, three movements forward and backward, and then you have ability to rotate around each of axis. We have three plus three, it means six degrees of freedom.

2. Virtual Reality and WebXR

Short description:

If we want to use WebGL scenes with VR, we need to make small adjustments to the camera position. The Mozilla plug-in for WebXR emulation is useful for development. In VR, we can explore virtual worlds, move and rotate within them, interact with objects, and even use VR for education.

If we want to see how the example scene of VR, look at the scene. Firstly, it was one like WebGL scene, but if we want to use it with VR, we need to have the same scene, but with small difference in position of camera.

So, VR camera, we'll look at the scene, but for each eye, it should be small difference in position. So, in the bottom of this slide, you see the special Mozilla plug-in for emulation of WebXR devices. It could be quite useful for development.

So, what we can do in VR, let's summarize. We can see only virtual world. We can move around in this virtual world. We can rotate in this virtual world. We see different objects, and we can interact with all these virtual objects.

Also, an education system. We use it with different educations, it could be like a cinema where you interact with all this stuff with your hands. Look at this guy, he has devices in his arms and he can do something with this tool. So, there are quite a lot of different videos with this education, and it's like a game to educate.

3. AR, XR, and WebXR

Short description:

Also, an education system. We use it with different educations, it could be like a cinema where you interact with all this stuff with your hands. AR, augmented reality, is different from VR as it allows you to see the real world while also overlaying virtual objects. AR can be used in education and business, providing a more visual and understandable way to showcase information. XR reality encompasses both VR and AR, and it's already a standard with good browser support. To work with WebXR, you also need to be familiar with WebGL.

Also, an education system. We use it with different educations, it could be like a cinema where you interact with all this stuff with your hands. Look at this guy, he has devices in his arms and he can do something with this tool. So, there are quite a lot of different videos with this education, and it's like a game to educate.

Okay, AR, augmented reality. What is it? What's the difference? The main difference is that in AR you actually see the real world. So, you use another glasses that are transparent, and you can also use your phone, but you look at your phone with a camera and you see some special objects from a digital world through your phone or through these glasses. So, with AR we see the real world, we can move in our real world, we can rotate in this world, and we can see some additional objects of virtual world. We can interact with these objects of virtual world, so virtual objects, and also we can get data from some objects from the real world, so from table, I don't know, couch, et cetera, what you want. And example of AR is also in education you can see different objects as close as you never can see them in real life. For example, you can look at this Mexican thing, a very ancient thing, and check very closely. You can see Jacondo in AR very close. So it could be you can use it in education, also in business. For example, I'm a visual person, I like to see everything, what I want to eat, I like menu with pictures, but you can also use it like menu with AR objects. It could be really more visual, more understandable way to show. It can have some special application where you can put into even to have sometimes different size of objects because you want to build something and to understand how big size you need, you can check it with this application.

And so why XR reality? Because VR, AR doesn't matter, just XR, some reality. And that's why we use X. And first you need to know that it's already standard, there is some specification about the devices which support this technology. And also we have very good support in different browsers. Yes, it works with plugs, but actually 71% of all browsers are quite good. Only Safari and iPhone don't support WebXR. Some special tools, usually we use for testing Android and for emulation in browser we can use this plugin, which I mentioned before. For iPhone development, you can use 8 wall servers and build with it already now for iPhone some applications. And there is an application WebXR Viewer as well. Good news is that when you need to do something with WebXR technology, you also need to know WebGL. We already knew something about WebGL. You can check on my website, my presentation about WebGL and 3GS Framework. So some basic things about 3D and WebGL. The main thing in this theme is that there is a scene that is like a container.

4. Creating Scenes and XR Sessions

Short description:

You can create a scene with objects, a camera, and a render function to draw everything on the screen. In XR, you need to check for device support, start an XR session, run the render function in a loop for an animated scene, and end the XR session. Using a framework is recommended for easier development. Check out mixedrealitymozilla.org for more WebXR examples. Remember to enjoy the real world with friends and family.

You can put everything on the scene and then to look at it from your browser, from Google, from glasses, doesn't matter from where. So scene is the basic step. Then you put all objects there. Then you need a camera, because camera actually, it's your eyes, it's the place from which you look at this scene. And camera can move when you move, for example. And also, there is some one important thing, it's render, it's what we called, what makes all these digital scene to pixels and draw everything on our screen.

So it could be interesting, you can check the website to know more about it. If we talk about XR, then here actually, the main, what you need that, firstly you need to check, do you have support of XR devices and then you can start XR session. It could be VR session or AR session. Then you run render, so we draw your scene and you always do it in loop because you need to see animated scene and then you need to end XR session.

So, if you want to start, it's better always to use framework, the most famous framework, because it's much easier for you to start. Here's some small example of my WebXR scene. It's augmented reality in my house. There is a dancing guy and now I started to throw tomatoes through him. Just funny example. Small, a little bit code and you can check it by code, by QR code. If you want to learn more about WebXR, go to mixedrealitymozilla.org website. They have a lot of examples and you can check how it works. It's funny. But don't forget that real world is maybe not the best place, but very interesting place to live and to be happy with our friends and families. Check this course if you are interested in WebXR. Just try. It's interesting. Thank you very much and I hope you enjoyed it.

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
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.
Exploring AR Try-On with React Native
React Summit 2022React Summit 2022
20 min
Exploring AR Try-On with React Native
This Talk discusses exploring AR Tryon with React Native, implementing AR try-on experiences in e-commerce apps, and considerations for AR development. It also covers the integration of AR platforms like ARKit and ARCore with React Native using the Duvero bridge. The Talk highlights the use of off-the-shelf solutions like Wanna's SDK for virtual try-on and Snap's AR technology and shopping extension. The importance of creating 3D models for AR Try-On and the challenges of writing native code for AR development are also mentioned.
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
Today's Talk explores the lessons that video games can teach us about building virtual teams. The impact of communication on software development is discussed, highlighting the importance of understanding software for successful deployment. The concept of collective intelligence is introduced, emphasizing the role of social perceptiveness, cognitive diversity, and equal distribution of communication. The Talk also emphasizes the need to optimize team performance with key metrics and suggests keeping teams small and cross-functional to enable easy communication and lower cognitive loads.
Virtual Reality with React
React Summit Remote Edition 2020React Summit Remote Edition 2020
8 min
Virtual Reality with React
The Talk provides an introduction to React 360, a JavaScript framework created by Facebook for building 3D and VR user interfaces on top of React. It simplifies the creation of complex UI and leverages the familiar concepts and tools of React and React Native. The folder structure includes a static assets folder for media files, a client.js file for creating locations and surfaces, and an index file as the main file. The code structure is similar to React Native and React, using Flexbox for styling. The application can be run on a web browser or any VR device, and includes features like slides, video layer, and customizable background image.
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
This Talk explores creating VR experiences with A-Frame and React 360, using coordinate systems and rendering different surfaces. It also discusses bringing data into VR with GraphQL and architecting collaborative systems with Hasura. The Talk demonstrates how to add VR and A-Frame to React 360, and concludes with a focus on rendering and wrapping components. Overall, the Talk encourages exploration and experimentation in VR and AR development.
How We Rebuild the Creative Playground That Flash Took to the Grave
JSNation 2025JSNation 2025
20 min
How We Rebuild the Creative Playground That Flash Took to the Grave
Conall, CTO at Zapper, pays tribute to Flash, highlighting its impact on internet history and accessibility to entertainment. The discussion covers Flash's legacy, technical features, demise due to mobile responsiveness issues, and the rise of HTML5 as its successor. The evolution of web technologies post-Flash is explored, focusing on tools like MatterCraft that bridge runtime and development environments. MatterCraft revolutionizes content creation by offering scripting in TypeScript or JavaScript, enhanced modularity, and features like real-time preview and AI assistance for seamless development.