Let's Expand the Reality!

Rate this content
Bookmark

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.

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

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
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Exploring AR Try-On with React Native
React Summit 2022React Summit 2022
20 min
Exploring AR Try-On with React Native
React Native can be much more than a toolkit for building mobile UIs in JavaScript. We’ll explore how to use features beyond the core library, and use the built-in native module system to integrate AR capabilities into your mobile app.
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
What does Conway's Law have in common with the video game League of Legends? They can both teach us about how to organise development teams that achieve collective intelligence. When it comes to the art of software development, it's never a game of chance
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
Virtual Reality gives us an ability to experience virtual worlds from the comfort of our homes. But it doesn't have to be experienced alone. In this talk we will see how we can use React, WebVR and GraphQL to create social VR experience in the browser.