HTC Vive and Chromium

[jellix]

Hi,

I have a HTC Vive and want to get any babylon-made thing run on it. I get some other WebGL-demos running within the vive but not a babylon example yet.

For now I've downloaded a chromium version https://webvr.info/get-chrome/and enabled the flag "webVR" as it's written in the readme: https://docs.google.com/document/d/1g02qHfX85vSRSOkWm9k33I0b7VuyN79md9U9t6MIa4E/edit

The link http://media.tojicode.com/q3bsp/ shows a quake 3 level and ONLY IN CHROMIUM, in the settings at the bottom right there is a button for "VR" (between "showFPS" and "Fullscreen"). On https://webvr.info/samples/ are some other examples. They are throwing the canvas-view to the Vive so I can really see it in 3d.

But how do I get my Babylon.scene (in other words my HTML-Canvas) run within the Vive (and not just within the desktop-browser)?

Thanks for help!

 

[GameMonetize]

Hey,

 

just use the WebVRCamera and go to fullscreen. Babylon.js will take care of everything else

[jellix]

Hi @Deltakosh

thanks for your answer. You're right. My scenes are now working in the vive (very great!)

But I absolutely need to use the HTC VIve Controllers. And I don't see a possibilty to do that yet ...?

[GameMonetize]

Not yet. I don;t know how browsers see the controllers.

 

Perhaps  @RaananW knows?

[jellix]

https://github.com/donmccurdy/aframe-extras/tree/master/src/misc

works perfect

[RaananW]

Hi!

 

I'm so glad the Vive works ☺ the vice is such an amazing device.

About the controllers - according to the specs, you can use the devices as gamepads, using the same API. The game pad API was extended or should be extended) with device id that correlates to the device presenting. But this is in the specs. I haven't checked thou ☺ is on my to-do list.

If you found something that's working, would be great to see a live demo!

[jellix]

@RaananW 

Nice to hear that you're gonna look at that  topic! 

I've read some stuff about it like https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API   -   https://github.com/borismus/webvr-boilerplate

   -   https://github.com/donmccurdy/aframe-extras/tree/master/src/misc   -   https://github.com/bryik/aframe-vive-cursor-component and so on ...

I did some tries to adapt it onto babylon. But unfortunatley the Vive is in the office so I can't test it at home :-(

[RaananW]

Thanks for the links! There is a lot of information online, some is very much not up to date. With such a new API it's always a bit dangerous. The API changes suddenly, and - tada, nothing works.

I do hope to find time in the near future to play with the controllers a bit.

[V!nc3r]

I don't understand what I miss. This basic scene have a webVR which works and collect correctly the orientation of the vive, but when I switch to fullscreen, it works only on screen desktop, and nothing append on the vive.

I run chromium build 55.0.2842.0 (64-bit), Vive home & SteamVR are launched, win 10 64b, scene tested locally (with --disable-web-security --allow-file-access-from-files on chrome) and online. I tested to switch fullscreen with F11 key or with the button included in the html.

Where am I wrong ?

[RaananW]

You don't need to switch to fullscreen at all. You need to attachControl(). Construct a new WebVR camera (which you are probably doing), and use this object's "attachControl()" to start streaming to the vive.

 

[V!nc3r]

Is

camera.attachControl(canvas, true);

wrong ? It's already in my html.

[RaananW]

yep, this is the function that enables the webvr. 

are you using the latest babylon build?

[V!nc3r]

I'm linked to http://www.babylonjs.com/babylon.js

Maybe I must download last version here ? https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release

[RaananW]

Ah, and of course you will only be able to trigger that after vr was enabled. Attach the control with a click of a button, after making sure everything was initialized. Or use setTimeout with 2-3 seconds delay.

I will think of a better solution later today.

[V!nc3r]

It works, thanks ! Indeed, the camera has to be attach to canvas when all scene is loaded. Html updated.

[d3x0r]

I know it's over a month later - three.js examples have HTC controllers; they're fairly abstracted but they just go back to the gamepad API ...

 

https://threejs.org/examples/webvr_vive_paint.html

https://threejs.org/examples/js/ViveController.js

[GameMonetize]

I think @RaananW or @davrous were working on it as well

 

[forlaunchcast]

Can someone explain the exact steps needed to get a Babylonjs project working on Vive?  I've spent hours with no success.  I have SteamVR running, I have a Babylonjs project with a WebFreeVR camera attached to the canvas, I have Chromium version with vr enabled.....NOTHING WORKS!!!!

This thread needs more.  I really want to show my babylonjs project to the Vive community, but I need to be able to see it working.

In short, can someone explain exact details in order (e.g. launch SteamVR first, open Chromium, download this example babylonjs zip demo, go to fullscreen, then....????).  I can get some of the threejs demos working on the Vive, so there must be something in the scripts.  I tried this project specified above (https://www.nothing-is-3d.com/paste/?d10ac1b4d96ecf5d#H2qsi6sAjlF/byRXBkDScauiEkNMI7S2MuN7WKB1oIA=), but still no head tracking of any kind after clicking the "FullScreen" button.

Thank you so much.  Your help will enable the community to promote both Babylon and the Vive which benefits all of us.

 

[dbawel]

I would build a polyfill to accomplish the following:

1. Run the game on desktop first. It won't work in VR first time.
2. Go through the login/account setup process and start the game.
3. Goto control options and find the "Reset HMD" option and bind a key or button to it. (You can do this later like I did, but it's much easier to do it now on the desktop.
4. Goto graphics options and find the 3D display option. Change it to headset (headphones). I can't remember if it needed a restart after this point.
5. Put Vive on.
6. Once in the game, press your reset HMD key/button.

But if you simply want to get it working, andundertstand the process, the process above works (not created by me)

DB

[forlaunchcast]

Thank you so much for you response, dbawel.  Definitely want to get to that point of creating polyfills, but right now I'm just tryinig to get to the point of seeing any babylonjs project in VR.  Here's my understanding of what should work (and if it doesn't work for only me, perhaps it relates to my OS, GPU drivers, etc.):

1.  Downloaded example here: https://www.nothing-is-3d.com/paste/?d10ac1b4d96ecf5d#H2qsi6sAjlF/byRXBkDScauiEkNMI7S2MuN7WKB1oIA=

2. Downloaded babylonjs to root directory of location in 1.  Note, I tried both babylonjs versions 2.4 and 2.5.

3. Downloaded chromium (note: tried both versions 1.0 and 1.1).

4. In chromium, enabled VR flag

5. Open SteamVR to get Vive active

5. Launched the *.html file in 1) and can see the side by side of the mesh example on my monitor (and in desktop view on Vive)

6. Clicked the "Full Screen" button in lower left after waiting 5ish seconds...(this is where I expect tracking/viewing to be seen in Vive, but alas...).

Note: I have no problem seeing the threejs examples on Vive.  For example, this boilerplate (https://borismus.github.io/webvr-boilerplate/).

If what I wrote about above SHOULD work and works for others, I'm at a loss.

 

 

 

 

[RaananW]

Hi @forlaunchcast , 

have you tried this chromium? https://webvr.info/get-chrome/ . This is a special VR-Ready build. This is the only one I am using to test WebVR.

My simple WebVR scene (the one I am using for testing) is this - http://raananweber.com/orientation/webvr/ . this opens SteamVR automatically and starts broadcasting to the headset when you press "enable WebVR".

Check the console for errors, and also try running this in your console:

navigator.getVRDisplays().then(function(devices) { console.log(devices);})

What is the output?

 

[forlaunchcast]

Yes!  Thanks, RaananW.  I just put the url into the vr-enabled chromium build and it immediately launched SteamVR.  Clicking the "Enable VR" had me looking at the texture-free meshes with room scale.  Fantastic job, kind sir.  This is exactly what I was looking for and can't wait to try to implement in a babylonjs-based project!  Nothing like injecting some adrenaline into my hobby endeavors!!!!

[steven_EXC]

Hey guys!  I was messing around with some of this WebVR Vive stuff and it's pretty exciting!  I was wondering, maybe I'm crazy, are the minZ and maxZ variables on the WebVRFreeCamera broken?  I've been messing with them and they don't seem to modify the clipping planes at all.

[GameMonetize]

try to set it to camera.leftCamera and camera.rightCamera?

IF this works then I'll have to fix the bug

[steven_EXC]

I thought that might be the case, but it doesn't seem like the WebVRFreeCamera has these variables.

EDIT: Sorry, I meant that it doesn't seem like the leftCamera or rightCamera variables exist on the WebVRFreeCamera.