 shall we start okay hello everyone my name is Ram and I'm going to talk about virtual reality and how to build your own VR website quickly and very easily today so I will be covering men you know three parts mainly first one is about what is virtual reality second one is related to the web so how are we talking about virtual reality on the web so web VR is what we are calling it and then third one is going to be the a-frame which is a web framework for building the VR websites very quickly and easily first of all my name is oh sorry so my name is Ram and I am a senior web developer at Tatsizim India which is a spin-off company of DE show has fund I'm also contributing to Mozilla as open-source project since last five years I'm a Mozilla tech speaker and a Mozilla representative and you can ask many questions if you have related to Mozilla and its open-source projects so let's get started with the virtual reality so first of all if I talk about what is virtual reality there are three main things here one is we are talking about something virtual means something which has been which is a computer generated environment or a computer simulated 3d environment second part is when we experience it we see it very seamless and we see it very immersive and interactive experience and third part is we have to use some additional hardware to experience the virtual reality so virtual reality is a computer generated environment which we can experience with help of special headsets immersive Lee and interactively so these are few of the examples where you can see people are playing or they are communicating they are working with help of virtual reality so we can assume that in next some time when the virtual reality platform becomes very advanced or when it becomes matured then this will completely change the way we are communicating the way we are playing the way we communicate the way we work everything so one thing I mentioned about virtual reality was that we have to have a special kind of headset for this so there are two types of headsets available in the market today with help of which we experience the virtual reality so the first part on the top is called computer so the first kinds of headset are the ones which we use with help of the mobile devices so we put the mobile phone inside these headsets so this is one of the examples this is a Google cardboard we put the mobile phone inside this and when we put this on we will be able to experience the virtual reality there so this is the first type of device in this the tracking happens with help of all the sensors and the hardware available in the mobile now the second type of hardware or the headsets are called the t-third headsets in which there are two special things apart from the display so we do not have to use the mobile phone we can simply connect those headsets with the computer the headset will have their own display so when we put them on the display of the headset will be used apart from that the headset will also have additional controllers which will have sensors and there will be few trackers which will be tracking the location and the rotation so the second kind of headsets have the display we also have the controllers in our hands so the controllers have the sensors which will locate our position and rotation and the sensors are being tracked by the trackers which we have to put statically before you know like starting the simulation so when we do the setup of these headsets we clear an area of a small room then we put the trackers on the sides we put the headset on we have the trackers in our hands and then we we can do whatever we are doing with the virtual reality so the example of the devices which you see here are Google Cardboard then Google Daydream, Gear VR, Oculus Rift, PlayStation VR, HTC Y these are these are the most popular ones which are being used today so HTC Y along with Stream are giving the like one of the best compelling experiences today but again these the market in these industry or like in this industry is evolving very fast and all the big players are competing with each other with each other so we can expect something new like you know we never know how soon we can expect something new out there now the content of the virtual reality today what we see is kind of like you know they are get keepers so if you are putting any app you have to get it approved by someone they can take it out anytime so they are get keepers users have to install the applications to be able to you know experience them and they are with the closed source technologies they are not open source to make the web we are sorry to make the virtual reality more compelling and to make it more successful we need to remove these fractions and we need to you know like make it some some more open platform should be there so something similar which can help us here is web so the web is already we know that this is open anyone can publish any website or anything and then this is well connected and this is instant like whatever I am creating I am uploading any website I can share with you immediately so web here is virtual reality platform with the advantage of of the web if I talk more specifically about the web we are API is then these are the browser API is which brings the web gel rendering to the to to the headsets and the sensors in simple terms we had the 3D world available in the web in the past as well but with web we are we are actually making it more seamless we are also making it more easy to interact or to connect with with the trackers which are there on the headset so web we are is supposed to make the virtual reality experience faster and more seamless on the web the browser support right now is not very good so you will find the web we are working fine with the chromium version with the nightly versions of these browsers or behind the flags so while creating the websites we have to rely too much on the polyfills so polyfills are the ones which polyfill is kind of like a layer between a browser which is not supporting where we are plus the implementation so when the browser is not supporting the web we are this particular layer we will make it walk so that that's how we are creating the virtual reality content today when we are creating the virtual reality content the first thing we need to do is to create a metaverse which is nothing but a stage or a scene where we'll be doing everything so this is a virtual place where everything will happen now to build a metaverse or to build anything for that matter on the virtual reality you need to access the web we are content which we are just not just not talking about but it's kind of like too hard to create the web we are experiences today because of all these things which we have to do so if we are using the native web we are and we have to create some website then we are to import the polyfill setting up the camera lights and then you know setting up the canvas and then all the effects rendering everything so these are all the things which we have to do if we are using the native web we are apis now this is cool if you are developing something big and you know you are you want to make take a full control of the scene which you are creating but what if I just want to do some kind of prototyping I just want to get started with it so we have a solution here and the solution is web we are which is the framework for building the virtual reality experiences so this framework takes care of all the boilerplate code which you have to write if you are using the native web your apis this is all you need to do when you are starting with a virtual reality reality website with help of a frame you just need to drop a single life or line of script script tag on the on the on your web page and then you're all set the a frame library gives you the declarative way of using the 3js 3js is a library which have been well used by the industry since quite a long time and you can find all the 3d objects there and there are many things which which are already making it powerful with help of a frame which is built on top of 3js you will find all the declarative ways all the custom elements which we can use here so the first custom element which we are using is a scene so a scene when you write a scene it means that you are going to write something which should be rendered in a virtual reality content now let's take an example you have this hello world scene so this is a very simple scene nothing much you just have three objects there there is one plane and there is a background like right now you you you don't see much in the background this like just a plain color there if you have to create this particular thing on the a frame this is going to be very easy this is the code which will create this this experience so you just need three objects there they are very primitive things and one plane and one sky all five things which you're seeing there are available here nothing much there are no other boilerplate code or or like you know this becomes terribly easy when you start with a frame when it is about the primitives or the basic elements which we are talking about so here we go these are few of the custom elements you just need to add the color the position the rotation the the basic things which you can you know imagine very easily while creating these things so this was one of the examples how we can create a basic virtual reality website now one of the reasons why a frame is being adapted well by the developer community is that this works well with everything like you know all the frameworks now the reason is this is simple stml there is nothing much here so while you are working with react while you are working with angular you are working with anything you can you know you can use any of the stml tags and the way other things work is the way a frame also works so you can use the a frame tags and the a frame scenes seamlessly with the help of all of these these tools available today now one more interesting part about virtual reality or about a frame is that even if you are not a developer or a web developer if you are the designer if you are an architect you can also get started with this very easily because you need not to create all the objects inside a frame so what you can do is you can create your objects in the you know in your favorite 3d modeling tool you are using like beat my music of excel or any other tools which are available today for creating the 3d models so once you create your 3d model you can add it to a page as simple as uh we are we are adding this this red color ball or a cylinder here so when we are coming to the implementing on the website you need not to worry about the the the things behind them so you can simply create your model in some other tool and you can import them here um a frame uses entity component system i will not go much deeper into this because this is uh more of uh you know like developer kind of thing but i'll just give you a brief idea that if you need to create something uh which is not primitive and if you are creating something of your own you can start with an entity so in entity component system we have an empty entity which doesn't have its own behavior or its own reaction so it doesn't do anything by itself but when we add different components it starts to react it starts to behave and that's when the the whole system uh works so you have an entity this doesn't do anything but if you add geometry let's say this is uh sphere primitive like this is driven from this sphere the radius is this much this is the color this is the roughness you can add as many things as you want the position rotation and then animation or the pattern you want to do in the movement during the animation you can add anything there so these are called the components or this is how we compose an entity and we make it work there are different examples there so this is the set of basic or the provided items by a frame so these are the set of components which are provided by a frame but a frame is a well extensible uh framework so these are all the other things which have been built around a frame and uh you know these these are the things which have been developed by the community and you can use them so let's say i want to uh create a rain effect like you know uh i i just want uh something like that uh there are some stars and they are just raining or there are water droplets which are just raining so now if you want to create a water droplet either you can create the drop on your own by using all these primitive elements or someone from the community or let's say i created it and then i can uh you know publish this component so that others can use it so we have a a frame registry which is a curated collection of all these components so this is another cool feature which is making a frame very popular so people are creating their own components and if the thing that this can be reusable by other developers they can submit it to the registry registry uh has a quotation process and then this will appear here so any component which is not a primitive or the or the component which is given by the a frame uh you can make it on your own and then you can submit it to the registry or there are thousands of such uh components available in the registry already so if you want to build something you can just go and check in the in the registry if this is already available so that you can use it from there this is one of the examples how you can create one one one component and this is like you know so this is an example where we have the the teeter the the teetered headset and when you have the controllers with you this how you can use it and you you can you know you will get all the values from from the headset and the controllers which which are available there the last thing about a frame so i'll so the last thing which or like the another thing which is making a frame very popular is the inspector today the way web works is that this is available in front of you and whatever you want to do or like whatever this is there on the website when you do inspect element you get it here so you can easily inspect everything which is available on the webpage and you can change the values and you can see how it's working you get the exact same or even better experience when you are creating a frame scene so let's say this is a virtual reality scene so if you do control shift i here you will actually get into an inspector now if you see this inspector is actually nothing but kind of like you know a visualization tool which is telling you what all things are available there you can click on any of these elements and you can change the values from here so if you want to see what if the ball is even bigger or if you want to see what if the ball is not kept so close and if you are putting it a little bit behind so whatever you want to do you can do it visually from here so let's say i want to change the position and see how it's working that's the way i do it now let's say i want to change its scale so i can go there and i can change the scale and i can see okay this this how it will look like so whatever i i want to do if i want to put it or i i want to change the location or anything i want to do i can do it with the help of inspector once done i can look it from all the angles which a user can look it from and then i can also save the html by clicking on the on the top right corner so this will give me the updated value of the html which i can go back and i can use there so this is another thing which which is what the developers are finding very useful when working with a frame you can go back to the scene and you will find you know like whatever changes you made you will be able to see them here so another thing which people check when they are actually going to use a new framework is the community how big and how active is the community so i'll show you a couple of examples of the work done by people with help of a frame a frame.io slash blog is the place where you can go and check all the community updates every week so there is a black blog post chain called a week of a frame in which the a frame team puts together all the updates from the a frame and its community if someone has done something or they have created something so if you are building something with a frame go and tweet about it with adrid a frame we are and the team will be looking into all those things and if your project is cool this will this might be listed in the a week of a frame blog post so here are a few of the examples we so in in context of art we are seeing then a pantry is an example which was created by the mozilla vr team this is kind of like a tilt brush application which was developed by google so with the help of this application you can create your 3d art in virtual reality in general is people have seen like people have done couple of things here so this is one of the example of websites called fear of the sky and this website gives a 360 degree two or the virtual reality two of the things of how the things are changing in Syria because of all the disturbance which is there if we talk about let's say data visualization the adit is one tool which was created by by a community member and you can see how people can do the data visualization in 3d with help of with with help of a frame if we talk about gaming a blast is a game which was created again by mozilla vr team and this uses the controllers to shoot the monsters in in front of you there are many other examples i'll provide you the link of the slides where you can go and check all these links out there in the mathematics there is like you know a calculator or anything you you want to implement people are also using people are also using virtual reality websites or like the virtual reality tools like a frame along with ar so you can see an example here where a person is having a mobile phone and he's trying to mimic the artificial the the ar with the with the we are seen here there are many other examples this is one of my favorite ones this is a ice staging real estate website which gives you the live tour of a real estate like a home or or like a place which you want to buy or rent this is really very cool you can go and check it out by yourself this this this will give you complete tour of the whole house and you can move around to one place to other place and in this example like i said there are all kinds of implementations in different fields so you'll find something in the education and all these things so when we talk about the community these are few of the examples which i was showing you if i talk about the the numbers on the github repository of a frame there are 180 plus contributors contributing to the a frame library there are so many star gazes like 6000 plus star gazes of the a frame github repo there are thousand plus members on slack this is pretty active place you can go and post your questions there or you can also post your questions on stack off flow people are very actively answering there there are hundreds of featured projects on on a particular repository which is named as awesome a frame on the on the mozilla a frame github account so this is the place where you will find all the link of all the projects which have been featured in a week of a frame or blog post chain so that's all from my site i have few demos here so i have two demos to show you one is a very simple like you know a website kind of thing you can just imagine like how a vr website could look like and then i also try to create a vr tool of of of a shaft field my slide deck is available on the given link there is a telegram group there's a slack channel available you can also tweet me on this this twitter id or you can find me on this mail id so before i take questions i'll just quickly show you the demo so this is like you know i i just made it very quickly so i just took few pictures 360-degree pictures of the of the field here from different places and then i just connected them from one place to the other place so let's say this is the the entrance and if i want to go inside there is an arrow if i click on the arrow you will go to the next place so this is where we came in and this is where you can go next and you will find this place here and similarly like you know you can just go to one place to other this a very simple prototype which i created it this there's nothing much in this so this is one example you can have a look about this on the on the headset i have few headsets here this is another website which like not exactly website just a prototype of few of the few of the different things which can be done here so one question you might have is how do we access this when we have the headset on so when we put the headset on the way we interact with the VR scene is by few gestures so one of the gestures is sorry okay so one of the gestures is called fusing or it's gazing so when i look at this card for two three seconds i will enter into this so this is a way by which i'm telling you know like it's kind of like a click so in VR there are different ways by which we can you know give instruction that okay i want to click here so okay the audio is not working here okay so this is just a hobby thing i did so the lyrics of your songs are coming here and then we if you want to do muting or unmuting you can do by clicking on these things you can click on the close and you can go back to the main menu we also have 360 degree videos available so if you want to embed a 360 degree video it's pretty easy with a frame so when you look back in a 360 degree video you'll be able to see the things going back you can look at the right left everywhere so this is sorry okay so i was showing that there are different kind of example like you know different kind of applications which we can create here a sly as a fox as strong as an ox as fast as a hair as brave as a bear as free as a bird as the lyrics are just coming from there as quiet as a mouse as big as a house so i was just trying the animation part and i i created this particular thing there is nothing much about this like you know you this is another example which has created these are bouncing rubik's cube out there there's nothing too much here okay so these these are all the things so you can find all these things available online you can check them at home or if you want to check one of the videos or like the the demos i have a couple of headset here so yes any questions you might have thank you if you want to have a look at the demo you can come here and check the demo i have my visiting cards here and there are a few mozilla stickers available here you can just grab them i'll also keep them at the info desk so you can also grab them from the info desk thank you very much yes yes so when we are on on a website if this website is a virtual reality enabled website then you will find a special sign i'll show you how so you see this little icon here so this is a VR icon kind of thing so when you click on this icon when you are on the desktop this will just open in a full screen but when you're on on a mobile phone this will actually open in this will split the screen into two and then you can put it so like this is the example when i click on this one they split the screen into two and then now i can put it in the in the headset and and this will work fine so when i'm so you're basically asking how is this detecting where i'm looking or where i want to click right yeah so let's say in this particular case i am seeing one area of this 360 degree picture so but when i move the the mobile here and there with the help of the sensor available in the in the mobile this will point at one place now what to do when the click happens is something which we write with the help of javascript so this is as easy or as simple as the way we create in the normal website so we just have this linking from one page to the other page so in this particular case which i was showing here let's say if this is a chart or what i'm doing is i have a background picture and i have there are two pictures here one is the background image in the other one is is a small image which is shown as the arrow so when i'm clicking here i'm just checking that what is the current background image and i'm actually replacing the current image with the next image available and i'm also replacing the arrow to the correct place so that this will look at the correct direction so now i just changed the background and the the arrow location so that's how this working does this answer okay yeah yeah yeah um so when we talk about the augmented reality like what one of the examples which which i was showing you people have been trying to do something with help of a frame in augmented reality as well but ar is kind of like you know the more in its baby stage yet so sorry so the the augmented reality is even more in un-matured state this is not yet matured so we might find out more ways to create better augmented reality content available but yeah today if you combine the camera with the with the virtual reality content here you can build the basic augmented reality related content with the help of a frame but there is nothing much which has come up yet okay thank you very much