• Content Count

  • Joined

  • Last visited

About jdurrant

  • Rank
    Advanced Member
  1. Hi all. I reloaded in private browsing, but I still had the same problem. I asked some of my students to test it on their phones, and it worked fine for them. So strange that I can't reproduce this problem on anyone else's phone. Makes debugging very difficult! Thanks for your help just the same. All the best.
  2. Very interesting that it did work for you, @MarianG . I'm on Android 7.0, LG G6, Firefox 57.0.4. Anyone else able to reproduce this problem? Thanks!
  3. Hi all. I fixed the "engie" error and changed to the full url: https://durrantlab.bio.pitt.edu/tmp/minimal_test_firefox_mobile_prob2/skybox.png The error persists in Firefox on Android, though. Here's an updated version of the code that still causes the same error: https://durrantlab.bio.pitt.edu/tmp/minimal_test_firefox_mobile_prob2/ Thanks, Jacob
  4. I'm having an odd problem loading a texture on Firefox for Android. It seems to work on every other browser I've tested. Here's a url with an example of the problem: https://durrantlab.bio.pitt.edu/tmp/minimal_test_firefox_mobile_prob/ Here's the complete html code of that example: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Test</title> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="manifest" href="./manifest.json"> <style> html, body, #renderCanvas { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { /* width: 100%; height: 100%; */ touch-action: none; } </style> </head> <body> <canvas id="renderCanvas" touch-action="none"></canvas> <script src="js/babylon.max.js"></script> <script> // Basic setup var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene); // Make a material var material = new BABYLON.StandardMaterial("mat", scene); material.diffuseColor = new BABYLON.Color3(0, 0, 0); material.specularColor = new BABYLON.Color3(0, 0, 0); material.diffuseTexture = null; material.emissiveTexture = new BABYLON.Texture("skybox.png", scene); // Make a box with that material var box = BABYLON.Mesh.CreateBox("box", 2, scene); box.rotation.x = -0.2; box.rotation.y = -0.4; box.material = material; // Resize the engine engine.resize(); // Start the render loop engine.runRenderLoop(() => { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", () => { engie.resize(); }); </script> </body> </html> This is what it looks like in most browsers (in this case Chrome for Android): But here is Firefox for Android: Has anyone else encountered this problem? Any suggestions re. how to fix it? Thanks!
  5. I just wanted to thank the community. I recently published a scientific article entitled "Pyrite: A blender plugin for visualizing molecular dynamics simulations using industry-standard rendering techniques": http://onlinelibrary.wiley.com/doi/10.1002/jcc.25155/abstract It uses Babylon.JS for the in-browser visualization. You can see a demo here: http://durrantlab.com/apps/pyrite/web/ I'm using Babylon for other projects in my lab as well. What a great engine! All the best.
  6. Works great @RaananW ! Thanks for your help. If I'm not mistaken, camera.getTarget() is a defined function. Why not have it return the average of the two getTarget() values? In case it helps others, here's a working example: https://www.babylonjs-playground.com/#7DYN70#12 All the best.
  7. 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!
  8. Thanks, all. It seems I was using a slightly out-of-date version of babylon.js. Both the online playground and my local copy were 3.1-alpha, but apparently not the same 3.1-alpha. Using BABYLON.SceneLoader.Append, rather than BABYLON.SceneLoader.Load, also seemed to be important. Hope all this helps someone else. All the best.
  9. Thanks for your help, @Deltakosh . The playground scene you posted works perfectly. (Remarkable scene, BTW, to view in the HTC Vive!) I see both the scene and the controllers. But I continue to have troubles. Here's what I've done to debug so far: STEP 1: I took your exact code, except I swapped in my .babylon file: http://playground.babylonjs.com/#E0WY4U#16 Success! I could see my (unlit) scene as well as the Vive controllers. STEP 2: I created my own local playground. My server is on localhost:8000, started via python: python -m SimpleHTTPServer 8000 Here's my playground framework, which I assume is similar to yours: var canvas = document.getElementById('renderCanvas'); var engine = new BABYLON.Engine(canvas, true); jQuery(document).ready(() => { var scene = createScene(); engine.runRenderLoop(function(){ scene.render(); }); }); I then copied the EXACT same code for the createScene function into this playground environment. The 3D scene appears in the Vive, but no controllers! STEP 3: As a sanity check, I then changed my local-playground createScene function only slightly, to load your sponza scene into my local playground. The 3D scene appeared, but again no controllers. STEP 4: Could there be something wrong with my server that's getting in the way? I uploaded my code to a publically available server. See https://durrantlab.com/tmp/babylon_test/ Great 3D scene in the Vive, but no controllers. TENTATIVE CONCLUSION There's something you're doing at the level of the playground environment that's making the controllers appear in your playground but not in mine. You can see my code here (which, again, does not show Vive controllers, even though it's identical to what I posted at http://playground.babylonjs.com/#E0WY4U#16): https://durrantlab.com/tmp/babylon_test/main2.js Thanks so much for your help, guys! I've long been a huge babylon.js fan. Both your library and your amazing, supportive community are just fantastic. All the best.
  10. Thanks for your help with this, @dbawel . But I haven't experienced your same problem with the Vive controllers. They have always connected for me in other applications, including web-based apps such as those posted at https://mozvr.com/ . They have also always connected in babylonjs apps for me when I create the scene (including the camera) from scratch. It seems to be something specific to trying to load an external .babylon file and then trying to use controllers. I wonder if I'm replacing the .babylon-file camera with the WebVR camera incorrectly... Thanks.
  11. 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!
  12. Thanks, @RaananW ! Very helpful.
  13. I realize this question is very old, but I'm interested in doing the same thing. Did you ever find a solution? Thanks!
  14. @JohnK , you had the right idea. @RaananW , I see now that visibility wasn't the right tool. I was thinking that two meshes, each with 0.5 transparency, should not let any background through when viewed aligned, since 0.5 + 0.5 = 1.0. But it makes sense that it would be multiplicative rather than additive. 0.5 * 0.5 = 0.25, so 25% of the background should go through. Perhaps the effect I was looking for is like Photoshop's "overlay" filter. Not sure... @JohnK , your solution wasn't perfect for my actual case because, unlike the playground scene I created, my actual scene involves transparent meshes. The mesh in front has a transparent region through which you can see the mesh in back. Inspired by your idea, though, I ended up sequentially fading the mesh in back completely in, and then fading the mesh in front completely out. I'd hoped to do the fading of both meshes simultaneously, but that's pretty close to what I was looking for. Thanks, guys! Great game engine, by the way!
  15. I want to seemlessly fade between two meshes with very similar materials. My thinking was that if the sum of the visibility values on each was always 1.0, there would be no transparency visible through the both of them together. But in practice that's not the case. I made this playground to illustrate: https://playground.babylonjs.com/#69K17Z#2 Note that the visibility on one of the grass planes goes down exactly as the visibility on the other plane goes up, such that the two visibilities always sum to 1.0. However, during the transition, the fire plane in the background can briefly be seen through the two grass textures. Does anyone know how to fade between two meshes without briefly revealing what's in the background? Thanks! ~Jacob