Merge branch 'feature/continous-camera-movement-tracking' into featur…

…e/picking-in-non-max-vr

src/display_context.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { debounce } from "lodash-es";
+
 import type { FrameNumberCounter } from "#src/chunk_manager/frontend.js";
 import { TrackableValue } from "#src/trackable_value.js";
 import { animationFrameDebounce } from "#src/util/animation_frame_debounce.js";
@@ -26,6 +28,8 @@ import type { WatchableVisibilityPriority } from "#src/visibility_priority/front
 import type { GL } from "#src/webgl/context.js";
 import { initializeWebGL } from "#src/webgl/context.js";
 
+const DELAY_AFTER_CONTINUOUS_CAMERA_MOTION_MS = 300;
+
 export class RenderViewport {
   // Width of visible portion of panel in canvas pixels.
   width = 0;
@@ -390,13 +394,16 @@ export class DisplayContext extends RefCounted implements FrameNumberCounter {
   gl: GL;
   updateStarted = new NullarySignal();
   updateFinished = new NullarySignal();
+  continuousCameraMotionFinished = new NullarySignal();
   changed = this.updateFinished;
   panels = new Set<RenderedPanel>();
   canvasRect: DOMRect | undefined;
   rootRect: DOMRect | undefined;
   resizeGeneration = 0;
   boundsGeneration = -1;
 
+  private continuousCameraMotionInProgress = false;
+
   // Panels ordered by `drawOrder`.  If length is 0, needs to be recomputed.
   private orderedPanels: RenderedPanel[] = [];
 
@@ -447,6 +454,22 @@ export class DisplayContext extends RefCounted implements FrameNumberCounter {
 
   private resizeObserver = new ResizeObserver(this.resizeCallback);
 
+  private debouncedEndContinuousCameraMotion = this.registerCancellable(
+    debounce(() => {
+      this.continuousCameraMotionInProgress = false;
+      this.continuousCameraMotionFinished.dispatch();
+    }, DELAY_AFTER_CONTINUOUS_CAMERA_MOTION_MS),
+  );
+
+  flagContinuousCameraMotion() {
+    this.continuousCameraMotionInProgress = true;
+    this.debouncedEndContinuousCameraMotion();
+  }
+
+  get isContinuousCameraMotionInProgress() {
+    return this.continuousCameraMotionInProgress;
+  }
+
   constructor(public container: HTMLElement) {
     super();
     const { canvas, resizeObserver } = this;

src/perspective_view/panel.ts

@@ -81,8 +81,6 @@ import { MultipleScaleBarTextures } from "#src/widget/scale_bar.js";
 import type { RPC } from "#src/worker_rpc.js";
 import { SharedObject } from "#src/worker_rpc.js";
 
-const REDRAW_DELAY_AFTER_CAMERA_MOVE = 300;
-
 export interface PerspectiveViewerState extends RenderedDataViewerState {
   wireFrame: WatchableValueInterface<boolean>;
   orthographicProjection: TrackableBoolean;
@@ -253,7 +251,6 @@ export class PerspectivePanel extends RenderedDataPanel {
   protected visibleLayerTracker: Owned<
     VisibleRenderLayerTracker<PerspectivePanel, PerspectiveViewRenderLayer>
   >;
-  private redrawAfterMoveTimeOutId: number = -1;
   private hasVolumeRendering = false;
 
   get rpc() {
@@ -265,9 +262,6 @@ export class PerspectivePanel extends RenderedDataPanel {
   get displayDimensionRenderInfo() {
     return this.navigationState.displayDimensionRenderInfo;
   }
-  get isCameraMoving() {
-    return this.redrawAfterMoveTimeOutId !== -1;
-  }
 
   /**
    * If boolean value is true, sliceView is shown unconditionally, regardless of the value of
@@ -425,19 +419,8 @@ export class PerspectivePanel extends RenderedDataPanel {
     );
 
     this.registerDisposer(
-      this.viewer.navigationState.changed.add(() => {
-        // Don't mark camera moving on picking requests
-        // Also, at the moment this is only used for the volume rendering layer
-        if (this.isMovingToMousePosition || !this.hasVolumeRendering) {
-          return;
-        }
-        if (this.redrawAfterMoveTimeOutId !== -1) {
-          window.clearTimeout(this.redrawAfterMoveTimeOutId);
-        }
-        this.redrawAfterMoveTimeOutId = window.setTimeout(() => {
-          this.redrawAfterMoveTimeOutId = -1;
-          this.context.scheduleRedraw();
-        }, REDRAW_DELAY_AFTER_CAMERA_MOVE);
+      this.context.continuousCameraMotionFinished.add(() => {
+        if (this.hasVolumeRendering) this.scheduleRedraw();
       }),
     );
 
@@ -446,6 +429,7 @@ export class PerspectivePanel extends RenderedDataPanel {
       "rotate-via-mouse-drag",
       (e: ActionEvent<MouseEvent>) => {
         startRelativeMouseDrag(e.detail, (_event, deltaX, deltaY) => {
+          this.context.flagContinuousCameraMotion();
           this.navigationState.pose.rotateRelative(
             kAxes[1],
             ((deltaX / 4.0) * Math.PI) / 180.0,
@@ -462,6 +446,7 @@ export class PerspectivePanel extends RenderedDataPanel {
       element,
       "rotate-in-plane-via-touchrotate",
       (e: ActionEvent<TouchRotateInfo>) => {
+        this.context.flagContinuousCameraMotion();
         const { detail } = e;
         this.navigationState.pose.rotateRelative(
           kAxes[2],
@@ -474,6 +459,7 @@ export class PerspectivePanel extends RenderedDataPanel {
       element,
       "rotate-out-of-plane-via-touchtranslate",
       (e: ActionEvent<TouchTranslateInfo>) => {
+        this.context.flagContinuousCameraMotion();
         const { detail } = e;
         this.navigationState.pose.rotateRelative(
           kAxes[1],
@@ -927,7 +913,8 @@ export class PerspectivePanel extends RenderedDataPanel {
       bindFramebuffer,
       frameNumber: this.context.frameNumber,
       sliceViewsPresent: this.sliceViews.size > 0,
-      cameraMovementInProgress: this.isCameraMoving,
+      isContinuousCameraMotionInProgress:
+        this.context.isContinuousCameraMotionInProgress,
     };
 
     mat4.copy(
@@ -938,10 +925,11 @@ export class PerspectivePanel extends RenderedDataPanel {
     const { visibleLayers } = this.visibleLayerTracker;
 
     let hasTransparent = false;
-    this.hasVolumeRendering = false;
     // By default, volume rendering layers are not pickable when the camera is moving.
-    let hasVolumeRenderingPick = !this.isCameraMoving;
+    let hasVolumeRenderingPick =
+      !this.context.isContinuousCameraMotionInProgress;
     let hasAnnotation = false;
+    let hasVolumeRendering = false;
 
     // Draw fully-opaque layers first.
     for (const [renderLayer, attachment] of visibleLayers) {
@@ -954,13 +942,14 @@ export class PerspectivePanel extends RenderedDataPanel {
       } else {
         hasTransparent = true;
         if (renderLayer.isVolumeRendering) {
-          this.hasVolumeRendering = true;
+          hasVolumeRendering = true;
           hasVolumeRenderingPick =
             hasVolumeRenderingPick ||
             isProjectionLayer(renderLayer as VolumeRenderingRenderLayer);
         }
       }
     }
+    this.hasVolumeRendering = hasVolumeRendering;
     this.drawSliceViews(renderContext);
 
     if (hasAnnotation) {
@@ -1063,7 +1052,8 @@ export class PerspectivePanel extends RenderedDataPanel {
             renderLayer as VolumeRenderingRenderLayer,
           );
           const needsSecondPickingPass =
-            !isVolumeProjectionLayer && !this.isCameraMoving;
+            !isVolumeProjectionLayer &&
+            !this.context.isContinuousCameraMotionInProgress;
 
           // Two cases for volume rendering layers
 

src/perspective_view/render_layer.ts

@@ -64,7 +64,7 @@ export interface PerspectiveViewRenderContext
   /**
    * Specifies if the camera is moving
    */
-  cameraMovementInProgress: boolean;
+  isContinuousCameraMotionInProgress: boolean;
 
   /**
    * Specifices how to bind the max projection buffer

src/rendered_data_panel.ts

@@ -506,18 +506,22 @@ export abstract class RenderedDataPanel extends RenderedPanel {
     });
 
     registerActionListener(element, "zoom-in", () => {
+      this.context.flagContinuousCameraMotion();
       this.navigationState.zoomBy(0.5);
     });
 
     registerActionListener(element, "zoom-out", () => {
+      this.context.flagContinuousCameraMotion();
       this.navigationState.zoomBy(2.0);
     });
 
     registerActionListener(element, "depth-range-decrease", () => {
+      this.context.flagContinuousCameraMotion();
       this.navigationState.depthRange.value *= 0.5;
     });
 
     registerActionListener(element, "depth-range-increase", () => {
+      this.context.flagContinuousCameraMotion();
       this.navigationState.depthRange.value *= 2;
     });
 
@@ -529,11 +533,13 @@ export abstract class RenderedDataPanel extends RenderedPanel {
           element,
           `rotate-relative-${axisName}${signStr}`,
           () => {
+            this.context.flagContinuousCameraMotion();
             this.navigationState.pose.rotateRelative(kAxes[axis], sign * 0.1);
           },
         );
         const tempOffset = vec3.create();
         registerActionListener(element, `${axisName}${signStr}`, () => {
+          this.context.flagContinuousCameraMotion();
           const { navigationState } = this;
           const offset = tempOffset;
           offset[0] = 0;
@@ -549,6 +555,7 @@ export abstract class RenderedDataPanel extends RenderedPanel {
       element,
       "zoom-via-wheel",
       (event: ActionEvent<WheelEvent>) => {
+        this.context.flagContinuousCameraMotion();
         const e = event.detail;
         this.onMousemove(e, false);
         this.zoomByMouse(getWheelZoomAmount(e));
@@ -559,6 +566,7 @@ export abstract class RenderedDataPanel extends RenderedPanel {
       element,
       "adjust-depth-range-via-wheel",
       (event: ActionEvent<WheelEvent>) => {
+        this.context.flagContinuousCameraMotion();
         const e = event.detail;
         this.navigationState.depthRange.value *= getWheelZoomAmount(e);
       },
@@ -569,6 +577,7 @@ export abstract class RenderedDataPanel extends RenderedPanel {
       "translate-via-mouse-drag",
       (e: ActionEvent<MouseEvent>) => {
         startRelativeMouseDrag(e.detail, (_event, deltaX, deltaY) => {
+          this.context.flagContinuousCameraMotion();
           this.translateByViewportPixels(deltaX, deltaY);
         });
       },
@@ -578,6 +587,7 @@ export abstract class RenderedDataPanel extends RenderedPanel {
       element,
       "translate-in-plane-via-touchtranslate",
       (e: ActionEvent<TouchTranslateInfo>) => {
+        this.context.flagContinuousCameraMotion();
         const { detail } = e;
         this.translateByViewportPixels(detail.deltaX, detail.deltaY);
       },
@@ -587,6 +597,7 @@ export abstract class RenderedDataPanel extends RenderedPanel {
       element,
       "translate-z-via-touchtranslate",
       (e: ActionEvent<TouchTranslateInfo>) => {
+        this.context.flagContinuousCameraMotion();
         const { detail } = e;
         const { navigationState } = this;
         const offset = tempVec3;
@@ -602,6 +613,7 @@ export abstract class RenderedDataPanel extends RenderedPanel {
         element,
         `z+${amount}-via-wheel`,
         (event: ActionEvent<WheelEvent>) => {
+          this.context.flagContinuousCameraMotion();
           const e = event.detail;
           const { navigationState } = this;
           const offset = tempVec3;
@@ -737,6 +749,7 @@ export abstract class RenderedDataPanel extends RenderedPanel {
       element,
       "zoom-via-touchpinch",
       (e: ActionEvent<TouchPinchInfo>) => {
+        this.context.flagContinuousCameraMotion();
         const { detail } = e;
         this.handleMouseMove(detail.centerX, detail.centerY);
         const ratio = detail.prevDistance / detail.distance;

src/sliceview/panel.ts

@@ -176,6 +176,7 @@ export class SliceViewPanel extends RenderedDataPanel {
         if (mouseState.updateUnconditionally()) {
           const initialPosition = Float32Array.from(mouseState.position);
           startRelativeMouseDrag(e.detail, (_event, deltaX, deltaY) => {
+            this.context.flagContinuousCameraMotion();
             const { pose } = this.navigationState;
             const xAxis = vec3.transformQuat(
               tempVec3,
@@ -210,6 +211,7 @@ export class SliceViewPanel extends RenderedDataPanel {
         const { mouseState } = this.viewer;
         this.handleMouseMove(detail.centerX, detail.centerY);
         if (mouseState.updateUnconditionally()) {
+          this.context.flagContinuousCameraMotion();
           this.navigationState.pose.rotateAbsolute(
             this.sliceView.projectionParameters.value
               .viewportNormalInCanonicalCoordinates,

src/volume_rendering/volume_render_layer.ts

@@ -774,7 +774,7 @@ outputValue = vec4(1.0, 1.0, 1.0, 1.0);
     const restoreDrawingBuffersAndState = () => {
       const performedSecondPassForPicking =
         !isProjectionMode(this.mode.value) &&
-        !renderContext.cameraMovementInProgress;
+        !renderContext.isContinuousCameraMotionInProgress;
       // In this case, we need the max projection buffer
       if (isProjectionMode(this.mode.value) || performedSecondPassForPicking) {
         gl.depthMask(true);
@@ -850,10 +850,10 @@ outputValue = vec4(1.0, 1.0, 1.0, 1.0);
       this.getDataHistogramCount() > 0 &&
       !renderContext.wireFrame &&
       !renderContext.sliceViewsPresent &&
-      !renderContext.cameraMovementInProgress;
+      !renderContext.isContinuousCameraMotionInProgress;
     const needPickingPass =
       !isProjectionMode(this.mode.value) &&
-      !renderContext.cameraMovementInProgress;
+      !renderContext.isContinuousCameraMotionInProgress;
     const hasPicking = isProjectionMode(this.mode.value) || needPickingPass;
 
     const pickId = hasPicking ? renderContext.pickIDs.register(this) : 0;