Babylon.js

Our Babylon.js library allows you to use Zappar's best-in-class AR technology with content built using the Babylon.js 3D rendering platform.

Installation

You can use this library by downloading a standalone zip containing the necessary files or by installing from NPM for use in a webpack project.

You can find the respective download links and installation instructions here.

Standalone Download

Unzip into your web project and reference from your HTML like this:

<script src="zappar-babylon.js"></script>

CDN

Reference the zappar.js library from your HTML like this:

<script src="https://libs.zappar.com/zappar-babylon/*/zappar-babylon.js"></script>

* Version number can be found on the Downloads and SDKs page.

NPM Webpack Package

Run the following NPM command inside your project directory:

npm install --save @zappar/zappar-babylonjs

Then import the library into your JavaScript or TypeScript files:

import * as ZapparBabylon from "@zappar/zappar-babylonjs";

The final step is to add this necessary entry to your webpack rules:

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /zcv\.wasm$/,
        type: "javascript/auto",
        loader: "file-loader"
      }
      //...
    ]
  }
};

Overview

You can integrate the Zappar library with the existing runRenderLoop loop of your Babylon.js project. A typical project may look like this. The remainder of this document goes into more detail about each of the component elements of this example.

import * as BABYLON from 'babylonjs';
// Import path to the target file ( Made using @zappar/zapworks-cli )
import targetfile from './assets/example-tracking-image.zpt';
import * as ZapparBabylon from '@zappar/zappar-babylonjs';

// Setup Babylon.js in the usual way.
const canvasHolder = document.querySelector('#canvas-holder') || document.createElement('div');
const canvas = document.createElement('canvas');
canvasHolder.appendChild(canvas);

const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
const scene = new BABYLON.Scene(engine);
const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);

// Create a Zappar AR camera
const camera = new ZapparBabylon.Camera('camera', scene);

// Request camera permissions and start the camera
ZapparBabylon.permissionRequestUI().then((granted) => {
    if (granted) camera.start();
    else ZapparBabylon.permissionDeniedUI();
});

// Set up a tracker, in this case an image tracker
const imageTracker = new ZapparBabylon.ImageTrackerLoader().load(targetfile);
const trackerTransformNode = new ZapparBabylon.ImageAnchorTransformNode('tracker', camera, imageTracker, scene);

// Child any 3D content you'd like tracked from the image into the trackerTransformNode
const box = BABYLON.Mesh.CreateBox('box', 1, scene, false);
box.parent = trackerTransformNode;



engine.runRenderLoop(() => {
  camera.updateFrame();
  scene.render();
});

Local Preview and Testing

Due to browser restrictions surrounding use of the camera, you must use HTTPS to view or preview your site, even if doing so locally from your computer. If you're using webpack, consider using webpack-dev-server which has an https option to enable this.

Alternatively you can use the ZapWorks command-line tool to serve a folder over HTTPS for access on your local computer, like this:

$ zapworks serve .

The command also lets you serve the folder for access by other devices on your local network, like this:

$ zapworks serve . --lan