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="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WebXR Template</title>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
<script>
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.setTarget(BABYLON.Vector3.Zero());
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 () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
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?
