A vr glasses problem

https://playground.babylonjs.com/#SQ5UC1#283

when I use my vr glasses(
image
)
It can run normally in plane mode, but when I enter to VR mode, it can not run normally, it’s dark all around.

Adding @RaananW the master of XR

I don’t think PICO browser have webxr support.

The pico 3 has firefox reality installed, if I remember correctly.

Firefox reality does support WebXR, but is not being developed further and is not fully compliant with the WebXR specs. You should also try using WebXR and not WebVR, as WebVR is deprecated and is probably not supported on your device.

Try any of the WebXR demos on the doc page, or even search for “webxr” in the playground examples when on your pico. Do those work? Is something not working correctly?

Yes, I opened the page with the firefox reality app!
I tried some pages in the pico glasses:
WebXR Demos and Examples | Babylon.js Documentation : demos of this page can not show when I clicked the glasses icon. just have nothing around with dark gray color.

https://playground.babylonjs.com/#TAFSN0#230 : this demo can show normal in vr mode.

What version of firefox reality is installed on your device?

This demo is a webvr demo, which is an API that was deprecated in (and removed from) most browsers almost a year ago.

Can you debug the scene? see why it fails? can you check if navigator.xr is present?

Firefox Reality 12.2
2020.12.15

I just run a simple script: alert(window.navigator.xr);
It alert: [object XRSystem]

that means XR is present, but this is a very old version of the API (if it was built almost a year ago).

it’s very hard to debug without having a device. do you have access to the console? are there any errors that are shown when you try opening a simple XR scene?

Also - can you check if there is an xr flag somewhere in about:config? is it enabled?

I input about:config in the url, it does not work!

I’m not very familiar with the debugging inside the device,
Tomorrow I will ask my colleagues, and then I will reply to you, they are all off work today.
Thanks!

1 Like

Babylon.js v5.0.0-alpha.61 - WebGL2

The pic is not clear, so I typed the main error msg:

TypeError:can‘t access property 'finalPointerUpTriggered',t_controllers[e] is undefined
/vr/babylon-framework/babylon.js:16:2390742 fl</t.prototype._detachController/<@https://domain/babylon.js:16:2390742
a</e.prototype.notifyObservers@https://domain/babylon.js:16:17799
U<t.prototype.render@https://domain/babylon.js:16:274871
init/<@https://domain/demo:129:17
f</t.prototype._renderFrame@https://domain/babylon.js:16:141510
f</t.prototype._renderLoop@htts://domain/babylon.js:16:141696
Mi</e.prototype.initializeSessionAsync/</@https://domain/babylon.js:16:1467411

the main script

<script>
      const init = async () => {
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        var createScene = async function () {
          // This creates a basic Babylon Scene object (non-mesh)
          var scene = new BABYLON.Scene(engine);

          // This creates and positions a free camera (non-mesh)
          var camera = new BABYLON.FreeCamera(
            "camera1",
            new BABYLON.Vector3(0, 5, -10),
            scene,
          );

          // This targets the camera to scene origin
          camera.setTarget(BABYLON.Vector3.Zero());

          // This attaches the camera to the canvas
          camera.attachControl(canvas, true);

          // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
          var light = new BABYLON.HemisphericLight(
            "light",
            new BABYLON.Vector3(0, 1, 0),
            scene,
          );

          // Default intensity is 1. Let's dim the light a small amount
          light.intensity = 0.7;

          // Our built-in 'sphere' shape.
          var sphere = BABYLON.MeshBuilder.CreateSphere(
            "sphere",
            { diameter: 2, segments: 32 },
            scene,
          );

          // Move the sphere upward 1/2 its height
          sphere.position.y = 1;

          scene.createDefaultEnvironment();

          // XR
          const xrHelper = await scene.createDefaultXRExperienceAsync();

          return scene;
        };

        const scene = await createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
          scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
          engine.resize();
        });
      };

      init();
    </script>

I use the vConsole in the page: https://github.com/Tencent/vConsole

    <!-- Dependencies -->
    <script src="../../babylon-framework/ammo.js"></script>
    <script src="../../babylon-framework/recast.js"></script>
    <script src="../../babylon-framework/cannon.js"></script>
    <script src="../../babylon-framework/Oimo.js"></script>
    <script src="../../babylon-framework/earcut.min.js"></script>

    <!-- Babylon.js -->
    <script src="../../babylon-framework/babylon.js"></script>
    <script src="../../babylon-framework/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="../../babylon-framework/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="../../babylon-framework/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="../../babylon-framework/loaders/babylonjs.loaders.min.js"></script>
    <script src="../../babylon-framework/serializers/babylonjs.serializers.min.js"></script>
    <script src="../../babylon-framework/gui/babylon.gui.min.js"></script>
    <script src="../../babylon-framework/inspector/babylon.inspector.bundle.js"></script>
    <script src="../../babylon-framework/nodeEditor/babylon.nodeEditor.js"></script>
    <script src="../../babylon-framework/guiEditor/babylon.guiEditor.js"></script>

The scripts I use is the same as babylonjs playground which I cloned from github store under the dist/preview release folder

https://www.babylonjs.com/demos/glowingespilit/
this demo works fine when vr mode.

aha, I know how to shot the vr screen, there is a relative clear screenshot pic:

Oh! that looks like a bug that was recently introduced (by me…). Let me fix that. Can you try an earlier babylon alpha version? something like alpha.50? just to see if it’s a regression.

1 Like
<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/5.0.0-alpha.50/babylon.js"></script>

Yes, I replaced with this cdn file, then it works fine!

Then I changed the createScene code to the code of https://playground.babylonjs.com/#SQ5UC1#283
the videoDome works fine too!

I have fixed it yesterday and the fix was merged. The next npm release (alpha.62) will contain the fix.

Thanks for reporting the bug!

3 Likes


I use the latest preview version, but the error still exist.