 Thank you. Good morning, everyone. So before I begin anything, I just want to ask some two questions. How many of you here are web developers? Awesome. And how many of you have had their hands on developing for virtual reality experiences? That's less. Cool. So the aim of this session is primarily to make the count of these two groups strongly equal. Little about me, as she already said, I'm a tech speaker from Mozilla. And professionally, I work as a software developer at HSBC. And I've been contributing for quite some time. And A-Frame is something I've been working for a year. And it's interesting. Now, virtual reality, by definition, if we go, it's basically the computer-generated simulation of a 3D image or an environment, and which can be interacted with in a seemingly real or a physical manner. It's basically a technology that transports you to a completely different interactive and 3D environment. And you can already see how cool things people are doing in the background. It's going to be the next platform. It's going to completely change how we live, work, and play. And it's relatively new. We are still in the first generation of headsets. We have some like the Google Cardboard on the first one. It costs around $5. And it gives a very basic VR experience, a 360 degree, very low FPS and field of view. And not a very good experience, but good enough for a beginner to get started. And then there are high-end VR headsets, like the HTC Vive at the end. It has two controllers. It has base stations. And you can go around. It has complete room-scale tracking, both positional and rotational tracking, great field of view. But the thing is that you have to connect it to a PC with a very high processing power. And especially for me, like in India, they don't really have HTC Vibes. So we have to import it from the US. And then the custom chart is very expensive. We pay almost a double. And then assembling such a PC is probably more. And then so basically, we were discussing day before yesterday. VR is not yet for the common man, but it is soon going to be. But that said, the experiences provided by these headsets are absolutely mesmerizing. And these are the kinds of headsets that the VR industry is focusing on, is targeting. But the problem for developers is that there's a lot of friction in the VR ecosystem. And what I mean by that is that you have to go through, there are a lot of gatekeepers. You cannot just build something and share with the world. Like, hey, I built this. Check it out. You cannot do that, because you have to go through a lot of approvals. For example, the Oculus Store, it takes only the top ones into the store. The rest are rejected. So app stores and corporations, they control distribution. They can take down your content or block it. And even if you go through all these procedures, you'll have to make other people download your application. And for them, it's a complete black box, right? They don't know what's going on inside. And speaking of downloads, you yourself will have to download a lot of bulky software and complex setups just for the development. So these things are huge obstacles. You probably have to learn a new language. And then you'll spend some time fiddling around, figuring out how to make it work with multiple headsets. We want VR to be successful, right? So we want a platform without these points of friction. And the answer to that is, indeed, WebVR. So WebVR is basically allows web developers to create fantastic cross-platform, cross-device applications, VR experiences. Quoting from a talk in Google I.O., VR should be accessible to everyone, because it has the potential to let everyone play, explore, and create amazing new ways. So developers should be able to build something quickly and share it with everyone, no matter what device they are on. Kind of how easy it is to share stuff on the web, but in VR. And that is the very idea behind WebVR. It's VR on the web for everyone. Anyone can create anything just like they create the regular websites, that is with web technologies. And of course, it has all the properties of the web. It's open. Anyone can publish, open source, open standards, open culture. It's connected. You can traverse worlds and scenes and portals, just like hyperlinks in the 2D web. And it's instant, of course. You just click a link and bam, you're there. You can just share it with the world. You can tweet it, like check out what I've built. So more specifically, these are browser APIs that enable WebGL rendering to the headsets and access to VR sensors. It was initially by Mozilla, the WebVR API. Then currently, there's a working W3C community group. And Mozilla, Samsung, Microsoft, all these browsers are currently implementing WebVR 1.0 API. So these are the browsers that support it. Firefox was one of the first browsers to fully support WebVR. It started with Nightly. It's currently in the release channels also after Firefox 55. And there are these other browsers. Mobile Polyfill uses your mobile device orientation sensors to polyfill on smartphones. So the concept of metaverse from the science fiction, as we know, the idea is basically collective virtual persistence spaces and where the world might live in, they might work and play in. And to achieve it, we need to have it decentralized. It must be open. It must be connected. You cannot have one corporation controlling the world people live in. So how can we make it more accessible? Because as we saw yesterday in a talk, 3JS is one of the libraries used to create content in WebVR. But it is still very hard. I mean, the developers don't tell you that. But it is still very hard to create experiences in 3JS. You need to import WebVR polyfill, set up camera, lies, VR effect, et cetera, et cetera, all these so many things. These are huge obstacles. If you're just just, I want to build something very basic. I'm a new beginner. I just want to go and experiment something. But this is a huge obstacle for me. So I want a platform in which I can just concentrate on what I actually want to build. This boilerplate code, it probably needs a baiting with the newer versions of 3JS, where VR and browser quirks. What if we could make it more accessible? What if we could encapsulate all of this into a single line, just one single line? Well, introducing A-Frame. A-Frame is an open source web framework for building virtual reality experiences. And it helps developers, web developers, build VR content without graphics knowledge. And it helps you prototype VR, UX faster. And it's basically a kickstart to the VR ecosystem. The best part is that you can create a lot of A-Frame scenes entirely in simple plain HTML. Now, all of us have probably studied HTML in high school. And even if we haven't, how much time does it take to learn HTML? It's a couple of hours, that's it. Doesn't it sound super easy now? So let's just see a Hello World example in A-Frame. So by the way, just when using A-Frame, you need to include the script tag. And that's it. There are no build steps as such. And remember how I told you about encapsulating all the boilerplate code in a single line? This A-Scene tag is the global object in A-Frame that does that for you. It encapsulates. It does all of it, like camera, render, controls, VR effect, web VR, polyfill, everything. Just magically does that. And you do not have to put any extra effort on things you don't want to do. You can concentrate on the actual business logic. So let's start putting stuff inside our scene. So here I've used A-Box, A-Cylinder, A-Sphere, A-Plane, respectively. These are the primitives provided by A-Frame, just out of the box, respectively to build cylinders, spheres, et cetera. And components in A-Frame are like CSS tags. You can just add them like CSS tags. And Sky is basically the world, the surrounding world. It can be a 360-degree image or color. This is just a very basic Hello World application. But just look at this piece of code. It is so readable. I mean, HTML is arguably the most accessible language in computing. And this is encapsulated. So if you copy-paste this code somewhere else, it will work. There are no states or variables as such. And of course, for very advanced applications, you probably have to write some JavaScript for the logic or the components. But that's about it. You have the full power of the web, and it is so easy. It's beginner-friendly. So with those four lines of code, we have this scene created. We can move around using a headset and check it out. This is a very basic scene. But what it took was only four lines of code. So we're already one step closer to the metaverse we talked about. And this scene, by the way, is an A-Frame scene embedded in my HTML slides. And I can just modify it and change it using the DOM Inspector. And now, since it's based on HTML, it works with all your existing and favorite libraries and frameworks. So you have D3View, React, Redux, all of it. You name it, you have it. And this is a really good reason of having HTML as an intermediary layer for WebGL 3.js. And underneath, it's just an extensible declarative framework for 3.js. So A-Frame uses an entity component system architecture. This is an architectural pattern famous in 3D and game development. Those of you who have worked on Unity must be aware of it. It's particularly famous in Unity. So the concept is that everything, it's basically promoting the idea of composition over inheritance and hierarchy. Everything in a scene is an object, which is inherently an entity, which is empty. It does not have anything of its own, any appearance of its own. But you can plug in components to add appearance, behavior, and functionality. Now, in the 2D Web, we lay out elements with fixed behavior in a hierarchy. But in 3D and VR, things are absolutely different. It can be, I mean, the objects can have infinite types and complexities. So there is a need of a unique, I mean, of a different way of building up objects. And ECS provides that. And it promotes cleaner design by encapsulation, decoupling, reusability, removes all the problems associated with long inheritance chains into woven functionality. So for example, this is an entity. You have an entity which is the base of all the objects. It does not have anything of its own. It's kind of like an empty div tag in HTML without the components. You can plug in components, which are modules or data containers, to add the appearance, behavior, and functionality. So here we have the geometry component, which might have its own properties like sphere or the radius and the parameters. We add the material component. So we can keep adding components like plug and play to reuse, to mix and match and configure and build up an entity. It's like alchemy. So for example, if you have a ball, this is an entity. It has a certain geometry and materials, sphere and some leather, probably. And then you add the light component. So it becomes a glowing ball. Then you add the sound component. It becomes a singing glowing ball. And then you add the explode component. Becomes an exploding singing glowing ball. The point being that you can just keep adding components onto an entity to build up the entity. And you can construct any kind of object. This is the concept of composition. So while coding, what we do is for any entity, we use an A entity tag. You can add the geometry material like I specified before and keep building up the entity by continuously adding components. You can just keep adding components as much as you want. Like a valid rotation position on XYZ access here. So these are the components that ship in A-frame out of the box. These are provided by default. But A-frame has a huge community. And they've been building up a lot of components and using the awesome stuff. And these are some advanced developers who are helping empower other developers who have built tons of components. You have everything. These components can do anything. They have full access to the JavaScript and the DOM APIs. And these are like, you just name it. You have all the kinds of components ready-made built for you, like a networked scene for building multi-user applications. You have particle system. You have oceans. You have sound. You have audio visualizations. You have a lot of components ready-made just built in, just ready for use. And these are all curated in something known as A-registry. Now, A-registry is kind of like a store, an asset store, a free asset store, where you can just go and search for components, install them. For installing them, all you need to do is drop the script tag. And that's like a very convenient curated collection of A-frame components. For example, if you have a LeapHands component, now you can just drop the script tag in your code. And in the actual program, you can include it, as we can see here. And you'll have two hands. And you can do whatever you want with them. Now, A-frame also comes with a visual inspector. So it's a keyboard shortcut. Whenever you press Control Alt I in any A-frame scene, you get to a completely different view, a completely different. It takes you to a 3D grid-based system where you can pick up and drop objects. You can add components. And you can move around things. You can change values. It's like a 3D analog, VR analog of the browser DOM inspector that we have. It's just that it has many more features. You can even copy the changes made and you can paste it into the actual code. So of course, JavaScript. You can programmatically change components in the scene using JavaScript. We can do all the little things like query selector, query selector all for getting a reference to the scene and its entities. We have set attribute to modify the entities. We have append child to add the modified entities onto the scene. We can probably create a random user random for loop in JavaScript and add 50 A-boxes on random locations. You have event listeners. You can register handler functions to perform a particular something when a user performs a particular action, when a particular event is emitted. And all these little things, you have basically all the power of JavaScript available with you, all the power of web technologies available with you, and it is easy. Now, you can even add 3D models, of course. 3D models basically come with plain text files. And they have the textures, animations, et cetera. They also come along with images. And you can basically the 3JS loaders parse these files and render them as meshes in the scene. And every model components wrap around these 3JS loaders. So this is the 360-degree image of Park Gwell. And there is, if you can see, a 3D model of a queen right there in front of. I can move it around. It can be animated also. It's up to me. And all I had to do to import this into my scene was use the obj model component, because this is obj file and material file. I included it. And I can add components like scale, position, rotation. This is an entity. I can add as many components as I want. And there I have it. So speaking of multi-user applications, I'll just give an example of how you can use components to build multi-user applications. Now, you might think that to enable multiple users, we have to know all the concepts about servers and complicated networking protocols. Well, this component, the answer is, of course, no. Not anymore. The network A-frame component has you covered. So all you need to do is just include it in your file. And it abstracts away all the complex concepts that you might not be aware of. To begin with, we have this basic template. We have a scene, a scene that we already know about. We don't have anything inside it. We have included the script tags of the required files. So we add the network scene component besides a scene. So in entities, we keep adding components. This network A-frame component we want for the entire scene. So we add it besides a scene. This is just a basic template app. You can check out the syntax and the documentation. It's a unique app ID, unique room ID. And now we create an avatar. So basically what I've done here is created a sphere using a sphere. Another two spheres for eyes, white color. Another two spheres for black pupils. That's it. That is there in this code. Now, I wanted to come out. I mean, the scene must be built, but it's all popping it at the same place. So I want to have it at random locations. I want the avatar to pop up in random locations in different sessions in the different clients. So I just wrote simple JavaScript to randomize the location, the position, just five, six lines. And I can include that component in my entity ID equals the player tag. And I have to add network ID equals to template something, whatever template I have built. And I have to add the component that I just wrote for randomizing the location. And that's it. So this is just to make a little more prettier and to add up a little spice. I have a grid, a black-colored grid on the ground, and I have a colorful sky with snow kind of stuff falling in. So basically the scene has been built, but this is just to modify the background and the environment. And if you check out this URL right now, we will have something like this, the GIF. You will have multiple users. If you open it right now, you probably can see other users looking here and there and popping into the scene. So that was about the multi-user applications. So that was super easy, right? We just wrote a few lines, of course, and we built a very pretty cute application. And as I said, Aframe has a huge community. I mean, people have been working a lot, contributing to the code base, as well as the components. Aframe.io blog is where there are many things released, like there is something known as a week of Aframe. Every week, there are featured applications that are released. I mean, if you can just build your application and tweet it with Aframe VR, they'll probably feature your application in the week of Aframe if it's good. Now, these are some examples of the components of Aframe applications already built by some users. A Painter is a clone of Google Tilt Paint that was built. It was to show how powerful Aframe can be. You can just take two brushes and put on a headset with controllers and paint around. And instead of building your own models in blender or complicated software like that, you can just paint your own stuff and import it into your scene. This is something cool. And journalism, well, this is a journalism application. This was built to show the happenings in Syria, the bombings, et cetera. This was another journalism application. This is a city builder, a game built by someone to show how we can use Aframe for games also. You just need to pick up and drop things which you want to have in your city. This is a city builder application. This is my personal favorite, data visualization. You can just have multiple variables and columns. You can put it into the box. And you can just visualize it in 3D. You can have data visualization in 3D. And it's really beautiful and useful. This is another gaming application, A Blast. You just use your controllers to hit some mosquitoes. And that's the game. Prototyping is very useful for prototyping, of course. You can have your product in virtual reality. You can see it, how it looks like, and you can build it. And then you can maybe move on to building the final product. It's also useful for visualizing in 3D the graphs and calculating, et cetera. AR.js is a framework that is being built currently. And it is very new and it's under development. But it's something very interesting and allows you to develop AR applications using Aframe. So it actually uses AR toolkit and lets you build using Aframe. It's still in its very initial stages, but it's being developed and making great progress. It is something good to check out. It builds marker-based AR applications. And there have been tools built on top of Aframe to enable you to, without coding, you can build virtual reality applications. So the VR studio is one of them. Real estate, live tour, this is also an interesting application. Education. So for example, if there's a student studying for becoming a doctor or medicines, so you cannot practice on a real human, right? But you can do all this, pick up a heart and do all that to a man in virtual reality. It's just virtual reality, right? So that's interesting for practice. So Aframe has a lot of contributors and stargazers on GitHub. There are many members on Slack. If you check out Aframe.io slash community, you get all the information about how to get involved. And it's really interesting. And it's still in its initial stages. So it's a very good platform to contribute and to get started with. And there are lots of featured projects, as I talked about, a week of Aframe and awesome Aframe or some repositories. Now there is a contest going on currently, 13 KJS games that happens every year. But this year there's an Aframe category also. So I would probably recommend applying to it. All you have to do is just submit your game. And it has to be 13 kilobytes of a file excluding the Aframe library. And just for participating, you probably get a Aframe special headset and t-shirts. And it's something really cool. I would recommend applying to it. And other than that, I would recommend checking out the documentation of Aframe. It's very exhaustive. It's really very informative. You can go and check out the syntax of various primitives and components available. So yeah, that's kind of about how much I can talk about in 30 minutes. But you should definitely check the documentation. Thank you. And thanks for having me at Full Stack Fest. Thank you so much, Aguta, that was really inspiring. I have a few questions here for you. Can you talk more about the performance concerns on web versus mobile? OK, so I think you mean native. So I think that's a very common question whenever someone talks about the web. The performance, of course, undeniably, native applications have a little better performance. There is a little cost that you pay when you go for web applications in terms of the graphics performance. But in exchange, you get this incredible power of distribution. And that is sometimes very much worth a price paying for. And other than that, there have been developments in the, so you can use all the regular things that you do with JavaScript, like web assembly. You can have web workers which can parse things off the main thread. And other than that, there have been developments like streaming content. So you get a basic immersive experience in 300 milliseconds. But that's not fully, I mean, it gets more improved. And as and when it gets hardware and resources. But you don't have to wait for the download of the 3D models or something. So that's what I have to say. Thank you. What are you most excited about in terms of the future of VR and web VR? So my personal interest and an area of research I would like to see is in the field of education. So there are a lot of possibilities in education. Like I showed how we can practice medicines in education. And I've also, like I work for a bank, so I've been working on software for a bank, like when a person can go into a virtual bank and check their account summary and visualize the data. That would be something very cool. So yeah, that is something. VR and banking. Awesome. Thank you so much, Jagupta. Let's give her another round of applause. Thank you.