Search the Community

Hello everybody, I'm looking fore some advice using a PS4 (DS4) Contoller for mobiles. So far I've found at least one PLAYGROUND where the camera zoom is responding to my Controller keys. But I have no idea which type of WebVRController is instantiated and how the key-mapping happens (I'm not fit in debugging mobile applications) . Maybe there is one specific WebVRController already implemented or is the Generic type the right one? Does someone have experience with this topic? My hardware conection: Dualshock controller (DS4) paired with an android mobile. Thanks in advance

Hello. I've a scene in which I use ArcRotateCamera and also VR is enabled using VRExperienceHelper. The problem is that, when the user enters to VR, VR camera is not looking at the same position that is looking Non-VR Camera and also is further. I've tried to handle onEnteringVR event,but I'm not able to make it work. I've prepared to simple examples to illustrate the problem. In this sample, without moving/rotation the camera, if the user enters in VR, is looking to the sphere, which is OK, but it is further from the sphere, which is not OK. However, in this sample, if the user enters in VR without moving the camera, is looking to the sphere opposite side, and also the position is wrong. Any ideas to help to put the correct position/orientation in the VR camera when entering to VR? Thanks in advance. Regards.

Hi there! I've created a detailed tutorial on how to create a full cross-platforms WebGL game (using Babylon.js of course) from mobile touch devices, to desktop up to VR! https://www.davrous.com/2018/08/14/using-webgl-and-pwa-to-build-an-adaptative-game-for-touch-mouse-and-vr-devices/ I've tried to create small samples for each section often pointing to the playground to explain you how to do each part. I hope it will help people discovering some Babylon.js principles and will also generate some forks to create other fun 3d experiences! At last, I'm explaining how to manage properly offline via a Service Worker coming from PWA coupled with our embedded IndexedDB layer. As a bonus, you'll discover how to push your game to the Microsoft Store Hope you'll like it! Cheers, David

I borrowed an Oculus Go from work, here are some first impressions/ questions. Overall I'm really impressed with the hardware. It's comfortable to wear, resolution and FPS seem fine to me. My only other VR headset experiences have been cardboard and a Samsung one (forget which it was), Oculus Go is better than either of those. As a dev device, I've not downloaded any SDK or looked at any dev doc, I just point the device's browser at http://<my laptop's IP address>:8080 and off I go (no JS console tho!) It's amazing how much the following one line of code gets you: const vrHelper = scene.createDefaultVRExperience({ createDeviceOrientationCamera: false }); it gives you a VR icon on the screen. When you tap it, Oculus Go launches into fullscreen VR. Looking around looks great, works seamlessly out the box. Worth noting that Oculus Go is a 3 DOF system, rather than 6 DoF. Meaning that it only tracks orientation of the headset (and the controller too? Need to double-check this), not its position. Where I have run into some difficulties is with the controller. I'm currently trying to implement so that the user can point at a mesh with the controller, and pull the trigger to select a point on that mesh. I'm going to list some of these in this thread. Bearing in mind I've only had the device for a few hours. If anyone has suggestions for these issues, would be great to hear. 1. getting PickingInfo So far I've only been able to get PickingInfo with vrHelper.onNewMeshPicked this only fires when the pointer first moves over the mesh, regardless of whether the user is pressing one of the buttons or not. The callback for picking up button changes controller.onButtonStateChange returns info about the button, but no pickInfo. I guess I need to call scene.Pick inside the button state change callback, haven't had time to try this yet. 2. customizing the controller mesh When you enable interactivity with vrHelper.enableInteractions(); The default mesh for the controller is a long, thin cylinder that stretches from where you're pointing, right up to your eyes. It's really in-your-face, and I haven't found a way to modify or disable it yet. This doesn't have any effect: vrHelper.displayGaze = false; And neither did trying to apply a custom mesh with controller[0].attachToMesh(mesh) I've got to be offline for a few hours now, but I'll keep experimenting. If anyone has questions, tips, please do post.

Hi there, Now I have a basic webVR demo from PG, when I enter into VR mode, there always be round frames/corners (below pic in red circle )at each view. Is there a way to remove them, and make the view on both side in full screen? Thanks!

Hi, I am creating WebVR app with Babylon.js (using Firefox, SteamVR and HTC Vive). Can I somehow start VR without users initial click. When i create WebVRFreeCamera: const camera = new BABYLON.WebVRFreeCamera("camera", BABYLON.Vector3.Zero(), scene); I can start VR with: scene.onPointerDown = function () { camera.attachControl(document.getElementById('scene'), true); }; or scene.onPointerDown = function () { camera.getEngine().enableVR(); }; but when i do it without onPointerDown callback it does not work: const camera = new BABYLON.WebVRFreeCamera("camera", BABYLON.Vector3.Zero(), scene); camera.getEngine().enableVR(); Also when i wrap it with setTimeout it does not work: const camera = new BABYLON.WebVRFreeCamera("camera", BABYLON.Vector3.Zero(), scene); scene.onPointerDown = function () { setTimeout(()=>{ camera.getEngine().enableVR(); },100); }; Does enableVR method needs onPointerDown event context. Or where is the problem? Thanks a lot for your advice.

I have a car moving based on some custom inputs. I want to put WebVRCamera in the driver's position, so they can look around using their headset. I have tried several ways to attach it to my car with no success: helper.webVRCamera.parent = content.headContainer seems to have no effect. helper.webVRCamera.position = content.boardFloor.position and helper.webVRCamera.rotation = content.boardFloor.rotation is messing up when the car rotates

When we enter into VR mode (using the defaultVRExperience), the VR camera is at the same position as the desktop view camera. So, if a user played with the default Universal Camera before entering into VR, (s)he would begin somewhere in the air. To fix this, I added an `onEnteringVRObservable` that changes the position of the WebVR camera, but that didn't seem to work (https://playground.babylonjs.com/#VTUSD6). How can I make the user start from the ground (a fixed point on the ground will also work)?

We have a scene with around ~100 meshes (ranging from simple planes/cubes to ones with ~10,000 tris). The scene renders quite well in VR. However, when we move closer to a mesh, the frame rate drops. This effect can be reproduced on a simple scene like this one: https://playground.babylonjs.com/#p5nkvt (moving very close to any of the spheres causes the frame drop). We're using the default VR experience and the engine configuration is the same as the one in the playground. Is this a known effect? If yes, it would be great to know the possible cause and fix. Our system configuration is as follows: Headset: Dell Vysor OS: Windows 10 RS 3 System: GTX 1080/GTX 1060, 16 GB RAM Browser: Microsoft Edge

Dear Community, On my desktop computer the webVR quality is good. But on my phone (galaxy s8) everything looks like as if the engine was rendering at maximum half the resolution and then scaling the image up. This is also the case with the playground webvr example. This concerns all browsers I tested ( by the way: only the Samsung Internet App has no issues weirdly enough ) Other examples from the web with native webVR don't have this problem and look great on the phone. Is there something I can do about this? Thanks and cheers, Patrick

I've been testing the babylonjs on the windows mixed reality platform with Edge browser. It's relatively stable except for various vr-related bugs that I reported , but the excellent bjs team has been on top of things very timely. My question for other users on this forum is how is babylonjs running on VR platforms? Specifically vive and rift. What I am looking for are: 1. stability: crashes, hangs, etc 2. performance: aliasing issues, frames-per-sec, etc. 3. webvr/webgl conformance: all babylonjs demo running ok ? any quirkiness where some apps don't run on certain platforms? did you try the supermedium browser and notice any advantages? As you know one of the key advantages of being a webvr app is to be able to support multiple vr platforms easily (though I guess you still have to handle the controller idiosyncrasy), and I am also considering getting the vive/rift vr headset for portability testing. If you've been doing babylonjs on vive/rift and don't mind sharing your experience, would you please reply to this thread. Thanks!! Adding @davrous as I suspect he's been using vive? on babylonjs. ^^

Hi guys! We've done a cool & fun video on how to create a full WebVR experience using 2 lines of Babylon.js: Feel free to relay it on social networks David

This is a weird problem but at least I am able to repro it consistently. Here is the playground: https://playground.babylonjs.com/#VW5SKD#3 Initially the teleport is disabled (commented out at line 11), try to view the scene inside vr headset, and the view is ok, no jagged lines. Now edit line 11 to remove the comment (to enable teleport), hit the Run button and view it again, now you will see the jagged lines noticeably. Btw, I am using WinMR vr. Don't know if this is impacting others like vive or rift.

I have a test app with 2 sessions which I can switch back and forth by clicking a button (thanks to the new UI). The rendering of both sessions works as expected in the browser (non-vr), but not quite when I go into the vr mode. When viewing in vr headset (using wmr odyssey), I am seeing double vision when switching session. I am guessing this has something to do with VRExperienceHelper which is created per scene object (via Scene.CreateDefaultVRExperience()). Probably it's not safe to create more than one instances of the vr helper object ? But then what should you do when you have multiple session objects ? Please advise, thanks.

Hello, Just before my vacation, I've written this tutorial on how to create VR experiences using the VRExperienceHelper : You will even learn how to build a WebVR scene using Paint3D! Enjoy, David

Hello, I am trying to rotate or change the orientation of the web vr camera programmatically. I am using the WinMR controllers. The base codes are from the sponza/mansion teleportation where we can change the camera position. I wonder if it's possible to change the camera orientation using thumbstick as well (like teleportation in the cliff house). Setting the camera's rotation (x, y, z) does not seem to make any impact. There has to be a way right ? Please help. Thanks

I've used camera.getTarget() to advance a character forward, as described here: It's worked well with a FreeCamera, but I can't get it to work with the WebVR camera. camera.getTarget().subtract(camera.position) always returns the same vector regardless of what I'm looking at through the VR headset. It was a bit tricky to demonstrate in the playground, but I managed: https://www.babylonjs-playground.com/#7DYN70#11 That demo starts with a FreeCamera attached to the canvas. Open up the JavaScript console, and you'll see that it's logging the camera.getTarget().subtract(camera.position) vector every second. If you move the camera looking direction with your mouse, you'll see that the "looking vector" changes in the console. Now the same code, but with a WebVR camera (HTC Vive): https://www.babylonjs-playground.com/#7DYN70#10 In the console, the "looking vector" is always the same, regardless of what I'm seeing in the HTC Vive headset. As always, thanks for your help!

I recently got my hands on an HTC Vive, and I can't even express how excited I am about this technology! Babylon.js works well with the device too. I'm just thrilled! I have run into what I think might be a bug, though. When I load a .babylon file that I exported from Blender and try to hook in a WebVR camera, the controllers don't show up. I can't figure out how to open up an external .babylon file in the Playground, unfortunately, but here's my code: function makeWebVRCamera(scene, position) { var metrics = BABYLON.VRCameraMetrics.GetDefault(); var camera = new BABYLON.WebVRFreeCamera( "deviceOrientationCamera", position, scene, false, // compensate distortion metrics ); window.scrollTo(0, 1); // supposed to autohide scroll bar. return camera; } function startLoop(engine, scene) { engine.runRenderLoop(function(){ scene.render(); }); } function addLight(scene) { var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = .5; } function createSceneFromBabylonFile(canvas, engine) { BABYLON.SceneLoader.Load("", "babylon.babylon", engine, (newScene) => { var webVRCamera = makeWebVRCamera(newScene, newScene.activeCamera.position); // Wait for textures and shaders to be ready newScene.executeWhenReady(() => { jQuery("#renderCanvas").click(() => { // Now remove the original camera newScene.activeCamera.detachControl(canvas); if (newScene.activeCamera.dispose) { newScene.activeCamera.dispose(); } // Set the new (VR) camera to be active newScene.activeCamera = webVRCamera; // Attach that camera to the canvas. newScene.activeCamera.attachControl(canvas); // This won't work if desktop-based vr like htc vive. So this command also run on play-button click. }); addLight(newScene); startLoop(engine, newScene); }); }); } function createSceneFromScratch(canvas, engine) { window.scrollTo(0, 1); // supposed to autohide scroll bar. var scene = new BABYLON.Scene(engine); var webVRCamera = makeWebVRCamera(scene, new BABYLON.Vector3(1.8756, 3.4648, 8.517)); jQuery("#renderCanvas").click(() => { // Set the new (VR) camera to be active scene.activeCamera = webVRCamera; // Attach that camera to the canvas. scene.activeCamera.attachControl(canvas); // This won't work if desktop-based vr like htc vive. So this command also run on play-button click. }); addLight(scene); var box = BABYLON.Mesh.CreateBox("Box", 4.0, scene); startLoop(engine, scene); } jQuery(document).ready(() => { var canvas = document.getElementById('renderCanvas'); var engine = new BABYLON.Engine(canvas, true); // createSceneFromBabylonFile(canvas, engine); createSceneFromScratch(canvas, engine); }); There are two functions for creating a scene: "createSceneFromBabylonFile" and "createSceneFromScratch". createSceneFromScratch (not commented out in the code above) works great. I can see my scene in the HTC Vive, and the Vive's controllers are also visible. createSceneFromBabylonFile (commented out in the code above) also works well. The 3D scene appears in the Vive correctly. But there are no controllers visible in the scene, even when I'm holding them in my hands. I haven't for the life of me been able to figure out how to make those controllers appear when I load an external .babylon file. (Note: putting newScene.activeCamera.initControllers() after the camera is attached to the canvas was not effective.) Thanks for your help!

Hello, I'm having fun while writing our next big tutorial on building WebVR scene with Babylon v3. Here's a preview of what I'm working on. The Mansion scene is really a great experience in VR! You can use the VR controllers to teleport, it sends a yellow ray by default. If the ray turns blue, it means you're pointing to an actionable item (using our Action Manager). Pressing the VR controller button will run the action on it, most of the time an animation + sound like in the regular version of Mansion: http://www.babylonjs.com/demos/mansion Enjoy! David

Hi, I’ve just finished a big tutorial explaining why and how to build a cross-platforms VR experience using WebVR and Babylon.js: https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-webvr-experiences-with-babylon-js-on-all-platforms/ It contains a lot of samples to: - Create a scene running on smartphone using the Device Orientation fallback, on Mixed Reality headset in Edge and Oculus Rift / HTC Vive in Firefox / Chromium using WebVR. - Show how to teleport either using the gamepad and a gaze approach or using a VR controllers if available (will be our case by the end of the year with RS3) - Show how to interact with items using gaze or VR controllers I’ve been able to demonstrate some of its content to various French meetups and people were amazed by the quality of the rendering and possibilities. We still have some work to do to simplify WebVR usage compared to A-Frame for instance, but it's planned for 3.1 of Babylon.js. In the meantime, test our Mansion VR experience: http://playground.babylonjs.com/frame.html#QWIJYE#6 either on your smartphone using Cardboard, in Edge with a MR headset or in your Oculus / Vive in Firefox 55 beta! Feel free to spread the world also RT my tweet: https://twitter.com/davrous/status/883416521057456129 Thanks, David

Hey there! Sorry if my question is noobish. Are there any good examples for Babylon.js + VR ? Looked at examples of official engine's site, they're great, but there's no example about vr (or I haven't found it yet). Could you recommend something, guys?

Hi, can someone give me some advice how to use a sony headset in conjunction with babylon.js and browser on pc side? Are there any projects outside? Is it in general possible to config a camera to bring the right output format? How can the controller configured to give the right input (Keyboard mapping)? Or should I forget the idea adapting a sony VR system to babylon.js? Thanks in advance for some hints, greetings to all

In the process of building something with ThreeJS. When trying to find stock models for us with our WebVR project, most of them (especially office or apartment interior models - obj files) seem to be really huge and we do not want to use them for this web project. But, BabylonJS seems to have some demos which are rather rich, yet the model sizes are under 15MB mostly. Like this one for instance - http://www.babylonjs.com/demos/retail/ Absolute Newbie to webGL and 3D modeling in general. If we want an apartment or office interior model, and we want to optimize for file download size for our users via browser, what sort of formats should we look for and are there special settings that need to be made when designing the models themselves to yield them in a light weight manner for web use? Appreciate some gyaan here.

Hi beloved community! With @Meulta, we've done a //BUILD 2017 session on WebVR and Babylon.js (of course! ;)) that you can watch it: https://channel9.msdn.com/events/Build/2017/P4097 Feel free to share the love on social network by RT this tweet for instance: I hope you'll enjoy our content. David

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