mixed-reality

Tutorial: Create your first WebXR application using Babylon.js

This tutorial will show you how to create a basic Mixed Reality app using Babylon.js and Visual Studio Code. The app you’re going to build will render a cube, let you rotate it to bring the other faces into view, and add interactions. In this tutorial, you learn how to:

[!div class=”checklist”]

Set up a development environment

The Babylon.js API to create basic 3D elements

Create a new web page

Interact with 3D elements

Run the application in a Windows Mixed Reality Simulator

Prerequisites

WebXR-supported browser, for example Microsoft Edge
Babylon.js 4.2 or higher
NodeJS
Optional: Windows 10 Creator Update if you want to use a Windows Mixed Reality Simulator
Optional: Windows Mixed Reality simulator

Getting started

To create this project from scratch, start with a Visual Studio Code (VSCode) project.

[!NOTE] Using VSCode isn’t mandatory, but we’ll be using it for convenience throughout the tutorial. More experienced JavaScript developers can use any other editor of their choice, even the simplest Notepad.

Either download the Babylon.js single file or use an online version that can be found on the official Babylon.js web site. You can also clone the entire Babylon.js project from GitHub
Create an empty file and save it as html page, for example index.html

Create a basic html markup and reference the Babylon.js javascript file. The final code is as shown below:

 <html>
     <head>
         <title>Babylon.js sample code</title>
         <script src="https://cdn.babylonjs.com/babylon.js"></script>
     </head>
 <body>
 </body>
 </html>

Add a canvas HTML element inside the body to render the contents of Babylon.js. Note that the canvas has an id attribute, which lets you access this HTML element from JavaScript later on.

 <html>
     <head>
         <title>Babylon.js sample code</title>
         <script src="https://cdn.babylonjs.com/babylon.js"></script>
         <style>
             body,#renderCanvas { width: 100%; height: 100%;}
         </style>
     </head>
 <body>
     <canvas id="renderCanvas"></canvas>
 </body>
 </html>

The canvas occupies the entire web page. That completes our web page. At this point, the web page is ready. You can open it in any browser and ensure there are no errors shown, though there is no immersive experience yet.

Next steps

[!div class=”nextstepaction”] Next Tutorial: 2. Prepare a scene

This site is open source. Improve this page.