Demo Question https://playground.babylonjs.com/#TAFSN0#2

Questions
1

Hi I tried running this demo https://playground.babylonjs.com/#TAFSN0#2 on a local server with the chrome API emulator extension but see just a black full screen after clicking the ar gogles. Any idea as to why works great in Babylon playground?
Added html components to the demo

Added this to beginning

<head>

    <meta name = "viewport" content = "user-scalable=0,initial-scale"

    <title> </title>

    <script src = https://cdn.babylonjs.com/babylon.max.js> </script>

          

    <style>

        #canvas{

        width:100%;

        height:100%;

        }

    </style>

</head>

<body>

    <canvas id = "canvas"> </canvas>

    <script>

        window.addEventListener("DOMContentLoaded",function(){

            var canvas = document.getElementById("canvas");

            var engine = new BABYLON.Engine(canvas,true);

And this to end
panel.addControl(picker);

var colors = {

    seaFoam: BABYLON.Color3.FromHexString("#16a085"),

    green: BABYLON.Color3.FromHexString("#27ae60"),

    blue: BABYLON.Color3.FromHexString("#2980b9"),

    purple: BABYLON.Color3.FromHexString("#8e44ad"),

    navy: BABYLON.Color3.FromHexString("#2c3e50"),

    yellow: BABYLON.Color3.FromHexString("#f39c12"),

    orange: BABYLON.Color3.FromHexString("#d35400"),

    red: BABYLON.Color3.FromHexString("#c0392b"),

    white: BABYLON.Color3.FromHexString("#bdc3c7"),

    gray: BABYLON.Color3.FromHexString("#7f8c8d")

}



return scene;

}

var scene = createScene();

            engine.runRenderLoop(function(){

                scene.render();

            });

      

        });

    </script>

    

</body>
2

Just by extracting the playground archive, on a basic http-server it works:

image
image1917Ă—1116 261 KB

If you don’t add any code after archive extraction, is the webpage running?

4 Likes
3

@Vinc3r Thank you! what’s the best way to extract the playground archive?

4

It’s just a zip file, I think all OS can handle this. If not, I recommand 7-zip.

But if you didn’t extract the playground archive, how did you run your local server?

1 Like
5

image
image743Ă—106 13.2 KB

This button right here he means :wink:

1 Like
6

Thanks! I saved the code as an html file, added html to it and ran with Node. Looks like thats the long and dumb way :sweat_smile:

7

Lol ok I see, thanks msDestiny14 to mention this button :grinning_face_with_smiling_eyes:

8

also any way to make the demo AR instead of VR? i tried removing the enable VR and adding
// WebXR activation
var xr = await scene.createDefaultXRExperienceAsync({
uiOptions: {
sessionMode: “immersive-ar”,
},
optionalFeatures: true,
});

also made the function async but it looks weird