Check out a free preview of the full 3D on the Web & WebXR course

The "Wrapping Up" Lesson is part of the full, 3D on the Web & WebXR course featured in this preview video. Here's what you'd learn in this lesson:

Ayşegül concludes the course by sharing some additional mixed reality resources and demonstrating the native WebXR support in an upcoming version of Babylon.js.

Preview
Close

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> There are some concepts that I answer in the concept section of these courses. In the future, if you go and get curious about any of the subjects, you can always use this resource, and I will be keeping it up to date, hopefully. [LAUGH] Cool, and we just take a look at a lot of the three JS functionality.

[00:00:24]
I just want to touch a little bit of the same thing doing it with Babylon.js. And just want to tell you a little bit about the other tools that are available to you. At the beginning, I mentioned we have some components libraries for a HoloLens, but you can use exactly the same components with also Oculus for example.

[00:00:51]
Because they have the same hand tracking, and most of the components are very useful for hand tracking. And the good news is if you are interested in developing with Unity, then you can change this, well, render this as a very exciting experience. But if you are not familiar with Unity, let me warn you, developing with Unity is a much longer process than working on the Web.

[00:01:23]
And this is one of the advantages of the Web. Every time you write your function and press play, everything works, almost instantly. Whereas if you are on a Unity or Unreal Engine, you have to build it, deploy it, and it's a much longer process. But it is really cool to have this option.

[00:01:48]
So, let's talk a little bit more about Babylon.js. There's a new version of Babylon as of last week or the week before, and there are lots of really cool functionality. One of the things that they are working on is Native Support with Babylon Native and Babylon Native React.

[00:02:13]
So basically, you can write the same JavaScript file and be able to deploy it to an Android or iOS device. And whenever the WebXR capabilities are not supported, then they will use the underlying AR core or AR kits to render exactly the same. So this gives us a little bit more options, little bit more functionality, and the cool thing is the Native version also works on HoloLens, I'm really happy about that.

[00:02:51]
So Babylon Native is a the new thing that is, we're trying and it's good to know that you could write it once. And the toolings that we mentioned, a new material editor, and also particle editor where you could create particles that kind of looks like simulations or visual effects, which is really nice.

[00:03:20]
One thing that came with the new release was hand interactions, which I'm so happy to see. And now if you want to build for Oculus or HoloLens, now you have a way of doing that. Teleportation is the way we move from one place to the other in a VR or experience without having to go the distance.

[00:03:49]
And this is one of the things that got improved with the tooling. So I want to show you the basic WebXR set up here as well. First thing that we do is create our scene and set it as usual. One thing I want to point out here is that our camera is not on the centre, in this case and looking at the centre.

[00:04:20]
I recommend not to do this, instead, create the camera always in the centre, just in case, in the future, you might want to do that or other people can see it if it's in a HoloLens. Or any other experience that uses the center as the user camera app.

[00:04:48]
If you remember hours ago, here, we have the controllers attached to our camera so we can have interaction with our objects. We have a light intensity, everything is the same. But one thing that we add for VR in our experience is just one line of code. In this case, which is the helper, and that creates the default experience async function.

[00:05:19]
What this does is everything you need to do to have AR or VR capabilities almost automatically. It has some default values, and if you're okay with the default values, you can just put one line of code and then you have the option. So it looks like it's just VR.

[00:05:43]
If you want to give some options to it, you can do that, too. Or you can use the base XR experience helper instead of creating a default experience. Based experience is what this default experience async is also using under the hood. It has more flexibility, and with everything that has more flexibility, more responsibility comes.

[00:06:15]
You have to make sure that you create your session and you keep track of your session. And one good part of it is it has observables of the XR states, which you can use. If, like me, you are a big fan of RXjs or any observable library, you can add that here as well.

[00:06:37]
I have some cool demo links for the Babylon.js functionality, and some resources for you. One of them is Learn XR Reddits, if you have any questions you wanna ask, join us. We have a few channels for WebXR Babylon or XR in general. If you want to learn things or what is coming out with the new tools or new hardware.

[00:07:08]
One other thing I want to mention again, I think I mentioned it early on, is mixed reality resources. Here, you can find all of the places that you can you can get some assets and interesting blog posts about design, developments, and also attending any of the meetups and conferences.

[00:07:30]
This is a cool resource.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now

Not sure where to get started?

Answer three short questions and we'll recommend the best learning path for your experience level and goals