[PLAT-3943] Hide detached pins (#617)

* Hide detached pins * Hide detached pins
Vertexvis · Jul 29, 2024 · 5be1329 · 5be1329
1 parent a5651ff
commit 5be1329
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 10 deletions.
diff --git a/packages/viewer/src/components/viewer-pin-group/pin-renderer.tsx b/packages/viewer/src/components/viewer-pin-group/pin-renderer.tsx
@@ -26,7 +26,8 @@ export const PinRenderer: FunctionalComponent<PinRendererProps> = ({
           id="pin-anchor"
           class={classNames('pin-anchor', {
             selected: selected,
-            'pin-occluded': occluded || detached,
+            'pin-occluded': occluded,
+            'pin-detached': detached,
           })}
           style={{
             background: primaryColor,
@@ -40,7 +41,8 @@ export const PinRenderer: FunctionalComponent<PinRendererProps> = ({
           size="lg"
           class={classNames('pin', {
             'pin-selected': selected,
-            'pin-occluded': occluded || detached,
+            'pin-occluded': occluded,
+            'pin-detached': detached,
           })}
           style={{
             color: primaryColor,

diff --git a/packages/viewer/src/components/viewer-pin-group/viewer-pin-group.css b/packages/viewer/src/components/viewer-pin-group/viewer-pin-group.css
@@ -100,4 +100,8 @@
 .pin-occluded {
   opacity: .3;
   transition: opacity 0.3s ease-in;
+}
+
+.pin-detached {
+  visibility: hidden;
 }
diff --git a/packages/viewer/src/components/viewer-pin-group/viewer-pin-group.tsx b/packages/viewer/src/components/viewer-pin-group/viewer-pin-group.tsx
@@ -155,7 +155,7 @@ export class ViewerPinGroup {
           />
         </vertex-viewer-dom-element>
 
-        {isTextPin(this.pin) && !this.occluded && (
+        {isTextPin(this.pin) && !this.occluded && !this.detached && (
           <Fragment>
             <vertex-viewer-pin-label-line
               id={`pin-label-line-${this.pin?.id}`}

diff --git a/packages/viewer/src/lib/types/depthBuffer.ts b/packages/viewer/src/lib/types/depthBuffer.ts
@@ -89,6 +89,29 @@ export class DepthBuffer implements FrameImageLike {
     }
   }
 
+  /**
+   * Computes the maximum depth of visible geometry within the coordinate
+   * space of the depth buffer.
+   *
+   * For perspective cameras, the maximum depth is the magnitude
+   * of the far plane of the camera.
+   *
+   * For orthographic cameras, the maximum depth is the distance between
+   * the near and far planes of the camera.
+   *
+   * @returns The maximum depth of visible geometry.
+   */
+  public getMaxDepthOfGeometry(): number {
+    const { near, far } = this.camera;
+    const isPerspectiveCamera = this.camera.isPerspective();
+
+    if (isPerspectiveCamera) {
+      return far;
+    } else {
+      return far - near;
+    }
+  }
+
   /**
    * Computes a depth from a 2D point within the coordinate space of the frame.
    * The returned depth is a normalized value (`[0, 1]`) between the near and
@@ -260,14 +283,23 @@ export class DepthBuffer implements FrameImageLike {
       viewport
     );
 
-    // Allow for a small rounding error
-    const allowableDifferenceToStillBeOnSurface = Math.abs(
-      0.02 * distanceToPoint
-    );
-    const depthDifference = Math.abs(depthOfClosestGeometry - distanceToPoint);
-    const isDetachedFromGeometry =
-      depthDifference > allowableDifferenceToStillBeOnSurface;
+    // If distanceFromClosestGeometryToPoint is 0, then the point is directly on the surface of the
+    // closest geometry and is not detached. This method allows for a small rounding
+    // error when the point is slightly closer to the camera than the geometry.
+    const distanceFromClosestGeometryToPoint =
+      depthOfClosestGeometry - distanceToPoint;
+    const allowableDifferenceToStillBeOnSurface = 0.02 * distanceToPoint;
+    const pointIsOnSurface =
+      distanceFromClosestGeometryToPoint <
+      allowableDifferenceToStillBeOnSurface;
+
+    // Check to see if the given world point is behind the far plane,
+    // or that the depth of the point is greater than the maximum depth of visible geometry
+    const maximumDepthOfVisibleGeometry = this.getMaxDepthOfGeometry();
+    const pointIsBehindFarPlane =
+      distanceToPoint > maximumDepthOfVisibleGeometry;
 
+    const isDetachedFromGeometry = !pointIsOnSurface || pointIsBehindFarPlane;
     return isDetachedFromGeometry;
   }
 }