 Hi guys, I'm Santosh. So am I audible? Yeah, perfect. I'm Santosh. I'm from Hyderabad. I've been volunteering to Mozilla from the past like three years. So like basically I'm interested in web. So when something new comes out, so I learned, I explore, then I teach people. So I thought, okay, this is a new platform. So this is completely related to web based virtual reality. So I thought, okay, let's share it to the people. I mean, people are interested in virtual reality, right? So everyone loves Pokemon Go because it adds other from reality. So, okay, let's, I thought, okay, let's conduct a workshop so that people can create their own Pokemon role using simple HTML. So how many of you know basic HTML, CSS and JavaScript? Yes, perfect. So, I mean, even if you don't know, HTML, I think it takes only not more than one day to learn and explore around HTML, CSS and JavaScript. The coding is has simple has anything. Yeah. So I'm a Mozilla tech speaker and I speak about web technologies. I'm just changing the mode. Yes. So virtual reality. How many have heard about this term called as virtual reality? Yes. So how do you define it? Like, what is virtual? Which is not real, but you still experience it. So virtual reality is, I mean, other than the reality which you are in, so we'll create a 3D space around you, which is virtual so that you can go, even if you are in this conference room, but still you can go to a Marina Bay, Samsung virtual reality and enjoy the lecture from here. So that's the power of virtual reality. In reality, you will be at one place, but virtually you can be at any place you want. Yeah. So virtual reality is an interesting concept, but yeah, it's not only about entertainment, it has many use cases. For example, take the example of fashion. So if you go out for shopping and you want to try out many dresses and because of time constraints, you can't tell out every dresses, right? But how about, think of it like, you wear this headset, this headset and then you will have a series of dresses and then you can just swipe it from left to right, then you will wear it in the virtual world. Or else, think about the real estate platform. So if you want to buy a house, then you have to go there and check it. How about if the broker creates his own virtual world, like so he just captures a 3D image of this and puts it on the virtual platform and share it with you. So that when you are in your own home, you can still, in the virtual world, you can explore around the new house and explore and then you will come to know about the whole house in the reality where you are then. So that's the power of virtual reality. We have gaming platforms. The Pokemon Go is a very good example of augmented reality, but both are different. So in virtual reality, you go into the virtual world and then look around things. But in augmented reality, you bring the virtual components into your real world. Like for example, in Pokemon Go, when you move your camera, you will find a Pokemon which you will see in reality. So bringing the virtual things to your real world is called as augmented reality. But if you yourself go into a virtual world, so that's called as virtual reality. That's the basic difference between both of things. And the framework which we are going to use for the next one hour. So you can build both augmented reality applications and virtual reality applications. If you have basic knowledge of HTML, CSS and JavaScript, it is as simple as that. In the next slides, I'll show you some good demos with very minimal code so that even after going home, you could try out building your own virtual worlds using these technologies. And yeah, so these are different devices which we have in the market right now. So the technology is not hardware independent. So you can use any virtual box, virtual reality box and it works. For example, this cost around like $40, $40 USD. But the one which is on the table that's real box, that cost around like $4 USD. Like you have, yeah, I'll show it to you. Yes. So this real box cost around $4 USD and this one cost $40 USD. I mean, it's not hardware independent. It runs on both things. But this is equipped with some high tech earphones. And so you can plug in with the 3MM earphone and then enjoy the applications. So we have like Oculus, we have Google Cardboard. We have HTC by, we have Samsung VO box and there are like many devices which you can use for that. So it's not hardware independent. You can make yourself. Yes, yes. Yeah, you can make yourself. The Google Cardboard is open source at design so that you can take your own cardboard, you can buy the lenses and you can hack on it and make your own VR box. It's as simple as that. So not only the software is simple to code, but even the hardware you can hack it yourself. But there was a friction in VR ecosystem. So when, I mean, most of the people have heard about virtual reality. But I mean, most of the people never tried to build their own virtual reality because I mean, they think it's hard to code, it's closed. For example, there was Oculus Rift, Facebook ported and it started working on building a virtual reality application using Oculus Rift. The platform was very close and it was very complex. So we at Mozilla thought, okay, so we know that JavaScript can do anything like there are solutions for every problem. If there is a problem, JavaScript has a solution for it. So even the hologram project which Microsoft is working on, they developed a framework called as HoloJS. So that they can code the holograms using the JS framework. So there are like different things. So we thought, okay, why can't we take this idea of virtual reality and then we use the power of OpenWeb and create a framework. So that's how we got WebVR, which is open, connected and instant. So when it comes to openness, so when they created the framework, we had like 5 out of 10 components. And for now we have like 300 or 400 components. So it's basically, it's open to make your own VR applications. And if you create any new components, so you can add it to the marketplace so that you can share it with other people who want to work on virtual reality applications. And it's connected, it's on the internet, so it's connected and instant. So for example, if you made a virtual reality application, you'll make a hello world application by the end of the session. And if you want to share it with your friend in some other place or some other country or at your home, so it's instant. You can just host it on your server or else if you have a GitHub account, you can freely host it on GitHub and just grab the link and share it with your friend. So your friend will open the link in his mobile browser and he will be able to view the virtual world which you created on the mobile device itself. It's connected, so it's on the internet, it's connected, it's instant. So if you make the changes and push it to the internet, yeah, that changes are instant and other people can view the changes right there itself. And how does this WebVR actually work? So all these WebVR applications just run on your browser. You don't need to install any application, you don't need to install any software, not only to make those applications, but even for using, you don't need to install anything. If you have a browser installed on your mobile device like Chrome or the default browser which comes with Samsung, the Samsung browser or Firefox browser, so I mean they started supporting WebVR API. So almost all the mobile devices got these accelerometric sensors, like when you move the device, it detects the motion, right? So like the Pokemon Go or whatever games or anything you play, it got motion sensors and it basically detects the motion sensors and then generate the content of the browser. So for example, I put a cube on the right side and a box on the left side and a cylinder on the straight. So when I move the device, so the API uses those accelerometric sensors, gets the sensor data and generates the content on the browser itself. You don't need anything additional to do, you just place a cube and these things and then you include the WebVR API and that's it. So you don't need to configure anything, it takes care of everything. So it uses your mobile sensors, generates the respective content on the browser itself. You don't need to install any software, so the browser which you have in your mobile, it works perfectly fine with WebVR applications. And yeah, browser support, so we have Chrome and Chromium which started support like about one year ago and Firefox browser. So you need to install and add on to enable this but like in the next version after like three or four months, you will have full support for the Firefox browser also. The mobile polyfill is like, I mean the one, the last article you were saying, it's mobile polyfill. Like for example, if you open a web link on any application, so instead of opening it into the browser, it just gives a web instance, right? So you will be able to see on the screen itself without opening. You will be able to see the website on the mobile screen itself without opening any application. So that's called as mobile polyfill. So even that supports the WebVR API. So in the next like, I think probably in the next year almost all browsers support WebVR because even Internet Explorer got WebVR support and it's IE11 I guess. So probably in the next few months, we'll have complete WebVR support to almost all the browser. And the thing, I mean why even everyone is interested is so virtual reality, I mean when you think about the opportunities and the applications of it, they are endless. Like for example, we had a Mozilla booth and a chemistry teacher came up and we showed him the demos and he was like, OK, most of our chemical components are 3D components. It's hard for us to make them with different materials. So I think I can use the same WebVR project and create my own 3D chemical components in the virtual space using code. So use cases are endless. So every application, I mean every domain, a person, if he's in any domain, he can use WebVR to make things simpler and better to understand. And yeah, so the A-frame, so WebVR, when I was saying WebVR, so it's this platform, the virtual reality platform based on that. But A-frame is a framework which enables you to simply develop the virtual reality application. So for example, if you know HTML and there is AngularJS. So it's a wrapper around HTML, so it's the advanced level. So when you write HTML and start writing large code, you can write it in a very simple code in AngularJS. So the same way, for example, if you are writing a box, if you want to draw a box in virtual reality, so you have to give the position. You have to give the borders, you have to give the margins and everything, rotations or translations or anything, you have to give a lot. But with this framework, we made it simple. If you want to position, this is the center point, if you want to position somewhere on the backside. So this is positive x-axis and this is positive y-axis and that is positive z-axis. So you just think of the position, okay, that should be like x-axis 2, y-axis 2 and z-axis 2. So 2 to 2 position, give it as 2 to 2 and the object will be placed at that position. Or else if you want to rotate it, then give rotate 90 degrees, 0-0. That means it rotates the box from x-axis. Like if this is 0 degrees, then it rotates this way, 90 degrees. So this made it simpler to develop web applications. So yeah, so this is the Hello World application, basic Hello World. So I'm not using a header body, I'm not writing quality code, but yeah, this is a simple code I'm writing. So I open the HTML tags and then I include a script tag. So that's the framework, you can see the a-frame.min.js. Just let me see if I can, no, I'm unable to submit, but yeah, I'll show you to you. Yeah, this is a website, a-frame.io. So you will have every detail steps in here. So if you want to learn anything, so go to docs, introduction, yeah. So here I think you can zoom in, yeah. So this is a basic example of that, so Hello World example. So I just included a script tag of a-frame and then I opened a scene, that's it. So I'll show it on the presentation now, so now you've got it. So yeah, so I have a script tag and anything. So whatever content I put in this AC, so this will be projected into the 3D environment and shows to the user. So now let's build this one. So I have a box, I have a cylinder, I have a cube and I want to place it somewhere here. And so how many lines of code do you think we need to make this? How many lines of code you have to write for this? Like I already showed you, this is the Hello World program, I mean this is how you include everything. So how many of lines do you think we need to make this application, to make this application in virtual world? Three lines? 100. Three 100, any numbers in the middle? 10. Yeah, it's near to three, so it's four. So it's four, so what you are actually doing is, what objects do you have? You have a sphere, you have a box, you have a cylinder, three objects and you have a plane on the horizontal ground, four objects. So I probably need four lines of code, so okay let's see how to code this. So I'll show you this example directly, then we'll see how it works. Examples, everything is on aframe.ivo, so you don't need to worry about where to find any resources. So yeah, so this is the virtual world. I'll go to full screen, yeah. So this is virtual world. So if you want to place any objects on the backside, yeah move it, you'll have it to places. And yeah, again we got it. So like you can go around the place, you can place objects anywhere in this virtual world in this 360 degrees. And now let's see the coding part. So now we got the example and everything, yeah. So yeah, this is all the code we need. You can see it, right? So the same hello world format, we wrote it HTML script and then we opened the AC and then we wrote the box, cylinder, sphere, plane and yeah, the sky is for adding the background. So here we added a gray background, right? So yeah, so yeah, there we added a gray background. Also, it's not only about color. So if you want to, if you captured a 360 degree image at London Eye or Marina Bay, you can add it to the background of this application. So in the sky, instead of color, give it a source SRC equal to the length and you will get the background of the image there itself on the screen. Yeah, that one also, I'll try to show it. Yeah, this is the workshop, right? So I'll show you all the demos as well. So this is the image. Yes, so yeah, this is the captured 360 degrees image. Yeah, so all the virtual reality demos which I'm running right now, they are all completely running on browser. I didn't install any applications, any software, neither to build it or not to view the output. So everything is in running on browser. So I'm using a browser and then I'm running all the examples on the browser. So now what I'll put instead of this one, yeah, I'll view the source also. Let's view the source like how many lines of code it takes. Yeah, I got the source. Okay, it uses only one line of code. That's it. So if you put a VR headset and then have a look at it, you will actually enjoy the virtual real space. So it uses only one line, type two for setting the background of your virtual world with a 360 degree image. That's it. It's very easy to code. It's very easy to share. So now someone made this and someone hosted it on GitHub or any place and they put the link here. So I'm able to view the content. So now I can combine both of things. Do you want me to combine both the things? I don't think I have the image but yeah. So if I will show you, you have this hello, where we are and we'll view the source as well. So now, okay, I'll zoom in. Yes. So here you have everything you have box, cylinder, plane, etc. And in the sky, a sky color. So instead of this one, I'll put this one. What is that? Yeah. The sky this time. So instead of adding the color to the background, it adds the image. I didn't do any coding like file lines of code and I got my virtual reality application up and running. You can directly store it in an index.html and then here. And I'll show you one powerful example. So these are the basic simple examples, right? So I'll show you one powerful example. And I'll tell you how we can integrate the previous talk. Previous talk was about WebRTC, right? So we'll see how we can, I'll tell you how we can use the WebRTC platform to make your virtual reality application. Yeah. So this is it. So this, since I don't have the controller, so I bought this video to show it to you. So yeah. So the person was at his office cubicle and he's playing table tennis with some other person who is at his own cubicle. And they meet in a virtual world. So this is, this is, so she's painting with real headset on her face and two controllers. So one left controller she is using as a color palette and the right controller she is using it as a paintbrush to brush things on the virtual world. In reality, it will be like just this room. But in the virtual world, she's painting amazing things using this one. And he's playing the game. So he's using his left controller as a shield and right controller as a hammer. Can you pass me the challenge? Last time challenge. Yeah. So this is basketball game. So they are playing just, they are handling the, they are having their controllers and they are just playing basketball in whatever room they are in. Thank you. So the applications are endless for this. So now whenever you have already seen three applications, one is paint, one is the one which we showed in the beginning, like the table tennis. And all of these applications are made using simple HTML. If you know HTML, then you will be able to make the applications, virtual reality applications. Just a minute, I think it's starting already. Check your, it's shut down already. It's shut down already, yeah. It was challenged by the end. It's the power on. Ah, he's in the wrong one. Yeah, it's the, yeah, it's starting. This is, okay. I think we can just turn. Yeah, sure. So, yeah, I was telling you about how we can combine the WebRTC, which we are showing here. So WebRTC was the previous talk. So we are two people, I mean, it's a peer-to-peer communication. So when it comes to the virtual world, so we have, we saw the table tennis example, right? So two people are meeting in the virtual world and they are playing table tennis. And one person is painting this. So if we combine the WebRTC technology in here, two people can meet in a virtual world and they can paint things. Like, I'm here and my friend is in India. So, and we got a great idea. I think I'll forget in the next hour. So we meet in the virtual world and we paint those ideas in the virtual world. The application is already up and running. So I told you about the website, right? So it's already up and running there. So you can go there, run your application. So basically, that runs on any hardware headset, but you need the controllers for painting and painting brush and the color palette. Yeah. So yeah. So she's trying to paint things in the virtual world with the controllers and we are headsets on our eyes. So that's how she said. So this is another game. We spoke about that. So the applications are endless. Like, this is a fighting game. So you can have a controller and you can play boxing with your friend as well. If you want to develop an application, yeah, you can develop it as well. This is basketball game and they are playing everything. They don't need any equipment or anything. They can just go into the virtual world and they can play things. The painter and most of these applications are already made and already hosted on Avril.io. You just need headsets to play them. And yeah, so these are other applications. So they're playing another game, shooting game. So the applications are still endless. So if you have an idea, you can start working on it. I was showing you how many lines of code it actually takes to build your virtual world. So this is how easy it is. Now we got your virtual world. And how it actually works. So the WebVR actually works on entity component relationships. So for example, if you have heard about class and object and inheritance. Like for example, so this is what I have the entity. First year I was writing in the Hello World program. I was writing a spear and then give the coordinates and I gave the color. So that is actually a wrap around this one. So I declared an entity and then give the job entity. Like it should be a spear and then I give what kind of material it should be. What kind of position it should be and how much should I rotate the entity. And instead of all this, I was just using the A spear and then giving these objects. So it's like this is an entity and that's the main component. So you can, I mean based on this entity, you can create your own component. For example, if I want to create a box, I was using a box type. So instead of that, so I declare an entity then give the primitive as box. So actually in a frame we are making it simpler. We are making the things simpler to use to code and to develop application to share it with people. So yeah, so these are few components which we have included in a frame. Like we have position, we have rotation. We have basic primitives or components which we have. But yeah, web is open and anyone interested in working on web, I mean anyone interested in web can start contributing to it. And that's how we got all these components. Like we integrated only a few components but people are so excited and people want to develop web applications, the web virtual reality applications. And yeah, then we did happen with the help of this web. So now we have a lot of components and we'll have, like at least a component added to the marketplace every month. So that's like, it's always a continuous innovation process going on in web ITC. So if you want to develop web VR applications, you're welcome. If you want to contribute to the projects also, you can make your own component and share it with the people. And yeah, so let's get to our work. So this was our main agenda, right? So let's build our own Pokemon world. So yeah, so what would be your first step? So think of a Pokemon world and what do you think you need? Scene. Yes, background image, yeah. And what else do we need? Yeah, Pokemons. Yeah, we are building the Pokemon world and so yeah, we need Pokemons and yeah, controller. If you want to interact with the Pokemons, you need the controllers. So yeah. And then sound. Sound, yes, yes. So regarding that sound, it's simple. Like, like how you integrate the sound in your website. So it's the same thing. So you don't need to learn any extra things. Okay. So if you like, I think audio tag you use in HTML to include a audio file into your website. Use the same thing for this. So it's simple. You don't need to learn anything. So one component we are done. We already coded it. So if you search for HTML audio tag, so you will get the code. And we already coded it. Now we have left with the scene. We have Pokemons. We have controllers. Okay. Now we don't have controllers, but yeah. But yeah, we'll code the first two parts. So cut the controllers also. We have good resources to use to start developing. And now we have the scene. And we have the Pokemons. So to make it interesting, we'll do one thing instead of Pokemon images. Yeah, Pokemon images are stationary. So we'll do one thing. We'll do a live image. So they'll be a transition. I mean, they just move. So it looks beautiful, right? So instead of stationary images, it looks beautiful. So yeah. So this is what we need. So we need a background image. We need Pokemons, images searchers. And then we need a few A tags. So what A tags we should use? What code we should use? What A tags? Tag. So for a box, we are using A box. So what tags do we need for inserting a background image? A sky. Yes. A sky, we can give you the color or else a box. So we already got one. So now the first thing is done. We inserted a background image. Next Pokemon images. How to insert them in the virtual space? SRC. Yeah, SRC. We'll use the SRC tag and then insert it. And yeah. So that will be a plane, right? So we'll include the plane. So we can insert. We can actually include the Pokemons around the QO. Like on all sides of the QO or all sides of the cylinder. But to make it like really real. So we use a plane. And on top of that, we'll have this GIF images. So yeah. We'll have that A sky to include the background. And A plane with SRC. To include the GIF images. GIF images. And what else do we need? That's it. Yeah. So GIF images. So like I was telling you, like few components are already included. But yeah, many components are developed by volunteers. So when I got this idea. So I thought, okay, let's search if there is a component. Where you could include, I mean where you could play the GIF images. GIF images on the browser. Like on the browser in virtual world. So I found this. So there is a guy called as Mayotovita. He's interested in virtual reality. So he spent a weekend and developed a component for that. So if, so this A frame, the first line, A frame dot, we are already including. And all our A frame and available applications. Right. So now we include another two A frame, GIF shader and A frame GIF component. So I shared the presentation with you if you, I mean after the talk. Yeah. So now we got these two main.js. So we include it in our HTML file. And yeah. Now we have the libraries. We have the sky. We have the background. And now we need to, you will use a plane and to just put the input, the Pokemon surround in our virtual world. Yeah. So now what would be the next step? Embedding a Pokemon GIF. So I was using the entity, the normal thing. Entity, geometry, primitive plane. So instead of this, you can actually write A plane. I'm writing it as a, like an entity, but you can write A plane, ASPR or anything. So I need that A plane. I'm giving a position like it should be minus two, 0.5, minus five. So what does it mean? Okay. So this is minus two. This is positive XS6, positive Y axis and positive Z axis. So minus two in the sense, this one will be minus two. And I mean I'm telling from my direction. That will be opposite for you. Yeah. And then 0.5 in Y axis. So this is minus two and this is 0.5. So they meet at this point. Okay. And then minus five. So minus five is away from the ground. And the object will be at some point over there. And so yeah, we got the position and we are rotating it with 90 degrees on Y axis. So let's see how it rotates. Like we are rotating the plane with 90 degrees. So let's see how we will get the Pokemon. I mean embedded into our view. And then we have a scale two to two. Scale two to two is like, so actually when I search for GIF images, I got only very small, small GIF images. So I'm scaling it to become large. So two to two in the sense, like the size will be double. And yeah, what else do I need? I need my bigger shader GIF. So that's in the component. Like if you are inserting a GIF component, you should write shader colon GIF. Or else it will take it as an image. And I won't create the GIF transition. So we'll write the shader GIF. And then source URL. I'm using the media.tenor.coil. That's where I found the GIF images. So I'm embedded my Pokemon into the virtual world. So now I have the sky and I have this. So my Pokemon world should be ready. Okay, so let me see. And what is the next step? We don't have any next step. So we are done with the Pokemon world. So I just spent an hour straight to make my own Pokemon world. So I'll shade it with your like how it looks. I hosted it on my GitHub so that anyone can view it. A frame boilerplate, yes. Okay. Yeah. I got my side deck here. It got shrugged. So basically, yeah, we have a chat million running on its tail. And we have a Pokemon. We have a Pikachu who is a HEL leader in my virtual world. We will go near to the Pikachu. What is it doing? Okay. It's playing with its own. Yeah, we have a Snorlax. So this was a world and I placed the Snorlax on the back for the reasons. It's saying hi to you. In the virtual world, you have this and you suddenly move around and you will find the Snorlax staring at you waving his hand. So yeah. You can see this. I have a sky here. I gave an image but I used a plane, this white color plane. Also, this is just to hide, I mean, one irregularity like I can see it. So if the GIF images which you generally find on internet, so they have either a background or a white background, right? So when you insert it into the virtual world, so this is how it looks. The Snorlax, you can see it, right? So it will have a white background and your gen film will be moving. So to hide the problem, so I just use this plane, white plane, so that even these Pokemon and this Charmillion got a white background. But yeah, you can't see it because I'm hiding it with the plane. I'm intelligent, yeah. So now, yeah, we have Psyduck which is swimming in its own. Yeah, we have a Eve who is jumping. So I just grabbed a few things and yeah, Wigglepuff looks angry with this. Yeah, what is it doing? No, she doesn't want to show herself to the demo, hasn't been in the demo. Yeah, so this is just a simpler virtual world which I created. Yeah, and it's not stable, the GIF component. It's not stable for now because the frame rate of GIF is very high and the component acts like he made it as a hobby. So it's not stable, but yeah, but still you can use it. Like if you want to create your own virtual world, so this is how simple it is. And yeah, we'll think about, I mean, that was not included. So I think we have enough time, right? Yeah, we have still how much time do we have? We have 30 minutes. Yeah, we have another 30 minutes. So we will also see, I mean, I have not made it yet, but I'm getting this idea. So let's build this Pokemon world in augmented reality. Like, Pokemon will be sitting among you and yourselves. So if there are empty chairs, we'll put Pokemon into there. So we might not be able to make it by the end of this demo, but yeah, I'll show you how we can make it. So yeah, so this is how you build the Pokemon world in virtual reality. And I'll show you the code. I lost the internet. Do we have internet here? I'm not cutting. Yeah. Yeah, too many devices. I already opened it. Yes. Yes, I think I already opened it. Yeah. So this is what I did. I put this one. A sky equal to BG image. So I'm inserting the background image. So I'm using instead of giving the URL, I'm using this hash BG image. And this BG image, I'll write an ID. So that one, I wrote it at the top. BG image and it should be panorama background dot JPG. And I'm using this ID name and write it as slash ID and the source. And now we got this background image. So this is the whole of the code which I needed. Now I got it. Now I got the background image. So basically why I did is like I can use the source and insert the URL onto the page. But if I want to change image, then again, I have to search for the SQL tag or anything. But now it's simple for me. I got the images which I use in my demo here. And if I want to change anything, it's easy for me to add it. So it's just a good practice. That's it. But it's not necessary. You can directly write the source and inside this A sky itself. And now let's see the Pokemon. So I commented, I wrote, I wrote good code. So I commented like, so this is the wiggle puff plane. This is the position of the wiggle puff. And yeah, this is everything. This is for Charmander. This is for Eve. This is for Snorlax. This is for Psyduck. This is for Pikachu. So we were talking about this minus 1, minus 2, 0.5 and minus 5, right? So that should be somewhere there. And wiggle puff was there, right? So when we open the, so yeah, once I open, I will get the Wi-Fi. I'll demo it again. Yeah. It's connecting. Connected. Open. Yes. So all the code I wrote, that's it. I didn't wrote anything much. See, it all, it got like 69 lines of code. And in that half of the code is already commented. So with this 39 lines, 30 lines of code, I created my, yeah. So see, now this is my camera. You can see this dot, right? This dot, black color dot, can you see it? So that is my camera. So this is my camera. And my wiggle puff is located somewhere on the left side of the camera. And side is on the right side. So that means it should have a positive x-axis and negative y-axis and negative z-axis and some y-axis. So let's see our code. Where is it? Yeah. So, and that was side, side up. We have like positive x-axis. Yes. And positive y-axis, 0.3 and negative z-axis. So this is how you position it. And the rotation sees also like, for example, in a demo, we have like Eve on the left side. So let's see to what angle it is rotated. Yeah, we have Eve here. And we have rotated the y-axis by 90. So this is y-axis. And we rotated it by 90 degrees. So like when you look at, look towards the left side, you will see Eve on there. And the same thing, like this is located, the Snowlax is located 180 degrees. So this is our main plane. And we rotated it 180 degrees. So the Snowlax will be here. So in this way, you will give the position, you will give the rotation, you will give the length to the images. And yeah, now you have your own Pokemon world playing around, I mean, in your virtual reality. And also, yeah, one more thing to add. If we got this idea when we were demoing it out both yesterday, like, Okay, now instead of adding this plane, so we'll have few white clouds. And inside the clouds will put this Pokemon's to hide that white background. It looks natural, right? So more than having this plane and over this, having this Pokemon, it looks more natural. So that was the idea we got it out both itself. And now let's, now this is how you make it any doubts. Yeah, if you have any questions other than this thing, yeah, we'll discuss it in the end. Like, so now we have our Pokemon world and virtual reality. So let's see how we can make the same thing in augmented reality. We have even that one, I was searching if I can make it in augmented reality. And there is already component someone created. So this, all things are running on the browser. If you observe one thing, these are all things are running on your browser. It doesn't need any software. So on browser, if, for example, if you're using, if you're capturing a camera, I mean, if you are capturing a photo or video from the Facebook on the browser itself. So it opens your camera, right? So because it gets the user media, like the camera access or the photo access or everywhere to the web page using basic JavaScript. So we will use the same user media API, get user media API, and we'll get the access to camera. So whatever the camera sees, we should get the same thing on the virtual world. And then we'll put the Pokemons around the world, around the augmented reality. So we already have a, this is a frame, right? So we have a frame, yeah, that's augmented reality. Using your real world to, I mean, you're using your real world and getting some virtual objects into your real world. Okay, I found one augmented reality, this one. Yeah. So now, I think I already cloned this one. So let me open the code directly on my local. Where is it? Development. Yeah, a frame here, I already have it. And yeah, index.html, I'm just, this is the basic HTML code. And I open where? Firefox. Yes. Okay. And it's asking me for permissions to use my webcam. Okay. And yeah, I'll allow, okay. I'll allow for this time. Okay. Now we got it. This one is a Bulbasaur, but yeah, I'll change it to a good image, but nice image. We have a duck also. So yeah, I put an image here. This is Bulbasaur, but since I, it has only unique color, so I have it. So if you have the virtual headset, then you can move around and see. So, but yeah, now since it's on the desktop, you are not able to see it. So yeah. So now I got some object into the real world. That's how augmented reality works. Let's see. The example was really good, but yeah, let me see autonown.github.io. So let's see if he hosted it so that, I mean, it will be easy for us to check it. Yeah. Okay. I'm closing it. And yeah, even that example is asking us for camera access. Yeah. Okay. Now we have this duck. Now you can see this duck, right? So we bought it into the real world. So we are using the camera and which shows us, I mean, since this is a desktop, you can't see it in a really good way, but if it's in a mobile, so if the duck is there, so you will see the duck sitting on the floor along with your people. So let's see how much code it actually got in this autonown. So this aframe.js, which we already included in our framework. This is camera.js, which he created for his own. So we can just clone it and like I did the same thing. I just copied this code and then instead of this duck.obj, I included a pulverser.obj. Where is it? Yeah. I included a pulverser.obj. That's it. I didn't made any changes. I just made it and yeah, I'll show you the demo on the mobile phone in the end. So that you will know. And let's see what code it actually got on the index.stml. So yeah. So this is a simple styling code and we have assets. So we included a duck.obj, which shows duck.obj. And then we included where is that? This one. Yeah. Okay. So yeah. So we included this duck.obj. This is a 3D file, 3D image file. So and then we color. We added it to the using this object model. And then we gave the position. We gave the scales like it was small in the beginning, but we enlarged it to 8x. Then we colored it with orange. And that's how we got this one, the augmented, the duck in the augmented reality. So if you have your own mobile device, so you can go to that website, enable VR mode and then have a look at that. So you can try it right now itself. It's hosted already. The URL is, if you want to try to have the duck in your mobile phone site, it's easy. Go to autonome.github.io. Yeah. This is the thing. No. Autonome.github.io slash AFAM. Open on your browser. You don't need to install any application. Just open on your browser. Go to that URL and you'll see the duck on your virtual space, on the augmented space around you. Yes. Hi. Yes. Yeah. That's a good question. A way to find OVJ file. Even I don't know how to build that in 3D space. So what I did was... You join. You join with OVJ. Because they are all public. Yes. Yes. Join with OVJ. And do collision. I didn't actually get your question. It's like you can build a lot of characters. Yes. Yes. Yes. Yes. Yes. So it's quite easy actually, right? Is it correct to say that? Objects 1, 2, 3, 4. Yes. They're doing like that. Yeah. Yes. So the animation in OVJ. Yeah. Okay. So the animation in OVJ also, we can have it. So if you look at the A frame tags, you will have like A animation. So it works with almost everything. Like if you want a box to animate, you can do that. If you want a sphere to animate, you can do that. So basically, the animate works like this. So for example, your object is at one point. And you want it to enlarge it to 2, 2, 2. So you will write like A animation from scale 0, 0, 0. Yeah. 2 scale 3, 3, 3. So and you will give the time like one second or 10 milliseconds or anything. And it enlarges. So we have that code as well. Yeah. Just a minute. Aframe.io. Okay. I don't have internet, but yeah. So go to Aframe.io. There you will have a search for A animation tag. So you can animate any object using that. So how many of you found the duck on the website? You found the duck? Yeah. Yes, you got the duck. So you can move around the space. So instead of that full screen, you can actually enable that VR mode and use the cardboard box which I provided. You can put in that and then view the duck in the virtual space, in the augmented space. Sorry. Yeah. So where are the VR boxes? VR box. Yeah. So if you want to try it, you can use those VR boxes and you can, it works with any phone. So you can put your phone in the inside that box and then look at the space around you in virtual world. Yeah. Thank you. I think yeah, I'm almost done. Yes. So now we embedded the Pokemon and we thought about like we discussed about how to build the Pokemon world in augmented reality. And yeah, so I told you, right? AFrame is an open source project built by Mozilla. It's open. You don't need to, I mean Mozilla doesn't charge you anything. So we have like contributors, we have like 130 contributors and 49,000 stargazers on GitHub. Like 130 people are actually contributing to the AFrame product. Like they are not building examples. They are actually contributing to the AFrame project and we have like 17, 15 members on Slack. So it's like a group messaging client and hundreds of future projects. So for example, if you have made anything after going home using this VR and if you share it with your AFrame team and they will publish it on their own website. So for every week, they will release like this is a week of AFrame. So now I think it's 55th week of AFrame. So in that week, whatever good things that are made using AFrame, so they will feature it on the website. And yeah, so thank you. That's it from me. Yeah. Maybe let me start. What one big question I think in VR is how is it about hardware requirements? It's not hardware dependent. So like I was telling you, right? This cost like $40. That cost like $4. What about graphics hardware? No, it actually the frame rate depends on your mobile device and the browser. What kind of mobile device would I need to have a flow and like, yeah, at least the frame rate. Which generation would it work on? So for this basic example, it runs on almost like all mobile devices. You are just including few HTML tags, right? But if you're making anything like a game, then I might require about like one or two GB of RAM. So pretty good RAM so that it has enough space for the browser to run. So it's similar to like if you open 100 websites on the browser. So it's like similar to that. So if you open a VR project, so it takes the same conception like a website. So it doesn't take any other extra memory space. Does it use WebGL? Yes, yes, absolutely. So it uses those augmented, not augmented, the accelerometers in your mobile device. And when you move, so it detects that and generates the WebGL content on the browser using WebGL. Okay, anybody ask the questions? Yes, I bought it on Amazon. Yeah, these are called as VR boxes. This is the device name is Propus Pro. So if you search for VR boxes, you'll have many options. So I learned these things with the basic box. That cost like only $4 for me on Amazon. That's called as VR box. And I learned with that and then when I got confidence that, okay, I can work on a VR project. So then I bought this one. So I got like headphones. You can use some beautiful VR videos. So if you want to know more about, I mean, if you want to have a real experience of virtual reality, go to YouTube and search for VR videos. So that gives you, I mean, even if you're a beginner, you will know like what things you can do with virtual reality. Yes, any other questions? Has a user, has a developer, you can ask me any questions. Alright, maybe you can catch them after the talk. So thanks, Satosh. Yeah, thank you. It was awesome talking with you. Very informative. Yeah, thank you. Thank you. Thank you. And yeah, you can sometimes visit us at Mozilla.