I'm a sad engineer because all my VR content broke

Questions
1

When the Oculus Quest released it’s new browser version 9.0, all my babylon js VR content broke. It only supports WebXR. WebXR only works on a secure site.
I’m an engineer, not a web developer. I know enough to make pages to support my WebVR work though. For example, I’ll design a machine in Solidworks, animate it in blender and export a .gltf and write a simple .html page to show it to my customer with the Quest. It was incredibly cool and fun. I had the workflow down for a little while.

Now everything is broken. I can’t even use it on my android phone. No Rift either. Just flat screen. So sad.

I did get a new host, a new web site that is secure. I didn’t want to bother securing my old site, but rather start fresh.

I can’t seem to figure out javascript promises and all that is required.
I was using VSCode and I don’t know how to run a secure server on the local host (trying to use live server which was great for babylon js content).
I’ve looked at a lot of samples like the mansion vr scene and it is way to complex.

Is there a simple html template where I can change the name of the .gltf file to my file and bring my work back to life?

It was so incredibly amazing. I think babylon is great. Blender is amazing. Now everything is broken.
Here’s and example of what I used to do.

2

If you want to not bother with SSL stuff, I suggest to use Cloudflare as your domain DNS, it will provide you a Free SSL working out of the box.

also check if your hosting provider provides free SSL in the panel.

But if you need SSL at localhost its a bit of work but not very complex, if you are on windows I suggest to install wamp with SSL support How to Enable HTTPS / SSL on WAMP Server 3.2.0 » Zuziko

1 Like
3

We do our best to support the transition from WebVR (which was removed in almost all browsers) and WebXR which is the new standard. The VR experience helper, if not using very specific features (such as gaze support) will actually fall back to XR and will work correctly.

You know how to load a GLTF file, and you are doing it well. All you need to do when using XR is just add the call to initialize XR and Babylon will take care of the rest. You might need to provide a different camera position, but this would be the last thing you will do.

And sadly, WebXR has perquisites. HTTPS is one of them. You can’t go around it, this is something you will have to provide in order to have VR on the web.

If there is anything we can do to help, we will be happy to. We don’t like sad engineers (or people in general)

Oh, and The Babylon playground is available locally over HTTPS with a self-signed certificate. This is how I test all of the WebXR features before publishing them

2 Likes
4

Raanan,

Thank you for your response, oh great Jedi master. I appreciate your help and your work.

Do you know of any simple html pages that I can use where I can simply change the .gltf file name?

I’ve always learned from sample code. I’ve done some some advanced programming and have learned many languages, but I’ve always had a “Hello world” to start with. (Actually, I started with: 10 For X = 1 to 10 20 print X 30 goto 10 on a computer that had no display. It just printed to a 132 character printer (Circa 1970s).

If I just have a simple place to start with this. A simple project that actually works, I can add to it from there.

I’ll pay for the effort. I tried to hire someone on Upwork, but couldn’t find anyone that can do it.

I just need a place to start.

5

If someone can take that WebVR html I wrote an port it over to work with WebXR, I’d be very grateful and pay cash money for the service.

6

This community is very helpful in regards to helping you to understand all the concepts, I have learned a lot and received tremendous support from great folks here, I strongly suggest to learn by practicing how this framework is working and if you get stuck post in forums and I assure you will get the best support possible, but if you still wants to skip learning and focus on other field you can always post as a job in Service offers and requests category

I also went ahead and did a quick check on your html, It should be something like below code for webXR, for more please see docs here Introduction to WebXR - Babylon.js Documentation , and, also recently a great article was published Using WebXR With Babylon.js — Smashing Magazine , its source code is available at https://github.com/prestonso/babylon-webxr/blob/main/index.html:

here is a basic idea to get you started.

<!DOCTYPE html>
<html>

<head>
    <title>Heritage Proposal</title>
    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/ammo.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/Oimo.js"></script>
    <script src="https://preview.babylonjs.com/libktx.js"></script>
    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js?v=3"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js?v=3"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js"
        crossorigin="anonymous"></script>
    <style>
        html,
        body,
        canvas {
            width: 100%;
            height: 50%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1000;
        }

        .purtyButton {
            background-color: #ffffff;
            border: solid;
            color: blue;
            padding: 5px 5px;
            text-align: center;
            display: inline-block;
            font-size: 12px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
    <button class="purtyButton" id="makeABox">Create Box</button>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var sceneToRender;
        var createScene = async function () {
            //return at least an empty scene and default camera
            var scene = new BABYLON.Scene(engine);

            const env = scene.createDefaultEnvironment();

            var FPSCam = new BABYLON.FreeCamera("FPSCam", new BABYLON.Vector3(-0, 62, 0), scene);  //Must remove the max camera to get this to work
            FPSCam.rotation.y = 0.0;
            FPSCam.attachControl(canvas, true);

            // asyncromous call
            BABYLON.SceneLoader.Append("", "heritage.babylon", scene, function () {



                //set up materials
                var chromeMaterial = new BABYLON.StandardMaterial("chrome", scene);
                chromeMaterial.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
                chromeMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1);
                //                chromeMaterial.reflectionTexture = new BABYLON.Texture("CHROMIC.JPG", scene);
                chromeMaterial.reflectionTexture = new BABYLON.Texture("herbalifeBackgroundDark.jpg", scene);
                chromeMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;

                //iterate through the scene and assign a nice shiney material to meshes with a certain exiting material name
                for (var meshIndex = 0; meshIndex < scene.meshes.length; meshIndex++) {
                    if (scene.meshes[meshIndex].material != null) {
                        //console.log(scene.meshes[meshIndex].material.toString());
                        if (scene.meshes[meshIndex].material.toString() == "Name: Metal_Chrome") {
                            scene.meshes[meshIndex].material = chromeMaterial;
                        }
                    }
                }




            });

            const xrHelper = await scene.createDefaultXRExperienceAsync({
                    floorMeshes: [scene.meshes[3]] //CHANGE THIS TO YOUR FLOOR MESH
                });
            if (!xrHelper.baseExperience) {
                // XR support is unavailable.
                alert('WebXR support is unavailable');
            } else {
                return scene;
            }
        };

        var scene = createScene();
        scene.then(function (returnedScene) {
            sceneToRender = returnedScene;
        });





        engine.runRenderLoop(function () {
            if (sceneToRender) {
                sceneToRender.render();
            }
        });

        //resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>
2 Likes
7

Thanks so much. I think that should get me started. I am very interested in learning the concepts and don’t want to skip it to stay in my field. I have studied the framework a lot and have learned a lot. I got really lost with WebXR. Too many variables changed at once. I’m sure WebXR is going to be great once I get moving on it.

I did not know about the “Services offers and requests category”. That will be very helpful.

I have read through the WebXR documentation you linked to a while back. There are a few examples, but had limited success. Simple things like the basic sphere/teleport scene didn’t show the HMD on the bottom right to launch into VR, so it didn’t work for me at all. I checked my chrome flags and tried a few things. If I can’t see the basic sphere scene, I’m not getting far.

When I was rocking along with WebVR, I used the virtual desktop and live coded VR with the HMD on while in the scene. That was with the Vive. For some reason it isn’t as seamless with the Rift. It’s is pretty incredible though.

Thanks again.
Pat

2 Likes
8

Trust me you will have crazy fun with WebXR (<== VR version) once you get spun up with it. :slight_smile:

1 Like