WebVR Camera, Loading external .babylon file, no controllers

[jdurrant]

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!

[dbawel]

I don't know which controller you're using, but if it's the Vive controllers, they have issues with connectivity - not a babylon issue. For development, I use the Moga Pro bluetooth controller as it connects 100% of the time to every device and can handle 95% of my control setups. I only develop with the Vive controllers when necessary, as I can't handle interruptions during development.

DB

[jdurrant]

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.

[GameMonetize]

Hello!

can you try this PG to see if it works?

http://playground.babylonjs.com/#E0WY4U#1

 

(Interesting read for you: https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-webvr-experiences-with-babylon-js-on-all-platforms/)

[jdurrant]

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.

[GameMonetize]

Can you just make sure to reference the gltf loader? (Is there any error on the console?)

Did you allow .gltf / .glb mime types?

[jdurrant]

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.