@kitware/vtk.js 22.5.1 → 22.5.5

package/Common/Core/DataArray.d.ts

@@ -31,21 +31,21 @@ export interface vtkDataArray extends vtkObject {
 
 	/**
 	 * Get the component for a given tupleIdx.
-	 * @param {Number} tupleIdx 
+	 * @param {Number} tupleIdx
 	 * @param {Number} [componentIndex] (default: 0)
 	 */
 	getComponent(tupleIdx: number, componentIndex?: number): number;
 
 	/**
 	 * Set the component value for a given tupleIdx and componentIndex.
-	 * @param {Number} tupleIdx 
-	 * @param {Number} componentIndex 
-	 * @param {Number} value 
+	 * @param {Number} tupleIdx
+	 * @param {Number} componentIndex
+	 * @param {Number} value
 	 */
 	setComponent(tupleIdx: number, componentIndex: number, value: number): void;
 
 	/**
-	 * 
+	 *
 	 */
 	getData(): TypedArray;
 
@@ -57,22 +57,22 @@ export interface vtkDataArray extends vtkObject {
 	getRange(componentIndex?: number): vtkRange;
 
 	/**
-	 * 
-	 * @param {vtkRange} rangeValue 
-	 * @param {Number} componentIndex 
+	 *
+	 * @param {vtkRange} rangeValue
+	 * @param {Number} componentIndex
 	 */
 	setRange(rangeValue: vtkRange, componentIndex: number): [number, number];
 
 	/**
-	 * 
-	 * @param {Number} idx 
-	 * @param {Number[]} tuple 
+	 *
+	 * @param {Number} idx
+	 * @param {Number[]} tuple
 	 */
 	setTuple(idx: number, tuple: number[]): void;
 
 	/**
 	 *
-	 * @param {Number} idx 
+	 * @param {Number} idx
 	 * @param {Number[]} [tupleToFill] (default [])
 	 */
 	getTuple(idx: number, tupleToFill?: number[]): number[];
@@ -99,42 +99,42 @@ export interface vtkDataArray extends vtkObject {
 	getNumberOfTuples(): number;
 
 	/**
-	 * 
+	 *
 	 */
 	getDataType(): string;
 
 	/**
-	 * 
+	 *
 	 */
 	newClone(): vtkDataArray;
 
 	/**
-	 * 
+	 *
 	 */
 	getName(): string;
 
 	/**
-	 * 
-	 * @param {TypedArray} typedArray 
-	 * @param {Number} [numberOfComponents] 
+	 *
+	 * @param {TypedArray} typedArray
+	 * @param {Number} [numberOfComponents]
 	 */
 	setData(typedArray: TypedArray, numberOfComponents?: number): void;
 
 	/**
-	 * 
+	 *
 	 */
 	getState(): object;
 
 	// --- via macro --
 
 	/**
-	 * 
+	 *
 	 */
 	setName(name: string): boolean;
 
 	/**
 	 * Set the dimension (n) of the components.
-	 * @param {Number} numberOfComponents 
+	 * @param {Number} numberOfComponents
 	 */
 	setNumberOfComponents(numberOfComponents: number): boolean;
 }
@@ -160,6 +160,16 @@ export interface vtkDataArray extends vtkObject {
 export function computeRange(values: number[], component?: number, numberOfComponents?: number): vtkRange;
 
 /**
+ * Compute range of a given array, it only supports 1D arrays.
+ *
+ * @param {Number[]} values Array to go through to extract the range from
+ * @param {Number} offset offset index to select the desired component in the tuple
+ * @param {Number} numberOfComponents size of tuple in a multi-channel array
+ */
+export function fastComputeRange(values: number[], offset: number, numberOfComponents: number): vtkRange;
+
+/**
+ * @deprecated please use `fastComputeRange` instead
  * Create helper object that can be used to gather min, max, count, sum of
  * a set of values.
  */
@@ -242,6 +252,7 @@ export declare const vtkDataArray: {
 	// static
 	computeRange: typeof computeRange,
 	createRangeHelper: typeof createRangeHelper,
+  fastComputeRange: typeof fastComputeRange,
 	getDataType: typeof getDataType,
 	getMaxNorm: typeof getMaxNorm,
 	// constants

package/Common/Core/DataArray.js

@@ -10,6 +10,45 @@ var DefaultDataType = Constants.DefaultDataType;
 var TUPLE_HOLDER = []; // ----------------------------------------------------------------------------
 // Global methods
 // ----------------------------------------------------------------------------
+// Original source from https://www.npmjs.com/package/compute-range
+// Modified to accept type arrays
+
+function fastComputeRange(arr, offset, numberOfComponents) {
+  var len = arr.length;
+  var min;
+  var max;
+  var x;
+  var i;
+
+  if (len === 0) {
+    return {
+      min: Number.MAX_VALUE,
+      max: -Number.MAX_VALUE
+    };
+  }
+
+  min = arr[offset];
+  max = min;
+
+  for (i = offset; i < len; i += numberOfComponents) {
+    x = arr[i];
+
+    if (x < min) {
+      min = x;
+    } else if (x > max) {
+      max = x;
+    }
+  }
+
+  return {
+    min: min,
+    max: max
+  };
+}
+/**
+ * @deprecated please use fastComputeRange instead
+ */
+
 
 function createRangeHelper() {
   var min = Number.MAX_VALUE;
@@ -50,33 +89,27 @@ function createRangeHelper() {
 function computeRange(values) {
   var component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var numberOfComponents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  var helper = createRangeHelper();
-  var size = values.length;
-  var value = 0;
 
   if (component < 0 && numberOfComponents > 1) {
     // Compute magnitude
-    for (var i = 0; i < size; i += numberOfComponents) {
-      value = 0;
+    var size = values.length;
+    var numberOfValues = size / numberOfComponents;
+    var data = new Float64Array(numberOfValues);
 
-      for (var j = 0; j < numberOfComponents; j++) {
-        value += values[i + j] * values[i + j];
+    for (var i = 0, j = 0; i < numberOfValues; ++i) {
+      var _i;
+
+      for (var nextJ = j + numberOfComponents; j < nextJ; ++j) {
+        data[i] += values[j] * values[j];
       }
 
-      value = Math.pow(value, 0.5);
-      helper.add(value);
+      _i = i, data[_i] = Math.pow(data[_i], 0.5);
     }
 
-    return helper.getRange();
-  }
-
-  var offset = component < 0 ? 0 : component;
-
-  for (var _i = offset; _i < size; _i += numberOfComponents) {
-    helper.add(values[_i]);
+    return fastComputeRange(data, 0, 1);
   }
 
-  return helper.getRange();
+  return fastComputeRange(values, component < 0 ? 0 : component, numberOfComponents);
 }
 
 function ensureRangeSize(rangeArray) {
@@ -116,6 +149,7 @@ function getMaxNorm(normArray) {
 var STATIC = {
   computeRange: computeRange,
   createRangeHelper: createRangeHelper,
+  fastComputeRange: fastComputeRange,
   getDataType: getDataType,
   getMaxNorm: getMaxNorm
 }; // ----------------------------------------------------------------------------

package/Rendering/Core/ScalarBarActor.js

@@ -221,22 +221,6 @@ function vtkScalarBarActorHelper(publicAPI, model) {
       model.lastRedrawTime.modified();
       model.forceViewUpdate = false;
     }
-  }; // The text atlas is an image and as loading images is async we call this when
-  // the promise resolves. The old texture is used until then
-
-
-  publicAPI.completedImage = function (doUpdate) {
-    if (model.nextImage && model.nextImage.complete) {
-      model.tmTexture.setImage(model.nextImage);
-      model.nextImage = null;
-      model._tmAtlas = model._nextAtlas;
-      model._nextAtlas = null;
-
-      if (doUpdate) {
-        model.forceViewUpdate = true;
-        model.renderWindow.render();
-      }
-    }
   }; // create the texture map atlas that contains the rendering of
   // all the text strings. Only needs to be called when the text strings
   // have changed (labels and ticks)
@@ -317,19 +301,10 @@ function vtkScalarBarActorHelper(publicAPI, model) {
       applyTextStyle(model.tmContext, value.textStyle);
       model.tmContext.fillText(key, 1, value.startingHeight + value.height - 1);
     });
-    var image = new Image();
-    image.src = model.tmCanvas.toDataURL('image/png');
-    model.nextImage = image;
-    model._nextAtlas = newTmAtlas;
-
-    if (image.complete) {
-      publicAPI.completedImage(false);
-    } else {
-      image.addEventListener('load', function () {
-        publicAPI.completedImage(true);
-      });
-    }
+    model.tmTexture.setCanvas(model.tmCanvas); // mark as modified since the canvas typically doesn't change
 
+    model.tmTexture.modified();
+    model._tmAtlas = newTmAtlas;
     return results;
   };
 

package/Rendering/Core/Texture.js

@@ -13,14 +13,52 @@ function vtkTexture(publicAPI, model) {
     publicAPI.modified();
   };
 
+  publicAPI.setJsImageData = function (imageData) {
+    if (model.jsImageData === imageData) {
+      return;
+    } // clear other entries
+
+
+    if (imageData !== null) {
+      publicAPI.setInputData(null);
+      publicAPI.setInputConnection(null);
+      model.image = null;
+      model.canvas = null;
+    }
+
+    model.jsImageData = imageData;
+    model.imageLoaded = true;
+    publicAPI.modified();
+  };
+
+  publicAPI.setCanvas = function (canvas) {
+    if (model.canvas === canvas) {
+      return;
+    } // clear other entries
+
+
+    if (canvas !== null) {
+      publicAPI.setInputData(null);
+      publicAPI.setInputConnection(null);
+      model.image = null;
+      model.jsImageData = null;
+    }
+
+    model.canvas = canvas;
+    publicAPI.modified();
+  };
+
   publicAPI.setImage = function (image) {
     if (model.image === image) {
       return;
-    }
+    } // clear other entries
+
 
     if (image !== null) {
       publicAPI.setInputData(null);
       publicAPI.setInputConnection(null);
+      model.canvas = null;
+      model.jsImageData = null;
     }
 
     model.image = image;
@@ -44,7 +82,9 @@ var DEFAULT_VALUES = {
   interpolate: false,
   edgeClamp: false,
   image: null,
-  imageLoaded: false
+  canvas: null,
+  imageLoaded: false,
+  jsImageData: null
 }; // ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
@@ -53,8 +93,8 @@ function extend(publicAPI, model) {
 
   macro.obj(publicAPI, model);
   macro.algo(publicAPI, model, 6, 0);
-  macro.get(publicAPI, model, ['imageLoaded']);
-  macro.setGet(publicAPI, model, ['repeat', 'edgeClamp', 'interpolate', 'image']);
+  macro.get(publicAPI, model, ['canvas', 'image', 'jsImageData', 'imageLoaded']);
+  macro.setGet(publicAPI, model, ['repeat', 'edgeClamp', 'interpolate']);
   vtkTexture(publicAPI, model);
 } // ----------------------------------------------------------------------------
 

package/Rendering/Misc/SynchronizableRenderWindow.d.ts

@@ -1,4 +1,4 @@
-import { vtkRenderWindow, IRenderWindowInitialValues } from '@kitware/vtk.js/Rendering/Rendering/Core/RenderWindow';
+import vtkRenderWindow, { IRenderWindowInitialValues } from '@kitware/vtk.js/Rendering/Core/RenderWindow';
 
 // Keeps state for client / server scene synchronization.
 export interface SynchContext {
@@ -33,7 +33,7 @@ export interface IInitialValues extends IRenderWindowInitialValues {
 
 // Server-side view state.
 export interface ViewState {
-  id: ViewId;
+  id: string;
   // vtk object type.
   type: string;
   // vtk object mtime.

package/Rendering/OpenGL/HardwareSelector.js

@@ -57,7 +57,7 @@ function getPixelInformationWithData(buffdata, inDisplayPosition, maxDistance, o
     var displayPosition = [inDisplayPosition[0] - buffdata.area[0], inDisplayPosition[1] - buffdata.area[1]];
     var actorid = convert(displayPosition[0], displayPosition[1], buffdata.pixBuffer[PassTypes.ACTOR_PASS], buffdata.area);
 
-    if (actorid <= 0) {
+    if (actorid <= 0 || actorid - idOffset >= buffdata.props.length) {
       // the pixel did not hit any actor.
       return null;
     }
@@ -520,7 +520,7 @@ function vtkOpenGLHardwareSelector(publicAPI, model) {
       var displayPosition = [inDisplayPosition[0] - model.area[0], inDisplayPosition[1] - model.area[1]];
       var actorid = convert(displayPosition[0], displayPosition[1], model.pixBuffer[PassTypes.ACTOR_PASS], model.area);
 
-      if (actorid <= 0) {
+      if (actorid <= 0 || actorid - idOffset >= model.props.length) {
         // the pixel did not hit any actor.
         return null;
       }

package/Rendering/OpenGL/Texture.js

@@ -78,7 +78,36 @@ function vtkOpenGLTexture(publicAPI, model) {
           publicAPI.sendParameters();
           model.textureBuildTime.modified();
         }
-      } // if we have Inputdata
+      } // if we have a canvas
+
+
+      if (model.renderable.getCanvas() !== null) {
+        if (model.renderable.getInterpolate()) {
+          model.generateMipmap = true;
+          publicAPI.setMinificationFilter(Filter.LINEAR_MIPMAP_LINEAR);
+        }
+
+        var canvas = model.renderable.getCanvas();
+        publicAPI.create2DFromRaw(canvas.width, canvas.height, 4, VtkDataTypes.UNSIGNED_CHAR, canvas, true);
+        publicAPI.activate();
+        publicAPI.sendParameters();
+        model.textureBuildTime.modified();
+      } // if we have jsImageData
+
+
+      if (model.renderable.getJsImageData() !== null) {
+        var jsid = model.renderable.getJsImageData();
+
+        if (model.renderable.getInterpolate()) {
+          model.generateMipmap = true;
+          publicAPI.setMinificationFilter(Filter.LINEAR_MIPMAP_LINEAR);
+        }
+
+        publicAPI.create2DFromRaw(jsid.width, jsid.height, 4, VtkDataTypes.UNSIGNED_CHAR, jsid.data, true);
+        publicAPI.activate();
+        publicAPI.sendParameters();
+        model.textureBuildTime.modified();
+      } // if we have InputData
 
 
       var input = model.renderable.getInputData(0);
@@ -678,6 +707,7 @@ function vtkOpenGLTexture(publicAPI, model) {
 
 
   publicAPI.create2DFromRaw = function (width, height, numComps, dataType, data) {
+    var flip = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
     // Now determine the texture parameters using the arguments.
     publicAPI.getOpenGLDataType(dataType);
     publicAPI.getInternalFormat(dataType, numComps);
@@ -701,13 +731,18 @@ function vtkOpenGLTexture(publicAPI, model) {
     var dataArray = [data];
     var pixData = updateArrayDataType(dataType, dataArray);
     var scaledData = scaleTextureToHighestPowerOfTwo(pixData); // Source texture data from the PBO.
-    // model.context.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 
+    model.context.pixelStorei(model.context.UNPACK_FLIP_Y_WEBGL, flip);
     model.context.pixelStorei(model.context.UNPACK_ALIGNMENT, 1);
     model.context.texImage2D(model.target, 0, model.internalFormat, model.width, model.height, 0, model.format, model.openGLDataType, scaledData[0]);
 
     if (model.generateMipmap) {
       model.context.generateMipmap(model.target);
+    } // always reset the flip
+
+
+    if (flip) {
+      model.context.pixelStorei(model.context.UNPACK_FLIP_Y_WEBGL, false);
     }
 
     publicAPI.deactivate();
@@ -867,15 +902,7 @@ function vtkOpenGLTexture(publicAPI, model) {
     var ctx = canvas.getContext('2d');
     ctx.translate(0, canvas.height);
     ctx.scale(1, -1);
-    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height); // In Chrome 69 on Windows and Ubuntu, there is a bug that prevents some
-    // canvases from working properly with webGL textures.  By getting any
-    // image data from the canvas, this works around the bug.  See
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=896307
-
-    if (navigator.userAgent.indexOf('Chrome/69') >= 0) {
-      ctx.getImageData(0, 0, 1, 1);
-    }
-
+    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
     var safeImage = canvas;
     model.context.texImage2D(model.target, 0, model.internalFormat, model.format, model.openGLDataType, safeImage);
 

package/Rendering/OpenGL.js

@@ -16,6 +16,7 @@ import vtkOpenGLPolyDataMapper from './OpenGL/PolyDataMapper.js';
 import vtkPolyDataMapper2D from './OpenGL/PolyDataMapper2D.js';
 import vtkRenderer from './OpenGL/Renderer.js';
 import vtkRenderWindow from './OpenGL/RenderWindow.js';
+import './OpenGL/ScalarBarActor.js';
 import vtkShader from './OpenGL/Shader.js';
 import vtkShaderCache from './OpenGL/ShaderCache.js';
 import vtkShaderProgram from './OpenGL/ShaderProgram.js';

package/Rendering/WebGPU/BufferManager/Constants.js

@@ -11,7 +11,8 @@ var BufferUsage = {
   NormalsFromPoints: 9,
   Texture: 10,
   RawVertex: 11,
-  Storage: 12
+  Storage: 12,
+  CellIndex: 13
 };
 var PrimitiveTypes = {
   Start: 0,

package/Rendering/WebGPU/BufferManager.js

@@ -20,15 +20,6 @@ var vtkDebugMacro = vtkDebugMacro$1; // the webgpu constants all show up as unde
 // ----------------------------------------------------------------------------
 
 var STATIC = {};
-
-function requestMatches(req1, req2) {
-  if (req1.time !== req2.time) return false;
-  if (req1.format !== req2.format) return false;
-  if (req1.usage !== req2.usage) return false;
-  if (req1.hash !== req2.hash) return false;
-  return true;
-}
-
 var cellCounters = {
   // easy, every input point becomes an output point
   anythingToPoints: function anythingToPoints(numPoints, cellPts) {
@@ -363,44 +354,10 @@ function generateNormals(cellArray, primType, representation, inArray) {
 
 function vtkWebGPUBufferManager(publicAPI, model) {
   // Set our className
-  model.classHierarchy.push('vtkWebGPUBufferManager'); // is the buffer already present?
-
-  publicAPI.hasBuffer = function (req) {
-    if (req.source) {
-      // if a matching buffer already exists then return true
-      if (model.buffers.has(req.source)) {
-        var dabuffers = model.buffers.get(req.source);
-
-        for (var i = 0; i < dabuffers.length; i++) {
-          if (requestMatches(dabuffers[i].request, req)) {
-            return true;
-          }
-        }
-      }
-    }
-
-    return false;
-  }; // we cache based on the passed in source, when the source is
-  // garbage collected then the cache entry is removed. If a source
-  // is not provided then the buffer is NOT cached and you are on your own
-  // if you want to share it etc
-
-
-  publicAPI.getBuffer = function (req) {
-    if (req.source) {
-      // if a matching buffer already exists then return it
-      if (model.buffers.has(req.source)) {
-        var dabuffers = model.buffers.get(req.source);
-
-        for (var i = 0; i < dabuffers.length; i++) {
-          if (requestMatches(dabuffers[i].request, req)) {
-            return dabuffers[i].buffer;
-          }
-        }
-      }
-    } // if a dataArray is provided set the nativeArray
-
+  model.classHierarchy.push('vtkWebGPUBufferManager');
 
+  function _createBuffer(req) {
+    // if a dataArray is provided set the nativeArray
     if (req.dataArray && !req.nativeArray) {
       req.nativeArray = req.dataArray.getData();
     } // create one
@@ -450,8 +407,7 @@ function vtkWebGPUBufferManager(publicAPI, model) {
         scale: req.scale,
         cellData: req.cellData,
         cellOffset: req.cellOffset
-      }); // console.log(result);
-
+      });
       buffer.createAndWrite(result.nativeArray, gpuUsage);
       buffer.setStrideInBytes(vtkWebGPUTypes.getByteStrideFromBufferFormat(req.format));
       buffer.setArrayInformation([{
@@ -482,29 +438,30 @@ function vtkWebGPUBufferManager(publicAPI, model) {
       }]);
     }
 
-    buffer.setSourceTime(req.time); // cache the buffer if we have a dataArray.
-    // We create a new req that only has the 4 fields required for
-    // a comparison to avoid GC cycles
+    buffer.setSourceTime(req.time);
+    return buffer;
+  } // is the buffer already present?
 
-    if (req.source) {
-      if (!model.buffers.has(req.source)) {
-        model.buffers.set(req.source, []);
-      }
 
-      var _dabuffers = model.buffers.get(req.source);
+  publicAPI.hasBuffer = function (req) {
+    if (req.owner) {
+      // if a matching buffer already exists then return true
+      var hash = req.time + req.format + req.usage + req.hash;
+      return model.device.hasCachedObject(req.owner, hash);
+    }
 
-      _dabuffers.push({
-        request: {
-          time: req.time,
-          format: req.format,
-          usage: req.usage,
-          hash: req.hash
-        },
-        buffer: buffer
-      });
+    return false;
+  };
+
+  publicAPI.getBuffer = function (req) {
+    // if we have a source the get/create/cache the buffer
+    if (req.owner) {
+      // if a matching buffer already exists then return it
+      var hash = req.time + req.format + req.usage + req.hash;
+      return model.device.getCachedObject(req.owner, hash, _createBuffer, req);
     }
 
-    return buffer;
+    return _createBuffer(req);
   };
 
   publicAPI.getFullScreenQuadBuffer = function () {
@@ -538,9 +495,7 @@ function extend(publicAPI, model) {
   var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   Object.assign(model, DEFAULT_VALUES, initialValues); // Object methods
 
-  obj(publicAPI, model); // this is a cache, and a cache with GC pretty much means WeakMap
-
-  model.buffers = new WeakMap();
+  obj(publicAPI, model);
   setGet(publicAPI, model, ['device']);
   vtkWebGPUBufferManager(publicAPI, model);
 } // ----------------------------------------------------------------------------

package/Rendering/WebGPU/Device.js

@@ -89,6 +89,76 @@ function vtkWebGPUDevice(publicAPI, model) {
 
   publicAPI.onSubmittedWorkDone = function () {
     return model.handle.queue.onSubmittedWorkDone();
+  }; // The Device has an object cache that can be used to cache buffers,
+  // textures and other objects that can be shared. The basic approach is to
+  // call getCachedObject with a request and a create function. The request
+  // must have two fields a hash and an owner. The owner is what the weak
+  // map uses to hold onto the cached object. When the owner is deleted the
+  // cached object will be freed from the cache. The cache lookup just
+  // returns any entry that has a matching owner and hash. If a match isn't
+  // found then the create function is called with any extra arguments.
+  //
+  // For best memory management it is important that the owner be as close
+  // to the underlying object as possible. For example for a point data buffer
+  // you would want the actual vtkDataArray to be the owner, not the polydata
+  // or even worse the actor. As the points data array could be freed wihtout
+  // the polydata or actor being freed.
+  // is the object already cached?
+
+
+  publicAPI.hasCachedObject = function (owner, hash) {
+    if (!owner) {
+      return false;
+    } // if a matching request already exists then return true
+
+
+    if (model.objectCache.has(owner)) {
+      var objects = model.objectCache.get(owner);
+
+      for (var i = 0; i < objects.length; i++) {
+        if (hash === objects[i].hash) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
+  publicAPI.getCachedObject = function (owner, hash, creator) {
+    if (!owner || !hash) {
+      vtkErrorMacro('attempt to cache an object without an owner or hash');
+      return null;
+    } // if a matching request already exists then return the cached object
+
+
+    if (model.objectCache.has(owner)) {
+      var _objects = model.objectCache.get(owner);
+
+      for (var i = 0; i < _objects.length; i++) {
+        if (hash === _objects[i].hash) {
+          return _objects[i].object;
+        }
+      }
+    } // otherwise create the object and cache it
+
+
+    for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+      args[_key - 3] = arguments[_key];
+    }
+
+    var createdObject = creator.apply(void 0, args);
+
+    if (!model.objectCache.has(owner)) {
+      model.objectCache.set(owner, []);
+    }
+
+    var objects = model.objectCache.get(owner);
+    objects.push({
+      hash: hash,
+      object: createdObject
+    });
+    return createdObject;
   };
 } // ----------------------------------------------------------------------------
 // Object factory
@@ -110,7 +180,9 @@ function extend(publicAPI, model) {
 
   obj(publicAPI, model);
   setGet(publicAPI, model, ['handle']);
-  get(publicAPI, model, ['bufferManager', 'shaderCache', 'textureManager']);
+  get(publicAPI, model, ['bufferManager', 'shaderCache', 'textureManager']); // this is a cache, and a cache with GC pretty much means WeakMap
+
+  model.objectCache = new WeakMap();
   model.shaderCache = vtkWebGPUShaderCache.newInstance();
   model.shaderCache.setDevice(publicAPI);
   model.bindGroupLayouts = [];

package/Rendering/WebGPU/ImageMapper.js

@@ -269,7 +269,7 @@ function vtkWebGPUImageMapper(publicAPI, model) {
   publicAPI.updateBuffers = function (device) {
     var treq = {
       imageData: model.currentInput,
-      source: model.currentInput
+      owner: model.currentInput.getPointData().getScalars()
     };
     var newTex = device.getTextureManager().getTexture(treq);
     var tViews = model.helper.getTextureViews();

package/Rendering/WebGPU/PolyDataMapper.js

@@ -262,7 +262,8 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
       representation = Representation.WIREFRAME;
     }
 
-    var vertexInput = model.primitives[primType].getVertexInput(); // hash = all things that can change the values on the buffer
+    var vertexInput = model.primitives[primType].getVertexInput();
+    var hash = "R".concat(representation, "P").concat(primType); // hash = all things that can change the values on the buffer
     // since mtimes are unique we can use
     // - cells mtime - because cells drive how we pack
     // - rep (point/wireframe/surface) - again because of packing
@@ -273,24 +274,23 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
     // - usage
     // - packExtra - covered by format
     // - prim type (vert/lines/polys/strips) - covered by cells mtime
-
-    var hash = cells.getMTime() + representation; // points
+    // points
 
     var points = pd.getPoints();
 
     if (points) {
       var shift = model.WebGPUActor.getBufferShift(model.WebGPURenderer);
       var buffRequest = {
-        hash: hash + points.getMTime(),
+        owner: points,
+        usage: BufferUsage.PointArray,
+        format: 'float32x4',
+        time: Math.max(points.getMTime(), cells.getMTime(), model.WebGPUActor.getKeyMatricesTime().getMTime()),
+        hash: hash,
         dataArray: points,
-        source: points,
         cells: cells,
         primitiveType: primType,
         representation: representation,
-        time: Math.max(points.getMTime(), cells.getMTime(), model.WebGPUActor.getKeyMatricesTime().getMTime()),
         shift: shift,
-        usage: BufferUsage.PointArray,
-        format: 'float32x4',
         packExtra: true
       };
       var buff = device.getBufferManager().getBuffer(buffRequest);
@@ -305,19 +305,19 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
     if (usage === BufferUsage.Triangles || usage === BufferUsage.Strips) {
       var normals = pd.getPointData().getNormals();
       var _buffRequest = {
+        format: 'snorm8x4',
+        hash: hash,
         cells: cells,
         representation: representation,
         primitiveType: primType,
-        format: 'snorm8x4',
         packExtra: true,
         shift: 0,
         scale: 127
       };
 
       if (normals) {
-        _buffRequest.hash = hash + normals.getMTime();
+        _buffRequest.owner = normals;
         _buffRequest.dataArray = normals;
-        _buffRequest.source = normals;
         _buffRequest.time = Math.max(normals.getMTime(), cells.getMTime());
         _buffRequest.usage = BufferUsage.PointArray;
 
@@ -325,9 +325,8 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
 
         vertexInput.addBuffer(_buff, ['normalMC']);
       } else if (primType === PrimitiveTypes.Triangles) {
-        _buffRequest.hash = hash + points.getMTime();
+        _buffRequest.owner = points;
         _buffRequest.dataArray = points;
-        _buffRequest.source = points;
         _buffRequest.time = Math.max(points.getMTime(), cells.getMTime());
         _buffRequest.usage = BufferUsage.NormalsFromPoints;
 
@@ -356,15 +355,15 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
         }
 
         var _buffRequest2 = {
-          hash: hash + points.getMTime(),
+          owner: c,
+          usage: BufferUsage.PointArray,
+          format: 'unorm8x4',
+          time: Math.max(c.getMTime(), cells.getMTime(), points.getMTime()),
+          hash: hash + haveCellScalars,
           dataArray: c,
-          source: c,
           cells: cells,
           primitiveType: primType,
           representation: representation,
-          time: Math.max(c.getMTime(), cells.getMTime()),
-          usage: BufferUsage.PointArray,
-          format: 'unorm8x4',
           cellData: haveCellScalars,
           cellOffset: 0
         };
@@ -390,15 +389,15 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
 
     if (tcoords && !edges) {
       var _buffRequest3 = {
-        hash: hash + tcoords.getMTime(),
+        owner: tcoords,
+        usage: BufferUsage.PointArray,
+        format: 'float32x2',
+        time: Math.max(tcoords.getMTime(), cells.getMTime()),
+        hash: hash,
         dataArray: tcoords,
-        source: tcoords,
         cells: cells,
         primitiveType: primType,
-        representation: representation,
-        time: Math.max(tcoords.getMTime(), cells.getMTime()),
-        usage: BufferUsage.PointArray,
-        format: 'float32x2'
+        representation: representation
       };
 
       var _buff4 = device.getBufferManager().getBuffer(_buffRequest3);
@@ -433,7 +432,7 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
     var textures = actor.getTextures();
 
     for (var i = 0; i < textures.length; i++) {
-      if (textures[i].getInputData()) {
+      if (textures[i].getInputData() || textures[i].getJsImageData() || textures[i].getCanvas()) {
         newTextures.push(textures[i]);
       }
 
@@ -446,14 +445,22 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
 
     for (var _i = 0; _i < newTextures.length; _i++) {
       var srcTexture = newTextures[_i];
-      var treq = {};
+      var treq = {
+        time: srcTexture.getMTime()
+      };
 
       if (srcTexture.getInputData()) {
         treq.imageData = srcTexture.getInputData();
-        treq.source = treq.imageData;
+        treq.owner = treq.imageData.getPointData().getScalars();
       } else if (srcTexture.getImage()) {
         treq.image = srcTexture.getImage();
-        treq.source = treq.image;
+        treq.owner = treq.image;
+      } else if (srcTexture.getJsImageData()) {
+        treq.jsImageData = srcTexture.getJsImageData();
+        treq.owner = treq.jsImageData;
+      } else if (srcTexture.getCanvas()) {
+        treq.canvas = srcTexture.getCanvas();
+        treq.owner = treq.canvas;
       }
 
       var newTex = model.device.getTextureManager().getTexture(treq);

package/Rendering/WebGPU/RenderEncoder.js

@@ -22,7 +22,7 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
       model.handle.popDebugGroup();
     }
 
-    model.handle.endPass();
+    model.handle.end();
   };
 
   publicAPI.setPipeline = function (pl) {

package/Rendering/WebGPU/SphereMapper.js

@@ -67,8 +67,8 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
     primHelper.setNumberOfVertices(3 * numPoints);
     var vertexInput = model.primitives[i].getVertexInput();
     var buffRequest = {
-      hash: points.getMTime(),
-      source: points,
+      owner: points,
+      hash: 'spm',
       time: points.getMTime(),
       usage: BufferUsage.RawVertex,
       format: 'float32x3'
@@ -110,8 +110,8 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
 
     if (scales || defaultRadius !== model._lastRadius) {
       buffRequest = {
-        hash: scales,
-        source: scales,
+        owner: scales,
+        hash: 'spm',
         time: scales ? pointData.getArray(model.renderable.getScaleArray()).getMTime() : 0,
         usage: BufferUsage.RawVertex,
         format: 'float32x2'
@@ -157,8 +157,8 @@ function vtkWebGPUSphereMapper(publicAPI, model) {
 
       if (c) {
         buffRequest = {
-          hash: c,
-          source: c,
+          owner: c,
+          hash: 'spm',
           time: c.getMTime(),
           usage: BufferUsage.RawVertex,
           format: 'unorm8x4'

package/Rendering/WebGPU/StickMapper.js

@@ -89,8 +89,8 @@ function vtkWebGPUStickMapper(publicAPI, model) {
     primHelper.setNumberOfVertices(12);
     var vertexInput = model.primitives[i].getVertexInput();
     var buffRequest = {
-      hash: points.getMTime(),
-      source: points,
+      owner: points,
+      hash: 'stm',
       time: points.getMTime(),
       usage: BufferUsage.RawVertex,
       format: 'float32x3'
@@ -125,8 +125,8 @@ function vtkWebGPUStickMapper(publicAPI, model) {
 
     if (scales || defaultRadius !== model._lastRadius) {
       buffRequest = {
-        hash: scales,
-        source: scales,
+        owner: scales,
+        hash: 'stm',
         time: scales ? pointData.getArray(model.renderable.getScaleArray()).getMTime() : 0,
         usage: BufferUsage.RawVertex,
         format: 'float32'
@@ -166,8 +166,8 @@ function vtkWebGPUStickMapper(publicAPI, model) {
     }
 
     buffRequest = {
-      hash: scales,
-      source: orientationArray,
+      owner: orientationArray,
+      hash: 'stm',
       time: pointData.getArray(model.renderable.getOrientationArray()).getMTime(),
       usage: BufferUsage.RawVertex,
       format: 'float32x3'
@@ -209,8 +209,8 @@ function vtkWebGPUStickMapper(publicAPI, model) {
 
       if (c) {
         buffRequest = {
-          hash: c,
-          source: c,
+          owner: c,
+          hash: 'stm',
           time: c.getMTime(),
           usage: BufferUsage.RawVertex,
           format: 'unorm8x4'

package/Rendering/WebGPU/Texture.js

@@ -21,7 +21,7 @@ function vtkWebGPUTexture(publicAPI, model) {
     model.height = options.height;
     model.depth = options.depth ? options.depth : 1;
     var dimension = model.depth === 1 ? '2d' : '3d';
-    model.format = options.format ? options.format : 'rgbaunorm';
+    model.format = options.format ? options.format : 'rgba8unorm';
     /* eslint-disable no-undef */
 
     /* eslint-disable no-bitwise */
@@ -47,7 +47,7 @@ function vtkWebGPUTexture(publicAPI, model) {
     model.width = options.width;
     model.height = options.height;
     model.depth = options.depth ? options.depth : 1;
-    model.format = options.format ? options.format : 'rgbaunorm';
+    model.format = options.format ? options.format : 'rgba8unorm';
     /* eslint-disable no-undef */
 
     /* eslint-disable no-bitwise */
@@ -60,6 +60,27 @@ function vtkWebGPUTexture(publicAPI, model) {
 
 
   publicAPI.writeImageData = function (req) {
+    if (req.canvas) {
+      model.device.getHandle().queue.copyExternalImageToTexture({
+        source: req.canvas,
+        flipY: req.flip
+      }, {
+        texture: model.handle,
+        premultipliedAlpha: true
+      }, [model.width, model.height, model.depth]);
+      model.ready = true;
+      return;
+    }
+
+    if (req.jsImageData && !req.nativeArray) {
+      req.width = req.jsImageData.width;
+      req.height = req.jsImageData.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = true;
+      req.nativeArray = req.jsImageData.data;
+    }
+
     var tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
     var bufferBytesPerRow = model.width * tDetails.stride;
 

package/Rendering/WebGPU/TextureManager.js

@@ -5,26 +5,15 @@ import vtkWebGPUTexture from './Texture.js';
 var VtkDataTypes = vtkDataArray.VtkDataTypes; // ----------------------------------------------------------------------------
 // Global methods
 // ----------------------------------------------------------------------------
-
-function requestMatches(req1, req2) {
-  if (req1.time !== req2.time) return false;
-  if (req1.nativeArray !== req2.nativeArray) return false;
-  if (req1.format !== req2.format) return false;
-  return true;
-} // ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
 // vtkWebGPUTextureManager methods
 // ----------------------------------------------------------------------------
 
-
 function vtkWebGPUTextureManager(publicAPI, model) {
   // Set our className
-  model.classHierarchy.push('vtkWebGPUTextureManager'); // The keys fields of a request are
-  // - source, this is what owns the data and when it does away
-  //   the data should be freed
-  // - imageData - when provided use as the source of the data
-  //
+  model.classHierarchy.push('vtkWebGPUTextureManager'); // fills in request values based on what is missing/provided
 
-  publicAPI.getTexture = function (req) {
+  function _fillRequest(req) {
     // fill in values based on imageData if the request has it
     if (req.imageData) {
       req.dataArray = req.imageData.getPointData().getScalars();
@@ -75,59 +64,71 @@ function vtkWebGPUTextureManager(publicAPI, model) {
 
 
     if (req.image) {
-      req.time = 0;
       req.width = req.image.width;
       req.height = req.image.height;
       req.depth = 1;
       req.format = 'rgba8unorm';
+    } // fill in based on js imageData
+
+
+    if (req.jsImageData) {
+      req.width = req.jsImageData.width;
+      req.height = req.jsImageData.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = true;
+      req.nativeArray = req.jsImageData.data;
     }
 
-    if (req.source) {
-      // if a matching texture already exists then return it
-      if (model.textures.has(req.source)) {
-        var dabuffers = model.textures.get(req.source);
+    if (req.canvas) {
+      req.width = req.canvas.width;
+      req.height = req.canvas.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = true;
+      /* eslint-disable no-undef */
+
+      /* eslint-disable no-bitwise */
 
-        for (var i = 0; i < dabuffers.length; i++) {
-          if (requestMatches(dabuffers[i].request, req)) {
-            return dabuffers[i].texture;
-          }
-        }
-      }
+      req.usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;
+      /* eslint-enable no-undef */
+
+      /* eslint-enable no-bitwise */
     }
+  } // create a texture (used by getTexture)
 
+
+  function _createTexture(req) {
     var newTex = vtkWebGPUTexture.newInstance();
     newTex.create(model.device, {
       width: req.width,
       height: req.height,
       depth: req.depth,
-      format: req.format
+      format: req.format,
+      usage: req.usage
     }); // fill the texture if we have data
 
-    if (req.nativeArray || req.image) {
+    if (req.nativeArray || req.image || req.canvas) {
       newTex.writeImageData(req);
-    } // cache the texture if we have a source
-    // We create a new req that only has the fields required for
-    // a comparison to avoid GC cycles
+    }
 
+    return newTex;
+  } // get a texture or create it if not cached.
+  // this is the main entry point
 
-    if (req.source) {
-      if (!model.textures.has(req.source)) {
-        model.textures.set(req.source, []);
-      }
 
-      var _dabuffers = model.textures.get(req.source);
+  publicAPI.getTexture = function (req) {
+    // if we have a source the get/create/cache the texture
+    if (req.owner) {
+      // fill out the req time and format based on imageData/image
+      _fillRequest(req); // if a matching texture already exists then return it
+
 
-      _dabuffers.push({
-        request: {
-          time: req.time,
-          nativeArray: req.nativeArray,
-          format: req.format
-        },
-        texture: newTex
-      });
+      var hash = req.time + req.format;
+      return model.device.getCachedObject(req.owner, hash, _createTexture, req);
     }
 
-    return newTex;
+    return _createTexture(req);
   };
 } // ----------------------------------------------------------------------------
 // Object factory
@@ -135,7 +136,6 @@ function vtkWebGPUTextureManager(publicAPI, model) {
 
 
 var DEFAULT_VALUES = {
-  textures: null,
   handle: null,
   device: null
 }; // ----------------------------------------------------------------------------
@@ -144,9 +144,7 @@ function extend(publicAPI, model) {
   var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   Object.assign(model, DEFAULT_VALUES, initialValues); // Object methods
 
-  macro.obj(publicAPI, model); // this is a cache, and a cache with GC pretty much means WeakMap
-
-  model.textures = new WeakMap();
+  macro.obj(publicAPI, model);
   macro.setGet(publicAPI, model, ['device']);
   vtkWebGPUTextureManager(publicAPI, model);
 } // ----------------------------------------------------------------------------

package/Rendering/WebGPU/VolumePass.js

@@ -259,20 +259,19 @@ function vtkWebGPUVolumePass(publicAPI, model) {
   publicAPI.renderDepthBounds = function (renNode, viewNode) {
     publicAPI.updateDepthPolyData(renNode);
     var pd = model._boundsPoly;
-    var cells = pd.getPolys();
-    var hash = cells.getMTime(); // points
+    var cells = pd.getPolys(); // points
 
     var points = pd.getPoints();
     var buffRequest = {
-      hash: hash + points.getMTime(),
+      owner: points,
+      usage: BufferUsage.PointArray,
+      format: 'float32x4',
+      time: Math.max(points.getMTime(), cells.getMTime()),
+      hash: 'vp',
       dataArray: points,
-      source: points,
       cells: cells,
       primitiveType: PrimitiveTypes.Triangles,
       representation: Representation.SURFACE,
-      time: Math.max(points.getMTime(), cells.getMTime()),
-      usage: BufferUsage.PointArray,
-      format: 'float32x4',
       packExtra: true
     };
     var buff = viewNode.getDevice().getBufferManager().getBuffer(buffRequest);

package/Rendering/WebGPU/VolumePassFSQ.js

@@ -454,7 +454,7 @@ function vtkWebGPUVolumePassFSQ(publicAPI, model) {
 
       var treq = {
         imageData: image,
-        source: image
+        owner: image.getPointData().getScalars()
       };
       var newTex = device.getTextureManager().getTexture(treq);
 

package/Rendering/WebGPU.js

@@ -1,4 +1,20 @@
 import vtkRenderWindow from './WebGPU/RenderWindow.js';
+import './WebGPU/Actor.js';
+import './WebGPU/Camera.js';
+import './WebGPU/ForwardPass.js';
+import './WebGPU/Glyph3DMapper.js';
+import './WebGPU/HardwareSelector.js';
+import './WebGPU/ImageMapper.js';
+import './WebGPU/ImageSlice.js';
+import './WebGPU/PixelSpaceCallbackMapper.js';
+import './WebGPU/PolyDataMapper.js';
+import './WebGPU/Renderer.js';
+import './WebGPU/ScalarBarActor.js';
+import './WebGPU/SphereMapper.js';
+import './WebGPU/StickMapper.js';
+import './WebGPU/Texture.js';
+import './WebGPU/ViewNodeFactory.js';
+import './WebGPU/Volume.js';
 
 var WebGPU = {
   vtkRenderWindow: vtkRenderWindow

package/package.json

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