 So is this going to be weird for you? What do you mean? So you've been doing this with Summer for years, right? And you're friends, aren't you? Yeah, but you know, people leave all the time. It's perfectly normal. Don't really think about it. Oh, here we are! Welcome to the studio! Uh, what's that? Oh, um... This isn't mine. Um, this is something that crew use for... It helps them position... For the lighting. It helps them with the... Shadows? Sure. Um... I'm just going to move, sir. Whoa, don't touch him! Sorry, sorry. Um, it's a little bit fragile. I'll deal with it. I've got him. It's okay. You're safe with me. It's okay. It's okay. It's okay. Don't worry. I've got you. So, hello, Ada. Hi, thank you for having me on your show. That is fine. It's great, because it's episodes I don't have to write. And that's what this is going to be, right? Yeah, so I have a few things I'd like to cover about WebXR today. Okay, excellent stuff. So you're... You work on the working group for... Yes, so there are two groups for dealing with the standards for WebXR. There's the W3C immersive web community group and the W3C immersive web working group. They have basically the same name and do basically the same thing and work really close together. But the community group is open up to anyone. And for the working group, you have to be a member of a company that's a member of the W3C. Cool. So usually when I do these episodes, I have some slides. I have some code on the screen and that's as exciting as it gets. You've brought a VR headset and you've got your phone connected up to the screen and all of this sort of stuff, so... My various toys. Yeah, so I'm going to feel totally inadequate and the rest of my episodes this series. But come on then. Come on then. Show cool XR VR stuff. So yeah, WebXR. We have a cool logo. The logo looks like the Dart logo. Oh no, I never thought about that. It's supposed to be like a W and an X and it's like 3D. It's a different color. It's a different color, that's fine. But yeah, so the idea of the WebXR device API, which is a bit of a mouthful, so I'll probably just call it WebXR for short. What was the X stand for? Ah, that's a good question. It doesn't really stand for anything in particular. Great. Perfect. Does the R stand for anything? Reality. Okay. So... We've got reality. Because it covers augmented reality, virtual reality, mixed reality, all these kinds of general kinds of immersive hardware, we just put the X in there to be like, it can be for any of those. It's a placeholder, I suppose. Yeah. The main hardware we're focused on at the moment is, so virtual reality headsets and like the quest, like I've got here. Augmented reality headsets, like the HoloLens, which I can't afford. Then we have virtual reality like in handsets. This is usually like in line mode in devices. So this is the only mode where you can embed it in like a web page or the other modes run externally. And you also have like handheld augmented reality, so kind of like the thing you do on Pokemon Go. But even though it still runs on the same display as the device itself, it's still treated as an external display. It just goes full screen, takes over the device and you can't display like normal web content on top of it. So let's talk about the web focus of this then. How does WebXR work on the web? That's actually a really good question. So I have an example here, and you won't be able to see this, but I think the very clever folks behind the camera will be able to superimpose this on the thing. I'll make a series of noises as if I'm watching something amazing right now. It will just come together in the edit really well. That sounds like a really smart thing to do. So here we have a normal website. It has a running in the Oculus browser. It has a URL bar, tab bar, you know, normal browser stuff. So when you land, it does take you to a 2D web page, which is running a WebGL scene. You push the enter VR button because WebXR requires a button press to start because it's kind of similar to full screen in that respect. It takes over the whole device, so you want the user to be aware that that has happened. Duplicate UI that might be privacy sensitive, that kind of thing. Exactly. You don't want the user to feel like they're on their secure banking website when actually they're inside Evil.com, which is spoofing the whole operating system. Looking forward to the day I do my banking in VR. That's a terrifying thought. You've got to catch the money as it flies around else it's permanently gone. But yeah, it works. You land on the site, you push a button, you're in VR. So it's... Yeah, actually that stopped the recording. I'll take it off. So if you want to deliver a piece of VR or AR content, then your main options are to build a specialized app for every single piece of virtual reality and augmented reality hardware that's out there, where the user then has to go to the app store for your particular site, find it, download it, and click on your icon when there's Beat Saber right there next to it, tempting them to play that instead. And the alternative is you send them a URL, they open up the browser, they open up the URL, and then they share it to their headset, put the headset on, and then push the enter VR button, and they're straight in your scene directly. Can I see some code? Yes, you can. I want to sell how it works. Okay, so I'm going to just show you... I'm going to show you A-Frame, because A-Frame is pretty cool. Okay. WebEx are... I mentioned it briefly before. It specifically works with WebGL, which, as web things go, isn't great. Like, WebGL is very powerful, and it's good at one thing. It can draw triangles really fast. Every time I've tried to learn WebGL, I go to one of the tutorials. The scroll bar becomes this size, and I scroll to the bottom, and it's, ta-da, a red triangle. And I'm like, right, I'm going to go do something else. Yeah, my main way of making this point is showing people the code for drawing a cube in WebGL in raw JavaScript, and it's impossible. Like, it's 300 lines, and people don't need to know it to that level of detail. So when working with WebGL, there's a wide variety of frameworks you can work with that simplify the process. Okay. So these are the main ones. There's 3JS, which is probably the oldest and most well-known. It has an extremely active community, and it's the one that I like using the most. And then there's Aframe, which I'm going to talk about more in a sec, which is really interesting because it's a web component wrapper for 3JS. So you write HTML, and then under the hood, it connects up all of the 3JS parts, so you get VR and AR ready WebGL. Writing 3D scenes using Markup. Yes. Now, I went to university in 2003. I think you're about to mention VRML. I did a module on VRML at university, and even then it felt like it was out of date, but I loved it. I actually really enjoyed it. It's amazing how accessible being able to write in HTML is. I'm talking a lot about Aframe. It has a really large community. It's so simple to get into. Lots of people have got into it, and so it's pretty active. And this is the full hello world for Aframe. I think it's like nine lines of code, including the HTML and body tags. Nice. And it pretty much does what it says on the tin. It does have a very SVG vibe, which is a 3D. There's similar presentation attributes. You include the script, and then you have the A-scene, which is kind of like, if we're going to take your metaphor further, it's basically like the SVG tag. Your Aframe tag is the A-scene. That includes a camera, some lights, and other things. And then you start adding the other things yourself. So here we have a box that's a meter by meter by meter by default. And it's placed one meter to the left, half a meter up, so it's not in the ground, and minus three meters forward. Backwards. Yeah. Negative z is the direction you're looking. Right. I see. Yeah. I think this is an interesting thing to mention. So normally in graphics, you don't care about units. If something's like a thousand meters wide and a thousand meters away, that's pretty indistinguishable from something that's like one unit to you and one unit big. But here you are two meters tall. Right. Okay. I see. In WebXR, your users have a height. And because there is this relationship, you need to ensure that everything makes sense. So the default unit for distance is meters and the default axis, y is up. Yep. X is across. Yep. Like a graph. Yep. And z is into the scene where negative z is in two and positive z is behind you. Right. Got you. You define it for all these things. So we have a box, a sphere, a cylinder and a plane. I'm not going to work out the color of the hexes in my head. I guess I could. You wrote this. You could have known this in advance. I could. Yes. Okay. No, don't do it. The box is cyan. The sphere is red. The cylinder is FC6. It's quite red. Yeah. That's like yellow. Yeah. It's cyan. Like yellow, orangey. Yeah. Like pink, maybe. Yeah. And the plane is. This is great. Let's just do this the rest of the episode. Anyway, and a great sky. Yes. And so the sky is an inside out sphere. Right. Because for the texture mapping, I guess. Yes. So 3D objects only have one side. So for example, the floor here is a plane. And what we've done, we've rotated it minus 90 degrees in the x-axis, which means it flops down. Right. But if we did it plus 90 degrees, so it's the other way, it would be invisible because it only has one side. And if people have done work with 3D stuff in CSS, the equivalent would be back face visibility. Yeah, exactly. Where you toggle that thing. Right. Okay. And so in this case, the sky is a sphere that's, I think it's five kilometers big and inside out. Right. And that's why you can see it. And so it sets a color for it. Nice. That's what it gives you. So we all write a cyan then. Hang on, the cylinder is yellow. Yeah. Okay, I was, yeah. I can't read hex is what we've learned. Yeah. Fine. But nice thing is, you can actually use HTML color names. Oh, cool. Because it just parses the color string as a CSS color and gets you the actual color. So you could do laminar blush, brick red, hot pink. Nice. Kind of thing, another cool color. Like golden rod. Like golden rod. Yeah. So yeah, you can use CSS color names too. Which is what I do most of the time because I'm lazy and I've spent way too long building HTML web pages before CSS was a thing. I suppose in DevTools you could play with those values afterwards to get it. You can, yes. You can change the values with DevTools and it will update when you change the values in the HTML. Very good. And that's the thing that would be much harder to do with like 3JS. Yes. You don't get that, yeah, that instant response from playing around with DevTools. Yeah, it's really nice. And it even has a built-in inspector. So if you press Ctrl Alt I in an A frame scene, it opens up an inspector and you can move things around and then you can copy the values into your own code. Nice. Which makes working with it very quick. So the default, like the div for A frame is the A entity. Okay. And so the way it works is that you attach components to A entities to make it do stuff. So to make a pink box we would set the geometry to box and the material to hot pink. So it has its own extensions to CSS there is what we're seeing now. Like it's CSS like syntax primitive box. Yes. Right, okay. Yeah, so for the, so components tend to, the most simplest components you can, we'll just have like my component is value. But the moment you start to get more complicated than that you start using this CSS like syntax. So you, so for example, for primitive box also has a width, height and depth property. You could also set to make it a more oblong shape. Okay. But you can define entities to be a, you can define your own entities which map the components. So for example the A dash box component has the geometry already set to be box. So this is like a shortcut. Yes. This you could do entirely as an entity with all of the properties. Yeah. So it's a, I guess it's a bit like, you know, you could create a div, you can give it a roll of button, you can add the stuff or just use a button and this is the sort of mapping. Right. I see. And the nice thing is that you can define your own ones of these. So if there's something you use a lot with many like tens of components, so a really complex thing, you could just pre-define it and then you can just use like my dash component all over the place and it'll just work. Right. Yeah, it's really nice. So if you've used web components before, like it's a really nice way of doing it and if you've poked through the source code of A-frame or you can see that it's pretty much a very friendly API and it gives you hooks directly into 3.js underneath. Nice. Yeah. Yeah. So that was kind of my high level overview of A-frame. Excellent stuff. And that's, so we'll put links to all of that in the description so people can like, yeah, because it's an open source thing, it's free to use. And yeah, so if people want to get started with WebXR stuff, that's a nice easy way of doing it. Exactly, yeah. Cool. I also want to show you, so I showed you some virtual reality earlier. I just want to show you some augmented reality because it kind of shows off some of the more advanced features of what WebXR can do. All right. So here we have a... That's not augmented reality. No, this is just, this is like the magic window kind of thing. Okay. So I push the augmented reality button and it's gone full screen. But notice how there are still HTML elements over the top. So this is... Oh yeah, okay, I see, yeah. So normally WebXR is WebGL only but we do have an API that lets you define a single element to be placed full screen over your AR scene and it works on handsets. Unfortunately, trying to describe what going full screen with a HTML element means in an augmented reality headset is a very difficult concept. Yes, that wouldn't make sense, right? Where is the top left bottom right stuff, right? Okay. But here it works really well. And then the other feature we've got here, so see where it's like trying to place this reticle on the floor? Yeah. So this is trying to work out the 3D position of... Well, the 3D position and rotation so I can place stuff on walls as well or the ceiling if I wanted. And it lets me place objects in 3D so I'm going to try placing somewhere. Let's move this bowl. Yeah. And then we'll pop it on the table. So boom. Actually that's not very good because then the shadows don't fit very well. It seems like it's picked up the lighting of the scene. Yeah, so that's quite an interesting one. So it does work out the direction, intensity and colour of the lighting. Is that the library doing that or is that built into WebXR? That's built into WebXR. That's really cool. It's also showing that although the set looks very clean at this angle, it's a mess the other way. Yes. So although it doesn't apply it to your 3D models it basically tells you all the information you need that you can do it yourself. And in this case, A-frame has it built in to take that information and apply it to the models. Nice. And then, yeah, it gives it a shadow and it works really well. So yeah, one cool thing which is very subtle and hard to notice is that it doesn't just let you know where you place the object when you tapped on the screen. It also continues tracking that position as what's known as an anchor. So an anchor in 3D space. And so it keeps telling you where that anchor is. So when I pan around and look over here say look at you for a bit, like look around and come back my object stays where it is because it's maintained the tracking of that object. Nice. So yeah, it's got a point in 3D space where that stuff is and it remembers it. And so, because over time, the shape of the scene in the device's head or it doesn't have a head, and its memory will evolve because it'll initially make some assumptions. Like it'll just assume it's in a flat environment and the floor is this far away. But then it might realize there's a table there or there's another surface or maybe the room is bigger than it thought it was. And so what it does, instead of letting objects drift as they move further or closer to the origin as the size of the environment changes, instead it works out where you intended to place the object and ensure that that anchor remains in that place even as the rest of the scene adjusts. Oh nice. So if you placed multiple anchors say one on a table, one on a chair and one on the floor and 20 minutes later, as long as we're using the anchors part of the WebExR API, they should still be in the same place. A slot provided you haven't done something weird like move the table or start moving furniture around, then it ruins the track. Oh, better off then. Yeah, that's fair. So it gives you a very stable augmented reality experience. So I've had my phone pointed at this thing for the whole time so you shouldn't have seen it drift around the floor or anything. It should look pretty convincing. It's pretty convincing. Yeah. And so all that together works well to give you a really decent 3D experience in the Web for not like a ton of work on the developer's part. And so using A-Frame, you can do this like for AR as well as doing it for VR. In theory, like it takes a bit of thought from the developer's part, but you can make something that works with augmented reality and virtual reality together. So kind of like how you build a website with progressive enhancement and responsive design in mind. So progressive enhancement for when certain features are available, you use them to give a better experience. And responsive design, you design your scene so that it can like change its shape accordingly to the size of the display you're on. You're not having to build it entirely twice. It's just a little bit in the middle to deal with the differences of the environment or device. So that if you view it in virtual reality, you can see the 3D environment around you. If you load in, if you open augmented reality, then it hides the environment. So the sky element that you had before, does that automatically hide on? It doesn't automatically hide, but you could, there is a component called hide in hide on enter AR. You put it on that element. So when you start, the sky gets hidden. Right. Yeah. And so it is it is possible to build for this. And then you add support for controllers so that if the user is using a device with controllers like an AR or VR headset, it uses those. You add support for hand tracking and so if you run a device that supports hand tracking, it uses those. Excellent. Yeah. So it takes a bit of thought, but it is kind of amazing what you can build with the web. If you build something like that, you can reach the widest possible audience of people with immersive hardware. You are not just focusing on one particular piece of hardware. You are able to support devices that haven't even come out yet. Exactly. As long as they have a web browser. Precisely. Which I really hope that we continue to have this thing where as more immersive web devices come out, they have a web browser. There is even a new device coming out soon which you will even have a new browser designed for XR. So the new Wolvik browser was forked from Mozilla Reality by Igalia in order to carry on supporting VR and immersive headsets. And so it is really great to see that this new hardware comes out. They really view the web as a high priority. Excellent. Seems like a cut point. Don't you dare.