feat(colortransferfunction, mapper): logarithmic scales support for ColorTransferFunction

Allows log scaling for ScalarBar as well as as Mappers using ColorTransferFunction.

BREAKING CHANGE: Previous log scaling was disabled but functionality is now quite different from
what it maybe was before it was disabled. ColorTransfer function now maps the model.nodes in
logarithmic scales so there's an even spacing between powers of ten.

Author: Antti-Palola

Sources/Common/Core/ScalarsToColors/Constants.js

@@ -11,7 +11,13 @@ export const ScalarMappingTarget = {
   RGBA: 4,
 };
 
+export const Scale = {
+  LINEAR: 0,
+  LOG10: 1,
+};
+
 export default {
   VectorMode,
   ScalarMappingTarget,
+  Scale,
 };

Sources/Common/Core/ScalarsToColors/index.js

@@ -3,7 +3,7 @@ import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
 import Constants from 'vtk.js/Sources/Common/Core/ScalarsToColors/Constants';
 import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper/Constants'; // Need to go inside Constants otherwise dependency loop
 
-const { ScalarMappingTarget, VectorMode } = Constants;
+const { ScalarMappingTarget, Scale, VectorMode } = Constants;
 const { VtkDataTypes } = vtkDataArray;
 const { ColorMode } = vtkMapper;
 const { vtkErrorMacro } = macro;
@@ -553,6 +553,7 @@ const DEFAULT_VALUES = {
   annotationArray: null,
   annotatedValueMap: null,
   indexedLookup: false,
+  scale: Scale.LINEAR,
 };
 
 // ----------------------------------------------------------------------------

Sources/Rendering/Core/ColorTransferFunction/index.js

@@ -430,12 +430,22 @@ function vtkColorTransferFunction(publicAPI, model) {
     return rgb[2];
   };
 
+  publicAPI.logScaleEnabled = () => model.scale === Scale.LOG10;
+
+  publicAPI.usingLogScale = () =>
+    publicAPI.logScaleEnabled() && model.mappingRange[0] > 0.0;
+
   //----------------------------------------------------------------------------
   // Returns a table of RGB colors at regular intervals along the function
   publicAPI.getTable = (xStart_, xEnd_, size, table) => {
+    // Note: This requires range[0] <= range[1].
+    const usingLogScale = publicAPI.usingLogScale();
+
     // To handle BigInt limitation
-    const xStart = Number(xStart_);
-    const xEnd = Number(xEnd_);
+    const xStart = usingLogScale
+      ? Math.log10(Number(xStart_))
+      : Number(xStart_);
+    const xEnd = usingLogScale ? Math.log10(Number(xEnd_)) : Number(xEnd_);
 
     // Special case: If either the start or end is a NaN, then all any
     // interpolation done on them is also a NaN.  Therefore, fill the table with
@@ -475,18 +485,12 @@ function vtkColorTransferFunction(publicAPI, model) {
     const tmpVec = [];
 
     // If the scale is logarithmic, make sure the range is valid.
-    let usingLogScale = model.scale === Scale.LOG10;
+    let scaledMappingRange = model.mappingRange;
     if (usingLogScale) {
-      // Note: This requires range[0] <= range[1].
-      usingLogScale = model.mappingRange[0] > 0.0;
-    }
-
-    let logStart = 0.0;
-    let logEnd = 0.0;
-    let logX = 0.0;
-    if (usingLogScale) {
-      logStart = Math.log10(xStart);
-      logEnd = Math.log10(xEnd);
+      scaledMappingRange = [
+        Math.log10(model.mappingRange[0]),
+        Math.log10(model.mappingRange[1]),
+      ];
     }
 
     // For each table entry
@@ -498,15 +502,7 @@ function vtkColorTransferFunction(publicAPI, model) {
       // it halfway between start and end (usually start and end will
       // be the same in this case)
       if (size > 1) {
-        if (usingLogScale) {
-          logX = logStart + (i / (size - 1.0)) * (logEnd - logStart);
-          x = 10.0 ** logX;
-        } else {
-          x = xStart + (i / (size - 1.0)) * (xEnd - xStart);
-        }
-      } else if (usingLogScale) {
-        logX = 0.5 * (logStart + logEnd);
-        x = 10.0 ** logX;
+        x = xStart + (i / (size - 1.0)) * (xEnd - xStart);
       } else {
         x = 0.5 * (xStart + xEnd);
       }
@@ -515,7 +511,7 @@ function vtkColorTransferFunction(publicAPI, model) {
       // discretize (round down to the closest integer),
       // then map back to mappingRange
       if (model.discretize) {
-        const range = model.mappingRange;
+        const range = scaledMappingRange;
         if (x >= range[0] && x <= range[1]) {
           const numberOfValues = model.numberOfValues;
           const deltaRange = range[1] - range[0];
@@ -543,10 +539,6 @@ function vtkColorTransferFunction(publicAPI, model) {
         if (idx < numNodes) {
           x1 = model.nodes[idx - 1].x;
           x2 = model.nodes[idx].x;
-          if (usingLogScale) {
-            x1 = Math.log10(x1);
-            x2 = Math.log10(x2);
-          }
 
           rgb1[0] = model.nodes[idx - 1].r;
           rgb2[0] = model.nodes[idx].r;
@@ -575,7 +567,7 @@ function vtkColorTransferFunction(publicAPI, model) {
       }
 
       // Are we at or past the end? If so, just use the last value
-      if (x > model.mappingRange[1]) {
+      if (x > scaledMappingRange[1]) {
         table[tidx] = 0.0;
         table[tidx + 1] = 0.0;
         table[tidx + 2] = 0.0;
@@ -590,7 +582,7 @@ function vtkColorTransferFunction(publicAPI, model) {
             table[tidx + 2] = lastB;
           }
         }
-      } else if (x < model.mappingRange[0] || (vtkMath.isInf(x) && x < 0)) {
+      } else if (x < scaledMappingRange[0] || (vtkMath.isInf(x) && x < 0)) {
         // we are before the first node? If so, duplicate this node's values.
         // We have to deal with -inf here
         table[tidx] = 0.0;
@@ -627,11 +619,7 @@ function vtkColorTransferFunction(publicAPI, model) {
         // sharpness to get the curve shape we want and to have
         // it pass through (y1+y2)/2 at the midpoint.
         let s = 0.0;
-        if (usingLogScale) {
-          s = (logX - x1) / (x2 - x1);
-        } else {
-          s = (x - x1) / (x2 - x1);
-        }
+        s = (x - x1) / (x2 - x1);
 
         // Readjust based on the midpoint - linear adjustment
         if (s < midpoint) {
@@ -1064,7 +1052,10 @@ function vtkColorTransferFunction(publicAPI, model) {
   //----------------------------------------------------------------------------
   publicAPI.setMappingRange = (min, max) => {
     const range = [min, max];
+    const scaledRange = [min, max];
     const originalRange = publicAPI.getRange();
+    const logScaleEnabled = publicAPI.logScaleEnabled();
+
     if (originalRange[1] === range[1] && originalRange[0] === range[0]) {
       return;
     }
@@ -1074,8 +1065,20 @@ function vtkColorTransferFunction(publicAPI, model) {
       return;
     }
 
-    const scale = (range[1] - range[0]) / (originalRange[1] - originalRange[0]);
-    const shift = range[0] - originalRange[0] * scale;
+    if (logScaleEnabled) {
+      if (range[0] <= 0.0) {
+        console.warn(
+          'attempt to set log scale color range with non-positive minimum'
+        );
+      } else {
+        scaledRange[0] = Math.log10(range[0]);
+        scaledRange[1] = Math.log10(range[1]);
+      }
+    }
+
+    const scale =
+      (scaledRange[1] - scaledRange[0]) / (originalRange[1] - originalRange[0]);
+    const shift = scaledRange[0] - originalRange[0] * scale;
 
     for (let i = 0; i < model.nodes.length; ++i) {
       model.nodes[i].x = model.nodes[i].x * scale + shift;

Sources/Rendering/Core/Mapper/index.js

@@ -138,7 +138,6 @@ const colorTextureCoordinatesCache = new WeakMap();
  * @param {Range} range The range of the scalars
  * @param {Number} numberOfColorsInRange The number of colors that are used in the range
  * @param {vec3} dimensions The dimensions of the texture
- * @param {boolean} useLogScale If log scale should be used to transform input scalars
  * @param {boolean} useZigzagPattern If a zigzag pattern should be used. Otherwise 1 row for colors (including min and max) and 1 row for NaN are used.
  * @returns A vtkDataArray containing the texture coordinates (2D or 3D)
  */
@@ -148,7 +147,6 @@ function getOrCreateColorTextureCoordinates(
   range,
   numberOfColorsInRange,
   dimensions,
-  useLogScale,
   useZigzagPattern
 ) {
   // Caching using the "arguments" special object (because it is a pure function)
@@ -223,11 +221,6 @@ function getOrCreateColorTextureCoordinates(
     }
     inputIdx += numComps;
 
-    // Apply log scale if necessary
-    if (useLogScale) {
-      scalarValue = vtkLookupTable.applyLogScale(scalarValue, range, range);
-    }
-
     // Convert to texture coordinates and update output
     if (vtkMath.isNan(scalarValue)) {
       // Last texels are NaN colors (there is at least one NaN color)
@@ -452,11 +445,6 @@ function vtkMapper(publicAPI, model) {
   model.mapScalarsToTexture = (scalars, cellFlag, alpha) => {
     const range = model.lookupTable.getRange();
     const useLogScale = model.lookupTable.usingLogScale();
-    if (useLogScale) {
-      // convert range to log.
-      vtkLookupTable.getLogRange(range, range);
-    }
-
     const origAlpha = model.lookupTable.getAlpha();
 
     // Get rid of vertex color array.  Only texture or vertex coloring
@@ -529,21 +517,27 @@ function vtkMapper(publicAPI, model) {
       const numberOfNonSpecialColors = model.numberOfColorsInRange;
       const numberOfNonNaNColors = numberOfNonSpecialColors + 2;
       const textureCoordinates = [0, 0, 0];
-      const rangeMin = range[0];
-      const rangeDifference = range[1] - range[0];
+
+      const scaledRange = useLogScale
+        ? [Math.log10(range[0]), Math.log10(range[1])]
+        : range;
+      const rangeMin = scaledRange[0];
+      const rangeDifference = scaledRange[1] - scaledRange[0];
       for (let i = 0; i < numberOfNonNaNColors; ++i) {
         const scalarsArrayIndex = getIndexFromCoordinates(
           textureCoordinates,
           textureDimensions
         );
 
         // Minus 1 start at min color
-        const scalarValue =
+        const intermediateValue =
           rangeMin +
           (rangeDifference * (i - 1)) / (numberOfNonSpecialColors - 1);
-        scalarsArray[scalarsArrayIndex] = useLogScale
-          ? 10.0 ** scalarValue
-          : scalarValue;
+        const scalarValue = useLogScale
+          ? 10.0 ** intermediateValue
+          : intermediateValue;
+
+        scalarsArray[scalarsArrayIndex] = scalarValue;
 
         // Colors are zigzagging to allow interpolation between two neighbor colors when coloring cells
         updateZigzaggingCoordinates(textureCoordinates, textureDimensions);
@@ -585,7 +579,6 @@ function vtkMapper(publicAPI, model) {
       range,
       model.numberOfColorsInRange,
       model.colorTextureMap.getDimensions(),
-      useLogScale,
       cellFlag
     );
   };

Sources/Rendering/Core/ScalarBarActor/example/controlPanel.html

@@ -2,13 +2,13 @@
   <tr>
     <td>Min:</td>
     <td>
-      <input type="number" id="min" value="0"></input>
+      <input type="number" id="min" value="0.1"></input>
     </td>
   </tr>
   <tr>
     <td>Max:</td>
     <td>
-      <input type="number" id="max" value="0.25">
+      <input type="number" id="max" value="1000">
     </td>
   </tr>
   <tr>