HTML Template for WebXR scene | Error running outside of Playground

In the Intro to WebXR (Introduction to WebXR - Babylon.js Documentation) this simple template is provided for creating a default XR Experience in the playground: Babylon.js Playground

Problem is, this template does not work outside of the playground. If you set up your own HTML, the scene won’t render. Here is an example (style tags omitted):

<!DOCTYPE html>
<html xmlns="">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>WebXR Template</title>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
    var canvas = document.getElementById("renderCanvas"); // Get the canvas element
    var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
    var createScene = async function () {
        var scene = new BABYLON.Scene(engine);
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
        camera.attachControl(canvas, true);
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        light.intensity = 0.7;
        var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
        sphere.position.y = 1;
        const env = scene.createDefaultEnvironment();
        const xr = await scene.createDefaultXRExperienceAsync({
            floorMeshes: [env.ground]
        return scene;
    var scene = createScene(); //Call the createScene functi
     // Register a render loop to repeatedly render the scene
     engine.runRenderLoop(function () {
     // Watch for browser/canvas resize events
     window.addEventListener("resize", function () {

If you try to run that, you get the error “scene.render is not a function.” I understand that this has something to do with Async Function and Promises, but I don’t understand enough about that area to solve the issue.

So what would a simple HTML template for webXR look like? Maybe the solution can be added to the Introduction to WebXR page in the docs?

Yeah I see the problem. the createScene is not awaited

Pinging @RaananW

Pretty sure this was fixed already. When downloading from the playground, this is the scene creation template I am getting:


@pmaxwellward - the code is visible and can be used directly in the playground. This is our way of sharing code. Having said that - the download function should be working correctly. What exactly did you do to get this file? can you share the link you used to download this?

I hand coded the HTML for this scene. I did not use the download feature in the playground, but will start doing that. I copied the HTML template from this page: First Steps - Babylon.js Documentation

Thank you for your feedback