Jump to content

Any examples for VR with barrel distortion?


ozRocker
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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"

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).  :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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! 

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