@kitware/vtk.js 32.12.2 → 32.14.0

package/Rendering/Core/AbstractImageMapper.d.ts

@@ -122,6 +122,87 @@ export interface vtkAbstractImageMapper extends vtkAbstractMapper3D {
    * @param customDisplayExtent
    */
   setCustomDisplayExtentFrom(customDisplayExtent: number[]): boolean;
+
+  /**
+   * Set the opacity texture width.
+   *
+   * The default width (1024) should be fine in most instances.
+   * Only set this property if your opacity function range width is
+   * larger than 1024.
+   *
+   * A reasonable max texture size would be either 2048 or 4096, as those
+   * widths are supported by the vast majority of devices. Any width larger
+   * than that will have issues with device support.
+   *
+   * Specifying a width that is less than or equal to 0 will use the largest
+   * possible texture width on the device. Use this with caution! The max texture
+   * width of one device may not be the same for another device.
+   *
+   * You can find more information about supported texture widths at the following link:
+   * https://web3dsurvey.com/webgl/parameters/MAX_TEXTURE_SIZE
+   *
+   * @param {Number} width the texture width (defaults to 1024)
+   */
+  setOpacityTextureWidth(width: number): boolean;
+
+  /**
+   * Get the opacity texture width.
+   */
+  getOpacityTextureWidth(): number;
+
+  /**
+   * Set the color texture width.
+   *
+   * The default width (1024) should be fine in most instances.
+   * Only set this property if your color transfer function range width is
+   * larger than 1024.
+   *
+   * A reasonable max texture size would be either 2048 or 4096, as those
+   * widths are supported by the vast majority of devices. Any width larger
+   * than that will have issues with device support.
+   *
+   * Specifying a width that is less than or equal to 0 will use the largest
+   * possible texture width on the device. Use this with caution! The max texture
+   * width of one device may not be the same for another device.
+   *
+   * You can find more information about supported texture widths at the following link:
+   * https://web3dsurvey.com/webgl/parameters/MAX_TEXTURE_SIZE
+   *
+   * @param {Number} width the texture width (defaults to 1024)
+   */
+  setColorTextureWidth(width: number): boolean;
+
+  /**
+   * Get the color texture width.
+   */
+  getColorTextureWidth(): number;
+
+  /**
+   * Set the label outline texture width.
+   *
+   * The default width (1024) should be fine in most instances.
+   * Only set this property if you have more than 1024 labels
+   * that you want to render with thickness.
+   *
+   * A reasonable max texture size would be either 2048 or 4096, as those
+   * widths are supported by the vast majority of devices. Any width larger
+   * than that will have issues with device support.
+   *
+   * Specifying a width that is less than or equal to 0 will use the largest
+   * possible texture width on the device. Use this with caution! The max texture
+   * width of one device may not be the same for another device.
+   *
+   * You can find more information about supported texture widths at the following link:
+   * https://web3dsurvey.com/webgl/parameters/MAX_TEXTURE_SIZE
+   *
+   * @param {Number} width the texture width (defaults to 1024)
+   */
+  setLabelOutlineTextureWidth(width: number): boolean;
+
+  /**
+   * Get the label outline texture width.
+   */
+  getLabelOutlineTextureWidth(): number;
 }
 
 /**

package/Rendering/Core/AbstractImageMapper.js

@@ -24,7 +24,10 @@ const DEFAULT_VALUES = {
   slice: 0,
   customDisplayExtent: [0, 0, 0, 0, 0, 0],
   useCustomExtents: false,
-  backgroundColor: [0, 0, 0, 1]
+  backgroundColor: [0, 0, 0, 1],
+  colorTextureWidth: 1024,
+  opacityTextureWidth: 1024,
+  labelOutlineTextureWidth: 1024
 };
 
 // ----------------------------------------------------------------------------
@@ -35,7 +38,7 @@ function extend(publicAPI, model) {
 
   // Build VTK API
   vtkAbstractMapper3D.extend(publicAPI, model, initialValues);
-  macro.setGet(publicAPI, model, ['slice', 'useCustomExtents']);
+  macro.setGet(publicAPI, model, ['slice', 'useCustomExtents', 'colorTextureWidth', 'opacityTextureWidth', 'labelOutlineTextureWidth']);
   macro.setGetArray(publicAPI, model, ['customDisplayExtent'], 6);
   macro.setGetArray(publicAPI, model, ['backgroundColor'], 4);
   vtkAbstractImageMapper(publicAPI, model);

package/Rendering/Core/Actor2D.d.ts

@@ -54,6 +54,28 @@ export interface vtkActor2D extends vtkProp {
    */
   getMapper(): vtkMapper2D;
 
+  /**
+   * Set the layer number for this 2D actor.
+   * The scenegraph uses this layer number to sort actor 2D overlays/underlays on top of each other.
+   * The actor2D with the highest layer number is going to be rendered at the very front i.e. it is
+   * the top-most layer.
+   * If two actor2D instances share the same layer number, they are rendered in the order in which
+   * they were added to the renderer via `addActor` or `addActor2D`.
+   * By default, each actor2D has a layer number of 0.
+   */
+  setLayerNumber(layer: number): void;
+
+  /**
+   * Get the layer number for this 2D actor.
+   * The scenegraph uses this layer number to sort actor 2D overlays/underlays on top of each other.
+   * The actor2D with the highest layer number is going to be rendered at the very front i.e. it is
+   * the top-most layer.
+   * If two actor2D instances share the same layer number, they are rendered in the order in which
+   * they were added to the renderer via `addActor` or `addActor2D`.
+   * By default, each actor2D has a layer number of 0.
+   */
+  getLayerNumber(): number;
+
   /**
    *
    */

package/Rendering/Core/Actor2D.js

@@ -145,7 +145,7 @@ function extend(publicAPI, model) {
 
   // Build VTK API
   macro.set(publicAPI, model, ['property']);
-  macro.setGet(publicAPI, model, ['mapper']);
+  macro.setGet(publicAPI, model, ['mapper', 'layerNumber']);
 
   // Object methods
   vtkActor2D(publicAPI, model);

package/Rendering/Core/CellPicker.js

@@ -219,7 +219,10 @@ function vtkCellPicker(publicAPI, model) {
 
     // calculate opacity table
     const numIComps = 1;
-    const oWidth = 1024;
+    let oWidth = mapper.getOpacityTextureWidth();
+    if (oWidth <= 0) {
+      oWidth = 1024;
+    }
     const tmpTable = new Float32Array(oWidth);
     const opacityArray = new Float32Array(oWidth);
     let ofun;

package/Rendering/Core/Viewport.js

@@ -46,10 +46,20 @@ function vtkViewport(publicAPI, model) {
     return allProps;
   }
   publicAPI.getViewPropsWithNestedProps = () => {
-    const allPropsArray = [];
-    for (let i = 0; i < model.props.length; i++) {
-      gatherProps(model.props[i], allPropsArray);
+    let allPropsArray = [];
+    // Handle actor2D instances separately so that they can be overlayed and layered
+    const actors2D = publicAPI.getActors2D();
+    // Sort the actor2D list using its layer number
+    actors2D.sort((a, b) => a.getLayerNumber() - b.getLayerNumber());
+    // Filter out all the actor2D instances
+    const newPropList = model.props.filter(item => !actors2D.includes(item));
+    for (let i = 0; i < newPropList.length; i++) {
+      gatherProps(newPropList[i], allPropsArray);
     }
+    // Finally, add the actor2D props at the end of the list
+    // This works because, when traversing the render pass in vtkOpenGLRenderer, the children are
+    // traversed in the order that they are added to the list
+    allPropsArray = allPropsArray.concat(actors2D);
     return allPropsArray;
   };
   publicAPI.addActor2D = publicAPI.addViewProp;

package/Rendering/Core/VolumeMapper.d.ts

@@ -318,6 +318,76 @@ export interface vtkVolumeMapper extends vtkAbstractMapper3D {
    *
    */
   update(): void;
+
+  /**
+   * Set the opacity texture width.
+   *
+   * The default width (1024) should be fine in most instances.
+   * Only set this property if your opacity function range width is
+   * larger than 1024.
+   *
+   * @param {Number} width the texture width (defaults to 1024)
+   */
+  setOpacityTextureWidth(width: number): boolean;
+
+  /**
+   * Get the opacity texture width.
+   */
+  getOpacityTextureWidth(): number;
+
+  /**
+   * Set the color texture width.
+   *
+   * The default width (1024) should be fine in most instances.
+   * Only set this property if your color transfer function range width is
+   * larger than 1024.
+   *
+   * A reasonable max texture size would be either 2048 or 4096, as those
+   * widths are supported by the vast majority of devices. Any width larger
+   * than that will have issues with device support.
+   *
+   * Specifying a width that is less than or equal to 0 will use the largest
+   * possible texture width on the device. Use this with caution! The max texture
+   * width of one device may not be the same for another device.
+   *
+   * You can find more information about supported texture widths at the following link:
+   * https://web3dsurvey.com/webgl/parameters/MAX_TEXTURE_SIZE
+   *
+   * @param {Number} width the texture width (defaults to 1024)
+   */
+  setColorTextureWidth(width: number): boolean;
+
+  /**
+   * Get the color texture width.
+   */
+  getColorTextureWidth(): number;
+
+  /**
+   * Set the label outline texture width.
+   *
+   * The default width (1024) should be fine in most instances.
+   * Only set this property if you have more than 1024 labels
+   * that you want to render with thickness.
+   *
+   * A reasonable max texture size would be either 2048 or 4096, as those
+   * widths are supported by the vast majority of devices. Any width larger
+   * than that will have issues with device support.
+   *
+   * Specifying a width that is less than or equal to 0 will use the largest
+   * possible texture width on the device. Use this with caution! The max texture
+   * width of one device may not be the same for another device.
+   *
+   * You can find more information about supported texture widths at the following link:
+   * https://web3dsurvey.com/webgl/parameters/MAX_TEXTURE_SIZE
+   *
+   * @param {Number} width the texture width (defaults to 1024)
+   */
+  setLabelOutlineTextureWidth(width: number): boolean;
+
+  /**
+   * Get the label outline texture width.
+   */
+  getLabelOutlineTextureWidth(): number;
 }
 
 /**

package/Rendering/Core/VolumeMapper.js

@@ -126,6 +126,9 @@ const defaultValues = initialValues => ({
   LAOKernelSize: 15,
   LAOKernelRadius: 7,
   updatedExtents: [],
+  colorTextureWidth: 1024,
+  opacityTextureWidth: 1024,
+  labelOutlineTextureWidth: 1024,
   ...initialValues
 });
 
@@ -135,7 +138,7 @@ function extend(publicAPI, model) {
   let initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   Object.assign(model, defaultValues(initialValues));
   vtkAbstractMapper3D.extend(publicAPI, model, initialValues);
-  macro.setGet(publicAPI, model, ['sampleDistance', 'imageSampleDistance', 'maximumSamplesPerRay', 'autoAdjustSampleDistances', 'initialInteractionScale', 'interactionSampleDistanceFactor', 'blendMode', 'filterMode', 'preferSizeOverAccuracy', 'computeNormalFromOpacity', 'volumetricScatteringBlending', 'globalIlluminationReach', 'volumeShadowSamplingDistFactor', 'anisotropy', 'localAmbientOcclusion', 'LAOKernelSize', 'LAOKernelRadius', 'updatedExtents']);
+  macro.setGet(publicAPI, model, ['sampleDistance', 'imageSampleDistance', 'maximumSamplesPerRay', 'autoAdjustSampleDistances', 'initialInteractionScale', 'interactionSampleDistanceFactor', 'blendMode', 'filterMode', 'preferSizeOverAccuracy', 'computeNormalFromOpacity', 'volumetricScatteringBlending', 'globalIlluminationReach', 'volumeShadowSamplingDistFactor', 'anisotropy', 'localAmbientOcclusion', 'LAOKernelSize', 'LAOKernelRadius', 'updatedExtents', 'colorTextureWidth', 'opacityTextureWidth', 'labelOutlineTextureWidth']);
   macro.setGetArray(publicAPI, model, ['ipScalarRange'], 2);
   macro.event(publicAPI, model, 'lightingActivated');
 

package/Rendering/OpenGL/ImageCPRMapper.js

@@ -195,7 +195,10 @@ function vtkOpenGLImageCPRMapper(publicAPI, model) {
     const cachedColorEntry = model._openGLRenderWindow.getGraphicsResourceForObject(colorTransferFunc);
     const reBuildColorTexture = !cachedColorEntry?.oglObject?.getHandle() || cachedColorEntry?.hash !== colorTextureHash;
     if (reBuildColorTexture) {
-      const cWidth = 1024;
+      let cWidth = model.renderable.getColorTextureWidth();
+      if (cWidth <= 0) {
+        cWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const cSize = cWidth * textureHeight * 3;
       const cTable = new Uint8ClampedArray(cSize);
       model.colorTexture = vtkOpenGLTexture.newInstance();
@@ -248,7 +251,10 @@ function vtkOpenGLImageCPRMapper(publicAPI, model) {
     const cachedPwfEntry = model._openGLRenderWindow.getGraphicsResourceForObject(pwFunc);
     const reBuildPwf = !cachedPwfEntry?.oglObject?.getHandle() || cachedPwfEntry?.hash !== pwfTextureHash;
     if (reBuildPwf) {
-      const pwfWidth = 1024;
+      let pwfWidth = model.renderable.getOpacityTextureWidth();
+      if (pwfWidth <= 0) {
+        pwfWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const pwfSize = pwfWidth * textureHeight;
       const pwfTable = new Uint8ClampedArray(pwfSize);
       model.pwfTexture = vtkOpenGLTexture.newInstance();

package/Rendering/OpenGL/ImageMapper.js

@@ -594,7 +594,10 @@ function vtkOpenGLImageMapper(publicAPI, model) {
         resizable: true
       });
       model.colorTexture.setOpenGLRenderWindow(model._openGLRenderWindow);
-      const cWidth = 1024;
+      let cWidth = model.renderable.getColorTextureWidth();
+      if (cWidth <= 0) {
+        cWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const cSize = cWidth * textureHeight * 3;
       const cTable = new Uint8ClampedArray(cSize);
       // set interpolation on the texture based on property setting
@@ -653,7 +656,10 @@ function vtkOpenGLImageMapper(publicAPI, model) {
     // rebuild opacity tfun?
     const reBuildPwf = !pwfTex?.oglObject?.getHandle() || pwfTex?.hash !== pwfunToString;
     if (reBuildPwf) {
-      const pwfWidth = 1024;
+      let pwfWidth = model.renderable.getOpacityTextureWidth();
+      if (pwfWidth <= 0) {
+        pwfWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const pwfSize = pwfWidth * textureHeight;
       const pwfTable = new Uint8ClampedArray(pwfSize);
       model.pwfTexture = vtkOpenGLTexture.newInstance({
@@ -927,7 +933,10 @@ function vtkOpenGLImageMapper(publicAPI, model) {
     const toString = `${labelOutlineThicknessArray.join('-')}`;
     const reBuildL = !lTex?.oglObject?.getHandle() || lTex?.hash !== toString;
     if (reBuildL) {
-      const lWidth = 1024;
+      let lWidth = model.renderable.getLabelOutlineTextureWidth();
+      if (lWidth <= 0) {
+        lWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const lHeight = 1;
       const lSize = lWidth * lHeight;
       const lTable = new Uint8Array(lSize);

package/Rendering/OpenGL/ImageResliceMapper.js

@@ -223,7 +223,10 @@ function vtkOpenGLImageResliceMapper(publicAPI, model) {
     const cTex = model._openGLRenderWindow.getGraphicsResourceForObject(colorTransferFunc);
     const reBuildC = !cTex?.oglObject?.getHandle() || cTex?.hash !== toString;
     if (reBuildC) {
-      const cWidth = 1024;
+      let cWidth = model.renderable.getColorTextureWidth();
+      if (cWidth <= 0) {
+        cWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const cSize = cWidth * textureHeight * 3;
       const cTable = new Uint8ClampedArray(cSize);
       model.colorTexture = vtkOpenGLTexture.newInstance();
@@ -277,7 +280,10 @@ function vtkOpenGLImageResliceMapper(publicAPI, model) {
     // rebuild opacity tfun?
     const reBuildPwf = !pwfTex?.oglObject?.getHandle() || pwfTex?.hash !== toString;
     if (reBuildPwf) {
-      const pwfWidth = 1024;
+      let pwfWidth = model.renderable.getOpacityTextureWidth();
+      if (pwfWidth <= 0) {
+        pwfWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const pwfSize = pwfWidth * textureHeight;
       const pwfTable = new Uint8ClampedArray(pwfSize);
       model.pwfTexture = vtkOpenGLTexture.newInstance();

package/Rendering/OpenGL/Renderer.js

@@ -24,7 +24,7 @@ function vtkOpenGLRenderer(publicAPI, model) {
       publicAPI.updateLights();
       publicAPI.prepareNodes();
       publicAPI.addMissingNode(model.renderable.getActiveCamera());
-      publicAPI.addMissingNodes(model.renderable.getViewPropsWithNestedProps());
+      publicAPI.addMissingNodes(model.renderable.getViewPropsWithNestedProps(), true);
       publicAPI.removeUnusedNodes();
     }
   };

package/Rendering/OpenGL/VolumeMapper.js

@@ -1053,7 +1053,10 @@ function vtkOpenGLVolumeMapper(publicAPI, model) {
       model.opacityTexture = vtkOpenGLTexture.newInstance();
       model.opacityTexture.setOpenGLRenderWindow(model._openGLRenderWindow);
       // rebuild opacity tfun?
-      const oWidth = 1024;
+      let oWidth = model.renderable.getOpacityTextureWidth();
+      if (oWidth <= 0) {
+        oWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const oSize = oWidth * 2 * numIComps;
       const ofTable = new Float32Array(oSize);
       const tmpTable = new Float32Array(oWidth);
@@ -1105,7 +1108,10 @@ function vtkOpenGLVolumeMapper(publicAPI, model) {
     if (reBuildC) {
       model.colorTexture = vtkOpenGLTexture.newInstance();
       model.colorTexture.setOpenGLRenderWindow(model._openGLRenderWindow);
-      const cWidth = 1024;
+      let cWidth = model.renderable.getColorTextureWidth();
+      if (cWidth <= 0) {
+        cWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const cSize = cWidth * 2 * numIComps * 3;
       const cTable = new Uint8ClampedArray(cSize);
       const tmpTable = new Float32Array(cWidth * 3);
@@ -1239,7 +1245,10 @@ function vtkOpenGLVolumeMapper(publicAPI, model) {
     if (reBuildL) {
       model.labelOutlineThicknessTexture = vtkOpenGLTexture.newInstance();
       model.labelOutlineThicknessTexture.setOpenGLRenderWindow(model._openGLRenderWindow);
-      const lWidth = 1024;
+      let lWidth = model.renderable.getLabelOutlineTextureWidth();
+      if (lWidth <= 0) {
+        lWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+      }
       const lHeight = 1;
       const lSize = lWidth * lHeight;
       const lTable = new Uint8Array(lSize);

package/Rendering/SceneGraph/ViewNode.js

@@ -105,13 +105,23 @@ function vtkViewNode(publicAPI, model) {
 
   // add missing nodes/children for the passed in renderables. This should
   // be called only in between prepareNodes and removeUnusedNodes
-  publicAPI.addMissingNodes = dataObjs => {
+  publicAPI.addMissingNodes = function (dataObjs) {
+    let enforceOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (!dataObjs || !dataObjs.length) {
       return;
     }
     for (let index = 0; index < dataObjs.length; ++index) {
       const dobj = dataObjs[index];
-      publicAPI.addMissingNode(dobj);
+      const node = publicAPI.addMissingNode(dobj);
+      if (enforceOrder && node !== undefined && model.children[index] !== node) {
+        for (let i = index + 1; i < model.children.length; ++i) {
+          if (model.children[i] === node) {
+            model.children.splice(i, 1);
+            model.children.splice(index, 0, node);
+            break;
+          }
+        }
+      }
     }
   };
 

package/package.json

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