JSNation Live

JSNation Live 2021

<p>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.</p><p>  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a></p>

Let's Expand the Reality!

I work as a front-end developer, but actually at school I dreamed to become a game developer. And I was lucky and I got a job in an artec 3D company where I had different interesting 3D tasks with WebGL and 3js framework. And 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 talked 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. 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 axes, three dimensions. And you have six degrees of freedom. What does it mean? It means that you have firstly movements along each axis. So three axes, three movements. Forward and backward. And then you have ability to rotate around each of axes. So you have three plus three. It means six degrees of freedom. And if we want to see how we, the example scene of VR, look at this 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 we are camera. We 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 plugin 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. So example of also very old example, when we, I think, saw the virtual reality, it's when you put sunglasses in attractions and different parks, you can see some special videos. And on YouTube, you also can check this video and you can use your glasses and check this video with glasses and it will be like full immersion in such a trip. Also an indication 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, but to educate. And AR, augmented reality, what is it? What's the difference? The main difference that in AR, you see actually the real world. So you use another glasses, they're transparent, and you can use also your phone, but you look at your phone and with camera, you see something special, some special objects from digital world through your phone or through these glasses. So with AR, we see real world. We see, we can move in this world, in our real world. We can rotate in this world and we can see objects, 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, coach, et cetera, what you want. And example of AR, it's, you can 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, very ancient thing, and check very close it, or you can see Jaconde in AR, very close. So it could be, you can use it in education, in also in business. For example, I'm a visual person. I like to see everything, what I want to eat, 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 the dishes. So and IKEA has 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's with plugs, but actually 71% of all browsers is quite good. Only Safari and iPhone doesn't support WebXR. Some special tools, just usually we use for testing Android and for emulation and browser, you can use this plugin, which I mentioned before. And for iPhone development, you can use 8-wall service and build with it already now for iPhone some application. And there is application WebXR of your as well. Good news that when you need to do something with WebXR technology, you also need to know WebGL and 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 that there is a scene, it's like a container. You can put everything on this scene and then to look at it from your browser, from glasses, doesn't matter from where. So scene is the basic stuff. Then you put all objects there. And then you need the 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 one important thing, it's render. It's what we called, what makes all this 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 you 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. About framework. 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. So just funny example, small, a little bit caught 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. And check this course if you are interested in WebXR. Just try. It's interesting. So thank you very much. And I hope you enjoyed it. See you next time. Bye. Bye.
