A-Frame – VR for Web Developers (Kevin Ngo and Diego Marcos)

A-Frame – VR for Web Developers (Kevin Ngo and Diego Marcos)



hi my name is diego and i should introduce him first and I'm Kevin yeah he's Kevin Diego we work at Mozilla we are team and we are focused on tools to make VR content creation easier so I confess I'm a web developer and I wanted to do PR and I started to learn about texture mappings geometries shaders GLSL and I was a bit lost and I wanted to we are because when you think about the possibilities I felt that I was the VR medium is so much larger than the rest we believe that we will consume any sort of media in a VR context in the future and if I stick with a 2d web I'm gonna become fine in this circle and I'm gonna be missing all this part here so there's a necessity of for web developers to learn new skills if we wanna stay relevant in the future so and our goal is to help we have developers to get on board on the new medium in a way that it makes sense for them so we introduce concepts little by little and you have a lot that you can latch on a lot of constants of patterns that you already know that you can start using and this is the reason for a frame and Kevin is gonna introduce so we released a frame it's an open source web BR framework we released it mid December and the reason we wanted to make it easier because when you want to create a web viewer experience there's this way too many things that you have to do and there's a way too much Laurent involved for example if you use 3GS you got two go into the examples floor to find the VR effect separate cameras render loop lights build UI friend during VR find out what VR polyfill and this is a hard blocker for creating tiny bite-sized web VR experiences because if you think about the web there's so many cool things like does do people still remember of Zombo come oh yeah like everything is possible Samba come think if you want to create web your experiences like that tiny bite-size ones would you want to go through all this if you just want to create at eye level kind of wacky app all this boilerplate is it just kills motivation for for want to build anything and it's like kind of like the equivalent if you just want to make a sandwich but you have to like bake your own bread first so what if what a frame does is we provide you the bread so all that boilerplate is just handle with one line of HTML it's a scene and everything just works for you out of the box and with that you fill your sandwich with ingredients so we let you build three scenes with just HTML it's decorative markup and this is arguably the easiest language in competing it's very accessible even kids can do it so I can have a box and just pass attributes such a source a obj model or you can have 360 images with just one line of HTML but we thought that wasn't powerful enough this kind of deck lift markup has been done before dan pass with Tony he's done he's done VR mellow and next there's also been x3 dom so if we just stuck with this who can't be like reinventing the wheel we wanted developers to not be constrained in any way and we wanted to have permissions with permissionless innovation so what we came up with was we want to borrow patterns from the 3d and game development industry and we didn't want developers to be constrained in any way so we created escape hatches for extensibility and we did that through the any component system pattern so this is a pattern that unity uses and the idea is that every object in the scene is an entity and you attach components to provide appearance behavior and functionality to those entities and those entities by themselves they don't do anything so the analogy is that say you had Minecraft and every block was an entity and by itself it doesn't do anything but you apply components such as physics to make the blocks fall or you provide a hardness component to give the blocks of different hardness how long it takes to break it or maybe you write a block with a damaging come on to the damage to damage to the player so in practice it looks like this in a frame you start with an entity tag and by itself it doesn't do anything and then you apply components so what it looks like is component names are attribute names so we have a geometry material and this is what creates a sphere and then within those components or those Astra buttes you passuk a CSS like style syntax to configure the component so you can give it a shape of sphere and a radius and you can give it a color but you could do cooler things suppose I created my own component that generates entities within that object so I give it a description of the object which is rain and I want to create 100 of them and that mixin would look like this which is even more spheres and materials and you can even give it behavior so when the rain collides it explodes and splatters or you could give it random position so with all that and nation all you have rain what's in the sky and we had a we had feedback from community they said a frame is like when NBC landed in traditional of development and it provides structure to 3GS which is kind of like the analogy of back then when what development you just kind of had blobs of code that you had to hack up every single time so in summary for a frame it reduces a lot of boilerplate it empowers developers and designers to build without having to learn a lot of graphics or three knowledge and it provides their entirely new realm of exploration and learning so you have just whole new medium that you can go out and learn if you love learning and it's very ergonomic to use and it provides say structure it provides structure to the 3GS so now I'm going to talk a little about community what the community has done with the last six months they create tons of really cool new scenes and we've actually had some really great feedback sometimes they say like this is like a gift because they couldn't wrap their heads around three.js but with a frame it makes it a lot easier to work with and sometimes we even get maybe like drunk slack messages like I love you guys thanks for doing this just awesome and these are the standard components that we ship with a frame like position or rotation light or sound and here's what the community has enabled they create components to do anything such as physics or there's an engineer Google Don mccurdy he's been one of our biggest contributors he's create tons of components to help out the community so he's created components to hook up to gamepad devices he's helped us create physics he's created ocean components and we seem to have been reused in community a lot I see scenes that uses his components so what you have is you have developers empowering other developers and then it has kind of creates like a virtuous cycle and you also notice there's integration with suggest react a couple people in the room has created components like Amber's great all spaced component to hook up without space and we also have yeah integration works with meteor and d3 and some numbers we have 780 members on slack so that's more than the web via our slack by itself and it's extremely active we've been hyper reactive and risk mind community when we launched the slack channel we were getting tons of questions and messages and we went on holiday right after we launched it and we kind of had 24/7 coverage on response to ask some questions because a lot of people went out and traveled abroad so and my phone gets tons of pings like every second and we just pretty much to answer their questions immediately we have two thousand stars and forty contributors on github and we feature everyone's projects that we can find on the a-frame blog so total has been that's a weekly blog on a frame IO and we featured 120 projects in total and last week we featured 20 so just it's definitely rising in momentum intent and then we're going to show off some sneak peeks of features or experiments that we've been working on within the last month or so one of which is firebase integration for multi-user a-frame scenes so if you go to the link at tiny CC / a frame – multi on your phone what you'll see is that you can all see each other in a space very similar to this and I can do it myself as well so hopefully I'll see some people pop up one person hello oh it's tiny dot CC / a frame – multi got it alright got two people so everyone if you click or tap your phones you can kind of raise the roof Oh people are starting popping so this was a like a huge revelation to me because I spent months just developing a frame scenes and they're all siloed and then once I released this I was nodding up and down with someone I could felt like someone's in the room with me so tiny – CC / a frame – multi and this is a firebase powered so we try something if everyone on the like this side of the room starts tapping the phone and we'll try to do a wave this is very ambitious so alright so stage stage right or everyone decide wherever you are right one two three tap your phones alright I didn't work okay oh it's working yeah but not that coordinated wave alright while y'all play with that distracted a deagle son come up and chop some more experiments so in mattoon the person 0.3 or 5ms – who has played with the first version of the web be our API is few people in the room so for the 0.3 we're gonna be compatible with the new spec and there is interesting use cases that the new API enables oh that's ok that comes so for the 0.3 version we'll have a piece one editor so still you have the creative API you have a programmatic to ask you API but now you can be solely manipulate also a scene so for example I open this scene you can have a bookmark with this special pointer to the to the editor and a new button appears on the on the page you can open the editor and you load anything that is in the wild you can you can open any scene you can see the sink rough here and you can manipulate it in individual elements you can add a new object you can put change the position of the object you can change the intensity of the light this case is a light you can change the color of the light you can add a new geometry you can add a new camera and then you can go back and see how everything looks like so it's a really very easy interactive is all way to do I need an FM see it's gonna be part of the 0.3 release as I was studying like the new expect a speck of the web PRA P ice and it will interesting scenarios like for instance this is not part of the new spec but is part of the of the of the new version of a frame as well 0.3 a frame 0.3 is gonna be embeddable so you will be able go what is the no I want to go today yeah this is an example of how so right now all these scenes experiences you see made with a frame are fully screen experiences so it's a bit onerous that that what developers are going to read it completely redesign on their websites to work on VR but on 0.3 if it will be embeddable so this is an example of how VR can kind has an existing enhance existing web content won't it make sense so this is the the wiki page wikipedia page of the tallest standing structure in the world and you are used to you can just read the text see the images and consume the content as as you you've been doing but here we have a small easter egg so there's like an embedded FM scene right and you can actually preview it here you can you can play with it and if you have a headset connected you just click on the button you go to the beer mode and I have two and this is what you would see so you're standing in just in front of the building and you can you can get the sense of the scale of this huge construction so this is one of the one of the properties of beer is is a much more so much better medium to to convey the sense of the scale room scale so you know the new and in the new spec we have so the game the new game pal spec is compatible with the hundred controllers and you also have the concepts of the concept of scene parameters that allows you to create like room scale experiences using the HTC vive and this is an example so so you have this example as part of a 0.3 and on two lines of markup you will be able to have two hands that you can use in in any scene this is this is a nice discovery so till now the web er API first mirror in this place whatever you were seeing in the head said it was mirror on the main display but it with a new spec this is not longer the case so you cannot you actually have to this place that you can use the way you want you can display something in the headset and display whatever you want on the on the main display in this scenario you have Kevin is using the the mouse on the keyboard to actually throw balls to me and I'm there trying to touch them and unblock them so it's just a single computer one person playing with the main display and mouse and keyboard and the other person with with the headset on the controllers so you can have these this kind of like collaborative a symmetric kind of gameplay is how we argue over code reviews which is play this game whoever wins yeah so yeah right now you have two displays you have for me it blows my mind is multi display web applications our link traversal so this is also a property of the new spec so before each time that you travel sites if you're in VR mode you get dropped out of it okay and you have to re-engage by by clicking an L on the bottom you need a user action to re-engage the VR mode so this is no longer the case so you can actually Traverse from side to side to side with in VR which is pretty cool so we seamlessly copied if you play the lab from Steam so each globe represents a link and you just grab that ball put the head inside and you just reverse to to another website and with what we are there's so much space for a possibility for exploration this is just one possible kind of pattern for link traversal but there's so much there's so much to discover and I mean weed the millions of what developers out there to prototype and have opening experimentation to see what works and what doesn't and there's lots and lots of low hanging fruit to work on yep so our a frame side our is lack channel and our Twitter handle

7 thoughts on “A-Frame – VR for Web Developers (Kevin Ngo and Diego Marcos)

  1. Apologies for the yellow tint! I forgot to turn off f.lux on my laptop before the the presentation.

    Non-yellow materials at https://github.com/ngokevin/aframe-sfhtml5-presentation

Leave a Reply

Your email address will not be published. Required fields are marked *