Image Tracking with Babylon.js

Babylon can be loaded from a CDN or as an ES module. If you use the CDN, pass BABYLON to the adapter.

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script type="module" src="/main.js"></script>

Setup

The camera must be a FreeCamera, positioned at (0, 0, 0) and looking at (0, 0, 1). The adapter overwrites its matrix during tracking.

import { MonolookImage } from 'monolook/image'
import { BabylonAdapter } from 'monolook/image/babylon'

const BABYLON = window.BABYLON
const engine = new BABYLON.Engine(canvas, true, { alpha: true })
const scene = new BABYLON.Scene(engine)
scene.clearColor = new BABYLON.Color4(0.2, 0.2, 0.2, 1)

const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 0, 0), scene)
camera.setTarget(new BABYLON.Vector3(0, 0, 1))
camera.minZ = 0.01
camera.maxZ = 1000

const tracker = new MonolookImage({
  licenseKey: '<IMAGE_LICENSE_KEY>'
})

await tracker.init()

const box = BABYLON.MeshBuilder.CreateBox('box', { size: 0.1 }, scene)
box.setEnabled(false)

const adapter = new BabylonAdapter({ scene, camera, engine, BABYLON })
adapter.attach(tracker)
adapter.addARContent('target', box)

Load target and start

const img = new Image()
img.crossOrigin = 'anonymous'
img.src = '/targets/marker.jpg'
await img.decode()

await tracker.addTarget('target', img)

tracker.on('found', (id) => console.log('Target found:', id))
tracker.on('lost', (id) => console.log('Target lost:', id))

await tracker.start()
adapter.setup()
adapter.startRenderLoop()

You do not need to create another engine.runRenderLoop; the adapter can manage it.

Reset

tracker.destroy()
adapter.destroy()