WebXR is now supported on both the Oculus Browser and Firefox Reality (you can test with the Hello WebXR demo from Mozilla)
I am currently seeing two issues using Typescript, 4.1.0-rc9 preview packages, webxr-polyfill and the Default XR Experience:
On Oculus Browser, the first time I enter the immersive mode on a new page load it has very bad rendering issues (only in one eye, screen is tiny and out of view). The second time everything looks perfect.
On Firefox Reality, it launches the browser into a strange 3DOF mode. I never can get it into immersive mode.
I have been using the oculus browser exclusively when testing the webxr scenes, and have experienced this issue a long time ago, when we had an issue with the utility renderer (when using 3D GUI). This was fixed 2 days ago, and should not pop up anymore. If you have a scene that does have this issue, please share it.
Regarding firefox - they dont support XR. Only using the WebXR polyfill, which i have to admint - I haven’t tested with babylon.js, mainly because the difficulty supporting polyfills. It is wonderful for simple demos, but when getting to complex features, i have no idea how it will react.
Just wanted to say - I’ve spent some time yesterday trying to understand the issue with the weird rendering, and combined with another issue involving the polyfill I believe I found the reason. I’ll commit a small change soon that will hopefully make it into 4.1.
Great! Thank you @RaananW for taking the time on the Polyfill bug. I’ll keep an eye out for it!
Digging into the Firefox Reality issue a bit more, could it be that something is preventing the 'immersive-vr' session request from happening? I see it’s attempted at being called in the WebXRSessionManager
Hi @RaananW I finally got back to this. I updated to the 4.1 release packages and do not see a change in either behavior.
I use remote debugging for the Firefox issue and didn’t see any strange console output or errors. I stepped through the session request and on the surface appears to be working fine.
The left-eye-too-big issue is not present when using the oculus browser. don’t know if this is what you are seeing or not, but it renders perfectly fine.
There are a few issues on your site that prevent it from working on firefox. The first is the fact that you integrated three.js as well as babylon.js:
When entering XR i noticed a familiar scene (the rotating knot example from the xr samples page) and couldnt understand why i see it. You probably integrated it to test if it"s working?
The second is that firefox does not support pointer event, so you will need to integrate PEP:
Babylon stops from rendering, and is only shown on the left eye. besides, both renderes seem to fight over who goes first (my assumption).
Ahhhhh… yes so I am using ModelViewer for a poor man’s AR mode which uses threejs. They were having type issues with their module so I was doing a quick import. I will also fix up the PEP issue. That was a silly mistake.
FWIW, I just stumbled upon the same issue: have to enter WebXR, then leave, then enter again to get it to go full screen. Using this to pull in the polyfill
<script src='https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js'></script>
<script>
const polyfill = new WebXRPolyfill();
</script>
Problem no. 1 found - you are serving the content from http and not https, which is obligatory for webxr. just had a conversation about it in the forum - I will make sure to write it clear in the documentation.
About clear color - see how i solved it for now in the code (will be fixed in the next version), here is your project a bit modified and working (make sure to use https): test.zip (1.5 MB)
Arg. I use ngrok.io SPECIFICALLY to avoid this problem, even though it sends all content on a roundabout trip out and back into my home, but you’re right, I hadn’t noticed that the oculus browser had defaulted to http instead of https (that’s “so last decade a behavior” )
Good catch. I “knew” it required https.
I’ll point the student at this. I wasn’t sure how to make the clear color work, I’d suggested to him last night to just use a skybox, so at least I got that right.
I “knew” this, and had used webxr separately, so this should have tipped me off to the http problem, but sometimes the obvious isn’t obvious when you’re “sure” you’ve dealt with that (see my ngrok comment above).
Oh, trust me, i’ve been there waaaay more than i like to admit
This is the best solution. And how I usually start. The reason for this is mainly AR - we want a transparent background in AR, so we want to remove the background in the easiest way possible
Ironically, I’ve mostly done AR with the web (going back 10 years to when we started the Argon project at GT). Only in the past few years have I spent much time with VR, and only this year have I really started diving into Babylon. So, I haven’t actually done Web-based AR with babylon yet!
I would guess this is the one can they would make sure works. Do you see any error in the console? Any warnings?
)