8th Wall’s latest integration is with Babylon.js, a WebGL-based graphics engine that provides top notch rendering for the web. Follow the video or the steps below to create an AR experience that runs in your mobile browser!

1. Go to 8thwall.com and log into the 8th Wall Console (or sign up for free)

2. Make sure your “Web Developer” workspace is selected.

3. At the top right of the screen, click “Device Authorization” to authorize your phone to view experiences under development. Scan the QR code with your phone, and you’ll see the message: “Developer Mode On.”

4. On the Dashboard, click “Create a new web app.” Name your web app and click “Create.”

5. Copy ? your app key from the Dashboard

6. Go to the Quickstart page. Make sure you have NPM installed and download or clone our 8th Wall Web public GitHub repo.

7. In GitHub, download the entire contents of the repo as a ZIP file. Once download is complete, click to expand the zip file.

8. Add your app key into the project. Open up a text editor, and underneath “gettingstarted” you’ll see an “xrbabylonjs” directory. Go into that and open up the index.html file. Find the following line and replace the X’s with the app key you copied earlier. Save ?

<script async src="//apps.8thwall.com/xrweb?appKey=XXXXXXXX"></script>

9. Open a terminal window if you are on a Mac, or if you’re using windows, open a standard command prompt (not PowerShell). Open the folder where the project and serve script are located. Inside you’ll see a “serve” directory. In the terminal window, type “cd” for change directory, and either type the full path to the serve/ directory, or simply drag the serve folder over and it’ll enter the path for you. Hit Enter.

[tony@TonyMBP ~/Downloads/web-master]$ cd serve/[tony@TonyMBP ~/Downloads/web-master/serve]$

10. Run “npm install” and wait for the command to complete. This will install all of the node modules required to run the serve script on our computer. Once this is done, we’ll still be in the “serve” directory.

# npm install

11. Go up one directory, back into web-master. On a Mac, type “pwd” to verify your current directory. On windows, type “cd” and hit enter to display your current directory:

[tony@TonyMBP ~/Downloads/web-master/serve]$ cd ..[tony@TonyMBP ~/Downloads/web-master]$ pwd/Users/tony/Downloads/web-master[tony@TonyMBP ~/Downloads/web-master]$

12. Run the “serve” script which sets up a local webserver on your computer. The command is slightly different if on Mac vs PC:

On a Mac:

./serve/bin/serve -n -d gettingstarted/xrbabylonjs

Hit enter to run the script. Once things have initialized, you’ll see a QR code you can scan to connect to the demo. Above the QR code you’ll also see the actual URL the QR code will take you to.

If you are on windows, make sure you are starting from the web-master directory. Type:

serve\bin\serve -n -d gettingstarted\xrbabylonjs

Hit Enter.

Scan the QR code on your screen. This will connect you to the local webserver running on your computer.

13. Grant camera permissions to see a basic Babylon JS demo. We will update this demo and load in a Flight Helmet 3D model provided by the Babylon JS team.

14. Go back to your index.html, and add a new script tag for a library that handles loading 3D models.

<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>

Close out our script tag and save your file ?

15. Edit index.js. Towards the top you’ll see an initXrScene() function which adds a few primitives to the scene; a sphere, cone, plane and box. Select all of those sections and delete. Leave the directional light and the line that sets the initial camera position.

const initXrScene = ({ scene, camera }) => {  const directionalLight = new BABYLON.DirectionalLight(     "DirectionalLight",      new BABYLON.Vector3(0, -1, 1),     scene)

  directionalLight.intensity = 1.0

  // < DELETE EVERYTHING BETWEEN THESE LINES >

  camera.position = new BABYLON.Vector3(0, 3, -5)}

16. Below, in the runRenderLoop() function, delete the box.rotation.y line or comment it out, leaving only the scene.render() call inside this function:

engine.runRenderLoop(() => {  // Render scene  scene.render()})

17. Copy ? and paste the BABYLON.SceneLoader.ImportMesh() code below (in bold) into the initXrScene() function. As a result you should have the following:

const initXrScene = ({ scene, camera }) => {  const directionalLight = new BABYLON.DirectionalLight(     "DirectionalLight",      new BABYLON.Vector3(0, -1, 1),     scene)

  directionalLight.intensity = 1.0

  BABYLON.SceneLoader.ImportMesh("",    "https://models.babylonjs.com/", "flightHelmet.glb", scene,    function (meshes) {      meshes[0].scaling = new BABYLON.Vector3(.1, .1, .1)    })

  camera.position = new BABYLON.Vector3(0, 3, -5)}

This code imports a 3D model into your scene and scales it down to 1/10th the original size.

That’s it! Save your file ? and bring your terminal or command prompt window back to the front.

Scan the QR code again, or reload the page on your browser if it’s still open. This time when the Web AR experience loads, it downloads the flight Helmet model and we can view it in AR!

Is there another integration you’d like to see 8th Wall support? Hit us up on our public Slack channel or tweet us @the8thwall.

Babylon.js + 8th Wall Integration: The Full Tutorial was originally published in 8th Wall on Medium, where people are continuing the conversation by highlighting and responding to this story.

View the full article