Image Tracking

Summary

Provide a Class externally, owned relative functional API.

Marker Tracking

Init

Resources required to initialize tracking.

Parameter	Constraint	Available value	Introduction
Track Width	Required	Int. 320, 480 or 720	Width value of tracked image data.
Track Height	Required	Int. Arbitrary value	Width value of tracked image data.
Vertical FoV	Required	Float. Suggest 40deg	Field of view of the tracking matrix.

Return value: Promise. Resolve presents Initialization successful, reject presents Initialization failed.

Set Marker

Set the identification map data to be tracked.

Parameter	Constraint	Available value	Introduction
Marker	Required	Array Buffer	Identification map data to be tracked

Return value: marker Id: Int. Identification map Id.

Remove All Marker

Remove all identification map data.

Parameter	Constraint	Available value	Introduction
Null

Return value: Null

Do Track

Track a certain camera frame.

Parameter	Constraint	Available value	Introduction
Camera Frame	Required	Array Buffer	Certain camera frame data

Return value: track Matrix: Object { tx, ty, tz, rxx, rxy, rxz, ryx, ryy, ryz, rzx, rzy, rzz, marker Id } | null.

When return to track Matrix, it presents identification map data to be tracked; when return to null, it presents identification map data not to be tracked.

Sample Code

const markerTracking = new MarkerTracking();

const trackWidth = 320;
const trackHeight = 320 / (window.innerWidth / window.innerHeight);
await markerTracking.init(trackWidth, trackHeight, 40);

const markerAb = await fetch("https://domain.com/path/to/marker.marker").then(res => res.arraybuffer());
const markerId = markerTracking.setMarker(markerAb);

function getCameraFrameArrayBuffer() {
    const frame = new ArrayBuffer(trackWidth * trackHeight * 4);

    // @TODO Acquire camera frame data by yourself

    return frame;
}

function tracking() {
    const cameraFrame = getCameraFrameArrayBuffer();
    const trackInfo = markerTracking.doTrack(cameraFrame);
    if (trackInfo) {
        const matrix = new Matrix4();
        matrix.set(
            trackInfo.rxx, trackInfo.rxy, trackInfo.rxz, trackInfo.tx,
            -trackInfo.ryx, -trackInfo.ryy, -trackInfo.ryz, trackInfo.ty,
            -trackInfo.rzx, -trackInfo.rzy, -trackInfo.rzz, trackInfo.tz,
            0.0, 0.0, 0.0, 1.0);

        if (markerId === trackInfo.markerId) {
            // @TODO
        }
    }

    requestAnimationFrame(tracking);
};

tracking();