 know how you know you're a nerd. I was dancing a lot last night at karaoke, and I was snapping my fingers a lot, and I have a blister. These are some good developer hands, nice and soft. Alright, we'll get started in a couple minutes. A lot of you are here. More time for questions. Let's do this. Alright, so today we're going to talk about WebVR. What is it? Why might you do it, and how you can do it right now with a lovely little language called A-Frame. Real quickly about us, my name is Wes Ravocaba. I'm a senior front-end developer at Lullabot. I got my BFA in illustration, so I'm coming at this more of a user experience design, creative asset kind of perspective. My partner here, David. Hey, I'm David Burns. I'm a technical project manager, but also a VR enthusiast. I'll be doing the demo at the end. We're proud owners of many VR devices. We have a few out here. We both own Vibes at home, and then you have two... I don't have three. Oh, three. Yeah, no. Great. So two Samsung Gear VRs, and then some...we don't know how many Google Cardboards, and then I also own a Google Daydream. So if we talk smack about one of the other ones we don't own, you know why. So we work for Lullabot. We do strategy, design, and development. We're great. You could work with us and see this wonderful mug every morning at Scrum, so something to think about. So today we're going to go over the VR landscape, kind of what's going on right now. What's the terminology? Get our term straight, and what the user experiences are, because we're not dealing with a keyboard and mouse anymore. What's the hardware that's around? Because that really drives what you're able to do, and what people are doing with VR. Then we'll get into actual web VR and A-frame, the wonderful language you can use today. So that's what we're doing. And then a wonderful demo, man with the VR plans, doing awesome stuff. So terminology first, right? What are we talking about? So we have virtual reality. Virtual reality is when the device or the experience you're in is trying to completely envelop you as much as possible. They don't want you to know that the real world is around, right? Then we have, oh, so here's some examples of virtual reality. So this is a small girl in an HTC Vive, and she's playing with a robot dog, as one does, in the hills of somewhere in Scandinavia. So you can see she has little controllers in her hand, but to her this feels immersive. She feels like she's actually there trying to pet a robot dog, which is awesome. Here's another one. There's a guy trying to defend a castle. Again, HTC Vive, he has his head set on, and you can see, you can kind of see the controllers, but to him he's seeing a bow in this hand, and he's getting arrows, and he's trying to chase away all these bathroom icon looking people from breaking down doors. So again, nothing in there is real, right? It's a cartoony, weird universe. So then we have augmented reality. Augmented reality is when you can see the real world and there are virtual elements introduced into it. So, real good popular example, Pokemon Go. You would turn on your camera, and they try to put the little polka thing on the ground in front of you, and you throw a ball at it and do whatever those youngins did. One of my favorite implementations of augmented reality is car companies made it, I think it's Hyundai's one of the ones where if you get their app, point your device at the hood of the car, it'll actually have little tasks you can do. So change the air filter, you click on change the air filter, and there'll be a little 3D video that plays right where the air filter is to say, hey, lift this up, do this thing, the other thing, tada, air filter. So next thing you really have to think about, this isn't, although we're doing this with web technologies, the user experience and interaction types are completely different, and we don't want to make people sick and we want to offer something that's really cool and fun. So, some of the biggest things that drive that are going to be the controls and inputs you have available. So this is going to kind of depend on what kind of device you have, what class of device and what the hardware is. So, the first interaction you can have, this is kind of like having a mouse, so you have a reticle, you can see there's a circle over my face in that little image there, that'll show up when you're in the viewer, and that's kind of where your mouse point is, right? And so a gaze is kind of like a hover with a mouse, you just stare at it for a while, and some things will have an indicator where like a button will fill up with a color or something like that to kind of say, hey, you need to stare at this for a while until it activates. The other thing you can have is you can look directly at something and then press a button. Every Google Cardboard device or any other of the cooler kid devices all have some sort of click or thing like that. So this one has a little button right here which in the background is pushing a little capacitive piece of cloth onto your screen. You could also have traditional controllers, so like my daydream comes with a little media looking controller guy. There's also video game controllers are pretty common, or you might have a specialty controller talking about like a steering wheel or a flight stick or something along those lines. VR controllers, so that one's kind of a VR, that is a VR controller. It's not quite as cool as these two, but that's when you can actually see the controller in the 3D world and actually point at things. So you'll actually see where you're pointing or like in the example with the bow and arrow, your controller looks like a bow and you're pulling out arrows magically in your magic quiver. And the goal of these things is to be as much like a hand as possible. So the Oculus ones for example, they have a ring around them so if you let go like that, the ring catches on your fingers and they know that your hand is open because on the inside of the ring there's a touch sensor. Very cool stuff. So next thing that's really important is body interaction, right? So, well you don't know that, but you're about to. So they're sitting and standing, sitting and standing when you have a device that can't track you in real space. So that means that you can do this, you can look around with your head, but if I am like this and I walk, my body says that I'm moving, but my eyes will say that I'm standing still, which is a good way to get motion sick. Don't walk around with a sitting or standing device. The other thing that you can have is room scale tracking is what it's called right now with the HTC Vive and also Oculus can do it. It's like an extra thing you have to go through. So basically that means that they actually track you. So if I'm in a 3D world and there's a little robot dog here, I go like that and I'm now closer to the robot dog. It's getting bigger in my view. I can actually, it feels like I'm walking around in the virtual world that I'm being immersed in. So, the hardware. Low-end headsets I'm categorizing like below the $100 range. So, these guys are about 20 bucks. If you pay much more than that, they better do something really cool. Also these guys, which are a good step up, quite a good step up from those, but these are closer to the $100 range. So, they're all limited by phone hardware for the most part. This one has a little bit of extra help with the phone hardware. This device requires phones that have extra hardware in them. Yeah, so they're all sitting or standing only. They don't have any external trackers that are going to map you into real space so you can walk around like an idiot chasing a robot dog. But then we have the higher-end headsets. So, this is, these are $500 and $800. And on top of that, you need to have a computer that's powering the thing that's probably going to cost $800 or more. So, these are the adoption rate for last year. This sold about 5 million units. So, that's significant. And then the Oculus has sold this year. And I don't have figures on the Vive. And the cardboard, God knows, they're everywhere. You can get free ones here somewhere. And so these all come with VR controllers now. And they provide the highest fidelity experience as far as like superior tracking, superior graphics, all that fun stuff. But, like I said, not as many of these out in the world. So, what are the applications for VR? What can you do with these? So, there's gaming and photos and video. That's kind of, it sounds boring, but actually, I take photos in Iceland while we are there. And they're 360 photos. And when you slam a little daydream on and look around and you're in Iceland all of a sudden, it's actually really cool. It's much better than just looking at a photo on the phone. You can also demonstrate macro and micro scale things. Macro being, we're in the planets and looking around at Saturn. And, you know, maybe we're as big as Saturn or not. And micro being, you're doing the magic school bus thing where you're traveling through blood vessels and you're really tiny. So, you can demonstrate things like that. You can go to our museums just in locations, event reenactment, things that happened a long time ago that, you know, we can take guesses as to what actually happened. Another big use is therapy for PTSD and phobias. You're in a safe environment because you're just wearing a stupid headset. But you might think there are spiders all around you. And that is exposure therapy to kind of help you get over what you are afraid of. And then also brain injuries. They found that stroke victims they're able to focus what they're training their brain on better when they control the environment more. There's also training simulation you can think of driver's head, flight school, all these kinds of things could be really well done with VR. So, WebVR, what we're here to talk about, right? So, there's an effort that started a few years ago MOSVR by Mozilla. And what their goals are is to make a WebVR reality and to get it into the W3C specification. So, all browsers will have an API you can talk to so you can actually speak to the hardware in the device. So, you can speak directly to the controller, you can speak directly to the headset with your JavaScript. And so, the other goal of the device is not only to look forward and getting those natively in the browser, it's also to get WebVR in a state where you can use it today, which you can. So, the first big thing that came out with is WebVR boilerplate. It's just kind of a repo that has everything you need. 3JS is a big part of it and other libraries that help you do the different VR things. This is more developer focused. You want a very customized experience that's still on the web. You'll want to probably start with this. Very developer centric has, you know, your package.json file and all the shenanigans that comes along with that. A-Frame is built on top of WebVR boilerplate, but what it is has a simple looking markup language. Looks like HTML. The only difference is all the tags start with an A and they have completely different attributes. They do. But still, very approachable. So, easy to learn. You can sit down in afternoon, you can hack on it on CodePen. It can be further modified with JavaScript. So, if you want to do something that's more customized than what A-Frame handles out of the box, you can actually either extend it or do anything you would do with WebVR boilerplate since they're related. And then the project goal is to enable more creators. So, JavaScript engineers shouldn't be the only ones hacking on this. They have great ideas, but maybe the art student who kind of knows HTML also has great ideas. So, now I'll hand it off to my good friend David Burns for an A-Frame tutorial. All right. As Wes already mentioned, A-Frame is a markup language, very similar to XML or HTML, which makes it extremely user-friendly. And that's what we're going to be going over today. Good news, the documentation for A-Frame is fantastic. And I'll jump over to that when I get into the demo so you can see what I'm talking about. To build it out to get started, you just need to include one JavaScript file, which is awesome. And there's no need to compile as you make changes. You just refresh the browser and you can see what's happening. So, to get started, as I mentioned, you just add a single script, and it's called A-Frame.js. And everything you're going to build inside of A-Frame starts inside of a scene. So, with that being said, let's go into the demo. In this demo we're going to just build a basic landscape and throw around some objects and animate them a bit without any JavaScript at all. All right. You guys can see my browser. So, as I mentioned before, we have a regular HTML page. We're inserting the script, which is local, and we're building out a scene. There's really not much to the scene right now. It's just going to be a white page, nothing to look at. So, first thing we're going to do is add a sky and a plane for a ground. And as Wes mentioned before, all A-Frame markup begins with A-something else. So, we're going to add a green plane. We're going to give it a width of 500 and a height of 500. And that sounds weird. And yeah, the 500 is in meters. All numbers in A-Frame are done in meters because science. Thank you. So, you ask why would you give height to a plane? Because it would be really tall. And that's true. So, one of the things we have to do to a ground plane is to rotate it on one of its axes. If you ever worked with a 3D modeler or something, you know that X axis is flat, Y is vertical, and Z is depth. So, let's go take a look and see what this looks like right now. There we go. An amazing green plane with a blue sky. Very little code. All right. But let's do something because that's kind of boring. We're going to add a basic primitive. Other primitives are like boxes or spheres, any shapes you could think of. And the thing we're going to add is a gray box. And we're going to position it about 2 meters to the left of us, 1 meter off the ground, and about 4 meters in front of us. There it is. We got a gray box. And even that's kind of boring, but didn't take a lot of code to do. So, we're going to start modifying some of the attributes about this box to make it more interesting. And this is where the documentation comes in. Aframe.io has amazing documentation for all these different components that you could add to the scene. On the left side you can see we have many components including modifying the camera, the cursor which is that red circle that Wes was talking about allows you to point at stuff. You could add basic shapes like the box, a cone, a curved image, a cylinder, so on and so forth. But if you click on one of these for example the box and you scroll down, you could see Aframe provides a whole bunch of attributes that you could modify directly in HTML or Aframe. One of the things we're going to do is add another box to the scene. This one's going to be blue. And we're going to position it a little more to the right and about the same depth in front of us. We're not going to animate it just yet, so let's go see what this looks like. There it is. We're in a scene. There's a gray box, there's a blue box. Still kind of boring. So let's start adding animations. And you can see this markup is nesting an animation within the box markup itself. If you were to tab this I'm sorry, if you didn't put the animation outside of this element, the animation wouldn't take effect at all. The first thing that we're going to do is to put a little bit of rotation on this box. You see here that we're setting the attribute rotation, tells it what we're going to change. The from is the starting position of where it is. And the to is where that animation ends. So we're going to spin it 360 degrees on its x-axis and its y-axis. And we have another attribute that says we're going to repeat this indefinitely. Let's go see what that looks like. There we go. We got a spinning box. Now this is pretty cool. You can nest these animations back to back. So let's do more than just put a rotation on it. Let's go ahead and change its position in space. And what we're going to do here is we're going to delay and wait two seconds for this animation to begin. The whole duration of the animation is taking 3,000 milliseconds. And we're starting from its original position and then we're going to throw it more to the right. Keep it one meter off the ground, but send it 10 meters back into space. One, two, boom. It's moving. This is just markup. This is pretty cool. I'm not going to bore you with many more animations, but let's just throw two more things on it and see what happens. We're going to change the color from blue to yellow and blue to yellow and back and forth. We're also going to change its opacity, just showing you how easy it is to modify an attribute of an element in A-frame. Let's see what this looks like. So there it is. It starts changing color. We send it back in space, but you notice it didn't return back to us because that's the one animation we chose not to put on a loop. Let's see what else we have to work with. So A-frame provides us the ability to pull in assets. Assets can be images, videos, even 3D models. And you declare them within A assets markup tag. You can see here we're using HTML5 tags and we're pulling in a sky image and we're giving in an ID of sky. Now that's going to be really important to remember when we apply it to the scene. So our initial sky was kind of boring because it was just blue. Let's go ahead and comment that out and do something kind of neat here. Let's go ahead and use a sky image we brought in as an asset and apply it to the scene. Oh yeah, thanks Wes. So before we do that let me show you what it looks like in a 2D space. If you all have your own camera and you download Google Cardboard camera you can take a 360 space of this and it would kind of look like this image here when you upload it to the web. What A-frame is going to do is use the metadata stored in this image to wrap it in a giant sphere around your scene. I'm going to comment out the ground too because the image looks way cooler without it. There we are. We have two boxes inside of a building. And you can see here if we had our cardboard headset on and we started looking around it feels kind of like we're here. And we got boxes in front of us for some reason. Alright, so I'm just going to show you a couple more of the assets that we brought in. One of them being a 3D model and what's cooler than a giant lullabot inside of a museum or a hall. Let's go ahead and refresh the scene and here we go. We got our giant lullabot in the scene with us. It's also worth pointing out that Wes was saying you can be tracked in 3D space. For these you would probably want to lock down the forward and back movement just so you don't get sick. But if you have this hooked up to like an HTC Vive, the ability to move around in space is baked into A-frame and you didn't have to add any extra tags to do that. So it's really cool, really user friendly. And this is something that's super duper cool for me because I built a whole little demo that I'll show you after this. Adding video to a scene. It's so simple. There's a video tag. We're going to use this source from a mp4 video of Lullabot's MSNBC project. So I'm going to refresh. There's that. There's the video loaded. That was quick. Cool. We could get closer. Screen gets bigger obviously because we're moving closer to it in space. But it was really simple to add video to a 3D environment. So now that you have these basic knowledge of A-frame, it's just hacking it together to do something kind of cool. And when YouTube came out with its Daydream app, I looked at it and I'm like, I could probably build this. So over the course of a weekend with a lot of coffee, I built this scene that allows us to go out to YouTube and fetch the DrupalizeMe feed. It grabs thumbnails. It grabs the mp4 video. We could even navigate up and down and browse to a different video. And we have player actions of pause, play, skip video, which will probably take forever on this Wi-Fi. You could even do cool stuff like to reduce the attention on your playlist to fade the opacity after a certain amount of time. So that's pretty much it. A-frame is super easy. There's one really cool thing. So when we built the D-frame photo for Lollabot last year's Drupalcon, we had to sit there for hours and hours, a meticulously smooth place, like everybody's image. Thirty hours of my life were spent making a 3D image map. It was really sad. But as of like four months ago, they created this amazing inspector that allows you to pull up a scene and like select elements. And when you select them, it pulls up all the properties that could be modified. Living in the future. It's pretty cool. It's like having a 3D modeler in your own browser. It's pretty cool. So that's A-frame for you. I hope you go explore it a bit more. I'd love to see what... A-frame is built into the A-frame JavaScript. Yeah, it's JavaScript. So you could build, Drupal could spit out any sort of markup. And there is an A-frame module that's available. You could like upload a video or an image and say, I want this to appear in 3D space. But yeah, there's a module for it. There's always a module for it. We're gonna pass it back to Wes. So, what we've gone over. VR landscape, we went over the terminology. Augmented reality is starting to be a thing. But we didn't really have the time to work that in 25 minutes. And then, yeah, talked about the user experiences. How the kind of device you have drives the kind of experience you can offer. And, yeah, WebVR, A-frame, go check it out. It is really, really cool. And like I said, if you go to the A-frame website, when it has a try it out, it has a code pen all set up for you. And in a couple basic shapes you can mess around with and add your own. It's like a meg of JavaScript. So that's not amazing. But considering what you get, holy cow. So, yeah, that's about it. So for resources, go to A-frame.io and especially slash community. It has a lot of the stuff that's going on right now. Most VR's being so open, inclusive, and cool about all this go open source. And, yeah, please give us feedback. That's just a Google link to our session page. And you can let us know how we did. And, yeah, we have some time for questions. Let's repeat the question. Is A-frame available on all Web browsers now? So if you go to WebVR.info there's a breakdown of all the browsers that are supported. Unfortunately the one that's really not staying up to date is Safari's WebKit. And I'm going to just take a while guess it and say they didn't include it yet because they don't have hardware to sell along with it. So I think they're working on something and I expect to see it soon. It works really well on all Androids, especially in Firefox and Chrome right now. Yep. So the question was the 3D Lullabot model. What was that? How would you do that? So that was built in Blender. That's a regular DAE file. Yep. But with a bunch of primitives there's no reason you couldn't build a Lullabot from scratch in A-frame. Yeah, so there is recognition for when you're either on a phone that could support one of these devices. Oh, so the question was the goggles on bottom corner, what's up with that? So yeah, it'll detect whether or not your device has some VR capabilities, especially if it's a phone, that's what this is mostly geared for. But they've been doing amazing stuff with the Vive. If you've seen the Vive's paint, the Google painter thing, they made that A-frame. They just call it A-painter. And it works. And it works on Oculus Touch now too. So actually the WebGL stuff was in browsers about six years ago, if not more. And to do the VR stuff that's available now is a really small subset of like data that's needed. You need a position of your camera. You need stereoscopic visioning. And then any other interactions that a user would have. I'm sure you could even use the controllers without the headsets. Yeah, I don't see why not. The question was, is this maybe integrated Google Tango? So here's another cool thing about A-frame. You can make your own modules. So somebody wrote a little, I don't know if it's called module, but in our parlance modules, where you have a Vive module that supports the things. There's a lot of them. And I'm sure that somebody has been thinking on that. Yeah, especially for the hand controls, you could go in and there's a component called Vive controls. There's also Oculus Touch controls. But then they have a generic wrap around that called just A-hand controls. That'll just pick up any sort of device. So you don't have to be too specific or write special code to pick up each own hand control set. Frank? Yeah, we have this. So we almost had some AR at our booth. We had to get kind of a QR code looking thing to be our tracker. And then you could point your Android only phone and see it. So if I had a marker right now, it's called a hero marker. It kind of looks like a QR code. I could hold it here and you would see the 3D Lullabot model spinning in 360. And it uses all the same technology that's made available through A-frame. It uses A-frame. Yep. Any other questions? Frank? There's one where you punch these big blobs, like orange and purple blobs that are coming at you with music. One of them is called Soundbeat Audio Shield. Thank you. It gives you a work out. You can be there in 10 minutes and like sweating like crazy. Still not helping the gut yet. Yeah. I mean it kind of helps mine because I can't drink whiskey while I have the goggles on. I'd say mine's probably the bow and arrow Vive one. I'd love it. I mean it comes with the thing. But that one specifically I really love. I was trying to get it to load in stereoscopic. You need to go to the inspector and set your browser to be like Firefox Mobile. And when you hit the camera button you could see what it would look like on your phone. And you can go to vr.lullabot.com to get a link to this and the team photo thing that we've kind of shown a little bit and inspect the code. It's all really basic fun stuff. Hack it. You can open up Chrome Inspector tools the second you hack any of the properties that'll just respond immediately like it should. We have a couple minutes. I want to show you one cool thing that West did. So when we were building this experience our frame rates were dropping pretty low. And in VR you don't want to drop below 60 frames per second. So a sphere has all these different tangents and points that need to be rendered and calculated. Chris goes let's just build a giant box and a sphere. So if we move out of this scene you'll see that it's just a bunch of planes flat surfaces and it worked really well. It took our frame rates or what was it called something from like 3000 rendered surfaces down to like 1200 vertices. Man you're good. We just hack this stuff like we did with Drupal. We don't really know what we're doing at all. Personal joy. We do not get to do this for work. That was the question. But if you have an idea that you want done in VR get a hold of Lullabot and I would love to build you something. Cool. Well thank you and I invite you all to Lullabot's party tonight. Lullabot Pantheon party. We're going to go hang out at our booth right now and we can chat more. We can show you some of our toys and whatever. Feel free to come over and hang out right now and we'll do that.