Let's Expand the Reality!

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.

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.

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.

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.