Search the Community

Showing results for tags 'webvr'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 20 results

  1. 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.
  2. 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
  3. 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
  4. 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: 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): 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!
  5. 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!
  6. Hi, I’ve just finished a big tutorial explaining why and how to build a cross-platforms VR experience using WebVR and Babylon.js: 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: 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: Thanks, David
  7. BabylonJS Mansion in WebVR

    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: Enjoy! David
  8. 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
  9. 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 - 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.
  10. Hi beloved community! With @Meulta, we've done a //BUILD 2017 session on WebVR and Babylon.js (of course! ;)) that you can watch it: Feel free to share the love on social network by RT this tweet for instance: I hope you'll enjoy our content. David
  11. 2D UI in WebVR?

    Total Babylon noob here looking for some help! I'm working on a WebVR game and want to add in some 2D elements like a small "Press the A button to start" box. How would I go about something like this? I've played around with Canvas2D but for some reason have only been able to get it to show the 2D element through one eye of my headset and have since scrapped that idea. Any ideas for the best way to go about this would be much appreciated!
  12. 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: 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: (you need a recent version of Chromium or Firefox with gamepad extension enabled you may find on I'm in the process of integrating the 3D models of both controllers. For instance: - HTC Vive Wand model: - Left Touch: - Right Touch: 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: . 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: - Chromium with HTC Vive & Oculus Touch Stay tuned, we're continuing building great stuff you'd like. Cheers, David
  13. WebVR Support (again)

    Checking in to see the support for WebVR in the current edition of Babylon. Currently, Babylon doesn't see WebVR enabled on my copy of Google Chrome (Canary) or Firefox nightly., and recognized but no working in Chromium experimental build (Feb 7). Currently, the Chromium build with Babylon 3.0 alpha blows up with some undefineds: Uncaught TypeError: Cannot set property 'x' of undefined at Matrix.getTranslationToRef (babylon.max.js:2817) With Babylon 2.5, you get a stereo screen in Chromium...but the Vive does not respond - does not show the stereo scene on the desktop window. Advice on any browser or SteamVR setting which will enable the headset appreciated!
  14. hi everyone, I look through the forum to see if anyone has worked on a babylonJS example that involved the use of WebVRFreeCamera with Samsung GearVR(with their phone device attached to the gear mini usb), since GearVR's internet browser "Samsung Internet" has webvr supported. But what I found mostly are people suggested using VRDeviceOrientationCamera for GearVR instead, which is using mobile screen as the vr display. So my question is as stated in the title: is it possible to just create a WebVRFreeCamera in the BJS scene for webvr experience to be worked on GearVR? I also found this example which uses Three.js and the webvr api, which I tested on gearVR's samsung internet and it works, but I had never learned Three.js before and I am keen to continue working on a babylon.js scene instead.
  15. 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?
  16. Detect for WebVR on desktop

    What would be the best way to detect for WebVR support in the browser (Firefox Nightly/Chromium with Oculus)? Ideally I would like to detect for it before I load up my scene and create the necessary cameras.
  17. Well, good news is that Microsoft is going to support WebVR in the Edge browser. This is great, since it means that the Hololens and similar AR device may be accessible to web programming. However, to make it work with these devices, the WebVR spec just added and deprecated some functions. Apparently AR devices provide detailed rendering info that wasn't addressed in the WebVR 1.0 spec - the 1.1 upgrade fixes that. Migration Guide: Updated samples: JS Shim for Chromium (which still has the 1.0 spec) The big issues: Replace VRDisplay.getPose() with VRDisplay.getFrameData() Use projection matrices provided by VRFrameData, instead of computing from VREyeParameters.fieldOfView() Use the view matrices from VRFrameData, instead of computing from pose + eye offsets
  18. Hi, does anybody know if it's possible to get the position and rotation-data of the vive-controllers?
  19. Hi, i have a webVrFreeCamera that correctly follows Oculus tracking and orientation, i can't get video output on Oculus. The demos on MozVR are written in THREE.js and they have a button that enables vr mode. They works fine. How can i get the same behaviour in Babylon.js?
  20. Creating a VR Reticle

    Has anyone seen an example or know how BabylonJS works with reticles when going into VR mode? I'm looking into having a custom reticle or cursor in my scene to use as a targeting crosshair. My thoughts were to use ray casting. I would create a plane in front of the my camera that will be textured with a crosshair image Create a Ray from the middle of a plane out into my scene. Then pick the 3D Object that it hits first. Allow it to work with switching to multiple cameras types for when in VR or not. I know there are ways of doing this. I'm just a bit confused with the implantation. Anyone have any thought? Thanks in advance! Shane