monolook

monolook

Web AR SDK for surface tracking and image tracking. Runs in the browser via WebAssembly and WebXR — no native app required.

Full documentation: docs.monolook.dev

---

Products

Product	What it does	Import
Monolook World	Detects flat surfaces and anchors 3D content to them (WebXR on Android, ARKit bridge on iOS)	monolook/world
Monolook Image	Detects an image target and anchors 3D content to it (proprietary WASM engine)	monolook/image

Both products require a separate license key. A World key does not work for Image and vice versa.

---

License required

This SDK requires a valid license key to function. Without one, initialization will fail.

To get access: hello@nowarlab.com

---

Installation

npm install monolook

Install the 3D engine you need as a peer dependency:

npm install three           # Three.js
npm install @babylonjs/core # Babylon.js
# A-Frame loads via CDN, no npm install needed

---

Quick start — Image tracking (Three.js)

import * as THREE from 'three';
import { MonolookImage } from 'monolook/image';
import { ThreeAdapter } from 'monolook/image/three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, innerWidth / innerHeight, 0.01, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(0.1, 0.1, 0.1),
  new THREE.MeshStandardMaterial({ color: 0x2563eb }),
);

const tracker = new MonolookImage({ licenseKey: 'YOUR_LICENSE_KEY' });
await tracker.init();

const adapter = new ThreeAdapter({ scene, camera, renderer });
adapter.attach(tracker);
adapter.addARContent('target', cube);

const img = new Image();
img.src = '/your-target-image.jpg';
await img.decode();
await tracker.addTarget('target', img);

tracker.on('found', () => console.log('Target found'));
tracker.on('lost',  () => console.log('Target lost'));
tracker.on('frame', () => renderer.render(scene, camera));

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

Vite users: add optimizeDeps: { exclude: ['monolook'] } to vite.config.js so the WASM module resolves correctly in dev.

---

Quick start — World / surface tracking (Three.js)

import * as THREE from 'three';
import { Monolook } from 'monolook/world';

const scene    = new THREE.Scene();
const camera   = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 100);
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });

const monolook = new Monolook({ adapter: 'three', THREE, scene, camera, renderer });

monolook.on('surfacefound', () => console.log('Surface found — tap to place'));
monolook.on('select', () => {
  const pose = monolook.getIndicatorPose();
  if (pose?.visible) myObject.position.copy(pose.position);
});

await monolook.start({ mode: 'surface', licenseKey: 'YOUR_LICENSE_KEY' });
monolook.startTracking();
monolook.setRenderLoop(() => {
  monolook.updateTracking();
  renderer.render(scene, camera);
});
await monolook.enterAR();

---

Package exports

// World
import { Monolook }       from 'monolook/world';
import { ThreeAdapter }   from 'monolook/world/three';
import { AFrameAdapter }  from 'monolook/world/aframe';
import { BabylonAdapter } from 'monolook/world/babylon';

// Image
import { MonolookImage }  from 'monolook/image';
import { ThreeAdapter }   from 'monolook/image/three';
import { AFrameAdapter }  from 'monolook/image/aframe';
import { BabylonAdapter } from 'monolook/image/babylon';

---

Platforms

Platform	World	Image
Android (Chrome)	WebXR
iOS (Monolook App / AppClip)	ARKit bridge
Desktop	Preview only
XR headsets	Coming soon	—

---

Documentation

Full guides, API reference, and integration examples for Three.js, A-Frame, and Babylon.js:

docs.monolook.dev

---

License

UNLICENSED — commercial software. All rights reserved. Contact us for licensing.