Update _renderAxes() to match the updated CameraModel

src/trackers/image-tracker/image-tracker.ts

 import { SpeedyPoint2 } from 'speedy-vision/types/core/speedy-point';
 import { Viewer } from '../../geometry/viewer';
 import { Pose } from '../../geometry/pose';
+import { CameraModel } from '../../geometry/camera-model';
 
 /** A trackable target */
 export interface TrackableImage extends Trackable
     /** tracker result to be consumed by the user */
     readonly exports?: ImageTrackerResult;
 
-    /** size of the AR screen space, in pixels */
-    readonly screenSize?: SpeedySize;
-
-    /** optional keypoints */
+    /** keypoints found in this framestep */
     readonly keypoints?: SpeedyKeypoint[];
 
-    /** optional keypoints */
+    /** optional keypoints for visualizing & testing */
     readonly keypointsNIS?: SpeedyKeypoint[];
 
-    /** optional polyline for testing */
-    readonly polyline?: SpeedyPoint2[];
-
-    /** optional polyline for testing */
+    /** optional polyline for visualizing & testing */
     readonly polylineNDC?: SpeedyPoint2[];
 
-    /** optional 3x4 camera matrix in AR screen space */
-    readonly cameraMatrix?: SpeedyMatrix;
-
-    /** 3x3 homography in AR screen space */
-    homography?: SpeedyMatrix;
+    /** optional camera model for visualizing & testing */
+    readonly camera?: CameraModel;
 }
 
 /** All possible states of an Image Tracker */

src/ui/gizmos.ts

 import { SpeedyMatrix } from 'speedy-vision/types/core/speedy-matrix';
 import { SpeedyKeypoint, SpeedyMatchedKeypoint } from 'speedy-vision/types/core/speedy-keypoint';
 import { Viewport } from '../core/viewport';
+import { CameraModel } from '../geometry/camera-model';
 import { Tracker, TrackerOutput } from '../trackers/tracker';
 import { ImageTrackerOutput } from '../trackers/image-tracker/image-tracker';
 import { NIS_SIZE } from '../trackers/image-tracker/settings';
         const viewportSize = viewport._realSize;
         const keypointsNIS = output.keypointsNIS;
         const polylineNDC = output.polylineNDC;
-        const cameraMatrix = output.cameraMatrix;
-        const screenSize = output.screenSize;
+        const camera = output.camera;
 
         // debug
         //ctx.fillStyle = '#000';
             this._renderPolylineNDC(ctx, polylineNDC, viewportSize);
 
         // render the axes of the 3D coordinate system
-        if(cameraMatrix !== undefined && screenSize !== undefined)
-            this._renderAxes(ctx, cameraMatrix, screenSize, viewportSize);
+        if(camera !== undefined)
+            this._renderAxes(ctx, camera, viewportSize);
     }
 
     /**
     /**
      * Render the axes of a 3D coordinate system
      * @param ctx canvas 2D context
-     * @param cameraMatrix 3x4 camera matrix that maps normalized coordinates [-1,1]^3 to AR screen space
-     * @param screenSize AR screen size
+     * @param camera camera model
      * @param viewportSize viewport size
      * @param lineWidth
      */
-    private _renderAxes(ctx: CanvasRenderingContext2D, cameraMatrix: SpeedyMatrix, screenSize: SpeedySize, viewportSize: SpeedySize, lineWidth = 4): void
+    private _renderAxes(ctx: CanvasRenderingContext2D, camera: CameraModel, viewportSize: SpeedySize, lineWidth = 4): void
     {
         const RED = '#f00', GREEN = '#0f0', BLUE = '#00f';
         const color = [ RED, GREEN, BLUE ]; // color of each axis: (X,Y,Z)
         const length = 1; // length of each axis-corresponding line, given in normalized space units
-        const sx = viewportSize.width / screenSize.width;
-        const sy = viewportSize.height / screenSize.height;
+        const w = viewportSize.width;
+        const h = viewportSize.height;
+        const iw = 1 / (camera.imageSize.width / 2);
+        const ih = -1 / (camera.imageSize.height / 2);
 
         /*
 
-        Multiply the 3x4 camera matrix P by:
+        Multiply the 3x4 camera matrix by:
 
         [ 0  L  0  0 ]
         [ 0  0  L  0 ] , where L = length in normalized space of the lines
 
         */
 
-        const p = cameraMatrix.read();
+        const p = camera.matrix.read();
         const l = length;
         const o = [ p[9], p[10], p[11] ]; // origin of the coordinate system
         const x = [ l*p[0]+p[9], l*p[1]+p[10], l*p[2]+p[11] ]; // x-axis
             const x = q[0] / q[2], y = q[1] / q[2];
 
             ctx.beginPath();
-            ctx.moveTo(ox * sx, oy * sy);
-            ctx.lineTo(x * sx, y * sy);
+            ctx.moveTo((ox * iw * 0.5 + 0.5) * w, (oy * ih * 0.5 + 0.5) * h);
+            ctx.lineTo((x * iw * 0.5 + 0.5) * w, (y * ih * 0.5 + 0.5) * h);
             ctx.strokeStyle = color[i];
             ctx.lineWidth = lineWidth;
             ctx.stroke();