@zappar/zappar-cv 2.0.0-beta.3 → 2.0.0-beta.7

package/README.md

@@ -18,8 +18,8 @@ npm i @zappar/zappar-cv
 
 You can use our CDN from within your HTML:
 ```
-<script src="https://libs.zappar.com/zappar-cv/2.0.0-beta.3/zappar-cv.js"></script>
+<script src="https://libs.zappar.com/zappar-cv/2.0.0-beta.7/zappar-cv.js"></script>
 ```
 
 Or you can download and host our standalone JavaScript bundle:
-[https://libs.zappar.com/zappar-cv/2.0.0-beta.3/zappar-cv.zip](https://libs.zappar.com/zappar-cv/2.0.0-beta.3/zappar-cv.zip)
+[https://libs.zappar.com/zappar-cv/2.0.0-beta.7/zappar-cv.zip](https://libs.zappar.com/zappar-cv/2.0.0-beta.7/zappar-cv.zip)

package/lib/additional.d.ts

@@ -6,6 +6,7 @@ export interface Additional {
     pipeline_gl_context_set(pipeline: zappar_pipeline_t, gl: WebGLRenderingContext, texturePool?: WebGLTexture[]): void;
     pipeline_gl_context_lost(pipeline: zappar_pipeline_t): void;
     pipeline_draw_face(pipeline: zappar_pipeline_t, projectionMatrix: Float32Array, cameraMatrix: Float32Array, targetMatrix: Float32Array, o: zappar_face_mesh_t): void;
+    pipeline_draw_image_target_preview(pipeline: zappar_pipeline_t, projectionMatrix: Float32Array, cameraMatrix: Float32Array, targetMatrix: Float32Array, o: zappar_image_tracker_t, indx: number): void;
     pipeline_draw_face_project(pipeline: zappar_pipeline_t, drawwMatrix: Float32Array, vertices: Float32Array, uvMatrix: Float32Array, uvs: Float32Array, indices: Uint16Array, texture: WebGLTexture): void;
     draw_plane(gl: WebGLRenderingContext, projectionMatrix: Float32Array, cameraMatrix: Float32Array, targetMatrix: Float32Array, texture: string): void;
     image_tracker_target_image(o: zappar_image_tracker_t, indx: number): HTMLImageElement | undefined;

package/lib/drawplane.js

@@ -63,6 +63,7 @@ export function drawPlane(gl, projectionMatrix, cameraMatrix, targetMatrix, text
     gl.enableVertexAttribArray(shader.attr_textureCoord);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     gl.disableVertexAttribArray(shader.attr_position);
+    gl.disableVertexAttribArray(shader.attr_textureCoord);
     gl.bindBuffer(gl.ARRAY_BUFFER, null);
 }
 function generateLocalMatrix() {

package/lib/drawpreviewmesh.d.ts

@@ -0,0 +1,16 @@
+import { ImageTracker } from "./imagetracker";
+export declare class PreviewMeshDraw {
+    private _gl;
+    private _vbo;
+    private _uvbo;
+    private _ibo;
+    private _lastIndices;
+    private _shader;
+    constructor(_gl: WebGLRenderingContext);
+    dispose(): void;
+    private _generateIBO;
+    private _generateVBO;
+    private _generateUVBO;
+    draw(matrix: Float32Array, tracker: ImageTracker, indx: number): void;
+    private _getShader;
+}

package/lib/drawpreviewmesh.js

@@ -0,0 +1,186 @@
+import { compileShader, linkProgram } from "./shader";
+export class PreviewMeshDraw {
+    constructor(_gl) {
+        this._gl = _gl;
+    }
+    dispose() {
+        if (this._vbo)
+            this._gl.deleteBuffer(this._vbo);
+        if (this._uvbo)
+            this._gl.deleteBuffer(this._uvbo);
+        if (this._ibo)
+            this._gl.deleteBuffer(this._ibo);
+        if (this._shader)
+            this._gl.deleteProgram(this._shader.prog);
+        this._vbo = undefined;
+        this._uvbo = undefined;
+        this._ibo = undefined;
+        this._shader = undefined;
+    }
+    _generateIBO(indices, gl) {
+        if (this._ibo && this._lastIndices === indices)
+            return this._ibo;
+        this._lastIndices = indices;
+        if (!this._ibo)
+            this._ibo = gl.createBuffer();
+        if (!this._ibo)
+            throw new Error("Unable to create buffer object");
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._ibo);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        return this._ibo;
+    }
+    _generateVBO(face, gl) {
+        if (!this._vbo)
+            this._vbo = gl.createBuffer();
+        if (!this._vbo)
+            throw new Error("Unable to create buffer object");
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._vbo);
+        gl.bufferData(gl.ARRAY_BUFFER, face, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return this._vbo;
+    }
+    _generateUVBO(face, gl) {
+        if (!this._uvbo)
+            this._uvbo = gl.createBuffer();
+        if (!this._uvbo)
+            throw new Error("Unable to create buffer object");
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._uvbo);
+        gl.bufferData(gl.ARRAY_BUFFER, face, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return this._uvbo;
+    }
+    draw(matrix, tracker, indx) {
+        var _a;
+        const o = tracker.getPreviewMesh(indx);
+        const image = (_a = tracker.getTargetInfo(indx).preview) === null || _a === void 0 ? void 0 : _a.image;
+        if (!o || !image)
+            return;
+        if (!image.complete)
+            return;
+        let gl = this._gl;
+        let shader = this._getShader(gl);
+        let v = this._generateVBO(o.vertices, gl);
+        let n = this._generateUVBO(o.uvs, gl);
+        let i = this._generateIBO(o.indices, gl);
+        gl.enable(gl.DEPTH_TEST);
+        gl.enable(gl.CULL_FACE);
+        gl.useProgram(shader.prog);
+        gl.uniformMatrix4fv(shader.unif_matrix, false, matrix);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, loadTexture(gl, image));
+        gl.uniform1i(shader.unif_skinSampler, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, v);
+        gl.vertexAttribPointer(shader.attr_position, 3, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(shader.attr_position);
+        gl.bindBuffer(gl.ARRAY_BUFFER, n);
+        gl.vertexAttribPointer(shader.attr_textureCoord, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(shader.attr_textureCoord);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, i);
+        gl.drawElements(gl.TRIANGLES, o.indices.length, gl.UNSIGNED_SHORT, 0);
+        gl.disableVertexAttribArray(shader.attr_position);
+        gl.disableVertexAttribArray(shader.attr_textureCoord);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    }
+    _getShader(gl) {
+        if (this._shader)
+            return this._shader;
+        let prog = gl.createProgram();
+        if (!prog)
+            throw new Error("Unable to create program");
+        let vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSrc);
+        let fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSrc);
+        gl.attachShader(prog, vertexShader);
+        gl.attachShader(prog, fragmentShader);
+        linkProgram(gl, prog);
+        let unif_matrix = gl.getUniformLocation(prog, "matrix");
+        if (!unif_matrix)
+            throw new Error("Unable to get uniform location mattrix");
+        let unif_skinSampler = gl.getUniformLocation(prog, "skinSampler");
+        if (!unif_skinSampler)
+            throw new Error("Unable to get uniform location skinSampler");
+        this._shader = {
+            prog,
+            unif_matrix,
+            unif_skinSampler,
+            attr_position: gl.getAttribLocation(prog, "position"),
+            attr_textureCoord: gl.getAttribLocation(prog, "textureCoord")
+        };
+        return this._shader;
+    }
+}
+const texturesByElement = new Map();
+function loadTexture(gl, elm) {
+    let existing = texturesByElement.get(elm);
+    if (existing)
+        return existing;
+    existing = gl.createTexture() || undefined;
+    if (!existing)
+        throw new Error("Unable to create texture");
+    texturesByElement.set(elm, existing);
+    gl.bindTexture(gl.TEXTURE_2D, existing);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    // Because images have to be download over the internet
+    // they might take a moment until they are ready.
+    // Until then put a single pixel in the texture so we can
+    // use it immediately. When the image has finished downloading
+    // we'll update the texture with the contents of the image.
+    const level = 0;
+    const internalFormat = gl.RGBA;
+    const srcFormat = gl.RGBA;
+    const srcType = gl.UNSIGNED_BYTE;
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, elm);
+    elm.addEventListener("load", () => {
+        if (!existing)
+            return;
+        gl.bindTexture(gl.TEXTURE_2D, existing);
+        const level = 0;
+        const internalFormat = gl.RGBA;
+        const srcFormat = gl.RGBA;
+        const srcType = gl.UNSIGNED_BYTE;
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, elm);
+    });
+    return existing;
+}
+let vertexShaderSrc = `
+#ifndef GL_ES
+#define highp
+#define mediump
+#define lowp
+#endif
+
+uniform mat4 matrix;
+attribute vec4 position;
+attribute vec2 textureCoord;
+
+varying highp vec2 vTextureCoord;
+
+void main()
+{
+    gl_Position = matrix * position;
+    vTextureCoord = textureCoord;
+}`;
+let fragmentShaderSrc = `
+#define highp mediump
+#ifdef GL_ES
+    // define default precision for float, vec, mat.
+    precision highp float;
+#else
+#define highp
+#define mediump
+#define lowp
+#endif
+
+varying highp vec2 vTextureCoord;
+uniform sampler2D skinSampler;
+
+void main()
+{
+    gl_FragColor = texture2D(skinSampler, vTextureCoord);
+}`;

package/lib/gen/zappar-native.d.ts

@@ -56,6 +56,11 @@ export declare enum frame_pixel_format_t {
     FRAME_PIXEL_FORMAT_BGRA = 6,
     FRAME_PIXEL_FORMAT_Y = 7
 }
+export declare enum image_target_type_t {
+    IMAGE_TRACKER_TYPE_PLANAR = 0,
+    IMAGE_TRACKER_TYPE_CYLINDRICAL = 1,
+    IMAGE_TRACKER_TYPE_CONICAL = 2
+}
 export declare type zappar_pipeline_t = number & {
     _: 'zappar_pipeline_t';
 };

package/lib/gen/zappar-native.js

@@ -66,3 +66,10 @@ export var frame_pixel_format_t;
     frame_pixel_format_t[frame_pixel_format_t["FRAME_PIXEL_FORMAT_Y"] = 7] = "FRAME_PIXEL_FORMAT_Y";
 })(frame_pixel_format_t || (frame_pixel_format_t = {}));
 ;
+export var image_target_type_t;
+(function (image_target_type_t) {
+    image_target_type_t[image_target_type_t["IMAGE_TRACKER_TYPE_PLANAR"] = 0] = "IMAGE_TRACKER_TYPE_PLANAR";
+    image_target_type_t[image_target_type_t["IMAGE_TRACKER_TYPE_CYLINDRICAL"] = 1] = "IMAGE_TRACKER_TYPE_CYLINDRICAL";
+    image_target_type_t[image_target_type_t["IMAGE_TRACKER_TYPE_CONICAL"] = 2] = "IMAGE_TRACKER_TYPE_CONICAL";
+})(image_target_type_t || (image_target_type_t = {}));
+;

package/lib/gen/zappar.d.ts

@@ -7,6 +7,8 @@ import { instant_world_tracker_transform_orientation_t } from "./zappar-native";
 export { instant_world_tracker_transform_orientation_t } from "./zappar-native";
 import { log_level_t } from "./zappar-native";
 export { log_level_t } from "./zappar-native";
+import { image_target_type_t } from "./zappar-native";
+export { image_target_type_t } from "./zappar-native";
 export declare type zappar_pipeline_t = number & {
     _: 'zappar_pipeline_t';
 };
@@ -37,6 +39,10 @@ export declare type zappar_instant_world_tracker_t = number & {
 export interface zappar {
     loaded(): boolean;
     camera_default_device_id(userFacing: boolean): string;
+    camera_count(): number;
+    camera_id(indx: number): string;
+    camera_name(indx: number): string;
+    camera_user_facing(indx: number): boolean;
     projection_matrix_from_camera_model(model: Float32Array, renderWidth: number, renderHeight: number): Float32Array;
     projection_matrix_from_camera_model_ext(model: Float32Array, renderWidth: number, renderHeight: number, zNear: number, zFar: number): Float32Array;
     log_level(): log_level_t;
@@ -95,6 +101,7 @@ export interface zappar {
     image_tracker_target_load_from_memory(o: zappar_image_tracker_t, data: ArrayBuffer): void;
     image_tracker_target_loaded_version(o: zappar_image_tracker_t): number;
     image_tracker_target_count(o: zappar_image_tracker_t): number;
+    image_tracker_target_type(o: zappar_image_tracker_t, indx: number): image_target_type_t;
     image_tracker_target_radius_top(o: zappar_image_tracker_t, indx: number): number;
     image_tracker_target_radius_bottom(o: zappar_image_tracker_t, indx: number): number;
     image_tracker_target_side_length(o: zappar_image_tracker_t, indx: number): number;
@@ -102,6 +109,14 @@ export interface zappar {
     image_tracker_target_preview_compressed(o: zappar_image_tracker_t, indx: number): Uint8Array;
     image_tracker_target_preview_compressed_size(o: zappar_image_tracker_t, indx: number): number;
     image_tracker_target_preview_compressed_mimetype(o: zappar_image_tracker_t, indx: number): string;
+    image_tracker_target_preview_mesh_indices(o: zappar_image_tracker_t, indx: number): Uint16Array;
+    image_tracker_target_preview_mesh_indices_size(o: zappar_image_tracker_t, indx: number): number;
+    image_tracker_target_preview_mesh_vertices(o: zappar_image_tracker_t, indx: number): Float32Array;
+    image_tracker_target_preview_mesh_vertices_size(o: zappar_image_tracker_t, indx: number): number;
+    image_tracker_target_preview_mesh_normals(o: zappar_image_tracker_t, indx: number): Float32Array;
+    image_tracker_target_preview_mesh_normals_size(o: zappar_image_tracker_t, indx: number): number;
+    image_tracker_target_preview_mesh_uvs(o: zappar_image_tracker_t, indx: number): Float32Array;
+    image_tracker_target_preview_mesh_uvs_size(o: zappar_image_tracker_t, indx: number): number;
     image_tracker_enabled(o: zappar_image_tracker_t): boolean;
     image_tracker_enabled_set(o: zappar_image_tracker_t, enabled: boolean): void;
     image_tracker_anchor_count(o: zappar_image_tracker_t): number;

package/lib/gen/zappar.js

@@ -3,3 +3,4 @@ export { face_landmark_name_t } from "./zappar-native";
 export { frame_pixel_format_t } from "./zappar-native";
 export { instant_world_tracker_transform_orientation_t } from "./zappar-native";
 export { log_level_t } from "./zappar-native";
+export { image_target_type_t } from "./zappar-native";

package/lib/imagetracker-previewmesh.d.ts

@@ -0,0 +1,2 @@
+import { ParsedTargetInfo, PreviewMesh } from "./imagetracker";
+export declare function getPreviewMesh(info: ParsedTargetInfo): PreviewMesh;

package/lib/imagetracker-previewmesh.js

@@ -0,0 +1,212 @@
+import { vec2 } from "gl-matrix";
+import { image_target_type_t } from "./gen/zappar-native";
+export function getPreviewMesh(info) {
+    switch (info.type) {
+        case image_target_type_t.IMAGE_TRACKER_TYPE_PLANAR: return planar(info);
+        case image_target_type_t.IMAGE_TRACKER_TYPE_CYLINDRICAL: return cylindrical(info);
+        case image_target_type_t.IMAGE_TRACKER_TYPE_CONICAL: return conical(info);
+    }
+    return defaultMesh();
+}
+function planar(info) {
+    const aspectRatio = info.trainedWidth / info.trainedHeight;
+    if (isNaN(aspectRatio))
+        return defaultMesh();
+    const scaling = info.physicalScaleFactor > 0 ? info.physicalScaleFactor : 1;
+    const vertices = new Float32Array([
+        -1.0 * aspectRatio * scaling, -1 * scaling, 0,
+        -1.0 * aspectRatio * scaling, scaling, 0,
+        aspectRatio * scaling, scaling, 0,
+        aspectRatio * scaling, -1 * scaling, 0
+    ]);
+    const indices = new Uint16Array([0, 2, 1, 0, 3, 2]);
+    const uvs = new Float32Array([
+        0, 0,
+        0, 1,
+        1, 1,
+        1, 0
+    ]);
+    const normals = new Float32Array([
+        0, 0, 1,
+        0, 0, 1,
+        0, 0, 1,
+        0, 0, 1,
+    ]);
+    return { vertices, indices, uvs, normals };
+}
+function defaultMesh() {
+    return {
+        indices: new Uint16Array(0),
+        vertices: new Float32Array(0),
+        normals: new Float32Array(0),
+        uvs: new Float32Array(0)
+    };
+}
+function cylindrical(info) {
+    const wrap_amount = 2 * info.trainedWidth / (info.trainedHeight * info.topRadius);
+    return generalConical(info, 2, false, 0, 0, 0, vec2.create(), info.trainedWidth / info.trainedHeight, wrap_amount, info.physicalScaleFactor);
+}
+function conical(info) {
+    const radius_diff = info.topRadius - info.bottomRadius;
+    const height_3d = Math.sqrt(info.sideLength * info.sideLength - radius_diff * radius_diff);
+    const flip = info.bottomRadius > info.topRadius;
+    let aspect_ratio = info.trainedWidth / info.trainedHeight;
+    if (isNaN(aspect_ratio))
+        aspect_ratio = 1;
+    const cone = !(info.bottomRadius > 0) || !(info.topRadius > 0);
+    const wide = info.sideLength < (2 * Math.abs(info.topRadius - info.bottomRadius));
+    const top_corner = vec2.create();
+    const bottom_corner = vec2.create();
+    const rotation_center = vec2.create();
+    if (cone) {
+        if (wide) {
+            if (flip) {
+                rotation_center[1] = aspect_ratio - 1;
+                const omega = Math.acos((2 - aspect_ratio) / aspect_ratio);
+                top_corner[0] = aspect_ratio * Math.sin(omega);
+                top_corner[1] = (aspect_ratio - 1) + aspect_ratio * Math.cos(omega);
+                vec2.copy(bottom_corner, rotation_center);
+            }
+            else {
+                rotation_center[1] = 1.0 - aspect_ratio;
+                const omega = Math.PI + Math.acos((2 - aspect_ratio) / aspect_ratio);
+                top_corner[0] = aspect_ratio * Math.sin(omega);
+                top_corner[1] = (1 - aspect_ratio) + aspect_ratio * Math.cos(omega);
+                vec2.copy(bottom_corner, rotation_center);
+            }
+        }
+        else {
+            if (flip) {
+                rotation_center[1] = 1;
+                vec2.copy(bottom_corner, rotation_center);
+                top_corner[0] = aspect_ratio;
+                top_corner[1] = 1 - Math.sqrt(4 - Math.pow(aspect_ratio, 2));
+            }
+            else {
+                rotation_center[1] = -1;
+                vec2.copy(bottom_corner, rotation_center);
+                top_corner[0] = -aspect_ratio;
+                top_corner[1] = Math.sqrt(4 - Math.pow(aspect_ratio, 2)) - 1;
+            }
+        }
+    }
+    else {
+        if (wide) {
+            if (flip) {
+                rotation_center[1] = aspect_ratio - 1;
+                const omega = Math.acos((2 - aspect_ratio) / aspect_ratio);
+                top_corner[0] = aspect_ratio * Math.sin(omega);
+                top_corner[1] = (aspect_ratio - 1) + aspect_ratio * Math.cos(omega);
+                bottom_corner[0] = (aspect_ratio - info.sideLength) * Math.sin(omega);
+                bottom_corner[1] = (aspect_ratio - 1) + (aspect_ratio - info.sideLength) * Math.cos(omega);
+            }
+            else {
+                rotation_center[1] = 1.0 - aspect_ratio;
+                const omega = Math.PI + Math.acos((2 - aspect_ratio) / aspect_ratio);
+                top_corner[0] = aspect_ratio * Math.sin(omega);
+                top_corner[1] = (1 - aspect_ratio) + aspect_ratio * Math.cos(omega);
+                bottom_corner[0] = (aspect_ratio - info.sideLength) * Math.sin(omega);
+                bottom_corner[1] = (1 - aspect_ratio) + (aspect_ratio - info.sideLength) * Math.cos(omega);
+            }
+        }
+        else {
+            const radius_ratio = flip ? (info.topRadius / info.bottomRadius) : (info.bottomRadius / info.topRadius);
+            if (flip) {
+                bottom_corner[0] = radius_ratio * aspect_ratio;
+                bottom_corner[1] = 1;
+                top_corner[0] = aspect_ratio;
+                top_corner[1] = 1 - Math.sqrt((info.sideLength * info.sideLength) - ((bottom_corner[0] - top_corner[0]) * (bottom_corner[0] - top_corner[0])));
+                rotation_center[1] = top_corner[1] + (top_corner[0] / (top_corner[0] - bottom_corner[0])) * (bottom_corner[1] - top_corner[1]);
+            }
+            else {
+                bottom_corner[0] = -radius_ratio * aspect_ratio;
+                bottom_corner[1] = -1;
+                top_corner[0] = -aspect_ratio;
+                top_corner[1] = Math.sqrt((info.sideLength * info.sideLength) - ((bottom_corner[0] - top_corner[0]) * (bottom_corner[0] - top_corner[0]))) - 1;
+                rotation_center[1] = top_corner[1] - (-top_corner[0] / (bottom_corner[0] - top_corner[0])) * (top_corner[1] - bottom_corner[1]);
+            }
+        }
+    }
+    const top_from_center = vec2.create();
+    vec2.subtract(top_from_center, top_corner, rotation_center);
+    const bottom_from_center = vec2.create();
+    vec2.subtract(bottom_from_center, bottom_corner, rotation_center);
+    const top_2d_radius = vec2.length(top_from_center);
+    const bottom_2d_radius = vec2.length(bottom_from_center);
+    let max_angle = 2 * Math.abs(Math.atan(top_from_center[0] / top_from_center[1]));
+    if (wide)
+        max_angle = (2 * Math.PI) - max_angle;
+    let theta_3d = (top_2d_radius * max_angle) / info.topRadius;
+    let theta = Math.abs(Math.atan(top_from_center[0] / top_from_center[1]));
+    if (wide)
+        theta = Math.PI - theta;
+    return generalConical(info, height_3d, flip, theta, bottom_2d_radius, top_2d_radius, rotation_center, aspect_ratio, theta_3d, info.physicalScaleFactor);
+}
+function generalConical(info, height_3d, flip, theta, bottom_2d_radius, top_2d_radius, rotation_center, aspect_ratio, wrap_amount, psf) {
+    if (isNaN(aspect_ratio))
+        aspect_ratio = 1;
+    const vertices = [];
+    const uvs = [];
+    const physical_scale = psf > 0 ? psf : 1;
+    const scale_factor = physical_scale * 2.0 / height_3d;
+    const subdivisons = 64;
+    for (let s = 0; s <= subdivisons; ++s) {
+        const angle = (s * wrap_amount / subdivisons) + (((2 * Math.PI) - wrap_amount) / 2);
+        const bx = info.bottomRadius * Math.sin(angle) * scale_factor;
+        const bz = info.bottomRadius * Math.cos(angle) * scale_factor;
+        const tx = info.topRadius * Math.sin(angle) * scale_factor;
+        const tz = info.topRadius * Math.cos(angle) * scale_factor;
+        const btm = -1 * physical_scale;
+        const top = physical_scale;
+        if (flip) {
+            vertices.push(bx, btm, bz);
+            vertices.push(tx, top, tz);
+        }
+        else {
+            vertices.push(tx, top, -tz);
+            vertices.push(bx, btm, -bz);
+        }
+    }
+    for (let s = 0; s <= subdivisons; ++s) {
+        if (info.type == image_target_type_t.IMAGE_TRACKER_TYPE_CYLINDRICAL) {
+            const offset = 1 - (s / subdivisons);
+            uvs.push(offset, 1);
+            uvs.push(offset, 0);
+        }
+        else {
+            let angle_2d = -((s / subdivisons) - 0.5) * 2 * theta;
+            if (flip) {
+                angle_2d = -angle_2d + theta;
+                if (angle_2d > theta)
+                    angle_2d = -theta + (angle_2d - theta);
+            }
+            const direction = vec2.create();
+            direction[0] = Math.sin(angle_2d);
+            direction[1] = Math.cos(angle_2d);
+            if (flip)
+                direction[1] *= -1;
+            const bottom_px = vec2.create();
+            vec2.copy(bottom_px, direction);
+            vec2.scale(bottom_px, bottom_px, bottom_2d_radius);
+            vec2.add(bottom_px, rotation_center, bottom_px);
+            const top_px = vec2.create();
+            vec2.copy(top_px, direction);
+            vec2.scale(top_px, top_px, top_2d_radius);
+            vec2.add(top_px, rotation_center, top_px);
+            uvs.push((top_px[0] + aspect_ratio) / (2 * aspect_ratio), 1 - ((-top_px[1] + 1) / 2));
+            uvs.push((bottom_px[0] + aspect_ratio) / (2 * aspect_ratio), 1 - ((-bottom_px[1] + 1) / 2));
+        }
+    }
+    const indices = [];
+    for (let i = 0; i < subdivisons; ++i) {
+        const bi = i * 2;
+        indices.push(bi + 1, bi + 2, bi + 3);
+        indices.push(bi + 0, bi + 2, bi + 1);
+    }
+    return {
+        vertices: new Float32Array(vertices),
+        indices: new Uint16Array(indices),
+        normals: new Float32Array(0),
+        uvs: new Float32Array(uvs)
+    };
+}

package/lib/imagetracker.d.ts

@@ -1,15 +1,26 @@
 import { zappar_image_tracker_t, zappar_pipeline_t } from "./gen/zappar";
-import { zappar_cwrap } from "./gen/zappar-native";
+import { image_target_type_t, zappar_cwrap } from "./gen/zappar-native";
 interface PreviewInfo {
     compressed: Uint8Array;
     mimeType: string;
+    image?: HTMLImageElement;
 }
-interface ParsedTargetInfo {
+export interface PreviewMesh {
+    indices: Uint16Array;
+    vertices: Float32Array;
+    normals: Float32Array;
+    uvs: Float32Array;
+}
+export interface ParsedTargetInfo {
     preview?: PreviewInfo;
+    previewMesh?: PreviewMesh;
     physicalScaleFactor: number;
     topRadius: number;
     bottomRadius: number;
     sideLength: number;
+    type: image_target_type_t;
+    trainedWidth: number;
+    trainedHeight: number;
 }
 export declare class ImageTracker {
     private _client;
@@ -23,6 +34,9 @@ export declare class ImageTracker {
     targetCount(): number;
     getTargetInfo(i: number): ParsedTargetInfo;
     private _parseOdle;
+    private _parseOdleV1;
+    private _parseOdleV3;
     getDecodedPreview(i: number): HTMLImageElement | undefined;
+    getPreviewMesh(i: number): PreviewMesh;
 }
 export {};