Gizmos: add the ability to render polylines and keypoints in NDC and NIS, respectively

src/ui/gizmos.ts

 import { Viewport } from '../core/viewport';
 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 screenSize = output.screenSize;
         const keypoints = output.keypoints;
+        const keypointsNIS = output.keypointsNIS;
         const polyline = output.polyline;
+        const polylineNDC = output.polylineNDC;
         const cameraMatrix = output.cameraMatrix;
 
         // debug
         if(keypoints !== undefined && screenSize !== undefined)
             this._splitAndRenderKeypoints(ctx, keypoints, screenSize, viewportSize);
 
+        // render keypoints
+        if(keypointsNIS !== undefined)
+            this._splitAndRenderKeypointsNIS(ctx, keypointsNIS, viewportSize);
+
         // render polylines
         if(polyline !== undefined && screenSize !== undefined)
             this._renderPolyline(ctx, polyline, screenSize, viewportSize);
 
+        // render polylines
+        if(polylineNDC !== undefined)
+            this._renderPolylineNDC(ctx, polylineNDC, viewportSize, '#f8f');
+
         // render the axes of the 3D coordinate system
         if(cameraMatrix !== undefined && screenSize !== undefined)
             this._renderAxes(ctx, cameraMatrix, screenSize, viewportSize);
     }
 
     /**
+     * Split keypoints in matched/unmatched categories and
+     * render them for testing & development purposes
+     * @param ctx canvas 2D context
+     * @param keypoints keypoints in Normalized Image Space (NIS)
+     * @param viewportSize viewport size
+     * @param size base keypoint rendering size
+     */
+    private _splitAndRenderKeypointsNIS(ctx: CanvasRenderingContext2D, keypoints: SpeedyKeypoint[], viewportSize: SpeedySize, size = 1): void
+    {
+        if(keypoints.length == 0)
+            return;
+
+        if(!Object.prototype.hasOwnProperty.call(keypoints[0], '_matches')) { // hack...
+            this._renderKeypointsNIS(ctx, keypoints, viewportSize, '#f00', size);
+            return;
+        }
+
+        const goodMatches = [], badMatches = [];
+        for(let i = 0; i < keypoints.length; i++) {
+            const keypoint = keypoints[i] as SpeedyMatchedKeypoint;
+
+            if(this._isGoodMatch(keypoint))
+                goodMatches.push(keypoint);
+            else
+                badMatches.push(keypoint);
+        }
+
+        this._renderKeypointsNIS(ctx, badMatches, viewportSize, '#f00', size);
+        this._renderKeypointsNIS(ctx, goodMatches, viewportSize, '#0f0', size);
+    }
+
+    /**
      * Check if a matched keypoint is "good enough"
      * @param keypoint matched keypoint
      * @returns a boolean
     }
 
     /**
+     * Render keypoints for testing & development purposes
+     * @param ctx canvas 2D context
+     * @param keypoints keypoints in Normalized Image Space (NIS)
+     * @param viewportSize viewport size
+     * @param color color of the rendered keypoints
+     * @param size base keypoint rendering size
+     */
+    private _renderKeypointsNIS(ctx: CanvasRenderingContext2D, keypoints: SpeedyKeypoint[], viewportSize: SpeedySize, color = 'red', size = 1): void
+    {
+        const sx = viewportSize.width / NIS_SIZE;
+        const sy = viewportSize.height / NIS_SIZE;
+
+        ctx.beginPath();
+
+        for(let i = keypoints.length - 1; i >= 0; i--) {
+            const keypoint = keypoints[i];
+            const x = (keypoint.x * sx + 0.5) | 0;
+            const y = (keypoint.y * sy + 0.5) | 0;
+            const r = (size * keypoint.scale + 0.5) | 0;
+
+            ctx.rect(x-r, y-r, 2*r, 2*r);
+        }
+
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+    }
+
+    /**
      * Render polyline for testing & development purposes
      * @param ctx canvas 2D context
      * @param polyline vertices
     }
 
     /**
+     * Render a polyline for testing & development purposes
+     * @param ctx canvas 2D context
+     * @param polyline vertices in NDC
+     * @param viewportSize viewport size
+     * @param color color of the rendered polyline
+     * @param lineWidth
+     */
+    private _renderPolylineNDC(ctx: CanvasRenderingContext2D, polyline: SpeedyPoint2[], viewportSize: SpeedySize, color = '#0f0', lineWidth = 2): void
+    {
+        const n = polyline.length;
+        const w = viewportSize.width;
+        const h = viewportSize.height;
+
+        if(n == 0)
+            return;
+
+        ctx.beginPath();
+        ctx.moveTo((polyline[n-1].x * 0.5 + 0.5) * w, (polyline[n-1].y * -0.5 + 0.5) * h);
+        for(let j = 0; j < n; j++)
+            ctx.lineTo((polyline[j].x * 0.5 + 0.5) * w, (polyline[j].y * -0.5 + 0.5) * h);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+    }
+
+    /**
      * 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