ozRocker Posted October 7, 2015 Share Posted October 7, 2015 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 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 7, 2015 Share Posted October 7, 2015 Hello, you can enable VR by just using a WebVRCamera instead of a regular FreeCamera:http://www.babylonjs-playground.com/#1A9DEF Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 7, 2015 Author Share Posted October 7, 2015 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? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 8, 2015 Share Posted October 8, 2015 Unfortunately no..the issue is certainly with iOS9 webgl implementation which sucks a bit Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 8, 2015 Author Share Posted October 8, 2015 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 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 8, 2015 Share Posted October 8, 2015 You can try the same PG that I sent but without compensation:http://www.babylonjs-playground.com/#1A9DEF#1 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 8, 2015 Author Share Posted October 8, 2015 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? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 9, 2015 Share Posted October 9, 2015 In this case just use a DeviceOrientationCamera For fullscreen, this **should** work, but as I mentioned, iOS implementation is crappy Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 9, 2015 Author Share Posted October 9, 2015 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" Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 9, 2015 Share Posted October 9, 2015 Sorry I meant this one: http://doc.babylonjs.com/classes/2.2/VRDeviceOrientationFreeCamera And the response is yes Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 10, 2015 Author Share Posted October 10, 2015 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 codelight.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 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 11, 2015 Share Posted October 11, 2015 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. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 11, 2015 Share Posted October 11, 2015 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 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 11, 2015 Share Posted October 11, 2015 Hey, what are YOU doing sneaking-around on the forum on a Saturday night, DK? Get a life, huh? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 11, 2015 Share Posted October 11, 2015 I'm not here..just a ghost of me Wingnut 1 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 11, 2015 Author Share Posted October 11, 2015 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. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 11, 2015 Share Posted October 11, 2015 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. Quote Link to comment Share on other sites More sharing options...
jerome Posted October 11, 2015 Share Posted October 11, 2015 btw, if you need DOUBLESIDE and transparency, just set the material alpha property : http://www.babylonjs-playground.com/#1JSXHW#3and keep the backfaceculling enabled (so do nothing more) Wingnut 1 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 12, 2015 Author Share Posted October 12, 2015 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 :/ Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 13, 2015 Share Posted October 13, 2015 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). Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 13, 2015 Author Share Posted October 13, 2015 I can't get billboard mode working with my VR camera. My red gizmo just moves with the rest of the scene Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 13, 2015 Share Posted October 13, 2015 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) Quote Link to comment Share on other sites More sharing options...
ozRocker Posted October 13, 2015 Author Share Posted October 13, 2015 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 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 13, 2015 Share Posted October 13, 2015 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! Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted October 13, 2015 Share Posted October 13, 2015 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. Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.