@kitware/vtk.js 33.2.1 → 33.3.0

package/Rendering/Core/Texture.d.ts

@@ -1,4 +1,5 @@
 import { vtkAlgorithm } from './../../interfaces';
+import { Nullable } from './../../types';
 
 /**
  *
@@ -15,67 +16,110 @@ export interface ITextureInitialValues {
 
 export interface vtkTexture extends vtkAlgorithm {
   /**
-   *
+   * Returns the canvas used by the texture.
+   */
+  getCanvas(): Nullable<HTMLCanvasElement>;
+
+  /**
+   * Returns true if the texture is set to repeat at the edges.
    */
   getRepeat(): boolean;
 
   /**
-   *
+   * Returns true if the texture is set to clamp at the edges.
    */
   getEdgeClamp(): boolean;
 
   /**
-   *
+   * Returns true if the texture is set to interpolate between texels.
    */
   getInterpolate(): boolean;
 
   /**
-   *
+   * Returns the image used by the texture.
    */
-  getImage(): any;
+  getImage(): Nullable<HTMLImageElement>;
 
   /**
-   *
+   * Returns an ImageBitmap object.
+   */
+  getImageBitmap(): Nullable<ImageBitmap>;
+
+  /**
+   * Returns true if the image is loaded.
    */
   getImageLoaded(): boolean;
 
   /**
-   *
+   * Returns the input image data object.
+   */
+  getInputAsJsImageData(): Nullable<
+    ImageData | ImageBitmap | HTMLCanvasElement | HTMLImageElement
+  >;
+
+  /**
+   * Returns the current mip level of the texture.
    */
   getMipLevel(): number;
 
   /**
-   *
-   * @param repeat
-   * @default false
+   * Returns true if the texture can be resized at run time.
+   * This is useful for dynamic textures that may change size based on user
+   * interaction or other factors.
    */
-  setRepeat(repeat: boolean): boolean;
+  getResizable(): boolean;
+
+  /**
+   * Returns the canvas used by the texture.
+   */
+  setCanvas(canvas: HTMLCanvasElement): void;
 
   /**
-   *
+   * Sets the texture to clamp at the edges.
    * @param edgeClamp
    * @default false
    */
   setEdgeClamp(edgeClamp: boolean): boolean;
 
   /**
-   *
+   * Sets the texture to interpolate between texels.
    * @param interpolate
    * @default false
    */
   setInterpolate(interpolate: boolean): boolean;
 
   /**
-   *
+   * Sets the image used by the texture.
    * @param image
    * @default null
    */
-  setImage(image: any): void;
+  setImage(image: HTMLImageElement): void;
+
+  /**
+   * Sets the image as an ImageBitmap object.
+   * Supported in WebGPU only.
+   * @param imageBitmap
+   */
+  setImageBitmap(imageBitmap: ImageBitmap): void;
+
+  /**
+   * Sets the input image data as a JavaScript ImageData object.
+   * @param imageData
+   */
+  setJsImageData(imageData: ImageData): void;
 
   /**
+   * Sets the current mip level of the texture.
    * @param level
    */
   setMipLevel(level: number): boolean;
+
+  /**
+   * Sets the texture to repeat at the edges.
+   * @param repeat
+   * @default false
+   */
+  setRepeat(repeat: boolean): boolean;
 }
 
 /**
@@ -116,10 +160,16 @@ export function generateMipmaps(
 ): Array<Uint8ClampedArray>;
 
 /**
- * vtkTexture is an image algorithm that handles loading and binding of texture maps.
- * It obtains its data from an input image data dataset type.
- * Thus you can create visualization pipelines to read, process, and construct textures.
- * Note that textures will only work if texture coordinates are also defined, and if the rendering system supports texture.
+ * vtkTexture is an image algorithm that handles loading and binding of texture
+ * maps. It obtains its data from an input image data dataset type. Thus you can
+ * create visualization pipelines to read, process, and construct textures. Note
+ * that textures will only work if texture coordinates are also defined, and if
+ * the rendering system supports texture.
+ *
+ * This class is used in both WebGL and WebGPU rendering backends, but the
+ * implementation details may vary. In WebGL, it uses HTMLImageElement and
+ * HTMLCanvasElement for textures, while in WebGPU, it uses HTMLImageElement,
+ * HTMLCanvasElement, and ImageBitmap.
  */
 export declare const vtkTexture: {
   newInstance: typeof newInstance;

package/Rendering/Core/Texture.js

@@ -25,11 +25,29 @@ function vtkTexture(publicAPI, model) {
       publicAPI.setInputConnection(null);
       model.image = null;
       model.canvas = null;
+      model.imageBitmap = null;
     }
     model.jsImageData = imageData;
     model.imageLoaded = true;
     publicAPI.modified();
   };
+  publicAPI.setImageBitmap = imageBitmap => {
+    if (model.imageBitmap === imageBitmap) {
+      return;
+    }
+
+    // clear other entries
+    if (imageBitmap !== null) {
+      publicAPI.setInputData(null);
+      publicAPI.setInputConnection(null);
+      model.image = null;
+      model.canvas = null;
+      model.jsImageData = null;
+    }
+    model.imageBitmap = imageBitmap;
+    model.imageLoaded = true;
+    publicAPI.modified();
+  };
   publicAPI.setCanvas = canvas => {
     if (model.canvas === canvas) {
       return;
@@ -40,6 +58,7 @@ function vtkTexture(publicAPI, model) {
       publicAPI.setInputData(null);
       publicAPI.setInputConnection(null);
       model.image = null;
+      model.imageBitmap = null;
       model.jsImageData = null;
     }
     model.canvas = canvas;
@@ -56,6 +75,7 @@ function vtkTexture(publicAPI, model) {
       publicAPI.setInputConnection(null);
       model.canvas = null;
       model.jsImageData = null;
+      model.imageBitmap = null;
     }
     model.image = image;
     model.imageLoaded = false;
@@ -88,13 +108,20 @@ function vtkTexture(publicAPI, model) {
       width = model.image.width;
       height = model.image.height;
     }
+    if (model.imageBitmap) {
+      width = model.imageBitmap.width;
+      height = model.imageBitmap.height;
+    }
     const dimensionality = (width > 1) + (height > 1) + (depth > 1);
     return dimensionality;
   };
   publicAPI.getInputAsJsImageData = () => {
     if (!model.imageLoaded || publicAPI.getInputData()) return null;
     if (model.jsImageData) {
-      return model.jsImageData();
+      return model.jsImageData;
+    }
+    if (model.imageBitmap) {
+      return model.imageBitmap;
     }
     if (model.canvas) {
       const context = model.canvas.getContext('2d');
@@ -102,14 +129,14 @@ function vtkTexture(publicAPI, model) {
       return imageData;
     }
     if (model.image) {
-      const canvas = document.createElement('canvas');
-      canvas.width = model.image.width;
-      canvas.height = model.image.height;
+      const width = model.image.width;
+      const height = model.image.height;
+      const canvas = new OffscreenCanvas(width, height);
       const context = canvas.getContext('2d');
-      context.translate(0, canvas.height);
+      context.translate(0, height);
       context.scale(1, -1);
-      context.drawImage(model.image, 0, 0, model.image.width, model.image.height);
-      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+      context.drawImage(model.image, 0, 0, width, height);
+      const imageData = context.getImageData(0, 0, width, height);
       return imageData;
     }
     return null;
@@ -206,6 +233,7 @@ const generateMipmaps = (device, texture, mipLevelCount) => {
     bindGroupLayouts: [bindGroupLayout]
   });
   const pipeline = device.createComputePipeline({
+    label: 'ComputeMipmapPipeline',
     layout: pipelineLayout,
     compute: {
       module: computeShader,
@@ -240,7 +268,9 @@ const generateMipmaps = (device, texture, mipLevelCount) => {
         resource: sampler
       }]
     });
-    const commandEncoder = device.createCommandEncoder();
+    const commandEncoder = device.createCommandEncoder({
+      label: `MipmapGenerateCommandEncoder`
+    });
     const computePass = commandEncoder.beginComputePass();
     computePass.setPipeline(pipeline);
     computePass.setBindGroup(0, bindGroup);
@@ -262,6 +292,7 @@ const DEFAULT_VALUES = {
   image: null,
   canvas: null,
   jsImageData: null,
+  imageBitmap: null,
   imageLoaded: false,
   repeat: false,
   interpolate: false,
@@ -279,7 +310,7 @@ function extend(publicAPI, model) {
   // Build VTK API
   macro.obj(publicAPI, model);
   macro.algo(publicAPI, model, 6, 0);
-  macro.get(publicAPI, model, ['canvas', 'image', 'jsImageData', 'imageLoaded', 'resizable']);
+  macro.get(publicAPI, model, ['canvas', 'image', 'jsImageData', 'imageBitmap', 'imageLoaded', 'resizable']);
   macro.setGet(publicAPI, model, ['repeat', 'edgeClamp', 'interpolate', 'mipLevel']);
   vtkTexture(publicAPI, model);
 }

package/Rendering/WebGPU/CellArrayMapper.js

@@ -71,6 +71,8 @@ struct PBRData {
   specular: vec3<f32>,
 }
 
+const pi: f32 = 3.14159265359;
+
 // Dot product with the max already in it
 fn mdot(a: vec3<f32>, b: vec3<f32>) -> f32 {
   return max(0.0, dot(a, b));
@@ -89,7 +91,6 @@ fn cdot(a: vec3<f32>, b: vec3<f32>) -> f32 {
 
 // Lambertian diffuse model
 fn lambertDiffuse(base: vec3<f32>, N: vec3<f32>, L: vec3<f32>) -> vec3<f32> {
-  var pi: f32 = 3.14159265359; 
   var NdotL: f32 = mdot(N, L);
   NdotL = pow(NdotL, 1.5);
   return (base/pi)*NdotL;
@@ -135,12 +136,10 @@ fn schlickFresnelRGB(V: vec3<f32>, N: vec3<f32>, F0: vec3<f32>) -> vec3<f32> {
 // https://learnopengl.com/PBR/Theory
 // Trowbridge-Reitz GGX functions: normal, halfway, roughness^2
 fn trGGX(N: vec3<f32>, H: vec3<f32>, a: f32) -> f32 {
-  var pi: f32 = 3.14159265359; 
-
   var a2: f32 = a*a;
   var NdotH = mdot(N, H);
   var NdotH2 = NdotH*NdotH;
-  
+
   var denom: f32 = NdotH2 * (a2 - 1.0) + 1.0;
 
   return a2 / max((pi*denom*denom), 0.000001);
@@ -176,7 +175,7 @@ fn cookTorrance(D: f32, F: f32, G: f32, N: vec3<f32>, V: vec3<f32>, L: vec3<f32>
 }
 
 // Different lighting calculations for different light sources
-fn calcDirectionalLight(N: vec3<f32>, V: vec3<f32>, ior: f32, roughness: f32, metallic: f32, direction: vec3<f32>, color: vec3<f32>, base: vec3<f32>) -> PBRData {  
+fn calcDirectionalLight(N: vec3<f32>, V: vec3<f32>, ior: f32, roughness: f32, metallic: f32, direction: vec3<f32>, color: vec3<f32>, base: vec3<f32>) -> PBRData {
   var L: vec3<f32> = normalize(direction); // Light Vector
   var H: vec3<f32> = normalize(L + V); // Halfway Vector
 
@@ -195,10 +194,10 @@ fn calcDirectionalLight(N: vec3<f32>, V: vec3<f32>, ior: f32, roughness: f32, me
   var specular: vec3<f32> = brdf*incoming*angle;
   // Oren-Nayar gives a clay-like effect when fully rough which some people may not want, so it might be better to give a separate
   // control property for the diffuse vs specular roughness
-  var diffuse: vec3<f32> = incoming*fujiiOrenNayar(base, roughness, N, L, V); 
+  var diffuse: vec3<f32> = incoming*fujiiOrenNayar(base, roughness, N, L, V);
   // Stores the specular and diffuse separately to allow for finer post processing
   var out = PBRData(diffuse, specular);
-  
+
   return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)
 }
 
@@ -226,7 +225,7 @@ fn calcPointLight(N: vec3<f32>, V: vec3<f32>, fragPos: vec3<f32>, ior: f32, roug
   // Stores the specular and diffuse separately to allow for finer post processing
   // Could also be done (propably more properly) with a struct
   var out = PBRData(diffuse, specular);
-  
+
   return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)
 }
 
@@ -244,7 +243,7 @@ fn calcSpotLight(N: vec3<f32>, V: vec3<f32>, fragPos: vec3<f32>, ior: f32, rough
   var G: f32 = smithSurfaceRoughness(N, V, L, k); // Geometry
 
   var brdf: f32 = cookTorrance(D, 1.0, G, N, V, L);
-  
+
   // Cones.x is the inner phi and cones.y is the outer phi
   var theta: f32 = mdot(normalize(direction), L);
   var epsilon: f32 = cones.x - cones.y;
@@ -263,7 +262,7 @@ fn calcSpotLight(N: vec3<f32>, V: vec3<f32>, fragPos: vec3<f32>, ior: f32, rough
   // Stores the specular and diffuse separately to allow for finer post processing
   // Could also be done (propably more properly) with a struct
   var out = PBRData(diffuse, specular);
-  
+
   return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)
 }
 
@@ -271,7 +270,6 @@ fn calcSpotLight(N: vec3<f32>, V: vec3<f32>, fragPos: vec3<f32>, ior: f32, rough
 // Takes in a vector and converts it to an equivalent coordinate in a rectilinear texture. Should be replaced with cubemaps at some point
 fn vecToRectCoord(dir: vec3<f32>) -> vec2<f32> {
   var tau: f32 = 6.28318530718;
-  var pi: f32 = 3.14159265359;
   var out: vec2<f32> = vec2<f32>(0.0);
 
   out.x = atan2(dir.z, dir.x) / tau;
@@ -385,56 +383,59 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     }
   };
   publicAPI.updateUBO = () => {
-    // make sure the data is up to date
     const actor = model.WebGPUActor.getRenderable();
     const ppty = actor.getProperty();
     const utime = model.UBO.getSendTime();
-    if (publicAPI.getMTime() > utime || ppty.getMTime() > utime || model.renderable.getMTime() > utime) {
-      // Matricies
-      const keyMats = model.WebGPUActor.getKeyMatrices(model.WebGPURenderer);
-      model.UBO.setArray('BCWCMatrix', keyMats.bcwc);
-      model.UBO.setArray('BCSCMatrix', keyMats.bcsc);
-      model.UBO.setArray('MCWCNormals', keyMats.normalMatrix);
-      if (model.is2D) {
-        model.UBO.setValue('ZValue', model.WebGPUActor.getRenderable().getProperty().getDisplayLocation() === DisplayLocation.FOREGROUND ? 1.0 : 0.0);
-        const aColor = ppty.getColorByReference();
-        model.UBO.setValue('AmbientIntensity', 1.0);
-        model.UBO.setArray('DiffuseColor', [aColor[0], aColor[1], aColor[2], 1.0]);
-        model.UBO.setValue('DiffuseIntensity', 0.0);
-        model.UBO.setValue('SpecularIntensity', 0.0);
-      } else {
-        // Base Colors
-        let aColor = ppty.getAmbientColorByReference();
-        model.UBO.setValue('AmbientIntensity', ppty.getAmbient());
-        model.UBO.setArray('AmbientColor', [aColor[0], aColor[1], aColor[2], 1.0]);
-        model.UBO.setValue('DiffuseIntensity', ppty.getDiffuse());
-        aColor = ppty.getDiffuseColorByReference();
-        model.UBO.setArray('DiffuseColor', [aColor[0], aColor[1], aColor[2], 1.0]);
-        // Roughness
-        model.UBO.setValue('Roughness', ppty.getRoughness());
-        model.UBO.setValue('BaseIOR', ppty.getBaseIOR());
-        // Metallic
-        model.UBO.setValue('Metallic', ppty.getMetallic());
-        // Normal
-        model.UBO.setValue('NormalStrength', ppty.getNormalStrength());
-        // Emission
-        model.UBO.setValue('Emission', ppty.getEmission());
-        // Specular
-        model.UBO.setValue('SpecularIntensity', ppty.getSpecular());
-        aColor = ppty.getSpecularColorByReference();
-        model.UBO.setArray('SpecularColor', [aColor[0], aColor[1], aColor[2], 1.0]);
-      }
-      // Edge and line rendering
-      const aColor = ppty.getEdgeColorByReference?.();
-      if (aColor) {
-        model.UBO.setArray('EdgeColor', [aColor[0], aColor[1], aColor[2], 1.0]);
+    if (publicAPI.getMTime() <= utime && ppty.getMTime() <= utime && model.renderable.getMTime() <= utime) {
+      return;
+    }
+
+    // --- Matrix Updates ---
+    const keyMats = model.WebGPUActor.getKeyMatrices(model.WebGPURenderer);
+    model.UBO.setArray('BCWCMatrix', keyMats.bcwc);
+    model.UBO.setArray('BCSCMatrix', keyMats.bcsc);
+    model.UBO.setArray('MCWCNormals', keyMats.normalMatrix);
+
+    // --- 2D or 3D ---
+    if (model.is2D) {
+      const displayLoc = ppty.getDisplayLocation?.() ?? DisplayLocation.BACKGROUND;
+      model.UBO.setValue('ZValue', displayLoc === DisplayLocation.FOREGROUND ? 1.0 : 0.0);
+      const aColor = ppty.getColorByReference();
+      model.UBO.setValue('AmbientIntensity', 1.0);
+      model.UBO.setArray('DiffuseColor', [...aColor, 1.0]);
+      model.UBO.setValue('DiffuseIntensity', 0.0);
+      model.UBO.setValue('SpecularIntensity', 0.0);
+    } else {
+      // Base Colors
+      model.UBO.setValue('AmbientIntensity', ppty.getAmbient());
+      model.UBO.setArray('AmbientColor', [...ppty.getAmbientColorByReference(), 1.0]);
+      model.UBO.setValue('DiffuseIntensity', ppty.getDiffuse());
+      model.UBO.setArray('DiffuseColor', [...ppty.getDiffuseColorByReference(), 1.0]);
+      // Roughness
+      model.UBO.setValue('Roughness', ppty.getRoughness());
+      model.UBO.setValue('BaseIOR', ppty.getBaseIOR());
+      // Metallic
+      model.UBO.setValue('Metallic', ppty.getMetallic());
+      // Normal
+      model.UBO.setValue('NormalStrength', ppty.getNormalStrength());
+      // Emission
+      model.UBO.setValue('Emission', ppty.getEmission());
+      // Specular
+      model.UBO.setValue('SpecularIntensity', ppty.getSpecular());
+      if (ppty.getSpecularColorByReference()) {
+        model.UBO.setArray('SpecularColor', [...ppty.getSpecularColorByReference(), 1.0]);
       }
-      model.UBO.setValue('LineWidth', ppty.getLineWidth());
-      model.UBO.setValue('Opacity', ppty.getOpacity());
-      model.UBO.setValue('PropID', model.WebGPUActor.getPropID());
-      const device = model.WebGPURenderWindow.getDevice();
-      model.UBO.sendIfNeeded(device);
     }
+
+    // --- Edge and Misc ---
+    const edgeColor = ppty.getEdgeColorByReference?.();
+    if (edgeColor) model.UBO.setArray('EdgeColor', [...edgeColor, 1.0]);
+    model.UBO.setValue('LineWidth', ppty.getLineWidth());
+    model.UBO.setValue('Opacity', ppty.getOpacity());
+    model.UBO.setValue('PropID', model.WebGPUActor.getPropID());
+
+    // Only send if needed
+    model.UBO.sendIfNeeded(model.WebGPURenderWindow.getDevice());
   };
   publicAPI.haveWideLines = () => {
     const actor = model.WebGPUActor.getRenderable();
@@ -523,8 +524,6 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     // Code that runs if the fragment shader includes normals
     if (code.includes('var normal:') && model.useRendererMatrix && !isEdges(hash) && !model.is2D && !hash.includes('sel')) {
       const lightingCode = [
-      // Constants
-      '  var pi: f32 = 3.14159265359;',
       // Vectors needed for light calculations
       '  var fragPos: vec3<f32> = vec3<f32>(input.vertexVC.xyz);', '  var V: vec3<f32> = mix(normalize(-fragPos), vec3<f32>(0, 0, 1), f32(rendererUBO.cameraParallel)); // View Vector',
       // Values needed for light calculations
@@ -640,7 +639,7 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
       }
       if (ambientOcclusionTexture?.getImageLoaded()) {
         if (checkDims(ambientOcclusionTexture)) {
-          usedTextures.push('_ambientOcclusionMap = textureSample(AmbientOcclusionTexture, AmbientOcclusionTextureSampler, input.tcoordVS);');
+          usedTextures.push('_ambientOcclusionMap = textureSample(AmbientOcclusionTexture, AmbientOcclusionTextureSampler, input.tcoordVS).rrra;');
         }
       }
     }
@@ -722,19 +721,18 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     }
     const vertexInput = model.vertexInput;
     const points = pd.getPoints();
-    let indexBuffer;
 
-    // get the flat mapping indexBuffer for the cells
+    // --- Index Buffer ---
+    let indexBuffer = null;
     if (cells) {
-      const buffRequest = {
+      indexBuffer = device.getBufferManager().getBuffer({
         hash: `R${representation}P${primType}${cells.getMTime()}`,
         usage: BufferUsage.Index,
         cells,
         numberOfPoints: points.getNumberOfPoints(),
         primitiveType: primType,
         representation
-      };
-      indexBuffer = device.getBufferManager().getBuffer(buffRequest);
+      });
       vertexInput.setIndexBuffer(indexBuffer);
     } else {
       vertexInput.setIndexBuffer(null);
@@ -749,26 +747,23 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     // - format
     // - usage
     // - packExtra - covered by format
-
-    // points
+    // --- Points Buffer ---
     if (points) {
       const shift = model.WebGPUActor.getBufferShift(model.WebGPURenderer);
-      const buffRequest = {
-        hash: `${points.getMTime()}I${indexBuffer.getMTime()}${shift.join()}float32x4`,
+      vertexInput.addBuffer(device.getBufferManager().getBuffer({
+        hash: `${points.getMTime()}I${indexBuffer?.getMTime?.() ?? 0}${shift.join()}float32x4`,
         usage: BufferUsage.PointArray,
         format: 'float32x4',
         dataArray: points,
         indexBuffer,
         shift,
         packExtra: true
-      };
-      const buff = device.getBufferManager().getBuffer(buffRequest);
-      vertexInput.addBuffer(buff, ['vertexBC']);
+      }), ['vertexBC']);
     } else {
       vertexInput.removeBufferIfPresent('vertexBC');
     }
 
-    // normals, only used for surface rendering
+    // --- Normals ---
     const usage = publicAPI.getUsage(representation, primType);
     model._usesCellNormals = false;
     if (!model.is2D && (
@@ -788,16 +783,14 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
         buffRequest.hash = `${normals.getMTime()}I${indexBuffer.getMTime()}snorm8x4`;
         buffRequest.dataArray = normals;
         buffRequest.usage = BufferUsage.PointArray;
-        const buff = device.getBufferManager().getBuffer(buffRequest);
-        vertexInput.addBuffer(buff, ['normalMC']);
+        vertexInput.addBuffer(device.getBufferManager().getBuffer(buffRequest), ['normalMC']);
       } else if (primType === PrimitiveTypes.Triangles) {
         model._usesCellNormals = true;
         buffRequest.hash = `PFN${points.getMTime()}I${indexBuffer.getMTime()}snorm8x4`;
         buffRequest.dataArray = points;
         buffRequest.cells = cells;
         buffRequest.usage = BufferUsage.NormalsFromPoints;
-        const buff = device.getBufferManager().getBuffer(buffRequest);
-        vertexInput.addBuffer(buff, ['normalMC']);
+        vertexInput.addBuffer(device.getBufferManager().getBuffer(buffRequest), ['normalMC']);
       } else {
         vertexInput.removeBufferIfPresent('normalMC');
       }
@@ -805,18 +798,15 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
       vertexInput.removeBufferIfPresent('normalMC');
     }
 
-    // deal with colors but only if modified
+    // --- Colors ---
     let haveColors = false;
     if (model.renderable.getScalarVisibility()) {
       const c = model.renderable.getColorMapColors();
       if (c && !edges) {
         const scalarMode = model.renderable.getScalarMode();
-        let haveCellScalars = false;
         // We must figure out how the scalars should be mapped to the polydata.
-        if ((scalarMode === ScalarMode.USE_CELL_DATA || scalarMode === ScalarMode.USE_CELL_FIELD_DATA || scalarMode === ScalarMode.USE_FIELD_DATA || !pd.getPointData().getScalars()) && scalarMode !== ScalarMode.USE_POINT_FIELD_DATA && c) {
-          haveCellScalars = true;
-        }
-        const buffRequest = {
+        const haveCellScalars = (scalarMode === ScalarMode.USE_CELL_DATA || scalarMode === ScalarMode.USE_CELL_FIELD_DATA || scalarMode === ScalarMode.USE_FIELD_DATA || !pd.getPointData().getScalars()) && scalarMode !== ScalarMode.USE_POINT_FIELD_DATA && c;
+        vertexInput.addBuffer(device.getBufferManager().getBuffer({
           usage: BufferUsage.PointArray,
           format: 'unorm8x4',
           hash: `${haveCellScalars}${c.getMTime()}I${indexBuffer.getMTime()}unorm8x4`,
@@ -824,15 +814,13 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
           indexBuffer,
           cellData: haveCellScalars,
           cellOffset: 0
-        };
-        const buff = device.getBufferManager().getBuffer(buffRequest);
-        vertexInput.addBuffer(buff, ['colorVI']);
+        }), ['colorVI']);
         haveColors = true;
       }
     }
-    if (!haveColors) {
-      vertexInput.removeBufferIfPresent('colorVI');
-    }
+    if (!haveColors) vertexInput.removeBufferIfPresent('colorVI');
+
+    // --- Texture Coordinates ---
     let tcoords = null;
     if (model.renderable.getInterpolateScalarsBeforeMapping?.() && model.renderable.getColorCoordinates()) {
       tcoords = model.renderable.getColorCoordinates();
@@ -840,134 +828,86 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
       tcoords = pd.getPointData().getTCoords();
     }
     if (tcoords && !edges) {
-      const buff = device.getBufferManager().getBufferForPointArray(tcoords, vertexInput.getIndexBuffer());
-      vertexInput.addBuffer(buff, ['tcoord']);
+      vertexInput.addBuffer(device.getBufferManager().getBufferForPointArray(tcoords, vertexInput.getIndexBuffer()), ['tcoord']);
     } else {
       vertexInput.removeBufferIfPresent('tcoord');
     }
   };
   publicAPI.updateTextures = () => {
-    // we keep track of new and used textures so
-    // that we can clean up any unused textures so we don't hold onto them
+    // Track textures in-use and new
     const usedTextures = [];
     const newTextures = [];
 
-    // do we have a scalar color texture
+    // Add scalar color texture if available
     const idata = model.renderable.getColorTextureMap?.();
+    if (idata && !model.colorTexture) {
+      model.colorTexture = vtkTexture.newInstance({
+        label: 'polyDataColor'
+      });
+    }
     if (idata) {
-      if (!model.colorTexture) {
-        model.colorTexture = vtkTexture.newInstance({
-          label: 'polyDataColor'
-        });
-      }
       model.colorTexture.setInputData(idata);
       newTextures.push(['Diffuse', model.colorTexture]);
     }
-
-    // actor textures?
     const actor = model.WebGPUActor.getRenderable();
     const renderer = model.WebGPURenderer.getRenderable();
-
-    // Reusing the old code for new and old textures, just loading in from properties instead of actor.getTextures()
-    const textures = [];
-
-    // Feels like there should be a better way than individually adding all
-    if (actor.getProperty().getDiffuseTexture?.()) {
-      const pair = ['Diffuse', actor.getProperty().getDiffuseTexture()];
-      textures.push(pair);
-    }
-    if (actor.getTextures()[0]) {
-      const pair = ['Diffuse', actor.getTextures()[0]];
-      textures.push(pair);
-    }
-    if (model.colorTexture) {
-      const pair = ['Diffuse', model.colorTexture];
-      textures.push(pair);
-    }
-    if (actor.getProperty().getORMTexture?.()) {
-      const pair = ['ORM', actor.getProperty().getORMTexture()];
-      textures.push(pair);
-    }
-    if (actor.getProperty().getRMTexture?.()) {
-      const pair = ['RM', actor.getProperty().getRMTexture()];
-      textures.push(pair);
-    }
-    if (actor.getProperty().getRoughnessTexture?.()) {
-      const pair = ['Roughness', actor.getProperty().getRoughnessTexture()];
-      textures.push(pair);
-    }
-    if (actor.getProperty().getMetallicTexture?.()) {
-      const pair = ['Metallic', actor.getProperty().getMetallicTexture()];
-      textures.push(pair);
-    }
-    if (actor.getProperty().getNormalTexture?.()) {
-      const pair = ['Normal', actor.getProperty().getNormalTexture()];
-      textures.push(pair);
-    }
-    if (actor.getProperty().getAmbientOcclusionTexture?.()) {
-      const pair = ['AmbientOcclusion', actor.getProperty().getAmbientOcclusionTexture()];
-      textures.push(pair);
-    }
-    if (actor.getProperty().getEmissionTexture?.()) {
-      const pair = ['Emission', actor.getProperty().getEmissionTexture()];
-      textures.push(pair);
-    }
-    if (renderer.getEnvironmentTexture?.()) {
-      const pair = ['Environment', renderer.getEnvironmentTexture()];
-      textures.push(pair);
-    }
-    for (let i = 0; i < textures.length; i++) {
-      if (textures[i][1].getInputData() || textures[i][1].getJsImageData() || textures[i][1].getCanvas()) {
-        newTextures.push(textures[i]);
+    const textures = [['Diffuse', actor.getProperty().getDiffuseTexture?.()], ['Diffuse', actor.getTextures()[0]], ['Diffuse', model.colorTexture], ['ORM', actor.getProperty().getORMTexture?.()], ['RM', actor.getProperty().getRMTexture?.()], ['Roughness', actor.getProperty().getRoughnessTexture?.()], ['Metallic', actor.getProperty().getMetallicTexture?.()], ['Normal', actor.getProperty().getNormalTexture?.()], ['AmbientOcclusion', actor.getProperty().getAmbientOcclusionTexture?.()], ['Emission', actor.getProperty().getEmissionTexture?.()], ['Environment', renderer.getEnvironmentTexture?.()]];
+    textures.forEach(_ref => {
+      let [name, tex] = _ref;
+      if (!tex) return;
+      if (tex.getInputData() || tex.getJsImageData() || tex.getCanvas() || tex.getImageBitmap()) {
+        newTextures.push([name, tex]);
       }
-      if (textures[i][1].getImage() && textures[i][1].getImageLoaded()) {
-        newTextures.push(textures[i]);
+      if (tex.getImage() && tex.getImageLoaded()) {
+        newTextures.push([name, tex]);
       }
-    }
-    for (let i = 0; i < newTextures.length; i++) {
-      const srcTexture = newTextures[i][1];
-      const textureName = newTextures[i][0];
-      const newTex = model.device.getTextureManager().getTextureForVTKTexture(srcTexture); // Generates hash
-      if (newTex.getReady()) {
-        // is this a new texture
-        let found = false;
-        for (let t = 0; t < model.textures.length; t++) {
-          if (model.textures[t] === newTex) {
-            found = true;
-            usedTextures[t] = true;
-          }
+    });
+
+    // Add textures to manager only if not present
+    newTextures.forEach(_ref2 => {
+      let [textureName, srcTexture] = _ref2;
+      const newTex = model.device.getTextureManager().getTextureForVTKTexture(srcTexture);
+      if (!newTex.getReady()) return;
+      let found = false;
+      for (let t = 0; t < model.textures.length; ++t) {
+        if (model.textures[t] === newTex) {
+          found = true;
+          usedTextures[t] = true;
+          break;
         }
-        if (!found) {
-          usedTextures[model.textures.length] = true;
-          const tview = newTex.createView(`${textureName}Texture`);
-          model.textures.push(newTex);
-          model.textureViews.push(tview);
-          const interpolate = srcTexture.getInterpolate() ? 'linear' : 'nearest';
-          let addressMode = null;
-          if (!addressMode && srcTexture.getEdgeClamp() && srcTexture.getRepeat()) addressMode = 'mirror-repeat';
-          if (!addressMode && srcTexture.getEdgeClamp()) addressMode = 'clamp-to-edge';
-          if (!addressMode && srcTexture.getRepeat()) addressMode = 'repeat';
-          if (textureName !== 'Environment') {
-            tview.addSampler(model.device, {
-              addressModeU: addressMode,
-              addressModeV: addressMode,
-              addressModeW: addressMode,
-              minFilter: interpolate,
-              magFilter: interpolate
-            });
-          } else {
-            tview.addSampler(model.device, {
-              addressModeU: 'repeat',
-              addressModeV: 'clamp-to-edge',
-              addressModeW: 'repeat',
-              minFilter: interpolate,
-              magFilter: interpolate,
-              mipmapFilter: 'linear'
-            });
-          }
+      }
+      if (!found) {
+        usedTextures[model.textures.length] = true;
+        const tview = newTex.createView(`${textureName}Texture`);
+        model.textures.push(newTex);
+        model.textureViews.push(tview);
+
+        // Sampler setup
+        const interpolate = srcTexture.getInterpolate() ? 'linear' : 'nearest';
+        let addressMode = null;
+        if (srcTexture.getEdgeClamp() && srcTexture.getRepeat()) addressMode = 'mirror-repeat';else if (srcTexture.getEdgeClamp()) addressMode = 'clamp-to-edge';else if (srcTexture.getRepeat()) addressMode = 'repeat';
+
+        // Handle environment texture separately
+        if (textureName !== 'Environment') {
+          tview.addSampler(model.device, {
+            addressModeU: addressMode,
+            addressModeV: addressMode,
+            addressModeW: addressMode,
+            minFilter: interpolate,
+            magFilter: interpolate
+          });
+        } else {
+          tview.addSampler(model.device, {
+            addressModeU: 'repeat',
+            addressModeV: 'clamp-to-edge',
+            addressModeW: 'repeat',
+            minFilter: interpolate,
+            magFilter: interpolate,
+            mipmapFilter: 'linear'
+          });
         }
       }
-    }
+    });
 
     // remove unused textures
     for (let i = model.textures.length - 1; i >= 0; i--) {

package/Rendering/WebGPU/Texture.js

@@ -1,14 +1,9 @@
 import { m as macro } from '../../macros2.js';
 import HalfFloat from '../../Common/Core/HalfFloat.js';
-import vtkWebGPUBufferManager from './BufferManager.js';
 import vtkWebGPUTextureView from './TextureView.js';
 import vtkWebGPUTypes from './Types.js';
 import vtkTexture from '../Core/Texture.js';
 
-const {
-  BufferUsage
-} = vtkWebGPUBufferManager;
-
 // ----------------------------------------------------------------------------
 // Global methods
 // ----------------------------------------------------------------------------
@@ -59,20 +54,38 @@ function vtkWebGPUTexture(publicAPI, model) {
 
   publicAPI.writeImageData = req => {
     let nativeArray = [];
-    if (req.canvas) {
+    const _copyImageToTexture = source => {
       model.device.getHandle().queue.copyExternalImageToTexture({
-        source: req.canvas,
+        source,
         flipY: req.flip
       }, {
         texture: model.handle,
-        premultipliedAlpha: true
-      }, [model.width, model.height, model.depth]);
+        premultipliedAlpha: true,
+        mipLevel: 0,
+        origin: {
+          x: 0,
+          y: 0,
+          z: 0
+        }
+      }, [source.width, source.height, model.depth]);
 
       // Generate mipmaps on GPU if needed
       if (publicAPI.getDimensionality() !== 3 && model.mipLevel > 0) {
         vtkTexture.generateMipmaps(model.device.getHandle(), model.handle, model.mipLevel + 1);
       }
       model.ready = true;
+    };
+    if (req.canvas) {
+      _copyImageToTexture(req.canvas);
+      return;
+    }
+    if (req.imageBitmap) {
+      req.width = req.imageBitmap.width;
+      req.height = req.imageBitmap.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = false;
+      _copyImageToTexture(req.imageBitmap);
       return;
     }
     if (req.jsImageData && !req.nativeArray) {
@@ -85,6 +98,16 @@ function vtkWebGPUTexture(publicAPI, model) {
     }
     const tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
     let bufferBytesPerRow = model.width * tDetails.stride;
+
+    /**
+     * Align texture data to ensure bytesPerRow is a multiple of 256.
+     * This is necessary for WebGPU texture uploads, especially for half-float formats.
+     * It also handles half-float conversion if the texture format requires it.
+     * @param {*} arr - The input array containing texture data.
+     * @param {*} height - The height of the texture.
+     * @param {*} depth - The depth of the texture (1 for 2D textures).
+     * @returns
+     */
     const alignTextureData = (arr, height, depth) => {
       // bytesPerRow must be a multiple of 256 so we might need to rebuild
       // the data here before passing to the buffer. e.g. if it is unorm8x4 then
@@ -132,9 +155,7 @@ function vtkWebGPUTexture(publicAPI, model) {
       nativeArray = req.nativeArray;
     }
     if (req.image) {
-      const canvas = document.createElement('canvas');
-      canvas.width = req.image.width;
-      canvas.height = req.image.height;
+      const canvas = new OffscreenCanvas(req.image.width, req.image.height);
       const ctx = canvas.getContext('2d');
       ctx.translate(0, canvas.height);
       ctx.scale(1, -1);
@@ -142,57 +163,31 @@ function vtkWebGPUTexture(publicAPI, model) {
       const imageData = ctx.getImageData(0, 0, req.image.width, req.image.height);
       nativeArray = imageData.data;
     }
-    const cmdEnc = model.device.createCommandEncoder();
-    if (publicAPI.getDimensionality() !== 3) {
-      // Non-3D
-      // First, upload the base mip level (level 0)
-      const ret = alignTextureData(nativeArray, model.height, 1);
-      bufferBytesPerRow = ret[1];
-      const buffRequest = {
-        dataArray: req.dataArray ? req.dataArray : null,
-        nativeArray: ret[0],
-        usage: BufferUsage.Texture
-      };
-      const buff = model.device.getBufferManager().getBuffer(buffRequest);
-      cmdEnc.copyBufferToTexture({
-        buffer: buff.getHandle(),
-        offset: 0,
-        bytesPerRow: bufferBytesPerRow,
-        rowsPerImage: model.height
-      }, {
-        texture: model.handle,
-        mipLevel: 0
-      }, [model.width, model.height, 1]);
-
-      // Submit the base level upload
-      model.device.submitCommandEncoder(cmdEnc);
-
-      // Generate remaining mip levels on GPU
-      if (model.mipLevel > 0) {
-        vtkTexture.generateMipmaps(model.device.getHandle(), model.handle, model.mipLevel + 1);
+    const is3D = publicAPI.getDimensionality() === 3;
+    const alignedTextureData = alignTextureData(nativeArray, model.height, is3D ? model.depth : 1);
+    bufferBytesPerRow = alignedTextureData[1];
+    const data = alignedTextureData[0];
+    model.device.getHandle().queue.writeTexture({
+      texture: model.handle,
+      mipLevel: 0,
+      origin: {
+        x: 0,
+        y: 0,
+        z: 0
       }
-      model.ready = true;
-    } else {
-      // 3D, no mipmaps
-      const ret = alignTextureData(nativeArray, model.height, model.depth);
-      bufferBytesPerRow = ret[1];
-      const buffRequest = {
-        dataArray: req.dataArray ? req.dataArray : null,
-        usage: BufferUsage.Texture
-      };
-      buffRequest.nativeArray = ret[0];
-      const buff = model.device.getBufferManager().getBuffer(buffRequest);
-      cmdEnc.copyBufferToTexture({
-        buffer: buff.getHandle(),
-        offset: 0,
-        bytesPerRow: bufferBytesPerRow,
-        rowsPerImage: model.height
-      }, {
-        texture: model.handle
-      }, [model.width, model.height, model.depth]);
-      model.device.submitCommandEncoder(cmdEnc);
-      model.ready = true;
+    }, data, {
+      offset: 0,
+      bytesPerRow: bufferBytesPerRow,
+      rowsPerImage: model.height
+    }, {
+      width: model.width,
+      height: model.height,
+      depthOrArrayLayers: is3D ? model.depth : 1
+    });
+    if (!is3D && model.mipLevel > 0) {
+      vtkTexture.generateMipmaps(model.device.getHandle(), model.handle, model.mipLevel + 1);
     }
+    model.ready = true;
   };
 
   // when data is pulled out of this texture what scale must be applied to

package/Rendering/WebGPU/TextureManager.js

@@ -2,7 +2,6 @@ import { m as macro } from '../../macros2.js';
 import vtkDataArray from '../../Common/Core/DataArray.js';
 import vtkWebGPUTexture from './Texture.js';
 
-/* eslint-disable no-bitwise */
 const {
   VtkDataTypes
 } = vtkDataArray;
@@ -70,7 +69,11 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       req.height = req.image.height;
       req.depth = 1;
       req.format = 'rgba8unorm';
+      /* eslint-disable no-undef */
+      /* eslint-disable no-bitwise */
       req.usage = GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING;
+      /* eslint-enable no-undef */
+      /* eslint-enable no-bitwise */
     }
 
     // fill in based on js imageData
@@ -81,8 +84,26 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       req.format = 'rgba8unorm';
       req.flip = true;
       req.nativeArray = req.jsImageData.data;
+      /* eslint-disable no-undef */
+      /* eslint-disable no-bitwise */
       req.usage = GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING;
+      /* eslint-enable no-undef */
+      /* eslint-enable no-bitwise */
     }
+
+    if (req.imageBitmap) {
+      req.width = req.imageBitmap.width;
+      req.height = req.imageBitmap.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = true;
+      /* eslint-disable no-undef */
+      /* eslint-disable no-bitwise */
+      req.usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;
+      /* eslint-enable no-undef */
+      /* eslint-enable no-bitwise */
+    }
+
     if (req.canvas) {
       req.width = req.canvas.width;
       req.height = req.canvas.height;
@@ -110,7 +131,7 @@ function vtkWebGPUTextureManager(publicAPI, model) {
     });
 
     // fill the texture if we have data
-    if (req.nativeArray || req.image || req.canvas) {
+    if (req.nativeArray || req.image || req.canvas || req.imageBitmap) {
       newTex.writeImageData(req);
     }
     return newTex;
@@ -146,6 +167,8 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       treq.image = srcTexture.getImage();
     } else if (srcTexture.getJsImageData()) {
       treq.jsImageData = srcTexture.getJsImageData();
+    } else if (srcTexture.getImageBitmap()) {
+      treq.imageBitmap = srcTexture.getImageBitmap();
     } else if (srcTexture.getCanvas()) {
       treq.canvas = srcTexture.getCanvas();
     }

package/package.json

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