@kitware/vtk.js 33.0.0-beta.2 → 33.0.0-beta.4

package/IO/XML/XMLPolyDataWriter.js

@@ -36,6 +36,7 @@ function vtkXMLPolyDataWriter(publicAPI, model) {
     });
     publicAPI.processDataSetAttributes(piece, 'PointData', dataObject.getPointData());
     publicAPI.processDataSetAttributes(piece, 'CellData', dataObject.getCellData());
+    publicAPI.processDataSetAttributes(piece, 'FieldData', dataObject.getFieldData());
     publicAPI.processDataArray(piece.ele('Points'), dataObject.getPoints());
     POLYDATA_FIELDS.forEach(cellType => {
       const cellTypeName = camelize(cellType);

package/Interaction/Manipulators/MouseCameraTrackballRollManipulator.js

@@ -2,7 +2,7 @@ import { mat4, vec3 } from 'gl-matrix';
 import { m as macro } from '../../macros2.js';
 import vtkCompositeCameraManipulator from './CompositeCameraManipulator.js';
 import vtkCompositeMouseManipulator from './CompositeMouseManipulator.js';
-import { r as radiansFromDegrees, C as degreesFromRadians } from '../../Common/Core/Math/index.js';
+import { r as radiansFromDegrees, A as degreesFromRadians } from '../../Common/Core/Math/index.js';
 
 // ----------------------------------------------------------------------------
 // vtkMouseCameraTrackballRollManipulator methods

package/Interaction/Style/InteractorStyleTrackballCamera.js

@@ -1,7 +1,7 @@
 import { m as macro } from '../../macros2.js';
 import vtkInteractorStyle from '../../Rendering/Core/InteractorStyle.js';
 import vtkInteractorStyleConstants from '../../Rendering/Core/InteractorStyle/Constants.js';
-import { C as degreesFromRadians } from '../../Common/Core/Math/index.js';
+import { A as degreesFromRadians } from '../../Common/Core/Math/index.js';
 import { Device, Input } from '../../Rendering/Core/RenderWindowInteractor/Constants.js';
 
 const {

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/AbstractPicker.d.ts

@@ -1,6 +1,6 @@
 import { vtkObject } from './../../interfaces';
 import { Vector3 } from './../../types';
-import vtkActor from './Actor';
+import vtkProp3D from './Prop3D';
 import vtkRenderer from './Renderer';
 
 /**
@@ -10,8 +10,8 @@ export interface IAbstractPickerInitialValues {
   renderer?: vtkRenderer;
   selectionPoint?: Vector3;
   pickPosition?: Vector3;
-  pickFromList?: number;
-  pickList?: vtkActor[];
+  pickFromList?: boolean;
+  pickList?: vtkProp3D[];
 }
 
 /**
@@ -20,15 +20,15 @@ export interface IAbstractPickerInitialValues {
 export interface vtkAbstractPicker extends vtkObject {
   /**
    *
-   * @param {vtkActor} actor
+   * @param {vtkProp3D} prop
    */
-  addPickList(actor: vtkActor): void;
+  addPickList(prop: vtkProp3D): void;
 
   /**
    *
-   * @param {vtkActor} actor
+   * @param {vtkProp3D} prop
    */
-  deletePickList(actor: vtkActor): void;
+  deletePickList(prop: vtkProp3D): void;
 
   /**
    *
@@ -38,7 +38,7 @@ export interface vtkAbstractPicker extends vtkObject {
   /**
    *
    */
-  getPickList(): boolean;
+  getPickList(): vtkProp3D[];
 
   /**
    * Get the picked position
@@ -82,17 +82,17 @@ export interface vtkAbstractPicker extends vtkObject {
 
   /**
    *
-   * @param {Number}  pickFromList
-   * @default 0
+   * @param {Boolean}  pickFromList
+   * @default false
    */
-  setPickFromList(pickFromList: number): boolean;
+  setPickFromList(pickFromList: boolean): boolean;
 
   /**
    *
-   * @param {vtkActor[]} pickList
+   * @param {vtkProp3D[]} pickList
    * @default []
    */
-  setPickList(pickList: vtkActor[]): boolean;
+  setPickList(pickList: vtkProp3D[]): boolean;
 }
 
 /**

package/Rendering/Core/AbstractPicker.js

@@ -38,7 +38,7 @@ const DEFAULT_VALUES = {
   renderer: null,
   selectionPoint: [0.0, 0.0, 0.0],
   pickPosition: [0.0, 0.0, 0.0],
-  pickFromList: 0,
+  pickFromList: false,
   pickList: []
 };
 

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/Glyph3DMapper.d.ts

@@ -12,11 +12,11 @@ interface IPrimitiveCount {
 export interface IGlyph3DMapperInitialValues extends IMapperInitialValues {
   orient?: boolean;
   orientationMode?: OrientationModes;
-  orientationArray?: number[];
+  orientationArray?: string;
   scaling?: boolean;
   scaleFactor?: number;
   scaleMode?: ScaleModes;
-  scaleArray?: number[];
+  scaleArray?: string;
   matrixArray?: number[];
   normalArray?: number[];
   colorArray?: number[];
@@ -24,29 +24,26 @@ export interface IGlyph3DMapperInitialValues extends IMapperInitialValues {
 
 export interface vtkGlyph3DMapper extends vtkMapper {
   /**
-   * An orientation array is a vtkDataArray with 3 components. The first
-   * component is the angle of rotation along the X axis. The second component
-   * is the angle of rotation along the Y axis. The third component is the
-   * angle of rotation along the Z axis. Orientation is specified in X,Y,Z
-   * order but the rotations are performed in Z,X an Y.
-   *
-   * This definition is compliant with SetOrientation method on vtkProp3D.
+   * Get the bounds for this mapper as [xmin, xmax, ymin, ymax,zmin, zmax].
+   * @return {Bounds} The bounds for the mapper.
+   */
+  getBounds(): Bounds;
+
+  /**
    *
-   * By using vector or normal there is a degree of freedom or rotation left
-   * (underconstrained). With the orientation array, there is no degree of
-   * freedom left.
    */
-  getOrientationMode(): OrientationModes;
+  buildArrays(): void;
 
   /**
-   * Get orientation as string
+   *
    */
-  getOrientationModeAsString(): string;
+  getPrimitiveCount(): IPrimitiveCount;
 
   /**
-   * Get orientation as array
+   * Get scale mode
+   * @default `SCALE_BY_MAGNITUDE`
    */
-  getOrientationArrayData(): number[];
+  getScaleMode(): ScaleModes;
 
   /**
    * Get scale factor to scale object by.
@@ -54,15 +51,20 @@ export interface vtkGlyph3DMapper extends vtkMapper {
   getScaleFactor(): number;
 
   /**
-   * Get scale mode
-   * @default `SCALE_BY_MAGNITUDE`
+   * Get scale mode as string
    */
-  getScaleMode(): ScaleModes;
+  getScaleModeAsString(): string;
 
   /**
-   * Get scale mode as string
+   * Sets the name of the array to use as scale values.
+   * @param {String} arrayName Name of the array
    */
-  getScaleModeAsString(): string;
+  setScaleArray(arrayName: Nullable<string>): boolean;
+
+  /**
+   * Gets the name of the array used as scale values.
+   */
+  getScaleArray(): string;
 
   /**
    * Get scale mode as array
@@ -70,20 +72,29 @@ export interface vtkGlyph3DMapper extends vtkMapper {
   getScaleArrayData(): number[];
 
   /**
-   * Get the bounds for this mapper as [xmin, xmax, ymin, ymax,zmin, zmax].
-   * @return {Bounds} The bounds for the mapper.
+   * An orientation array is a vtkDataArray with 3 components. The first
+   * component is the angle of rotation along the X axis. The second component
+   * is the angle of rotation along the Y axis. The third component is the
+   * angle of rotation along the Z axis. Orientation is specified in X,Y,Z
+   * order but the rotations are performed in Z,X an Y.
+   *
+   * This definition is compliant with SetOrientation method on vtkProp3D.
+   *
+   * By using vector or normal there is a degree of freedom or rotation left
+   * (underconstrained). With the orientation array, there is no degree of
+   * freedom left.
    */
-  getBounds(): Bounds;
+  getOrientationMode(): OrientationModes;
 
   /**
-   *
+   * Get orientation as string
    */
-  buildArrays(): void;
+  getOrientationModeAsString(): string;
 
   /**
-   *
+   * Get orientation as array
    */
-  getPrimitiveCount(): IPrimitiveCount;
+  getOrientationArrayData(): number[];
 
   /**
    * Sets the name of the array to use as orientation.
@@ -91,6 +102,11 @@ export interface vtkGlyph3DMapper extends vtkMapper {
    */
   setOrientationArray(arrayName: Nullable<string>): boolean;
 
+  /**
+   * Gets the name of the array used as orientation values.
+   */
+  getOrientationArray(): string;
+
   /**
    * Orientation mode indicates if the OrientationArray provides the direction
    * vector for the orientation or the rotations around each axes.

package/Rendering/Core/ImageCPRMapper.js

@@ -1,4 +1,4 @@
-import { vec3, mat4, quat } from 'gl-matrix';
+import { quat, vec3, mat4 } from 'gl-matrix';
 import CoincidentTopologyHelper from './Mapper/CoincidentTopologyHelper.js';
 import vtkAbstractImageMapper from './AbstractImageMapper.js';
 import { m as macro } from '../../macros2.js';
@@ -270,7 +270,7 @@ function vtkImageCPRMapper(publicAPI, model) {
 // Object factory
 // ----------------------------------------------------------------------------
 
-const DEFAULT_VALUES = {
+const defaultValues = initialValues => ({
   width: 10,
   uniformOrientation: [0, 0, 0, 1],
   useUniformOrientation: false,
@@ -282,14 +282,15 @@ const DEFAULT_VALUES = {
   normalDirection: [0, 0, 1],
   projectionSlabThickness: 1,
   projectionSlabNumberOfSamples: 1,
-  projectionMode: ProjectionMode.MAX
-};
+  projectionMode: ProjectionMode.MAX,
+  ...initialValues
+});
 
 // ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
   let initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.assign(model, DEFAULT_VALUES, initialValues);
+  Object.assign(model, defaultValues(initialValues));
 
   // Inheritance
   vtkAbstractImageMapper.extend(publicAPI, model, initialValues);

package/Rendering/Core/ImageProperty.d.ts

@@ -1,5 +1,5 @@
 import { vtkObject } from './../../interfaces';
-import { Nullable } from './../../types';
+import { Extent, Nullable } from './../../types';
 import vtkColorTransferFunction from './ColorTransferFunction';
 import vtkPiecewiseFunction from './../../Common/DataModel/PiecewiseFunction';
 import { InterpolationType } from './ImageProperty/Constants';
@@ -94,6 +94,28 @@ export interface vtkImageProperty extends vtkObject {
    */
   getScalarOpacity(idx?: number): vtkPiecewiseFunction;
 
+  /**
+   * Enable label outline rendering.
+   * @param {Boolean} useLabelOutline
+   */
+  setUseLabelOutline(useLabelOutline: boolean): boolean;
+
+  /**
+   * Check if label outline rendering.
+   */
+  getUseLabelOutline(): boolean;
+
+  /**
+   * Set the 0 to 1 opacity of the label outline.
+   * @param {Number} opacity
+   */
+  setLabelOutlineOpacity(opacity: number): boolean;
+
+  /**
+   * Get the 0 to 1 opacity of the label outline.
+   */
+  getLabelOutlineOpacity(): number;
+
   /**
    * gets the label outline thickness
    */
@@ -209,6 +231,25 @@ export interface vtkImageProperty extends vtkObject {
    * @param {Boolean} useLookupTableScalarRange
    */
   setUseLookupTableScalarRange(useLookupTableScalarRange: boolean): boolean;
+
+  /**
+   * Informs the mapper to only update the specified extents at the next render.
+   *
+   * If there are zero extents, the mapper updates the entire volume texture.
+   * Otherwise, the mapper will only update the texture by the specified extents
+   * during the next render call.
+   *
+   * This array is cleared after a successful render.
+   * @param extents
+   */
+  setUpdatedExtents(extents: Extent[]): boolean;
+
+  /**
+   * Retrieves the updated extents.
+   *
+   * This array is cleared after every successful render.
+   */
+  getUpdatedExtents(): Extent[];
 }
 
 /**

package/Rendering/Core/ImageProperty.js

@@ -136,7 +136,7 @@ function vtkImageProperty(publicAPI, model) {
 // ----------------------------------------------------------------------------
 // Object factory
 // ----------------------------------------------------------------------------
-const DEFAULT_VALUES = {
+const defaultValues = initialValues => ({
   independentComponents: false,
   interpolationType: InterpolationType.LINEAR,
   colorWindow: 255,
@@ -147,14 +147,16 @@ const DEFAULT_VALUES = {
   useLookupTableScalarRange: false,
   useLabelOutline: false,
   labelOutlineThickness: [1],
-  labelOutlineOpacity: 1.0
-};
+  labelOutlineOpacity: 1.0,
+  updatedExtents: [],
+  ...initialValues
+});
 
 // ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
   let initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.assign(model, DEFAULT_VALUES, initialValues);
+  Object.assign(model, defaultValues(initialValues));
 
   // Build VTK API
   macro.obj(publicAPI, model);
@@ -168,7 +170,7 @@ function extend(publicAPI, model) {
       });
     }
   }
-  macro.setGet(publicAPI, model, ['independentComponents', 'interpolationType', 'colorWindow', 'colorLevel', 'ambient', 'diffuse', 'opacity', 'useLookupTableScalarRange', 'useLabelOutline', 'labelOutlineOpacity']);
+  macro.setGet(publicAPI, model, ['independentComponents', 'interpolationType', 'colorWindow', 'colorLevel', 'ambient', 'diffuse', 'opacity', 'useLookupTableScalarRange', 'useLabelOutline', 'labelOutlineOpacity', 'updatedExtents']);
   macro.setGetArray(publicAPI, model, ['labelOutlineThickness']);
 
   // Object methods

package/Rendering/Core/ImageResliceMapper.d.ts

@@ -1,10 +1,9 @@
 import vtkAbstractImageMapper, {
   IAbstractImageMapperInitialValues,
 } from './AbstractImageMapper';
-import vtkImageData from './../../Common/DataModel/ImageData';
 import vtkPlane from './../../Common/DataModel/Plane';
 import vtkPolyData from './../../Common/DataModel/PolyData';
-import { Bounds, Nullable, Vector3 } from './../../types';
+import { Bounds } from './../../types';
 import { SlabTypes } from './ImageResliceMapper/Constants';
 import CoincidentTopologyHelper, {
   StaticCoincidentTopologyMethods,

package/Rendering/Core/ImageResliceMapper.js

@@ -38,19 +38,20 @@ function vtkImageResliceMapper(publicAPI, model) {
 // Object factory
 // ----------------------------------------------------------------------------
 
-const DEFAULT_VALUES = {
+const defaultValues = initialValues => ({
   slabThickness: 0.0,
   slabTrapezoidIntegration: 0,
   slabType: SlabTypes.MEAN,
   slicePlane: null,
-  slicePolyData: null
-};
+  slicePolyData: null,
+  ...initialValues
+});
 
 // ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
   let initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.assign(model, DEFAULT_VALUES, initialValues);
+  Object.assign(model, defaultValues(initialValues));
 
   // Build VTK API
   vtkAbstractImageMapper.extend(publicAPI, model, initialValues);

package/Rendering/Core/PointPicker.js

@@ -80,6 +80,9 @@ function vtkPointPicker(publicAPI, model) {
             if (maxDist <= tolerance && maxDist < minPtDist) {
               // within tolerance
               minPtId = ptId;
+              x[0];
+              x[1];
+              x[2];
               minPtDist = maxDist;
               tMin = t;
             }
@@ -108,13 +111,19 @@ function vtkPointPicker(publicAPI, model) {
           if (maxDist <= tolerance && maxDist < minPtDist) {
             // within tolerance
             minPtId = ptId;
+            x[0];
+            x[1];
+            x[2];
             minPtDist = maxDist;
             tMin = t;
           }
         }
       }
     }
-    model.pointId = minPtId;
+    if (minPtId > -1 && tMin < model.globalTMin) {
+      model.globalTMin = tMin;
+      model.pointId = minPtId;
+    }
     return tMin;
   };
 }

package/Rendering/Core/Prop3D.js

@@ -1,7 +1,7 @@
 import { mat4, quat } from 'gl-matrix';
 import { m as macro } from '../../macros2.js';
 import vtkBoundingBox from '../../Common/DataModel/BoundingBox.js';
-import { C as degreesFromRadians, r as radiansFromDegrees, a as areMatricesEqual } from '../../Common/Core/Math/index.js';
+import { A as degreesFromRadians, r as radiansFromDegrees, a as areMatricesEqual } from '../../Common/Core/Math/index.js';
 import vtkProp from './Prop.js';
 
 const VTK_EPSILON = 1e-6;

package/Rendering/Core/RenderWindowInteractor.d.ts

@@ -63,7 +63,7 @@ export interface IRenderWindowInteractorInitialValues {
   mouseScrollDebounceByPass?: boolean;
 }
 
-interface IPosition {
+export interface IPosition {
   type: string;
 }
 

package/Rendering/Core/RenderWindowInteractor.js

@@ -1,5 +1,5 @@
 import { m as macro } from '../../macros2.js';
-import { C as degreesFromRadians } from '../../Common/Core/Math/index.js';
+import { A as degreesFromRadians } from '../../Common/Core/Math/index.js';
 import Constants from './RenderWindowInteractor/Constants.js';
 
 const {

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;