3d glasses / cardboard support in augmented reality

The icon to enable AR in a babylon scene represent glasses…


but how do I enable “glasses mode”, i.e. double image, one per eye?


A simple Google Cardboard “device” would be enough to use this mode:

If such mode is not available, how can I force rendering of same scene two times from different points of view?

I believe this and the next sections may help - MultiViews Part 1 | Babylon.js Documentation

1 Like

Thanks, it works fine, but there are no cluse about how to move around without using the keyboard or a controller. How do I teleport to a point upon tapping the screen?

one of the downsides of cardboard is no controller. there is a button click notch that may or may not work for some people depending on the device - for teleporting with those kinds of devices you can consider a “gaze” - prolonged viewing in same spot to trigger an action.

I know, my cardboard has the button, but how do I implement “teleport by screen tapping” in babylon?.

There is another thing more “urgent” than moving: exiting! Once I click the VR mode, there’s no way I can’t get back to code while debugging on PC!

On PC - don’t you just press the “esc” key?

Also, for screen tapping to teleport that’s not supported automatically - I don’t follow why you want to support screen touching for Cardboard. You could just use a touch event with scene pick and move your camera ( Babylon.js/packages/dev/core/src/XR/features/WebXRControllerTeleportation.ts at master · BabylonJS/Babylon.js (github.com)).

On PC nothing works to go back to the code , after I click the glasses button.

I am not able to write my XR code starting from babylon code or from documentation, it’s too complex, there are too many variants, everything is so confusing… I’d need a simple playground with just the ground, where I can walk around.

I found the solution for exiting and going back to code:

This is what I am currently experimenting with to implement teleporting, without any luck:

But also in this example I don’t understand how I can teleport:

Teleportation is enabled, the mesh “Allee” exists… but how do I teleport?!?

Chatgpt says that Babylon does not support cardboard teleporting (i.e. withouth controller), so I had to implement cardboard teleport from scratch:

Hill valley version:

Unfortunately it works on PC but not on phone, where I cannot debug…

lets add @RaananW to the thread to see if we still have the good old cardboard camera :slight_smile:

Got it working:

In the emulator, teleport does not work for cardboard, only for Oculus (using controllers lasers)
On real device, teleport does work for cardboard (using gaze)… and I do not own an Oculus. :slight_smile:

Now I need to understand how to set the “timeout until gaze clicks the virtual button”.

1 Like

Ok, there are two timeouts:

  • how long it takes for first, gray torus to shrink to a point, which triggers the second torus (?!?); I can’t find how to tune this;

  • how long it takes from appearance of second torus to actual teleport: this is the only one configurable:

    var experience = await scene.createDefaultXRExperienceAsync({
        // define the floor meshes
        floorMeshes: [ground]

    experience.teleportation = experience.baseExperience.featuresManager.enableFeature(BABYLON.WebXRFeatureName.TELEPORTATION, 'latest' /* or latest */, {
        xrInput: experience.input,
        laserToggle: true,
        timeToTeleport: 500, // milliseconds
        floorMeshes: [ground],
        defaultTargetMeshOptions: {
            teleportationFillColor: '#55FF99',
            teleportationBorderColor: 'red'
        useMainComponentOnly: true

Now I can have a walk around Hill Valley with my cardboard: :slight_smile:

https://www.babylonjs-playground.com/#ZXG4RP#44 (Teleport working only on mobile)


If there is anything missing from the configuration, I will be happy to add it! Can you explain the use case so I will know what is missing?

Could you plesse be more specific about the information you need? I talked about 10 different topic in this thread… :grimacing:

I guess my question is - what is not working, and what is missing in order to get that to work.

I am mostly referring to your last message, where it seems like you got it to work, but have two comments regarding timeouts:

Is this the current issue with the implementation?

Ah yes, I can’t find a parameter to set the time from when the gaze stops to when the teleport mesh is displayed.

Additionally, I just found another problem: if I look to a far point, it’s so difficult to keep the pointer static enough to trigger the shrinking, that I have to hold my breath and hold my head with hands! Not very comfortable :sweat_smile:, maybe a movement tolerance threshold, possibly variable with distance, could help the user.

I also found a “compass plugin” somewhere (can’t find the link right now) which made me think it could be a standard (but optional) implementation in Babylon VR/AR environment.

Both of those are configurable, but in a different module. The PointerSelection module, which is in charge of processing the input from controllers and headset:

IWebXRControllerPointerSelectionOptions | Babylon.js Documentation (babylonjs.com)


IWebXRControllerPointerSelectionOptions | Babylon.js Documentation (babylonjs.com)

can be configured to achieve both points.

Should be noted that the gazeModePointerMovedFactor is in CM. You could argue it should be based on distance from the camera as well, which would make me say you are probably right. Can be added as a future issue to tackle.