prototype active segment pulsing

scalableminds · Oct 25, 2022 · b37134e · b37134e
1 parent 4a9fd59
commit b37134e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts b/frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts
@@ -93,6 +93,7 @@ class PlaneMaterialFactory {
   leastRecentlyVisibleLayers: Array<{ name: string; isSegmentationLayer: boolean }>;
   oldShaderCode: string | null | undefined;
   unsubscribeSeedsFn: (() => void) | null = null;
+  timeAnimationFrameId: number | null = null;
 
   constructor(planeID: OrthoView, isOrthogonal: boolean, shaderId: number) {
     this.planeID = planeID;
@@ -111,6 +112,11 @@ class PlaneMaterialFactory {
   stopListening() {
     this.storePropertyUnsubscribers.forEach((fn) => fn());
     this.storePropertyUnsubscribers = [];
+
+    if (this.timeAnimationFrameId != null) {
+      cancelAnimationFrame(this.timeAnimationFrameId);
+      this.timeAnimationFrameId = null;
+    }
   }
 
   setupUniforms(): void {
@@ -197,6 +203,9 @@ class PlaneMaterialFactory {
       activeCellIdLow: {
         value: new THREE.Vector4(0, 0, 0, 0),
       },
+      timeMs: {
+        value: 0.0,
+      },
     };
 
     for (const dataLayer of Model.getAllLayers()) {
@@ -592,6 +601,8 @@ class PlaneMaterialFactory {
           true,
         ),
       );
+
+      this.timeAnimationFrameId = requestAnimationFrame((time: number) => this.updateTime(time));
     }
   }
 
@@ -638,6 +649,12 @@ class PlaneMaterialFactory {
     this.uniforms[`${name}_gammaCorrectionValue`].value = gammaCorrectionValue;
   }
 
+  updateTime(time: number) {
+    this.uniforms.timeMs.value = time;
+    window.needsRerender = true;
+    this.timeAnimationFrameId = requestAnimationFrame((t: number) => this.updateTime(t));
+  }
+
   getMaterial(): THREE.ShaderMaterial {
     return this.material;
   }

diff --git a/frontend/javascripts/oxalis/shaders/main_data_fragment.glsl.ts b/frontend/javascripts/oxalis/shaders/main_data_fragment.glsl.ts
@@ -65,6 +65,7 @@ const int dataTextureCountPerLayer = <%= dataTextureCountPerLayer %>;
   uniform bool isMouseInActiveViewport;
   uniform bool showBrush;
   uniform float segmentationPatternOpacity;
+  uniform float timeMs;
 
   uniform bool isMappingEnabled;
   uniform float mappingSize;
@@ -197,24 +198,27 @@ void main() {
   <% if (hasSegmentation) { %>
   <% _.each(segmentationLayerNames, function(segmentationName, layerIndex) { %>
 
-     // Color map (<= to fight rounding mistakes)
-     if ( length(<%= segmentationName%>_id_low) > 0.1 || length(<%= segmentationName%>_id_high) > 0.1 ) {
-       // Increase cell opacity when cell is hovered
-       float hoverAlphaIncrement =
-         // Hover cell only if it's the active one
-         // and if segmentation opacity is not zero
-         hoveredSegmentIdLow == <%= segmentationName%>_id_low
-          && hoveredSegmentIdHigh == <%= segmentationName%>_id_high
-          && <%= segmentationName%>_alpha > 0.0
-         ? 0.2 : 0.0;
-
-       gl_FragColor = vec4(mix(data_color, convertCellIdToRGB(<%= segmentationName%>_id_high, <%= segmentationName%>_id_low), <%= segmentationName%>_alpha + hoverAlphaIncrement ), 1.0);
-     }
-
-     vec4 <%= segmentationName%>_brushOverlayColor = getBrushOverlay(worldCoordUVW);
-     <%= segmentationName%>_brushOverlayColor.xyz = convertCellIdToRGB(activeCellIdHigh, activeCellIdLow);
-     gl_FragColor = mix(gl_FragColor, <%= segmentationName%>_brushOverlayColor, <%= segmentationName%>_brushOverlayColor.a);
-     gl_FragColor.a = 1.0;
+    // Color map (<= to fight rounding mistakes)
+    if ( length(<%= segmentationName%>_id_low) > 0.1 || length(<%= segmentationName%>_id_high) > 0.1 ) {
+      // Increase cell opacity when cell is hovered or if it is the active activeCell
+      bool isHoveredCell = hoveredSegmentIdLow == <%= segmentationName%>_id_low
+        && hoveredSegmentIdHigh == <%= segmentationName%>_id_high;
+      bool isActiveCell = activeCellIdLow == <%= segmentationName%>_id_low
+         && activeCellIdHigh == <%= segmentationName%>_id_high;
+      // Use the current time to let the activeCell pulse
+      float timeMultiplier = isActiveCell ? (sin(timeMs / 400.) + 1. ) / 2. : 1.;
+      // Highlight cell only if it's hovered or active
+      // and if segmentation opacity is not zero
+      float hoverAlphaIncrement =
+        (isHoveredCell || isActiveCell) && <%= segmentationName%>_alpha > 0.0 ? 0.2 * timeMultiplier : 0.0;
+
+      gl_FragColor = vec4(mix(data_color, convertCellIdToRGB(<%= segmentationName%>_id_high, <%= segmentationName%>_id_low), <%= segmentationName%>_alpha + hoverAlphaIncrement ), 1.0);
+    }
+
+    vec4 <%= segmentationName%>_brushOverlayColor = getBrushOverlay(worldCoordUVW);
+    <%= segmentationName%>_brushOverlayColor.xyz = convertCellIdToRGB(activeCellIdHigh, activeCellIdLow);
+    gl_FragColor = mix(gl_FragColor, <%= segmentationName%>_brushOverlayColor, <%= segmentationName%>_brushOverlayColor.a);
+    gl_FragColor.a = 1.0;
   <% }) %>
   <% } %>
 }