@kitware/vtk.js 31.2.0 → 32.0.1

package/BREAKING_CHANGES.md

@@ -1,3 +1,11 @@
+## From 31.x to 32
+
+- **vtkMapper**: remove `mapScalarsToTexture` from the public API. The function becomes protected and its API changes. This shouldn't cause any issue in most cases.
+
+## From 30.x to 31
+
+- **Picking**: write to depth buffer for translucent pass when picking. This change fixes a picking issue with multiple translucent actors overlaid on top of each other. The hardware selector would just register the propID of the last rendered prop. This was because we explicitly turn off writing to the depth buffer when rendering translucent props as OIT doesn't need it. This change enables writing to the depth buffer when picking in the translucent pass. Applications relying on picked propID would see a difference in the IDs returned by the hardware selector.
+
 ## From 29.x to 30
 
 - **ResliceCursorWidget.interactionEvent**: no longer pass an object of `{computeFocalPointOffset, canUpdateFocalPoint}` but simply the type of the handle that triggers the event (e.g. `InteractionMethodsName.RotateLine`). The removed values can easily be recomputed by the consumers of the event by checking the type of the handle. Regarding `computeFocalPointOffset`, it is no longer advised to compute focal point offset for each interaction, instead observing `startInteraction()` should be considered (see ResliceCursorWidget example).

package/Common/Core/LookupTable.js

@@ -60,7 +60,8 @@ function vtkLookupTable(publicAPI, model) {
   publicAPI.usingLogScale = () => false;
 
   //----------------------------------------------------------------------------
-  publicAPI.getNumberOfAvailableColors = () => model.table.length / 4;
+  // Don't count special colors (min, max, NaN) as available colors
+  publicAPI.getNumberOfAvailableColors = () => model.table.length / 4 - 3;
 
   //----------------------------------------------------------------------------
   // Apply shift/scale to the scalar value v and return the index.

package/Rendering/Core/ColorTransferFunction.js

@@ -937,7 +937,9 @@ function vtkColorTransferFunction(publicAPI, model) {
       // has been called.
       return model.tableSize;
     }
-    return 16777216; // 2^24
+    const nNodes = model.nodes?.length ?? 0;
+    // The minimum is 4094 colors so that it fills in the 4096 texels texture in `mapScalarsToTexture`
+    return Math.max(4094, nNodes);
   };
 
   //----------------------------------------------------------------------------

package/Rendering/Core/Mapper.d.ts

@@ -20,11 +20,6 @@ interface IAbstractScalars {
   scalars: Nullable<vtkDataArray>;
 }
 
-interface IScalarToTextureCoordinate {
-  texCoordS: number;
-  texCoordT: number;
-}
-
 export interface IMapperInitialValues extends IAbstractMapper3DInitialValues {
   static?: boolean;
   scalarVisibility?: boolean;
@@ -80,22 +75,6 @@ export interface vtkMapper
    */
   colorToValue(): void;
 
-  /**
-   *
-   * @param input
-   * @param component
-   * @param range
-   * @param tableNumberOfColors
-   * @param useLogScale
-   */
-  createColorTextureCoordinates(
-    input: vtkDataArray,
-    component: number,
-    range: any,
-    tableNumberOfColors: number,
-    useLogScale: boolean
-  ): vtkDataArray;
-
   /**
    * Create default lookup table. Generally used to create one when
    * none is available with the scalar data.
@@ -258,6 +237,11 @@ export interface vtkMapper
    */
   getViewSpecificProperties(): object;
 
+  /**
+   * The number of mapped colors in range
+   */
+  getNumberOfColorsInRange(): number;
+
   /**
    * Map the scalars (if there are any scalars and ScalarVisibility is on)
    * through the lookup table, returning an unsigned char RGBA array. This is
@@ -273,25 +257,6 @@ export interface vtkMapper
    */
   mapScalars(input: any, alpha: number): void;
 
-  /**
-   *
-   * @param scalars
-   * @param {Number} alpha
-   */
-  mapScalarsToTexture(scalars: any, alpha: number): void;
-
-  /**
-   *
-   * @param {Number} scalarValue
-   * @param {Number} rangeMin
-   * @param {Number} invRangeWidth
-   */
-  scalarToTextureCoordinate(
-    scalarValue: number,
-    rangeMin: number,
-    invRangeWidth: number
-  ): IScalarToTextureCoordinate;
-
   /**
    *
    * @param {Number} arrayAccessMode

package/Rendering/Core/Mapper.js

@@ -35,6 +35,234 @@ function notImplemented(method) {
   return () => macro.vtkErrorMacro(`vtkMapper::${method} - NOT IMPLEMENTED`);
 }
 
+/**
+ * Increase by one the 3D coordinates
+ * It will follow a zigzag pattern so that each coordinate is the neighbor of the next coordinate
+ * This enables interpolation between two texels without issues
+ * Note: texture coordinates can't be interpolated using this pattern
+ * @param {vec3} coordinates The 3D coordinates using integers for each coorinate
+ * @param {vec3} dimensions The 3D dimensions of the volume
+ */
+function updateZigzaggingCoordinates(coordinates, dimensions) {
+  const directionX = coordinates[1] % 2 === 0 ? 1 : -1;
+  coordinates[0] += directionX;
+  if (coordinates[0] >= dimensions[0] || coordinates[0] < 0) {
+    const directionY = coordinates[2] % 2 === 0 ? 1 : -1;
+    coordinates[0] -= directionX;
+    coordinates[1] += directionY;
+    if (coordinates[1] >= dimensions[1] || coordinates[1] < 0) {
+      coordinates[1] -= directionY;
+      coordinates[2]++;
+    }
+  }
+}
+
+/**
+ * Returns the index in the array representing the volume from a 3D coordinate
+ * @param {vec3} coordinates The 3D integer coordinates
+ * @param {vec3} dimensions The 3D dimensions of the volume
+ * @returns The index in a flat array representing the volume
+ */
+function getIndexFromCoordinates(coordinates, dimensions) {
+  return coordinates[0] + dimensions[0] * (coordinates[1] + dimensions[1] * coordinates[2]);
+}
+
+/**
+ * Write texture coordinates for the given `texelIndexPosition` in `textureCoordinate`.
+ * The `texelIndexPosition` is a floating point number that represents the distance in index space
+ * from the center of the first texel to the final output position.
+ * The output is given in texture coordinates and not in index coordinates (this is done at the very end of the function)
+ * @param {vec3} textureCoordinate The output texture coordinates (to avoid allocating a new Array)
+ * @param {Number} texelIndexPosition The floating point distance from the center of the first texel, following a zigzag pattern
+ * @param {vec3} dimensions The 3D dimensions of the volume
+ */
+function getZigZagTextureCoordinatesFromTexelPosition(textureCoordinate, texelIndexPosition, dimensions) {
+  // First compute the integer textureCoordinate
+  const intTexelIndex = Math.floor(texelIndexPosition);
+  const xCoordBeforeWrap = intTexelIndex % (2 * dimensions[0]);
+  let xDirection;
+  let xEndFlag;
+  if (xCoordBeforeWrap < dimensions[0]) {
+    textureCoordinate[0] = xCoordBeforeWrap;
+    xDirection = 1;
+    xEndFlag = textureCoordinate[0] === dimensions[0] - 1;
+  } else {
+    textureCoordinate[0] = 2 * dimensions[0] - 1 - xCoordBeforeWrap;
+    xDirection = -1;
+    xEndFlag = textureCoordinate[0] === 0;
+  }
+  const intRowIndex = Math.floor(intTexelIndex / dimensions[0]);
+  const yCoordBeforeWrap = intRowIndex % (2 * dimensions[1]);
+  let yDirection;
+  let yEndFlag;
+  if (yCoordBeforeWrap < dimensions[1]) {
+    textureCoordinate[1] = yCoordBeforeWrap;
+    yDirection = 1;
+    yEndFlag = textureCoordinate[1] === dimensions[1] - 1;
+  } else {
+    textureCoordinate[1] = 2 * dimensions[1] - 1 - yCoordBeforeWrap;
+    yDirection = -1;
+    yEndFlag = textureCoordinate[1] === 0;
+  }
+  textureCoordinate[2] = Math.floor(intRowIndex / dimensions[1]);
+
+  // Now add the remainder either in x, y or z
+  const remainder = texelIndexPosition - intTexelIndex;
+  if (xEndFlag) {
+    if (yEndFlag) {
+      textureCoordinate[2] += remainder;
+    } else {
+      textureCoordinate[1] += yDirection * remainder;
+    }
+  } else {
+    textureCoordinate[0] += xDirection * remainder;
+  }
+
+  // textureCoordinates are in index space, convert to texture space
+  textureCoordinate[0] = (textureCoordinate[0] + 0.5) / dimensions[0];
+  textureCoordinate[1] = (textureCoordinate[1] + 0.5) / dimensions[1];
+  textureCoordinate[2] = (textureCoordinate[2] + 0.5) / dimensions[2];
+}
+
+// Associate an input vtkDataArray to an object { stringHash, textureCoordinates }
+// A single dataArray only caches one array of texture coordinates, so this cache is useless when
+// the input data array is used with two different lookup tables (which is very unlikely)
+const colorTextureCoordinatesCache = new WeakMap();
+/**
+ * The minimum of the range is mapped to the center of the first texel excluding min texel (texel at index distance 1)
+ * The maximum of the range is mapped to the center of the last texel excluding max and NaN texels (texel at index distance numberOfColorsInRange)
+ * The result is cached, and is reused if the arguments are the same and the input doesn't change
+ * @param {vtkDataArray} input The input data array used for coloring
+ * @param {Number} component The component of the input data array that is used for coloring (-1 for magnitude of the vectors)
+ * @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)
+ */
+function getOrCreateColorTextureCoordinates(input, component, range, numberOfColorsInRange, dimensions, useLogScale, useZigzagPattern) {
+  // Caching using the "arguments" special object (because it is a pure function)
+  const argStrings = new Array(arguments.length);
+  for (let argIndex = 0; argIndex < arguments.length; ++argIndex) {
+    // eslint-disable-next-line prefer-rest-params
+    const arg = arguments[argIndex];
+    argStrings[argIndex] = arg.getMTime?.() ?? arg;
+  }
+  const stringHash = argStrings.join('/');
+  const cachedResult = colorTextureCoordinatesCache.get(input);
+  if (cachedResult && cachedResult.stringHash === stringHash) {
+    return cachedResult.textureCoordinates;
+  }
+
+  // The range used for computing coordinates have to change
+  // slightly to accommodate the special above- and below-range
+  // colors that are the first and last texels, respectively.
+  const scalarTexelWidth = (range[1] - range[0]) / (numberOfColorsInRange - 1);
+  const [paddedRangeMin, paddedRangeMax] = [range[0] - scalarTexelWidth, range[1] + scalarTexelWidth];
+
+  // Use the center of the voxel
+  const textureSOrigin = paddedRangeMin - 0.5 * scalarTexelWidth;
+  const textureSCoeff = 1.0 / (paddedRangeMax - paddedRangeMin + scalarTexelWidth);
+
+  // Compute in index space first
+  const texelIndexOrigin = paddedRangeMin;
+  const texelIndexCoeff = (numberOfColorsInRange + 1) / (paddedRangeMax - paddedRangeMin);
+  const inputV = input.getData();
+  const numScalars = input.getNumberOfTuples();
+  const numComps = input.getNumberOfComponents();
+  const useMagnitude = component < 0 || component >= numComps;
+  const numberOfOutputComponents = dimensions[2] <= 1 ? 2 : 3;
+  const output = vtkDataArray.newInstance({
+    numberOfComponents: numberOfOutputComponents,
+    values: new Float32Array(numScalars * numberOfOutputComponents)
+  });
+  const outputV = output.getData();
+  const nanTextureCoordinate = [0, 0, 0];
+  // Distance of NaN from the beginning:
+  // min: 0, ...colorsInRange, max: numberOfColorsInRange + 1, NaN = numberOfColorsInRange + 2
+  getZigZagTextureCoordinatesFromTexelPosition(nanTextureCoordinate, numberOfColorsInRange + 2, dimensions);
+
+  // Set a texture coordinate in the output for each tuple in the input
+  let inputIdx = 0;
+  let outputIdx = 0;
+  const textureCoordinate = [0.5, 0.5, 0.5];
+  for (let scalarIdx = 0; scalarIdx < numScalars; ++scalarIdx) {
+    // Get scalar value from magnitude or a single component
+    let scalarValue;
+    if (useMagnitude) {
+      let sum = 0;
+      for (let compIdx = 0; compIdx < numComps; ++compIdx) {
+        const compValue = inputV[inputIdx + compIdx];
+        sum += compValue * compValue;
+      }
+      scalarValue = Math.sqrt(sum);
+    } else {
+      scalarValue = inputV[inputIdx + component];
+    }
+    inputIdx += numComps;
+
+    // Apply log scale if necessary
+    if (useLogScale) {
+      scalarValue = vtkLookupTable.applyLogScale(scalarValue, range, range);
+    }
+
+    // Convert to texture coordinates and update output
+    if (isNan(scalarValue)) {
+      // Last texels are NaN colors (there is at least one NaN color)
+      textureCoordinate[0] = nanTextureCoordinate[0];
+      textureCoordinate[1] = nanTextureCoordinate[1];
+      textureCoordinate[2] = nanTextureCoordinate[2];
+    } else if (useZigzagPattern) {
+      // Texel position is in [0, numberOfColorsInRange + 1]
+      let texelIndexPosition = (scalarValue - texelIndexOrigin) * texelIndexCoeff;
+      if (texelIndexPosition < 1) {
+        // Use min color when smaller than range
+        texelIndexPosition = 0;
+      } else if (texelIndexPosition > numberOfColorsInRange) {
+        // Use max color when greater than range
+        texelIndexPosition = numberOfColorsInRange + 1;
+      }
+
+      // Convert the texel position into texture coordinate following a zigzag pattern
+      getZigZagTextureCoordinatesFromTexelPosition(textureCoordinate, texelIndexPosition, dimensions);
+    } else {
+      // 0.0 in t coordinate means not NaN.  So why am I setting it to 0.49?
+      // Because when you are mapping scalars and you have a NaN adjacent to
+      // anything else, the interpolation everywhere should be NaN.  Thus, I
+      // want the NaN color everywhere except right on the non-NaN neighbors.
+      // To simulate this, I set the t coord for the real numbers close to
+      // the threshold so that the interpolation almost immediately looks up
+      // the NaN value.
+      textureCoordinate[1] = 0.49;
+
+      // Some implementations apparently don't handle relatively large
+      // numbers (compared to the range [0.0, 1.0]) very well. In fact,
+      // values above 1122.0f appear to cause texture wrap-around on
+      // some systems even when edge clamping is enabled. Why 1122.0f? I
+      // don't know. For safety, we'll clamp at +/- 1000. This will
+      // result in incorrect images when the texture value should be
+      // above or below 1000, but I don't have a better solution.
+      const textureS = (scalarValue - textureSOrigin) * textureSCoeff;
+      if (textureS > 1000.0) {
+        textureCoordinate[0] = 1000.0;
+      } else if (textureS < -1000.0) {
+        textureCoordinate[0] = -1000.0;
+      } else {
+        textureCoordinate[0] = textureS;
+      }
+    }
+    for (let i = 0; i < numberOfOutputComponents; ++i) {
+      outputV[outputIdx++] = textureCoordinate[i];
+    }
+  }
+  colorTextureCoordinatesCache.set(input, {
+    stringHash,
+    textureCoordinates: output
+  });
+  return output;
+}
+
 // ----------------------------------------------------------------------------
 // vtkMapper methods
 // ----------------------------------------------------------------------------
@@ -85,7 +313,7 @@ function vtkMapper(publicAPI, model) {
     if (!input || !model.scalarVisibility) {
       return {
         scalars: null,
-        cellFLag: false
+        cellFlag: false
       };
     }
     let scalars = null;
@@ -155,7 +383,7 @@ function vtkMapper(publicAPI, model) {
     // Cell data always uses vertex color.
     // Only point data can use both texture and vertex coloring.
     if (publicAPI.canUseTextureMapForColoring(scalars, cellFlag)) {
-      publicAPI.mapScalarsToTexture(scalars, alpha);
+      model.mapScalarsToTexture(scalars, cellFlag, alpha);
     } else {
       model.colorCoordinates = null;
       model.colorTextureMap = null;
@@ -169,98 +397,8 @@ function vtkMapper(publicAPI, model) {
     model.colorBuildString = `${publicAPI.getMTime()}${scalars.getMTime()}${alpha}`;
   };
 
-  //-----------------------------------------------------------------------------
-  publicAPI.scalarToTextureCoordinate = (scalarValue,
-  // Input scalar
-  rangeMin,
-  // range[0]
-  invRangeWidth) => {
-    // 1/(range[1]-range[0])
-    let texCoordS = 0.5; // Scalar value is arbitrary when NaN
-    let texCoordT = 1.0; // 1.0 in t coordinate means NaN
-    if (!isNan(scalarValue)) {
-      // 0.0 in t coordinate means not NaN.  So why am I setting it to 0.49?
-      // Because when you are mapping scalars and you have a NaN adjacent to
-      // anything else, the interpolation everywhere should be NaN.  Thus, I
-      // want the NaN color everywhere except right on the non-NaN neighbors.
-      // To simulate this, I set the t coord for the real numbers close to
-      // the threshold so that the interpolation almost immediately looks up
-      // the NaN value.
-      texCoordT = 0.49;
-      texCoordS = (scalarValue - rangeMin) * invRangeWidth;
-
-      // Some implementations apparently don't handle relatively large
-      // numbers (compared to the range [0.0, 1.0]) very well. In fact,
-      // values above 1122.0f appear to cause texture wrap-around on
-      // some systems even when edge clamping is enabled. Why 1122.0f? I
-      // don't know. For safety, we'll clamp at +/- 1000. This will
-      // result in incorrect images when the texture value should be
-      // above or below 1000, but I don't have a better solution.
-      if (texCoordS > 1000.0) {
-        texCoordS = 1000.0;
-      } else if (texCoordS < -1000.0) {
-        texCoordS = -1000.0;
-      }
-    }
-    return {
-      texCoordS,
-      texCoordT
-    };
-  };
-
-  //-----------------------------------------------------------------------------
-  publicAPI.createColorTextureCoordinates = (input, component, range, tableNumberOfColors, useLogScale) => {
-    // We have to change the range used for computing texture
-    // coordinates slightly to accommodate the special above- and
-    // below-range colors that are the first and last texels,
-    // respectively.
-    const scalarTexelWidth = (range[1] - range[0]) / tableNumberOfColors;
-    const paddedRange = [range[0] - scalarTexelWidth, range[1] + scalarTexelWidth];
-    const invRangeWidth = 1.0 / (paddedRange[1] - paddedRange[0]);
-    const inputV = input.getData();
-    const numScalars = input.getNumberOfTuples();
-    const numComps = input.getNumberOfComponents();
-    const output = vtkDataArray.newInstance({
-      numberOfComponents: 2,
-      values: new Float32Array(numScalars * 2)
-    });
-    const outputV = output.getData();
-    if (component < 0 || component >= numComps) {
-      // Convert the magnitude of all components to texture coordinates
-      let inputIdx = 0;
-      let outputIdx = 0;
-      for (let scalarIdx = 0; scalarIdx < numScalars; ++scalarIdx) {
-        let sum = 0;
-        for (let compIdx = 0; compIdx < numComps; ++compIdx) {
-          sum += inputV[inputIdx] * inputV[inputIdx];
-          inputIdx++;
-        }
-        let magnitude = Math.sqrt(sum);
-        if (useLogScale) {
-          magnitude = vtkLookupTable.applyLogScale(magnitude, range, range);
-        }
-        const outputs = publicAPI.scalarToTextureCoordinate(magnitude, paddedRange[0], invRangeWidth);
-        outputV[outputIdx++] = outputs.texCoordS;
-        outputV[outputIdx++] = outputs.texCoordT;
-      }
-    } else {
-      // Convert one of the components to texture coordinates
-      let inputIdx = component;
-      let outputIdx = 0;
-      for (let scalarIdx = 0; scalarIdx < numScalars; ++scalarIdx) {
-        let inputValue = inputV[inputIdx];
-        if (useLogScale) {
-          inputValue = vtkLookupTable.applyLogScale(inputValue, range, range);
-        }
-        const outputs = publicAPI.scalarToTextureCoordinate(inputValue, paddedRange[0], invRangeWidth);
-        outputV[outputIdx++] = outputs.texCoordS;
-        outputV[outputIdx++] = outputs.texCoordT;
-        inputIdx += numComps;
-      }
-    }
-    return output;
-  };
-  publicAPI.mapScalarsToTexture = (scalars, alpha) => {
+  // Protected method
+  model.mapScalarsToTexture = (scalars, cellFlag, alpha) => {
     const range = model.lookupTable.getRange();
     const useLogScale = model.lookupTable.usingLogScale();
     if (useLogScale) {
@@ -284,28 +422,52 @@ function vtkMapper(publicAPI, model) {
       // Create a dummy ramp of scalars.
       // In the future, we could extend vtkScalarsToColors.
       model.lookupTable.build();
-      const numberOfColorsInRange = Math.min(Math.max(model.lookupTable.getNumberOfAvailableColors(), 64), 4094);
-      // Texel width is computed before min and max colors that are out of range
-      const scalarTexelWidth = (range[1] - range[0]) / numberOfColorsInRange;
-      // Add two colors for special min and max colors
-      const totalNumberOfColors = numberOfColorsInRange + 2;
-      const newArray = new Float64Array(totalNumberOfColors * 2);
-      for (let i = 0; i < totalNumberOfColors; ++i) {
-        // minus 0.5 to start at below range color
-        newArray[i] = range[0] + (i - 0.5) * scalarTexelWidth;
-        if (useLogScale) {
-          newArray[i] = 10.0 ** newArray[i];
-        }
+      const numberOfAvailableColors = model.lookupTable.getNumberOfAvailableColors();
+
+      // Maximum dimensions and number of colors in range
+      const maxTextureWidthForCells = 2048;
+      const maxColorsInRangeForCells = maxTextureWidthForCells ** 3 - 3; // 3D but keep a color for min, max and NaN
+      const maxTextureWidthForPoints = 4096;
+      const maxColorsInRangeForPoints = maxTextureWidthForPoints - 2; // 1D but keep a color for min and max (NaN is in a different row)
+      // Minimum number of colors in range (excluding special colors like minColor, maxColor and NaNColor)
+      const minColorsInRange = 2;
+      // Maximum number of colors, limited by the maximum possible texture size
+      const maxColorsInRange = cellFlag ? maxColorsInRangeForCells : maxColorsInRangeForPoints;
+      model.numberOfColorsInRange = Math.min(Math.max(numberOfAvailableColors, minColorsInRange), maxColorsInRange);
+      const numberOfColorsForCells = model.numberOfColorsInRange + 3; // Add min, max and NaN
+      const numberOfColorsInUpperRowForPoints = model.numberOfColorsInRange + 2; // Add min and max ; the lower row will be used for NaN color
+      const textureDimensions = cellFlag ? [Math.min(Math.ceil(numberOfColorsForCells / maxTextureWidthForCells ** 0), maxTextureWidthForCells), Math.min(Math.ceil(numberOfColorsForCells / maxTextureWidthForCells ** 1), maxTextureWidthForCells), Math.min(Math.ceil(numberOfColorsForCells / maxTextureWidthForCells ** 2), maxTextureWidthForCells)] : [numberOfColorsInUpperRowForPoints, 2, 1];
+      const textureSize = textureDimensions[0] * textureDimensions[1] * textureDimensions[2];
+      const scalarsArray = new Float64Array(textureSize);
+
+      // Colors for NaN by default
+      scalarsArray.fill(NaN);
+
+      // Colors in range
+      // Add 2 to also get color for min and max
+      const numberOfNonSpecialColors = model.numberOfColorsInRange;
+      const numberOfNonNaNColors = numberOfNonSpecialColors + 2;
+      const textureCoordinates = [0, 0, 0];
+      const rangeMin = range[0];
+      const rangeDifference = range[1] - range[0];
+      for (let i = 0; i < numberOfNonNaNColors; ++i) {
+        const scalarsArrayIndex = getIndexFromCoordinates(textureCoordinates, textureDimensions);
+
+        // Minus 1 start at min color
+        const scalarValue = rangeMin + rangeDifference * (i - 1) / (numberOfNonSpecialColors - 1);
+        scalarsArray[scalarsArrayIndex] = useLogScale ? 10.0 ** scalarValue : scalarValue;
+
+        // Colors are zigzagging to allow interpolation between two neighbor colors when coloring cells
+        updateZigzaggingCoordinates(textureCoordinates, textureDimensions);
       }
-      // Dimension on NaN.
-      newArray.fill(NaN, totalNumberOfColors);
-      model.colorTextureMap = vtkImageData.newInstance();
-      model.colorTextureMap.setExtent(0, totalNumberOfColors - 1, 0, 1, 0, 0);
-      const tmp = vtkDataArray.newInstance({
+      const scalarsDataArray = vtkDataArray.newInstance({
         numberOfComponents: 1,
-        values: newArray
+        values: scalarsArray
       });
-      model.colorTextureMap.getPointData().setScalars(model.lookupTable.mapScalars(tmp, model.colorMode, 0));
+      const colorsDataArray = model.lookupTable.mapScalars(scalarsDataArray, model.colorMode, 0);
+      model.colorTextureMap = vtkImageData.newInstance();
+      model.colorTextureMap.setDimensions(textureDimensions);
+      model.colorTextureMap.getPointData().setScalars(colorsDataArray);
       model.lookupTable.setAlpha(origAlpha);
     }
 
@@ -313,17 +475,12 @@ function vtkMapper(publicAPI, model) {
     // scalars, it is not how the old MapScalars for vertex coloring works.
     const scalarComponent = model.lookupTable.getVectorMode() === VectorMode.MAGNITUDE && scalars.getNumberOfComponents() > 1 ? -1 : model.lookupTable.getVectorComponent();
 
-    // Reverse the computation of numberOfColorsInRange that is used to compute model.colorTextureMap
-    const textureMapTuples = model.colorTextureMap.getPointData().getScalars().getNumberOfTuples();
-    const totalNumberOfColors = textureMapTuples / 2;
-    const numberOfColorsInRange = totalNumberOfColors - 2;
-
-    // Create new coordinates if necessary.
-    const colorCoordinatesString = `${scalars.getMTime()}/${scalarComponent}/${range}/${numberOfColorsInRange}/${useLogScale}`;
-    if (colorCoordinatesString !== model.colorCoordinatesString) {
-      model.colorCoordinates = publicAPI.createColorTextureCoordinates(scalars, scalarComponent, range, numberOfColorsInRange, useLogScale);
-      model.colorCoordinatesString = colorCoordinatesString;
-    }
+    // Create new coordinates if necessary, this function uses cache if possible.
+    // A zigzag pattern can't be used with point data, as interpolation of texture coordinates will be wrong
+    // A zigzag pattern can be used with cell data, as there will be no texture coordinates interpolation
+    // The texture generated using a zigzag pattern in one dimension is the same as without zigzag
+    // Therefore, the same code can be used for texture generation of point/cell data but not for texture coordinates
+    model.colorCoordinates = getOrCreateColorTextureCoordinates(scalars, scalarComponent, range, model.numberOfColorsInRange, model.colorTextureMap.getDimensions(), useLogScale, cellFlag);
   };
   publicAPI.getIsOpaque = () => {
     const input = publicAPI.getInputData();
@@ -438,11 +595,11 @@ function vtkMapper(publicAPI, model) {
         let inValue = 0;
         inValue += rawHighData[pos];
         inValue *= 256;
-        inValue += rawLowData[pos];
+        inValue += rawLowData[pos + 2];
         inValue *= 256;
         inValue += rawLowData[pos + 1];
         inValue *= 256;
-        inValue += rawLowData[pos + 2];
+        inValue += rawLowData[pos];
         const outValue = idMap[inValue];
         const highData = selector.getPixelBuffer(PassTypes.ID_HIGH24);
         highData[pos] = (outValue & 0xff000000) >> 24;
@@ -478,6 +635,7 @@ const DEFAULT_VALUES = {
   interpolateScalarsBeforeMapping: false,
   colorCoordinates: null,
   colorTextureMap: null,
+  numberOfColorsInRange: 0,
   forceCompileOnly: 0,
   useInvertibleColors: false,
   invertibleScalars: null,
@@ -492,7 +650,7 @@ function extend(publicAPI, model) {
 
   // Inheritance
   vtkAbstractMapper3D.extend(publicAPI, model, initialValues);
-  macro.get(publicAPI, model, ['areScalarsMappedFromCells', 'colorCoordinates', 'colorMapColors', 'colorTextureMap', 'selectionWebGLIdsToVTKIds']);
+  macro.get(publicAPI, model, ['areScalarsMappedFromCells', 'colorCoordinates', 'colorMapColors', 'colorTextureMap', 'numberOfColorsInRange', 'selectionWebGLIdsToVTKIds']);
   macro.setGet(publicAPI, model, ['colorByArrayName', 'arrayAccessMode', 'colorMode', 'fieldDataTupleId', 'interpolateScalarsBeforeMapping', 'lookupTable', 'populateSelectionSettings', 'renderTime', 'scalarMode', 'scalarVisibility', 'static', 'useLookupTableScalarRange', 'customShaderAttributes' // point data array names that will be transferred to the VBO
   ]);
 

package/Rendering/Core/Mapper2D.d.ts

@@ -34,11 +34,6 @@ interface IAbstractScalars {
   cellFlag: boolean;
 }
 
-interface IScalarToTextureCoordinate {
-  texCoordS: number;
-  texCoordT: number;
-}
-
 export interface IMapper2DInitialValues extends IAbstractMapperInitialValues {
   arrayAccessMode?: number;
   colorMode?: number;

package/Rendering/OpenGL/HardwareSelector.d.ts

@@ -331,6 +331,23 @@ export function extend(
   initialValues?: IOpenGLHardwareSelectorInitialValues
 ): void;
 
+/**
+ * The WebGL implementation of the hardware selector renders the id of the VBO
+ * vertices (gl_VertexID) with an offset to a RGBA texture.
+ * Only the RGB channels of the RGBA texture are used. This means that a single
+ * render can only draw 24 bits of information. To reach 32 bits, the hardware
+ * selector renders a second pass which only writes in the R channel of the
+ * texture.
+ *
+ * Note:
+ * - With Webgl 2, it is now possible to render directly to a R32 texture and
+ * even render to multiple render targets.
+ * - The raw pixel buffers fetched from WebGL are processed in the core mapper
+ * (see `processSelectorPixelBuffers`) instead of the PolydataMapper.
+ * - The processing of the raw pixel buffers does not output an UInt32Array as
+ * we could expect, but one or two textures with the same layout as the RGBA
+ * textures as input.
+ */
 export const vtkOpenGLHardwareSelector: {
   newInstance: typeof newInstance;
   extend: typeof extend;

package/Rendering/OpenGL/HardwareSelector.js

@@ -358,6 +358,7 @@ function vtkOpenGLHardwareSelector(publicAPI, model) {
     model._renderer.setBackground(0.0, 0.0, 0.0, 0.0);
     const rpasses = model._openGLRenderWindow.getRenderPasses();
     publicAPI.beginSelection();
+    const pixelBufferSavedPasses = [];
     for (model.currentPass = PassTypes.MIN_KNOWN_PASS; model.currentPass <= PassTypes.MAX_KNOWN_PASS; model.currentPass++) {
       if (publicAPI.passRequired(model.currentPass)) {
         publicAPI.preCapturePass(model.currentPass);
@@ -369,9 +370,16 @@ function vtkOpenGLHardwareSelector(publicAPI, model) {
         }
         publicAPI.postCapturePass(model.currentPass);
         publicAPI.savePixelBuffer(model.currentPass);
-        publicAPI.processPixelBuffers();
+        pixelBufferSavedPasses.push(model.currentPass);
       }
     }
+
+    // Process pixel buffers
+    pixelBufferSavedPasses.forEach(pass => {
+      model.currentPass = pass;
+      publicAPI.processPixelBuffers();
+    });
+    model.currentPass = PassTypes.MAX_KNOWN_PASS;
     publicAPI.endSelection();
 
     // restore original background
@@ -631,9 +639,9 @@ function vtkOpenGLHardwareSelector(publicAPI, model) {
 
   //----------------------------------------------------------------------------
 
-  publicAPI.attach = (w, r) => {
-    model._openGLRenderWindow = w;
-    model._renderer = r;
+  publicAPI.attach = (openGLRenderWindow, renderer) => {
+    model._openGLRenderWindow = openGLRenderWindow;
+    model._renderer = renderer;
   };
 
   // override

package/Rendering/OpenGL/PolyDataMapper.js

@@ -438,7 +438,7 @@ function vtkOpenGLPolyDataMapper(publicAPI, model) {
         FSSource = vtkShaderProgram.substitute(FSSource, '//VTK::Picking::Impl', '  gl_FragData[0] = vec4(float(idx%256)/255.0, float((idx/256)%256)/255.0, float((idx/65536)%256)/255.0, 1.0);').result;
         break;
       case PassTypes.ID_HIGH24:
-        FSSource = vtkShaderProgram.substitute(FSSource, '//VTK::Picking::Impl', '  gl_FragData[0] = vec4(float(idx)/255.0, 0.0, 0.0, 1.0);').result;
+        FSSource = vtkShaderProgram.substitute(FSSource, '//VTK::Picking::Impl', '  gl_FragData[0] = vec4(float((idx/16777216)%256)/255.0, 0.0, 0.0, 1.0);').result;
         break;
       default:
         FSSource = vtkShaderProgram.substitute(FSSource, '//VTK::Picking::Dec', 'uniform vec3 mapperIndex;').result;
@@ -953,6 +953,8 @@ function vtkOpenGLPolyDataMapper(publicAPI, model) {
     if (publicAPI.getNeedToRebuildBufferObjects(ren, actor)) {
       publicAPI.buildBufferObjects(ren, actor);
     }
+    // Always call this function as the selector can change
+    publicAPI.updateMaximumPointCellIds();
   };
   publicAPI.getNeedToRebuildBufferObjects = (ren, actor) => {
     // first do a coarse check
@@ -1092,7 +1094,6 @@ function vtkOpenGLPolyDataMapper(publicAPI, model) {
       }
       if (model.renderable.getPopulateSelectionSettings()) {
         model.renderable.setSelectionWebGLIdsToVTKIds(model.selectionWebGLIdsToVTKIds);
-        publicAPI.updateMaximumPointCellIds();
       }
       model.VBOBuildString = toString;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitware/vtk.js",
-  "version": "31.2.0",
+  "version": "32.0.1",
   "description": "Visualization Toolkit for the Web",
   "keywords": [
     "3d",