Any examples for VR with barrel distortion?

[ozRocker]

I've seen a few VR functions in Babylon.js but I'm wondering if there are any working examples?  I'm talking about VR for standard mobile devices, not Oculus Rift

[GameMonetize]

Hello, you can enable VR by just using a WebVRCamera instead of a regular FreeCamera:

http://www.babylonjs-playground.com/#1A9DEF

[ozRocker]

Thanks mate.  Looks good on the desktop computer.  I'm trying to test it out on my iPhone 6+ but its crashing when I try to go to fullscreen mode.  Is there a querystring parameter I can use to go directly into fullscreen mode with the Babylon.js playground?

[GameMonetize]

Unfortunately no..the issue is certainly with iOS9 webgl implementation which sucks a bit

[ozRocker]

My iPhone is still running iOS 8.4.1.  I can get these demos running on it https://github.com/borismus/webvr-boilerplate so was hoping to find a Babylon.js implementation

[GameMonetize]

You can try the same PG that I sent but without compensation:

http://www.babylonjs-playground.com/#1A9DEF#1

[ozRocker]

Do you know how I can get Fullscreen mode with Playground on a mobile device?  The Fullscreen button doesn't do anything on an iPhone 6+.  Also, is there directional tracking with VR so I can control the camera direction by moving the phone around?

[GameMonetize]

In this case just use a DeviceOrientationCamera 

 

For fullscreen, this **should** work, but as I mentioned, iOS implementation is crappy

[ozRocker]

Doesn't DeviceOrientationCamera just use the FreeCamera? Or is it possible to use that with the WebVRCamera?  Basically, I'm just trying to determine if Babylon.js can do VR with barrel distortion on my iPhone 6+.  Its looking like a "no"

[GameMonetize]

Sorry I meant this one: http://doc.babylonjs.com/classes/2.2/VRDeviceOrientationFreeCamera

 

And the response is yes

[ozRocker]

ok cool, I believe you  I created a VR camera for my website, you can see it here www.punkoffice.com/vr  It works on iPhone 6+ (now on iOS 9.02) and Android phone.  With the arc rotate camera I had the light facing the same direction as the camera with this code

light.direction = myCamera.target.subtract(myCamera.position).normalize();

but that doesn't work with the VR camera because it doesn't have a "target" property.  Does anyone know how to make the light point the same direction as the VR camera?  I want it to work like my original website www.punkoffice.com

[Wingnut]

Hi OzR!  Maybe the VR camera has a .lockedTarget and setTarget() and getTarget()... and maybe even a .cameraDirection,  which could be bound to a spotLight or directionalLight .direction property. 

 

Check the inheritance chain.  WebVRFreeCamera extends FreeCamera, but what does FreeCamera extend?  Browse-up... http://doc.babylonjs.com/classes/2.2/WebVRFreeCamera  and check the little red boxes at the top.  (see TargetCamera)

 

I tried some some things... http://www.babylonjs-playground.com/#1A9DEF#2

 

I used some parenting... which I don't really like to do.

 

In the above demo, do UP-cursor... light2 turns-on, and is aimed in the camera's direction, but turns-off again.  hehe.  Pan the camera around in some direction, up-cursor again... the light turns-on and is aimed like the camera... but turns-off again.  *scratch scratch*  Goofy! 

 

I'll let you take it from here.  I hope this gives you some ideas/solutions.  If not, others will visit soon and give input.  Keep us posted, thx.

[GameMonetize]

Cool!!!!

 

For your light, you can create a directional light with a direction = (0, 0, 1) and make it child of the camera with light.parent = camera

[Wingnut]

Hey, what are YOU doing sneaking-around on the forum on a Saturday night, DK?  Get a life, huh? 

[GameMonetize]

I'm not here..just a ghost of me

[ozRocker]

Ok, I've made the light the child of the camera.  It points where the camera does, so that part works.  But what I'm trying to do is only make the light change direction on the x-axis, so if I move the camera up and down it doesn't affect the light direction.  I only want the light direction to move if I move the camera left and right.  I think I have to put something in "registerBeforeRender" to adjust the light direction but I'm not sure what.

[Wingnut]

Hi again 

 

You will need to say goodbye to parenting the light to the camera.  Instead, let's parent the light to a red mesh... called gizmo.

 

http://www.babylonjs-playground.com/#1JSXHW#2

 

Later, after testing is done, gizmo.visibility will be set to 0... so you won't see the gizmo box.

 

Check out line 35... billboard mode y-axis only... for our gizmo.  This makes the gizmo ALWAYS face the camera... but only on the Y-axis (a stripper pole thru the gizmo). 

 

See line 42... I have set the directional vector to magnitude 1 on the Z axis.  I would have thought it would need to be -1, but because of the way the billboard mode works, apparently it needs to be 1.  Direction vectors are strange.  Even though it's not required, for light directions, it is best to keep the X/Y/Z values between -1 and +1. 

 

To confuse things a bit more, directions can be thought-of as ratios of "tension" between all axes.  This is why you could change that Z value... to .000001 and the light would still face the same direction.  There are no values in the X and Y "tension rubber bands", so even a lower-powered rubber band such as .000001 is enough Z-tension to keep the light facing +Z direction.

 

Notice line 24.  I set the cylinder's sideOrientation to BACKSIDE... and that is why we can see through the cylinder walls.... when the camera is outside of it.  Set that to DOUBLESIDE and then we can't do that anymore.  (Just a fun fact about sideOrientations.)    When set to BACKSIDE, the lighting normals are aimed toward the INSIDE of the cylinder, and that is why we can see the spotlight circle on the inside of the cylinder.  I bet you knew that already. 

 

There are other ways to do this... WITHOUT using a gizmo, but the gizmo method works well, so I thought I would use that.  Also, the gizmo could be a plane instead of a box.

 

Ok, hope this helps.  Good luck, keep us posted.

[jerome]

btw, if you need DOUBLESIDE and transparency, just set the material alpha property : http://www.babylonjs-playground.com/#1JSXHW#3

and keep the backfaceculling enabled (so do nothing more)

[ozRocker]

Hi again 

 

You will need to say goodbye to parenting the light to the camera.  Instead, let's parent the light to a red mesh... called gizmo.

 

http://www.babylonjs-playground.com/#1JSXHW#2

 

 

I tried this out but the gizmo is not spinning with the camera :/

[Wingnut]

On your website project?  Or in the playground demo?

 

This indicates that there is an issue with the billboarding.

 

I made a few adjustments... http://www.babylonjs-playground.com/#1JSXHW#4

 

It seems to be working a-ok in the PG, still.  *shrug*

 

Maybe... the cylinder was so highly tessellated (32) in the previous demo, that you didn't notice that the camera was panning around it?  (thus I put some texture on it). 

[ozRocker]

I can't get billboard mode working with my VR camera.  My red gizmo just moves with the rest of the scene

[Wingnut]

Oh my goodness... you are correct.  http://www.babylonjs-playground.com/#1JSXHW#6

 

Sorry for misunderstanding.

 

What the heck, huh?  I'm on it.   (...which means I'll have an answer about new years) 

[ozRocker]

Does anyone know if its possible to create a gap in-between the left and ride picture?  The VR works fine in my normal VR goggles but I have a new type of Google cardboard that has a thick bridge which is used as a button to touch the screen.  When I make apps for it I have to create a gap between the left and right picture to accommodate for this bridge

[Wingnut]

Hi again.  About sick of me?  I don't blame ya... I'm about sick of me, too.    First, an update on the billboard mode: I have made zero progress (sigh).  I think the localGods will need to get involved there... sorry.  Hey, I'm trying, and I haven't given up yet.  Would you prefer that I shut the hell up and wait for better experts?

 

Now, the other thing...

 

http://www.babylonjs-playground.com/#1JSXHW#9

 

Get to know the metrics object.  Although .lensSeparationDistance is there, it might not do what you want.  It does not open a gap between the left and right "areas".  Activate line 42 to test it.

 

There are 4 properties that I THINK might be pertinent.  .leftPreViewMatrix and .rightPreViewMatrix are MAYBE used when camera._vrEnabled = false.  .leftHMatrix and .rightHMatrix are MAYBE used when camera._vrEnabled = true.

 

Likely, those are transformable matrices in each of those properties.  You could possibly transform the leftHand ones... further left, and the rightHand ones... further right.

 

I am terrible at matrix transformations but maybe you (or others) are better at them.  Again, sorry if I am getting in the way of experts, but I don't see the experts answering, if there are any nearby.  So, I'm telling you what MIGHT be.  Again, if you want my VrCam-newbie butt to stop trying to research answers, just say so.  This stuff is WAY over my head... sorry.

 

Experts, got some better info (and/or repair of Wingnut's stupidity)?  Thanks! 

[JCPalmer]

If you do cannot specify a custom VRCameraMetrics https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/babylon.camera.ts to achieve your separation, you are probably need to change the postprocess shader.