Introduction

[00:00:00]
>> Thank you for joining me today at the WebXR and 3-D on the Web workshop. Let me introduce myself, my name is Aysegul. I'm a cloud developer advocate for Azure AI and Mixed Reality, that's part of Microsoft. I'm also the co-chair of W3C Immersive Web Working Group, and Google Developer Expert for Web Technologies.

[00:00:21]
And you can find me everywhere with AysSomething. So few things that we are going to cover today. Number one, what is 3-D on the web and WebXR, and why they are good, and what kind of applications that you can create today? And afterwards, we'll create our first 3-D experience in three most popular libraries.

[00:00:43]
One of them is Babylon.js, the other one is A-Frame, and finally Three.js. Once we create those experiences, we will dive into turning our experiences to augmented reality and virtual reality experiences. Along the way, we will discover some of the WebXR capabilities, like Hit Test. We will see how we can load models from 3-D files.

[00:01:10]
And finally, we can discuss all of your questions, including how to make your applications more accessible, and what kind of features are coming in the near future. My slides are here at bit.ly/WebXRSlides. You can also take a picture of the QR code. There are lots of links on my slides, and they're very helpful.

[00:01:38]
So it would be really nice if you could take a picture. One of the first things that I want to start with is talking about the concepts. What is WebXR, and what do we mean by 3-D on the web? When we talk about the 3-D on the web, we mean just a canvas rendered with 3-D objects in it, but no immersive experience where you could interact with your mouse.

[00:02:06]
When it comes to WebXR, it is the newer web API, replacing older WebVR API. And includes not only the WebXR for VR, but also for augmented reality experiences as well. We are very used to acting in a 3-D world, and seeing information in a 3-D world. When you take all of the information and put it onto an Excel sheet, or any 2-D representation of it, it's really hard for people to understand the importance of it.

[00:02:41]
But when you put the same data on a context, when you see it, when you need it, exactly in the right place and right time, it makes a humongous difference. For example, this one is an augmented reality experience for HoloLens, where you are able to look at the layout of an airport.

[00:03:04]
And you can see the different layers and different information layers at the same time. Let me show you what HoloLens looks like, while this video is showing. I'll demo it a little later. This is an experience that the FDA approved for surgeries. When you go into surgery, especially in US, it's really scary to be asked all the time, where are we operating, and which part of your body we are operating?

[00:03:44]
Because the information that the surgeon needs is not right in front of them. They are not able to touch anywhere, so they can't really grab that information. But now with HoloLens, they can take the information with them to the surgery room, without having to touch anywhere. One of the cool experiences with HoloLens for the surgery room was also using eye-tracking.

[00:04:13]
Because having to use your hands somewhere is, that you cannot take away, but you might still need to interact with the UI and UX. In that case, we are able to see where you're looking, and then you can detect, touch, or select anything from the interface. Augmented reality is also very useful for manufacturing, or any time you need expert knowledge on something, and you need a lot of training.

[00:04:53]
This is one of the Microsoft applications called 365. And you are able to actually pinpoint the information to an exact location, or pinpoint it to an object. And then if you are a new employee, you can just come in and follow the instructions, and be very productive right away.

[00:05:18]
I actually did this and fixed a motorcycle, which I would never be able to do. Or if this information was given to me on a paper, I would never understand what they're talking about, because I wouldn't know the names of the tools. This is another 365 application, where you are able to call an expert online.

[00:05:47]
And because you have the headset, and they are able to see exactly where you're looking, and they can put extra information on top of what you're seeing. So in this case, the expert is saying, you need to open here, and drawing those arrows. But thankfully, it's not just headsets, and we have these capabilities on our phones today.

[00:06:15]
And a lot of applications that we use daily are implementing some augmented reality or immersive versions of them. This is the augmented reality experience of the Google Maps. When you come out of a train station in a city that you don't know, it's really hard to read that data from a 2-D map and know exactly where to go.

[00:06:43]
And GPS doesn't really work perfectly well in these situations. With the AR experience, you're able to look around, and the computer vision looks around and identifies where exactly you are, and then points you to the right direction. And this little tiny dot that you see is saying if things are behind you.

[00:07:08]
It's telling you which way to turn, which is a really cool application. And I'm a huge fan of the augmented reality, but VR is a very important part of it too. And this one tweet made my day, and also the article. Where Russian, [COUGH], farmers were using VR to make their cows happier and have more milk production, which is very interesting.