Update code to hide keypoints if they cannot be detected

Author: Valkryst

README.md

@@ -40,7 +40,7 @@ The _Detector_ classes emit the following events:
 * `ready` - Emitted when the detector's TFJS model has finished loading.
 * `started` - Emitted when the detector starts running.
 * `stopped` - Emitted when the detector stops running.
-* `updated` - Emitted when the detector has _detected and updated_ the position of its keypoints.
+* `updated` - Emitted when the detector has updated the state of its keypoints.
   * The event's `runtime` property contains the number of milliseconds taken to detect and update the keypoints.
 
 #### Renderer Events

js/detector/body_detector.js

@@ -64,14 +64,11 @@ export class BodyDetector extends Detector {
                  */
             }
 
-            if (rawBodies.length === 0) {
-                this.lastRuntime = performance.now() - currentTime;
-                return;
+            if (rawBodies.length > 0) {
+                const rawBody = rawBodies[0];
+                this.mesh.updateBodyKeypoints(rawBody);
             }
 
-            const rawBody = rawBodies[0];
-            this.mesh.updateBodyKeypoints(rawBody);
-
             this.lastRuntime = performance.now() - currentTime;
             this.dispatchEvent(new CustomEvent("updated", {detail: {runtime: this.lastRuntime}}));
         }, 1000 / BodyDetector.fps);

js/detector/face_detector.js

@@ -64,14 +64,12 @@ export class FaceDetector extends Detector {
                  */
             }
 
-            if (rawFaces.length === 0) {
-                this.lastRuntime = performance.now() - currentTime;
-                return;
-            }
-
-            const rawFace = rawFaces[0];
-            for (let i = 0 ; i < rawFace.keypoints.length ; i++) {
-                this.relabelKeypoint(i, rawFace.keypoints[i]);
+            let rawFace = null;
+            if (rawFaces.length > 0) {
+                rawFace = rawFaces[0];
+                for (let i = 0 ; i < rawFace.keypoints.length ; i++) {
+                    this.relabelKeypoint(i, rawFace.keypoints[i]);
+                }
             }
 
             this.mesh.updateFaceKeypoints(rawFace);

js/detector/hand_detector.js

@@ -64,14 +64,11 @@ export class HandDetector extends Detector {
                  */
             }
 
-            if (rawHands.length === 0) {
-                this.lastRuntime = performance.now() - currentTime;
-                return;
-            }
-
-            for (const rawHand of rawHands) {
-                for (const rawKeypoint of rawHand.keypoints) {
-                    this.relabelKeypoint(rawHand, rawKeypoint);
+            if (rawHands.length > 0) {
+                for (const rawHand of rawHands) {
+                    for (const rawKeypoint of rawHand.keypoints) {
+                        this.relabelKeypoint(rawHand, rawKeypoint);
+                    }
                 }
             }
 

js/mesh.js

@@ -54,8 +54,10 @@ export class Mesh {
      * }]} rawFace Raw face data.
      */
     updateFaceKeypoints(rawFace) {
-        // todo We know the face is not detected if rawFace is null, so we could hide/show jewellery based on this.
-        if (rawFace == null || rawFace.keypoints == null) {
+        if (rawFace == null || rawFace.keypoints == null || rawFace.length === 0 || rawFace.keypoints.length === 0) {
+            for (let i = 0 ; i < this.faceKeypoints.length; i++) {
+                this.faceKeypoints[i].setConfidence(0);
+            }
             return;
         }
 
@@ -91,8 +93,10 @@ export class Mesh {
      * }]} rawBody Raw body data.
      */
     updateBodyKeypoints(rawBody) {
-        // todo We know the body is not detected if rawPost is null, so we could hide/show jewellery based on this.
-        if (rawBody == null || rawBody.keypoints == null) {
+        if (rawBody == null || rawBody.keypoints == null || rawBody.length === 0 || rawBody.keypoints.length === 0) {
+            for (let i = 0 ; i < this.bodyKeypoints.length; i++) {
+                this.bodyKeypoints[i].setConfidence(0);
+            }
             return;
         }
 
@@ -130,8 +134,10 @@ export class Mesh {
      * }]} rawHands
      */
     updateHandKeypoints(rawHands) {
-        // todo Check what happens when one or both hands aren't visible.
         if (rawHands == null || rawHands.length === 0) {
+            for (const keypoint of this.handKeypoints) {
+                keypoint.setConfidence(0);
+            }
             return;
         }