Viewer HTML with WebVR camera

Questions
1

It’s possibile config HTML Viewer with WebVR enable?

2

No idea what Web Viewer is, but you can’t display HTML while in an XR session. DOM Overlay works in AR sessions, if it helps.

3

No AR, but VR. HTML Viewer is https://doc.babylonjs.com/features/featuresDeepDive/babylonViewer/configuringViewer

4

got it. The babylon viewer doesn’t natively support WebXR. this work still needs to be done. o display a simple model you can use the fallback (which in turn will use WebXR but will not provide all of the edoms that come along with it).
To enable VR on your scene you will need to enable it in your configuration - navBar.params.hide-vr should be set to false.

5

I config navBar.params.hide-vr=“false” but I don’t see any icon to switch on VR mode.

6

want to show me the code you are using?

7

Sorry think I paste it to answer:

<babylon extends="minimal" model="http://localhost:8080/wp-content/uploads/2023/03/marino.glb" navBar.params.hide-vr="false"></babylon>
8

should probably be nav-bar

9

Not working.

Where is it possible to get the correct values for the configuration? I saw that from the json they are different https://github.com/BabylonJS/Babylon.js/blob/master/packages/tools/viewer/src/configuration/types/default.ts

10

A few things - first, you are using the minimal configuration, which doesn’t have all of the nav bar configured. Second - the values are in camel case in the JSON and kebab case in HTML.

If you want to share code that I can play with as well, I will be happy to help.

This is a VR-enabled demo: Babylon.js/basicExample.html at master · BabylonJS/Babylon.js · GitHub

1 Like
11

I will prepare code for share. Now I’m working on localhost.

I will answer with the link

Thank you!

1 Like
12

Test here https://jsfiddle.net/Maverick83/3nr7j56g/2/
It’s your html base with my 3D Object, but when I click on VR icon, nothing happening.
I like to remove animation control bar.

Thanks.

13 
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>BabylonJS Viewer - Basic usage</title>
        <style>
            babylon {
                width: 100%;
                height: 100%;
            }
            babylon div.logo-button {display:none}
        </style>
    </head>

    <body>
        <babylon id="babylon-viewer" model="https://mcengineering.eu/vrtest/marino.glb">
          <vr>
          </vr>
            <templates>
                <nav-bar>
                    <params hide-vr="false" hide-animations="true" logo-image="" logo-text="" logo-link="#"></params>
                </nav-bar>
            </templates>
        </babylon>
    </body>
</html>

Note that the security policy in jsfiddle prevents xr to run, so you should try this locally. Also - be sure you are using a secure site (https) other xr will not be working.

14

Now it’s working https://mcengineering.eu/vrtest/_test.html, but on VR it’s not possible to move like other my test with javascript configuration
https://mcengineering.eu/vrtest/_index.html

15

WebXR requires a headset. If WebXR is enabled it will be constructed per default. Device Orientation camera (and the VR version of it) is deprecated. What headset are you using? can you see the xr content?

16

I use Windows portal simulator and I see xr content, but I can’t “walk”; only rotate camera with sx pad

17

you should be able to teleport with the thumbstick (even the emulated). point at the floor and push the thumbstick forward. Otherwise, you should be able to move in the emulator and it should be reflected in the XR scene. walking with the arrows should work. It might be a little slow (because of the emulator), but it must be working, because of the default XR behaviors.

Are you saying that moving inside the portal doesn’t reflect in the XR scene? What browser are you using?

18

With this https://mcengineering.eu/vrtest/_index.html I can do anything

With this https://mcengineering.eu/vrtest/_test.html I can’t, with VR, move with teleport or move with joystick

19

The WebXR support in the viewer is still using the old WebVR experience helper, which was deprecated. This is why it is a little harder to define the floor mesh to enable teleportation. You can move (using WASD) inside the scene, as you would move in the real world. However, there might be issues with the floor height (because it might not be set correctly) and certain features like the pointer selection or teleportation. The deprecated VR experience helper is using XR, if it is available, but doesn’t let you fully configure your experience.

I will be happy to work on that - adding XR support to the viewer. This will probably only be done after we release 6.0 in 3 weeks.

1 Like
20

Thanks for your support and your time. All clear.

1 Like