Jump to content

New WebVR Free Camera


Recommended Posts

Hi Guys,

I have just updated today the WebVR camera to be conform with the changes in the WebVR API.

It is now possible to use the position provided by the camera as well as the rotation, which will allow you to implement WenVR experiences to devices like HTC Vive.

As the projection matrix for each eye is calculated using factors from the camera itself, no distortion compensation is required. Which is a good thing :)

I will update the documentation pretty soon and include a few demos for you to test with. In the meantime you can test with this scene - https://raananweber.com/orientation/webvr/ 

I tested the new specs using the latest chromium and the HTC vive. Firefox nightly sadly doesn't recognize the vive as a vr display, so no luck with this browser.

If you have any questions let me know!

Link to comment
Share on other sites

Nope, not at all. It only works on browsers that support it (Latest chromium and Firefox nightly at the moment).

It will also not work so well with the webvr polyfill, as the polyfill doesn't support the eye parameter feature, which is needed to calculate compensation and field of view. 

To test it, use oculus rift or vive with the lastest chromium version. Otherwise, use the VRDeviceOrientation camera to use your cellphone as a VR device.

Link to comment
Share on other sites

Great question.

Yes, you are right - only one layer is supported. They want to eventually add multi-layer rendering (hence this horrible requestPresent function). 

But! the layer's source is actually your main canvas. So anything the engine renders on the canvas will be displayed in the VRDisplay. If you want a few engines running parallel - no, this is currently not possible (due to the specs, as you say).

Link to comment
Share on other sites

Hi @RaananW

I'm excited to read that you've built up a demo for the Vive, thank's a lot for that!

Today we got a Vive in our company (next to our GearVR) so it's another level of VR now.

I already got a smooth running webVR demo running within the vive from webvr.info/samples in the chromium with webVR enabled. Absolutely no flickering and a very clean anti aliasing.

Tomorrow I will be able to try your demo. Nice to hear that the post process for the distortion is no longer needed there.

... very curious right now :-)


Link to comment
Share on other sites

Hi @RaananW


Thanks to your example, I'm able to get my scene run in the vive, and it works like a native game at constant 60 fps with an absolute smooth anti aliasing. It's done with a nightly build of babylon and with a nightly build of chrome but at the end of the day everthing runs fine.

Now I have a further question regarding the controllers but I think it's better to create a new thread for that.

So many thanks again for the great work!

Link to comment
Share on other sites

Suggestion for the new WebVR camera - FORCE_STEREO or FORCE_VR option

the new version adheres to the WebVR 1.0 spec, and therefore if you use it on desktop, you'll just get a single scene rather than a stereo view in the old camera.

But...that stereo view is VERY useful when you are trying to explain WebVR to clients, or showcasing your work on the web. A lot of 'stakeholders' don't understand exactly what VR is, but they are the ones searching for companies who can do WebVR work for them.

What they do is go on the web and look for VR. If they can toggle a stereo view, it helps them understand enormously.

Use case: you're showing clients a website on a projector. Unless you can plug your mobile phone into the projector, and output the screen, you can't actually show them the stereo view that enables VR.

Having a flag FORCE_STEREO would be a great thing for a web Ui explaining VR. One could put a scene on the web, have a VR button...but also have a button with something like "see the stereo view" which invokes FORCE_STEREO or FORCE_VR on a desktop, even if a headset is not connected.

It would also help in development, since one can work faster coding without constantly donning and removing a headset.

Of course, one could swap in a stereo camera, but that makes things more complex, and they're not the same.

Link to comment
Share on other sites

Hi @pindiespace and @RaananW

my project (a pretty small one) is mainly based on this one: https://bryik.github.io/aframe-dominoes/

more of it:


using in chromium with webVR enabled. The controllers are working great and with absolute no lagging at 60 fps and visual representation of the controllers like in the native VR-apps. Absolutely fantastic.

Link to comment
Share on other sites


yes it does. There is a post processing effect doing this. If you are looking to configure this, check the VRMetrices object (that you can provide a VR orientation camera during construction).

If you wonder WHERE it is defined - https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/babylon.camera.ts#L536:)

the post process class is here - https://github.com/BabylonJS/Babylon.js/blob/master/src/PostProcess/babylon.vrDistortionCorrectionPostProcess.ts

Link to comment
Share on other sites

Great, I'll look at the postprocessing class! Lazy question - is the vertex distortion, or done in a fragment shader?

I've been working with your examples and got the VRFreeCamera to work reasonably well with webvr-polyfill.

- have to have a <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> in the HTML to get the polyfill to work properly.

- the polyfill has a patch for iPhone 5 which adds some bad padding to the bottom and right of the canvas. The patch incorrectly adds padding to the newest versions of iOS, so it just needs to be turned off.

    function isIPhone5 () {

        if ( navigator.userAgent.match( /iPhone/i ) ) {

            if( window.screen.height == ( 1136 / 2 ) ) { // specific to iphone 5

                return true;



        return false;


I compared running your examples on a smartphone with VRDeviceOrientationCamera versus WebVRFreeCamera + webvr-polyfill.

- the VRDeviceOrientationCamera makes a very sharp image, but is too small for my iPhone 6s "phablet".  Needs to be a bit larger relative to viewport.

- WebVRFreeCamera + webvr-polyfill + above patches works. The distorted stereo images fill the screen, but are blurry compared to VRDeviceOrientationCamera. It seems strange, since webvr-polyfill uses vertex-based distortion, so shouldn't affect blurryness.

testbed: http://plyojump.com/projects/webvr-babylon-orientation-webvr

Should have a version toggling the webvr-polyfill + WebVRFreeCamera vs VRDeviceOrientationCamera soon.


Link to comment
Share on other sites

Here's the completed test program


The program has buttons showing how things work. WebVR native works.

webvr-polyfill works, but only one time. It fires when you try to add distortion, rather than when you try to start WebVR presenting (meaning we switch to WebVRFreeCamera)


1. On load, toggles VRDeviceOrientationCamera if there is no WebVR

1a. ArcRotateCamera key movement only works in fullscreen

2. If native WebVR API is present, it can be used by WebVRFreeCamera right away, button will show "webvr"

3. If "load polyfill" button is pushed, web-polyfill can be used, and the program will now use WebVRFreeCamera instead of VRDeviceOrientationCamera

4. Toggle "webvr" button runs undistorted or distorted views using WebVRFreeCamera

5. Image Distortion works ok if native WebVR

6. But webvr-polyfill will work exactly once(!). It jumps to fullscreen all by itself

7. If you are using the polyfill, and try to go to distortion a second time, you get an error. The error is in webvr-polyfill, not Babylon

8. Going to fullscreen always works

webvr-polyfill.js:394 Uncaught (in promise) Error: Was not presenting to VRDisplay (Chrome)

Firefox gives an error about not being to load a URI

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...