|
@@ -123,12 +123,10 @@ class ImageTrackerGizmos implements GizmosRenderer
|
123
|
123
|
return;
|
124
|
124
|
|
125
|
125
|
const viewportSize = viewport._realSize;
|
126
|
|
- const screenSize = output.screenSize;
|
127
|
|
- const keypoints = output.keypoints;
|
128
|
126
|
const keypointsNIS = output.keypointsNIS;
|
129
|
|
- const polyline = output.polyline;
|
130
|
127
|
const polylineNDC = output.polylineNDC;
|
131
|
128
|
const cameraMatrix = output.cameraMatrix;
|
|
129
|
+ const screenSize = output.screenSize;
|
132
|
130
|
|
133
|
131
|
// debug
|
134
|
132
|
//ctx.fillStyle = '#000';
|
|
@@ -136,20 +134,12 @@ class ImageTrackerGizmos implements GizmosRenderer
|
136
|
134
|
//ctx.clearRect(0, 0, canvas.width, canvas.height);
|
137
|
135
|
|
138
|
136
|
// render keypoints
|
139
|
|
- if(keypoints !== undefined && screenSize !== undefined)
|
140
|
|
- this._splitAndRenderKeypoints(ctx, keypoints, screenSize, viewportSize);
|
141
|
|
-
|
142
|
|
- // render keypoints
|
143
|
137
|
if(keypointsNIS !== undefined)
|
144
|
138
|
this._splitAndRenderKeypointsNIS(ctx, keypointsNIS, viewportSize);
|
145
|
139
|
|
146
|
140
|
// render polylines
|
147
|
|
- if(polyline !== undefined && screenSize !== undefined)
|
148
|
|
- this._renderPolyline(ctx, polyline, screenSize, viewportSize);
|
149
|
|
-
|
150
|
|
- // render polylines
|
151
|
141
|
if(polylineNDC !== undefined)
|
152
|
|
- this._renderPolylineNDC(ctx, polylineNDC, viewportSize, '#f8f');
|
|
142
|
+ this._renderPolylineNDC(ctx, polylineNDC, viewportSize);
|
153
|
143
|
|
154
|
144
|
// render the axes of the 3D coordinate system
|
155
|
145
|
if(cameraMatrix !== undefined && screenSize !== undefined)
|
|
@@ -160,33 +150,6 @@ class ImageTrackerGizmos implements GizmosRenderer
|
160
|
150
|
* Split keypoints in matched/unmatched categories and
|
161
|
151
|
* render them for testing & development purposes
|
162
|
152
|
* @param ctx canvas 2D context
|
163
|
|
- * @param keypoints keypoints to render
|
164
|
|
- * @param screenSize AR screen size
|
165
|
|
- * @param viewportSize viewport size
|
166
|
|
- * @param size base keypoint rendering size
|
167
|
|
- */
|
168
|
|
- private _splitAndRenderKeypoints(ctx: CanvasRenderingContext2D, keypoints: SpeedyKeypoint[], screenSize: SpeedySize, viewportSize: SpeedySize, size = 1): void
|
169
|
|
- {
|
170
|
|
- if(keypoints.length == 0)
|
171
|
|
- return;
|
172
|
|
-
|
173
|
|
- if(!Object.prototype.hasOwnProperty.call(keypoints[0], '_matches')) { // hack...
|
174
|
|
- this._renderKeypoints(ctx, keypoints, screenSize, viewportSize, '#f00', size);
|
175
|
|
- return;
|
176
|
|
- }
|
177
|
|
-
|
178
|
|
- const matchedKeypoints = keypoints as SpeedyMatchedKeypoint[];
|
179
|
|
- const goodMatches = matchedKeypoints.filter(keypoint => this._isGoodMatch(keypoint));
|
180
|
|
- const badMatches = matchedKeypoints.filter(keypoint => !this._isGoodMatch(keypoint));
|
181
|
|
-
|
182
|
|
- this._renderKeypoints(ctx, badMatches, screenSize, viewportSize, '#f00', size);
|
183
|
|
- this._renderKeypoints(ctx, goodMatches, screenSize, viewportSize, '#0f0', size);
|
184
|
|
- }
|
185
|
|
-
|
186
|
|
- /**
|
187
|
|
- * Split keypoints in matched/unmatched categories and
|
188
|
|
- * render them for testing & development purposes
|
189
|
|
- * @param ctx canvas 2D context
|
190
|
153
|
* @param keypoints keypoints in Normalized Image Space (NIS)
|
191
|
154
|
* @param viewportSize viewport size
|
192
|
155
|
* @param size base keypoint rendering size
|
|
@@ -241,36 +204,6 @@ class ImageTrackerGizmos implements GizmosRenderer
|
241
|
204
|
/**
|
242
|
205
|
* Render keypoints for testing & development purposes
|
243
|
206
|
* @param ctx canvas 2D context
|
244
|
|
- * @param keypoints keypoints to render
|
245
|
|
- * @param screenSize AR screen size
|
246
|
|
- * @param viewportSize viewport size
|
247
|
|
- * @param color color of the rendered keypoints
|
248
|
|
- * @param size base keypoint rendering size
|
249
|
|
- */
|
250
|
|
- private _renderKeypoints(ctx: CanvasRenderingContext2D, keypoints: SpeedyKeypoint[], screenSize: SpeedySize, viewportSize: SpeedySize, color = 'red', size = 1): void
|
251
|
|
- {
|
252
|
|
- const sx = viewportSize.width / screenSize.width;
|
253
|
|
- const sy = viewportSize.height / screenSize.height;
|
254
|
|
-
|
255
|
|
- ctx.beginPath();
|
256
|
|
-
|
257
|
|
- for(let i = keypoints.length - 1; i >= 0; i--) {
|
258
|
|
- const keypoint = keypoints[i];
|
259
|
|
- const x = (keypoint.x * sx + 0.5) | 0;
|
260
|
|
- const y = (keypoint.y * sy + 0.5) | 0;
|
261
|
|
- const r = (size * keypoint.scale + 0.5) | 0;
|
262
|
|
-
|
263
|
|
- ctx.rect(x-r, y-r, 2*r, 2*r);
|
264
|
|
- }
|
265
|
|
-
|
266
|
|
- ctx.strokeStyle = color;
|
267
|
|
- ctx.lineWidth = 1;
|
268
|
|
- ctx.stroke();
|
269
|
|
- }
|
270
|
|
-
|
271
|
|
- /**
|
272
|
|
- * Render keypoints for testing & development purposes
|
273
|
|
- * @param ctx canvas 2D context
|
274
|
207
|
* @param keypoints keypoints in Normalized Image Space (NIS)
|
275
|
208
|
* @param viewportSize viewport size
|
276
|
209
|
* @param color color of the rendered keypoints
|
|
@@ -298,36 +231,6 @@ class ImageTrackerGizmos implements GizmosRenderer
|
298
|
231
|
}
|
299
|
232
|
|
300
|
233
|
/**
|
301
|
|
- * Render polyline for testing & development purposes
|
302
|
|
- * @param ctx canvas 2D context
|
303
|
|
- * @param polyline vertices
|
304
|
|
- * @param screenSize AR screen size
|
305
|
|
- * @param viewportSize viewport size
|
306
|
|
- * @param color color of the rendered polyline
|
307
|
|
- * @param lineWidth
|
308
|
|
- */
|
309
|
|
- private _renderPolyline(ctx: CanvasRenderingContext2D, polyline: SpeedyPoint2[], screenSize: SpeedySize, viewportSize: SpeedySize, color = '#0f0', lineWidth = 2): void
|
310
|
|
- {
|
311
|
|
- if(polyline.length == 0)
|
312
|
|
- return;
|
313
|
|
-
|
314
|
|
- const n = polyline.length;
|
315
|
|
- const sx = viewportSize.width / screenSize.width;
|
316
|
|
- const sy = viewportSize.height / screenSize.height;
|
317
|
|
-
|
318
|
|
- // render polyline
|
319
|
|
- ctx.beginPath();
|
320
|
|
-
|
321
|
|
- ctx.moveTo(polyline[n - 1].x * sx, polyline[n - 1].y * sy);
|
322
|
|
- for(let j = 0; j < n; j++)
|
323
|
|
- ctx.lineTo(polyline[j].x * sx, polyline[j].y * sy);
|
324
|
|
-
|
325
|
|
- ctx.strokeStyle = color;
|
326
|
|
- ctx.lineWidth = lineWidth;
|
327
|
|
- ctx.stroke();
|
328
|
|
- }
|
329
|
|
-
|
330
|
|
- /**
|
331
|
234
|
* Render a polyline for testing & development purposes
|
332
|
235
|
* @param ctx canvas 2D context
|
333
|
236
|
* @param polyline vertices in NDC
|