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 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 29 results

  1. 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!
  2. 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.
  3. 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
  4. 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 ( How can I make the user start from the ground (a fixed point on the ground will also work)?
  5. 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: (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
  6. 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
  7. 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. ^^
  8. 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
  9. This is a weird problem but at least I am able to repro it consistently. Here is the playground: 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.
  10. 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.
  11. 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
  12. 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
  13. 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!
  14. 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!
  15. davrous

    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
  16. 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
  17. 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?
  18. 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
  19. 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.
  20. 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
  21. 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
  22. dinod

    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!
  23. pindiespace

    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!
  24. 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.
  25. FlashyGoblin

    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.