feat(ColorTransferFunction): Add sigmoid mapping

Author: jadh4v

Examples/Applications/ImageViewer/index.js

@@ -117,6 +117,7 @@ function createUI(renderWindow, interactorStyle, imageSlice) {
 
   function applyPreset() {
     const preset = vtkColorMaps.getPresetByName(presetSelector.value);
+    lookupTable.setSigmoidGrowthRate(-4.0);
     lookupTable.applyColorMap(preset);
     lookupTable.setMappingRange(...scalars.getRange());
     lookupTable.updateRange();
@@ -194,12 +195,35 @@ function createUI(renderWindow, interactorStyle, imageSlice) {
   }
   interpolationSelector.addEventListener('input', updateInterpolation);
 
+  const mappingModeLabel = document.createElement('label');
+  mappingModeLabel.for = 'mappingMode';
+  mappingModeLabel.innerText = 'Mapping Sigmoid:';
+  const mappingModeSelector = document.createElement('input');
+  mappingModeSelector.setAttribute('class', selectorClass);
+  mappingModeSelector.setAttribute('id', 'mappingMode');
+  mappingModeSelector.type = 'checkbox';
+  mappingModeSelector.checked = false;
+  const mappingMode = document.createElement('div');
+  mappingMode.appendChild(mappingModeLabel);
+  mappingMode.appendChild(mappingModeSelector);
+
+  function updateMappingMode() {
+    if (mappingModeSelector.checked) {
+      lookupTable.setScalarMappingModeToSigmoid();
+    } else {
+      lookupTable.setScalarMappingModeToLinear();
+    }
+    renderWindow.getInteractor().render();
+  }
+  mappingModeSelector.addEventListener('input', updateMappingMode);
+
   const controlContainer = document.createElement('div');
   controlContainer.setAttribute('class', style.control);
   controlContainer.appendChild(info);
   controlContainer.appendChild(presetSelector);
   controlContainer.appendChild(windowLevel);
   controlContainer.appendChild(interpolation);
+  controlContainer.appendChild(mappingMode);
   rootControllerContainer.appendChild(controlContainer);
 }
 // ----------------------------------------------------------------------------

Sources/Rendering/Core/ColorTransferFunction/Constants.d.ts

@@ -10,8 +10,14 @@ export declare enum Scale {
   LOG10 = 1,
 }
 
+export declare enum ScalarMappingMode {
+  LINEAR = 0,
+  SIGMOID = 1,
+}
+
 declare const _default: {
   ColorSpace: typeof ColorSpace;
   Scale: typeof Scale;
+  ScalarMappingMode: typeof ScalarMappingMode;
 };
 export default _default;

Sources/Rendering/Core/ColorTransferFunction/Constants.js

@@ -10,7 +10,13 @@ export const Scale = {
   LOG10: 1,
 };
 
+export const ScalarMappingMode = {
+  LINEAR: 0,
+  SIGMOID: 1,
+};
+
 export default {
   ColorSpace,
   Scale,
+  ScalarMappingMode,
 };

Sources/Rendering/Core/ColorTransferFunction/index.d.ts

@@ -1,6 +1,6 @@
 import vtkDataArray from '../../../Common/Core/DataArray';
 import vtkScalarsToColors from '../../../Common/Core/ScalarsToColors';
-import { ColorSpace, Scale } from './Constants';
+import { ColorSpace, ScalarMappingMode, Scale } from './Constants';
 
 export interface vtkColorTransferFunction extends vtkScalarsToColors {
   /**
@@ -336,6 +336,48 @@ export interface vtkColorTransferFunction extends vtkScalarsToColors {
    * @param {Scale} scale
    */
   setScale(scale: Scale): void;
+
+  /**
+   * Get the scalar mapping mode of the color transfer function.
+   * @returns {ScalarMappingMode}
+   */
+  getScalarMappingMode(): ScalarMappingMode;
+
+  /**
+   * Set the scalar mapping mode of the color transfer function.
+   * @param {ScalarMappingMode} mode
+   */
+  setScalarMappingMode(mode: ScalarMappingMode): void;
+
+  /**
+   * Set the scalar mapping mode to a linear.
+   * Scalar values will be mapped linearly to
+   * colormap using the set mappingRange.
+   */
+  setScalarMappingModeToLinear(): void;
+
+  /**
+   * Set the scalar mapping mode to a sigmoid curve.
+   * Scalar values will be mapped to colormap using
+   * a sigmoid function using the set mappingRange.
+   */
+  setScalarMappingModeToSigmoid(): void;
+
+  /**
+   * Get sigmoid growth rate. This controls the
+   * steepness of the sigmoid function used for
+   * scalar mapping.
+   * @returns {number}
+   */
+  getSigmoidGrowthRate(): number;
+
+  /**
+   * Set sigmoid growth rate. This controls the
+   * steepness of the sigmoid function used for
+   * scalar mapping.
+   * @param {number} growthRate
+   */
+  setSigmoidGrowthRate(growthRate: number): void;
 }
 
 /**

Sources/Rendering/Core/ColorTransferFunction/index.js

@@ -3,7 +3,7 @@ import * as vtkMath from 'vtk.js/Sources/Common/Core/Math';
 import vtkScalarsToColors from 'vtk.js/Sources/Common/Core/ScalarsToColors';
 import Constants from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction/Constants';
 
-const { ColorSpace, Scale } = Constants;
+const { ColorSpace, Scale, ScalarMappingMode } = Constants;
 const { ScalarMappingTarget } = vtkScalarsToColors;
 const { vtkDebugMacro, vtkErrorMacro, vtkWarningMacro } = macro;
 
@@ -493,6 +493,8 @@ function vtkColorTransferFunction(publicAPI, model) {
       ];
     }
 
+    const useSigmoid =
+      publicAPI.getScalarMappingMode() === ScalarMappingMode.SIGMOID;
     // For each table entry
     for (let i = 0; i < size; i++) {
       // Find our location in the table
@@ -501,11 +503,23 @@ function vtkColorTransferFunction(publicAPI, model) {
       // Find our X location. If we are taking only 1 sample, make
       // it halfway between start and end (usually start and end will
       // be the same in this case)
+      let c = 0;
+      let w = 0;
       if (size > 1) {
+        c = (xEnd + xStart) / 2.0;
+        w = xEnd - xStart;
         x = xStart + (i / (size - 1.0)) * (xEnd - xStart);
       } else {
+        c = (scaledMappingRange[0] + scaledMappingRange[1]) / 2.0;
+        w = scaledMappingRange[1] - scaledMappingRange[0];
         x = 0.5 * (xStart + xEnd);
       }
+      if (useSigmoid) {
+        // Apply the sigmoid function to x,
+        const y = 1 / (1 + Math.exp((model.sigmoidGrowthRate * (x - c)) / w));
+        // and re-interpret it as a linear parameter.
+        x = y * w + (c - w / 2);
+      }
 
       // Linearly map x from mappingRange to [0, numberOfValues-1],
       // discretize (round down to the closest integer),
@@ -1246,6 +1260,21 @@ function vtkColorTransferFunction(publicAPI, model) {
     }
     isModified = isModified || oldNanColor !== JSON.stringify(model.nanColor);
 
+    if (colorMap.BelowRangeColor) {
+      if (colorMap.BelowRangeColor.length === 3) {
+        publicAPI.setBelowRangeColor([...colorMap.BelowRangeColor, 1]);
+      } else {
+        publicAPI.setBelowRangeColor(colorMap.BelowRangeColor);
+      }
+    }
+    if (colorMap.AboveRangeColor) {
+      if (colorMap.AboveRangeColor.length === 3) {
+        publicAPI.setAboveRangeColor([...colorMap.AboveRangeColor, 1]);
+      } else {
+        publicAPI.setAboveRangeColor(colorMap.AboveRangeColor);
+      }
+    }
+
     const oldNodes = isModified || JSON.stringify(model.nodes);
     if (colorMap.RGBPoints) {
       const size = colorMap.RGBPoints.length;
@@ -1273,6 +1302,12 @@ function vtkColorTransferFunction(publicAPI, model) {
 
     return modifiedInvoked || callModified;
   };
+
+  publicAPI.setScalarMappingModeToLinear = () =>
+    publicAPI.setScalarMappingMode(ScalarMappingMode.LINEAR);
+
+  publicAPI.setScalarMappingModeToSigmoid = () =>
+    publicAPI.setScalarMappingMode(ScalarMappingMode.SIGMOID);
 }
 
 // ----------------------------------------------------------------------------
@@ -1284,6 +1319,7 @@ const DEFAULT_VALUES = {
   colorSpace: ColorSpace.RGB,
   hSVWrap: true,
   scale: Scale.LINEAR,
+  scalarMappingMode: ScalarMappingMode.LINEAR,
 
   nanColor: null,
   belowRangeColor: null,
@@ -1301,6 +1337,7 @@ const DEFAULT_VALUES = {
 
   discretize: false,
   numberOfValues: 256,
+  sigmoidGrowthRate: -4,
 };
 
 // ----------------------------------------------------------------------------
@@ -1331,8 +1368,10 @@ export function extend(publicAPI, model, initialValues = {}) {
     'useBelowRangeColor',
     'discretize',
     'numberOfValues',
+    'sigmoidGrowthRate',
     { type: 'enum', name: 'colorSpace', enum: ColorSpace },
     { type: 'enum', name: 'scale', enum: Scale },
+    { type: 'enum', name: 'scalarMappingMode', enum: ScalarMappingMode },
   ]);
 
   macro.setArray(