Jump to content

WebVR 1.1 in Babylon.js on its way!


davrous
 Share

Recommended Posts

Hi beloved community,

The implementation of WebVR 1.1 is in pretty good shape, @RaananW has done an impressive work. We're still in the process of polishing and finding ways to make it simple & powerful, the spirit behind Babylon.js since the beginning. :)

You can read the documentation here: http://doc.babylonjs.com/overviews/webvr_camera and you'll discover that you can map your controllers (HTC Vive Wand or Oculus Rift Touch) to a mesh to the final sample shared at the end: http://www.babylonjs-playground.com/#5MV04 (you need a recent version of Chromium or Firefox with gamepad extension enabled you may find on http://webvr.info)

I'm in the process of integrating the 3D models of both controllers. For instance:

- HTC Vive Wand model: http://www.babylonjs-playground.com/#NCLFI
- Left Touch: http://www.babylonjs-playground.com/#NCLFI#12
- Right Touch: http://www.babylonjs-playground.com/#NCLFI#13

I'd like to animate them by default when you'll press the trigger & the button to enhance immersion and provide you a default behavior that'll match most use cases. We still need to work on that with Raanan. 

I'm also experimenting turning Sponza in VR mode: http://aka.ms/sponzaVR . You can play with it if you've got a WebVR 1.1 device but beware, I'm still breaking it frequently. It also works on smartphone using Cardboard as we're falling back to VRDeviceOrientation camera in case of non WebVR support. VR for all!!!

Regarding WebVR, it currently works in:

- Edge Windows 10 Insider fast version that ships WebVR on by default. You can try it using the Mixed Reality Portal simulator: https://mixed.reality.news/news/try-windows-10s-mixed-reality-portal-your-pc-with-insider-build-15048-no-headset-required-0176419/
- Chromium with HTC Vive & Oculus Touch

 Stay tuned, we're continuing building great stuff you'd like. ;)

Cheers,

David

EdgeVR.jpg

capturewebvr.JPG

WP_20160905_19_33_24_Pro.jpg

Link to comment
Share on other sites

This week-end was productive! 

By creating a WebVRFreeCamera and attaching control on it (2 lines of code then), you will automatically have either the HTC Vive controllers mapped or the Oculus Touch based on your device. This means that we will load the 3D models from our CDN by default and even provide default behavior! :) 

For instance, try to press the trigger or the menu button on Vive and you'll see them moving. 

Next steps are:

- Add prebuilt animation on Oculus Touch too
- Add default lightning (Hemi) on 3D models to view them in good quality when the scene are no or few lights (most of our demo scenes have baked lightning for instance)
- Add a default teleport behavior where you can point an area and jump to it using similar rendering/UI as in Vive games

David

Link to comment
Share on other sites

On 17/03/2017 at 10:26 PM, RaananW said:

Whoever wants to give it a try:

http://raananweber.com/WebVRBall/

How to send scene to the headset ? (HTC Vive here). I have on my browsers (firefox nightly and chromium VR) the correct display (split screen and orientation detection works good), but nothing in headset (even if I switch to fullscreen).

Link to comment
Share on other sites

It's done inside the code of attachControl on the WebVRCamera and must be user initiated. This means that when you're clicking on the Switch to VR button, it should light up the headset and render inside it. 

If not, read the http://doc.babylonjs.com/overviews/webvr_camera troubleshooting part. 

I've tested it successfully in Chromium available on http://webvr.info on Windows 10 with latest Vive drivers & Steam VR.

Link to comment
Share on other sites

WOW finally my dream come true, @MackeyK24 let me know if you update the UNITY tool kit with the new library so we can use this new features.

I'm going to test this as soon as I get the oculus touch controls.so basically I just need the controls and GEARVR is good or do you need to have the HTC VIBE or the OCULUS RIFT HMD?

I saw on the videos samples with Oculus (basket game by @RaananW !! awesome job BTW ) and the HTC (esponza video by @davrous

so if I try with my gear VR will work (maybe not)? or you need the cameras and the oculus touch controls as well with the HMD??

I have to purchase my set soon so please let me now what is the best set for developing should be using or any is enough (GEARVR, OCULUS, HTC VIbe) whats your favorite ?

 

 

 

Link to comment
Share on other sites

The Basketball demo works with both the Vive and the Oculus touch. It will wait for the controllers until they are attached, and then you will be able to enter VR.

As you guys found out already, the secret to get the vive controllers working is... pressing the left and right buttons. Also make sure that the gamepad extensions is enabled in chromium (if you use chromium). 

GearVR won't work, but I am getting one pretty soon and will do my best to fallback to WebVR 1.0 . WebVR 1.0 doesn't deliver certain data that we require in order to get it to work correctly, so I will have to see how I do it myself correctly.

It will be done, just sadly need a bit of patience :)

 

Link to comment
Share on other sites

23 minutes ago, RaananW said:

The Basketball demo works with both the Vive and the Oculus touch. It will wait for the controllers until they are attached, and then you will be able to enter VR.

As you guys found out already, the secret to get the vive controllers working is... pressing the left and right buttons. Also make sure that the gamepad extensions is enabled in chromium (if you use chromium). 

GearVR won't work, but I am getting one pretty soon and will do my best to fallback to WebVR 1.0 . WebVR 1.0 doesn't deliver certain data that we require in order to get it to work correctly, so I will have to see how I do it myself correctly.

It will be done, just sadly need a bit of patience :)

 

Cool man, so for Gear VR might be support in a near future.

In order to start developing I should get the oculus rift or the HTC, which one do you recommended base on anything else  besides price wise?

I dont have an oculus ready  computer and I dont know the specifications for HTC so if you can advice one or the other I would appreciated.

Link to comment
Share on other sites

Indeed, they're good quality but :

- you can very easily change them by attaching your own mesh with less polygons 

- you need a powerful GPU for VR to render 90 fps anyway, so it's not the controllers that are going to impact too much 

But you're right, I've asked myself the question when generating the models but haven't seen any performance problems linked to that so far.

Link to comment
Share on other sites

Nice to see that you already thought about a teleport-function!

And also nice that it will be possible to use own meshes for the controllers. By that it will be possible to play VR-games completely offline. That's pretty important for me. Recently I've build a VR-game (with another framework) where the model of the vive controller was loaded via internet. So I had to tweak the code of the framework to change the path to a locally placed model. After that my customer was able to use the game on his exhibition without the need of an internet-connection. Seems to be a little detail, but in fact it was a BIG problem :-)

Link to comment
Share on other sites

Thanks for the feedback. :)

I already thought about that indeed and that's why you're able to load you're own mesh. But our default proposed mesh are now animated also. Meaning that if you're pressing the trigger, you'll see them moving in WebVR in your headset for even better immersion! I've almost finished binding all animations to the Vive Wands & Oculus Touch controllers. 

But to support offline, I'm going to add a .manifest file to the models to serialize them in IndexedDB. To have a full offline experience, you'll just have to create a HTML5 Offline manifest file referencing the .babylon.manifest files. I'm providing details on the approach in this article: https://www.davrous.com/2016/02/05/discovering-sponza-by-babylon-js-and-sharing-tips-on-how-to-build-a-cross-platforms-webgl-game/ in the Offline first section.

Link to comment
Share on other sites

Hello,

Here is small samples I've created: http://www.babylonjs-playground.com/#6PVF0Y#2 & http://www.babylonjs-playground.com/#6PVF0Y#5 that shows how to:

- Use WebVRCamera with a fallback to DeviceOrientation camera for Cardboard/mobile support
- Use Canvas2D in World Space mode to integrate some 2D UI in VR

Should be a good starting point for people who'd like to experiment

VRCanvas2D.thumb.jpg.8531e1331a192a330311e4e6bc3f3ed6.jpgVRCanvas2D_2.thumb.jpg.e97bf7809f11fce09e0b316f0e2c3d7c.jpg

Link to comment
Share on other sites

Good news!

Will try it in the office next week (where I have a Vive).

Btw.: From the customer's view, the topic 'mirroring' is always a big point. Think of an exhibition where the VR game is displayed to the audience on a second screen. They see both eyes simultaneously next to each other on a flat screen what is not the best viewing experience.

So if there would be a way to show the VR-scene as a one-eye view, it would be a huge benefit.

Link to comment
Share on other sites

Here another useful sample: http://www.babylonjs-playground.com/#9K6DC4#4 

It shows how to select/interact with an element on Mobile Cardboard (or with a VR Headset without extended gamepads) using a "look at" approach.

The flow:

- Look at one of the cubes using the beautiful green sphere on the center of the screen
- the cube immediatly changes to red and the text above it now displays "Red" (just to be sure ;))
- the green sphere is scaling indicating you're about to select an element (it could be an option in a menu or whatever)
- once the green sphere has reached a specific threshold (scaling === 2 here), the cube turns blue (and the text above displays "blue") to indicate it has been definitely selected.

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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