Usage

• Babylon.js
• Getting Started
• Universal AR

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