Open-Source Image Tracking for Jitter-Free Web AR on

npm i @tracear/sdk

or Try the Live Camera Demo — nothing to install

Point a phone at print, posters or packaging — these numbers are from a real device.

1.90 pxmedian jitter
640 px frame

2.5 msCV time per
tracked frame

~95 KBSDK gzipped
WASM included

0.1 smarker compile
512 px image

6DoFself-calibrating
pose

MITfree for
commercial use

Sub-pixel Tracking Self-calibrating Pose Live Demo Benchmarks

The engine

Detection acquires. Tracking is what makes it smooth.

Most web trackers re-detect every frame and inherit its noise. TraceAR detects once, then follows the target with sub-pixel image alignment — the difference you can see.

◈

Sub-pixel tracking

Inverse-compositional patch alignment against the compiled marker, coarse-to-fine over a half-resolution level — fast handheld motion and motion blur survive.

▣

Self-calibrating pose

Homography decomposition with LM refinement and a rotation-ambiguity prior; camera focal length is estimated online — no calibration step for your users.

≋

Motion-adaptive rendering

One-Euro filtering on SE(3) blended with raw measurements by instantaneous speed: a still scene renders frozen, a moving one stays glued with no swim.

Try it now

Ninety seconds, no install

Scan with your phone — compile a marker in the browser and watch a 3D anchor lock on.

Live demo

Generate or upload a marker image, point the camera, get a tracked 3D scene.

Open demo

Side-by-side benchmark

TraceAR and MindAR on the same camera and marker, with one identical jitter metric.

Open comparison

Benchmarks

Measured, not claimed

MindAR is the pioneering open-source web image tracker; TraceAR makes different engineering trade-offs. Same phone, same marker, identical metric — reproducible on your own device.

	TraceAR	MindAR
Median jitter (640 px frame)	1.90 px	5.47 px
p90 jitter	5.8 px	8.3 px
CV time per tracked frame	~2.5 ms	n/a (not exposed)
Marker compile (512 px)	0.1 s · 169 KB	1.4 s · 418 KB
SDK size (gzipped)	~95 KB	~370 KB (tfjs runtime)

Methodology: second-difference RMS of the marker center, so deliberate camera motion cancels out and only frame-to-frame shake counts. Run it yourself in the comparison app.

Quickstart

Tracking in twenty lines

main.ts

import { Tracear } from "@tracear/sdk";
import { TracearThree } from "@tracear/sdk/three";

const tracker = await Tracear.create({
  container: document.querySelector("#ar")!,
  targets: ["/poster.tracear"],  // npx tracear compile poster.png
});

const t3 = new TracearThree(tracker);
scene.add(t3.anchor(0));      // put your content in this group

await tracker.start();
renderer.setAnimationLoop(() => {
  t3.update();
  renderer.render(scene, t3.camera);
});