Creating a VR Scene

[00:00:00]
>> Last thing that we did was creating the earth with the cloud texture on top of it. We are going to start from that. And you can copy and paste the whole thing into the ar.ts file, if you like. So, you will have exactly the same thing and we will start from there and create the experience here, cool.

[00:00:23]
Now, we have exactly the same thing as we did before. Number one thing that we are going to do is have imports of VR button. VR button is going to do a lot of stuff for us. First of all, when we have a VR experience, we have to start a session and we always have to ask users permission before we go into an immersive experience.

[00:00:51]
We never want to make anyone directly go into universal experience when they're not expecting. So, that is a requirement of the spec API. We are going to do that. And VR button nicely does that for us. I believe it's GSM web VR button. From expected [LAUGH] And we have the VR button edits as an important.

[00:01:44]
We also have to add it on to our documents, we append it to our documents. So, when we can do that on our image function, document, body appendchild. This is the AR button but I'm going to do a VR, Create button and then give it a render. And this requirements is for Augmented reality, but for our case, the renderer is just fine.

[00:02:15]
If we go back to our experience and refresh it, we should see the Enter VR button. Now, the challenging part is to see it in a VR experience, because here we won't be able to go into it. But if you already downloaded the extension, WebXR extension, then you can try to go into the VR and move the headset to see around.

[00:02:47]
Let's see if we are having an issue here. Okay, I'm going to exit there and try to run it on my device. My Android device, I've already enabled the developer mode and all I need to do is now plug it into my computer. And open up your developer tools.

[00:03:15]
And now, you can go to remote devices. If you're not seeing remote devices, it might be hidden over here, or you can click on the hamburger menu and go under more tools and find it here. So, remote devices are here. Or you can directly go into inspect devices and open up the inspect devices panel.

[00:03:39]
Right now, I have a browser open. Chrome browser is open, so one thing I have to do is add the port forward then if you already happens. Currently, our example is running on port 3000. So, you have to add both port 3000 and then the IP address local hosts 3000.

[00:04:07]
Once you've done that, you have to just wait for device portal to find your device. It should be under remote targets. Let me refresh. Here we go, now I have it. I already have a local host 3000 open, but if it wasn't you can just copy and paste it here, and it will open up a new tab for you with your code.

[00:04:36]
And I will share what I'm seeing, hopefully. All right, here. This is another tool that I'm using to be able to share what I'm seeing on my phone, and it's called YVWYSOR. If you are not able to see things over here, that's also another option for you to try out.

[00:05:14]
Usually, for these things to work properly, you have to be on the same network. Sometimes, you might be using a different version of the same network, and you might run into issues. If you are able to see your device here, then, you can click on Inspect, and this will open up the Inspect.

[00:05:36]
So, everything that happens here, you can see the catalogs and everything that we are doing. Normally, the button got really, really small here. So, I'm gonna press it on my device but you can actually see that it was pressed. When I do that, usually it stops refreshing, but hopefully we'll be able to see it on the site.

[00:06:08]
So, I have a two view. I have two renders for two different eyes. So, we are in a VR mode, basically, but it's a little bit dark. If you have any thing like a Cardboard, Google Cardboard, or Samsung device, then you can put your phone into it and then you'll be able to see the VR experience.

[00:06:35]
You should be able to see it but just in case, what we can do is also check the flags, Current flags that you have for Chrome. Are you using Chrome?
>> Yeah.
>> Okay. So, you can type in chrome;//flags, and this will open up your Chrome flags. And what you can do is enable anything that's related to WebXR.

[00:07:07]
So, in my case, WebXR incubations enables. If it's a default, I would enable it too. And once we do that, we have to restart our browser too. Force WebXR Runtime and we can keep this as default and relaunch.