@kitware/vtk.js 33.1.1 → 33.2.1

package/IO/Geometry/GLTFImporter/Reader.js

@@ -208,16 +208,15 @@ async function createPropertyFromGLTFMaterial(model, material, actor) {
         property.setDiffuseTexture(diffuseTex);
       }
     }
+
+    // Handle metallic-roughness texture (metallicRoughnessTexture)
     if (pbr.metallicRoughnessTexture) {
       pbr.metallicRoughnessTexture.extensions;
       const tex = pbr.metallicRoughnessTexture.texture;
       const sampler = tex.sampler;
-      const metallicImage = await loadImage(tex.source, 'b');
-      const metallicTex = createVTKTextureFromGLTFTexture(metallicImage, sampler);
-      property.setMetallicTexture(metallicTex);
-      const roughnessImage = await loadImage(tex.source, 'g');
-      const roughnessTex = createVTKTextureFromGLTFTexture(roughnessImage, sampler);
-      property.setRoughnessTexture(roughnessTex);
+      const rmImage = await loadImage(tex.source);
+      const rmTex = createVTKTextureFromGLTFTexture(rmImage, sampler);
+      property.setRMTexture(rmTex);
     }
 
     // Handle ambient occlusion texture (occlusionTexture)

package/Rendering/Core/Property.d.ts

@@ -1,5 +1,5 @@
 import { vtkObject } from './../../interfaces';
-import { RGBColor } from './../../types';
+import { Nullable, RGBColor } from './../../types';
 import { Interpolation, Representation, Shading } from './Property/Constants';
 import { vtkTexture } from './Texture';
 
@@ -14,6 +14,8 @@ export interface IPropertyInitialValues {
   normalTexture?: vtkTexture;
   ambientOcclusionTexture?: vtkTexture;
   emissionTexture?: vtkTexture;
+  RMTexture?: vtkTexture;
+  ORMTexture?: vtkTexture;
   edgeColor?: RGBColor;
   ambient?: number;
   diffuse?: number;
@@ -216,32 +218,42 @@ export interface vtkProperty extends vtkObject {
   /**
    * Get the diffuse texture.
    */
-  getDiffuseTexture(): vtkTexture;
+  getDiffuseTexture(): Nullable<vtkTexture>;
 
   /**
    * Get the metallic texture.
    */
-  getMetallicTexture(): vtkTexture;
+  getMetallicTexture(): Nullable<vtkTexture>;
+
+  /**
+   * Get the roughness & metallic texture.
+   */
+  getRMTexture(): Nullable<vtkTexture>;
+
+  /**
+   * Get the occlusion, roughness & metallic texture.
+   */
+  getORMTexture(): Nullable<vtkTexture>;
 
   /**
    * Get the roughness texture.
    */
-  getRoughnessTexture(): vtkTexture;
+  getRoughnessTexture(): Nullable<vtkTexture>;
 
   /**
    * Get the normal texture.
    */
-  getNormalTexture(): vtkTexture;
+  getNormalTexture(): Nullable<vtkTexture>;
 
   /**
    * Get the ambient occlusion texture.
    */
-  getAmbientOcclusionTexture(): vtkTexture;
+  getAmbientOcclusionTexture(): Nullable<vtkTexture>;
 
   /**
    * Get the emission texture.
    */
-  getEmissionTexture(): vtkTexture;
+  getEmissionTexture(): Nullable<vtkTexture>;
 
   /**
    * Set the ambient lighting coefficient.
@@ -500,6 +512,18 @@ export interface vtkProperty extends vtkObject {
    */
   setRoughnessTexture(roughnessTexture: vtkTexture): boolean;
 
+  /**
+   * Set the roughness & metallic texture.
+   * @param {vtkTexture} RMTexture
+   */
+  setRMTexture(RMTexture: vtkTexture): boolean;
+
+  /**
+   * Set the occlusion, roughness & metallic texture.
+   * @param {vtkTexture} ORMTexture
+   */
+  setORMTexture(ORMTexture: vtkTexture): boolean;
+
   /**
    * Set the normal texture.
    * @param {vtkTexture} normalTexture

package/Rendering/Core/Property.js

@@ -94,7 +94,9 @@ const DEFAULT_VALUES = {
   lineWidth: 1,
   lighting: true,
   shading: false,
-  materialName: null
+  materialName: null,
+  ORMTexture: null,
+  RMTexture: null
 };
 
 // ----------------------------------------------------------------------------
@@ -105,7 +107,7 @@ function extend(publicAPI, model) {
 
   // Build VTK API
   macro.obj(publicAPI, model);
-  macro.setGet(publicAPI, model, ['lighting', 'interpolation', 'ambient', 'diffuse', 'metallic', 'roughness', 'normalStrength', 'emission', 'baseIOR', 'specular', 'specularPower', 'opacity', 'edgeVisibility', 'lineWidth', 'pointSize', 'backfaceCulling', 'frontfaceCulling', 'representation', 'diffuseTexture', 'metallicTexture', 'roughnessTexture', 'normalTexture', 'ambientOcclusionTexture', 'emissionTexture']);
+  macro.setGet(publicAPI, model, ['lighting', 'interpolation', 'ambient', 'diffuse', 'metallic', 'roughness', 'normalStrength', 'emission', 'baseIOR', 'specular', 'specularPower', 'opacity', 'edgeVisibility', 'lineWidth', 'pointSize', 'backfaceCulling', 'frontfaceCulling', 'representation', 'diffuseTexture', 'metallicTexture', 'roughnessTexture', 'normalTexture', 'ambientOcclusionTexture', 'emissionTexture', 'ORMTexture', 'RMTexture']);
   macro.setGetArray(publicAPI, model, ['ambientColor', 'specularColor', 'diffuseColor', 'edgeColor'], 3);
 
   // Object methods

package/Rendering/Core/Texture.d.ts

@@ -98,19 +98,21 @@ export function extend(
 export function newInstance(initialValues?: ITextureInitialValues): vtkTexture;
 
 /**
- * Method used to create mipmaps from given texture data. Works best with textures that have a
- * width and a height that are powers of two.
+ * Generates mipmaps for a given GPU texture using a compute shader.
  *
- * @param nativeArray the array of data to create mipmaps from.
- * @param width the width of the data
- * @param height the height of the data
- * @param level the level to which additional mipmaps are generated.
+ * This function iteratively generates each mip level for the provided texture,
+ * using a bilinear downsampling compute shader implemented in WGSL. It creates
+ * the necessary pipeline, bind groups, and dispatches compute passes for each
+ * mip level.
+ *
+ * @param {GPUDevice} device - The WebGPU device used to create resources and submit commands.
+ * @param {GPUTexture} texture - The GPU texture for which mipmaps will be generated.
+ * @param {number} mipLevelCount - The total number of mip levels to generate (including the base level).
  */
 export function generateMipmaps(
-  nativeArray: any,
-  width: number,
-  height: number,
-  level: number
+  device: any,
+  texture: any,
+  mipLevelCount: number
 ): Array<Uint8ClampedArray>;
 
 /**

package/Rendering/Core/Texture.js

@@ -1,5 +1,7 @@
 import { m as macro } from '../../macros2.js';
 
+/* eslint-disable no-bitwise */
+
 // ----------------------------------------------------------------------------
 // vtkTexture methods
 // ----------------------------------------------------------------------------
@@ -114,90 +116,142 @@ function vtkTexture(publicAPI, model) {
   };
 }
 
-// Use nativeArray instead of self
-const generateMipmaps = (nativeArray, width, height, level) => {
-  // TODO: FIX UNEVEN TEXTURE MIP GENERATION:
-  // When textures don't have standard ratios, higher mip levels
-  // result in their color chanels getting messed up and shifting
-  // 3x3 gaussian kernel
-  const g3m = [1, 2, 1]; // eslint-disable-line
-  const g3w = 4; // eslint-disable-line
-
-  const kernel = g3m;
-  const kernelWeight = g3w;
-  const hs = nativeArray.length / (width * height); // TODO: support for textures with depth more than 1
-  let currentWidth = width;
-  let currentHeight = height;
-  let imageData = nativeArray;
-  const maps = [imageData];
-  for (let i = 0; i < level; i++) {
-    const oldData = [...imageData];
-    currentWidth /= 2;
-    currentHeight /= 2;
-    imageData = new Uint8ClampedArray(currentWidth * currentHeight * hs);
-    const vs = hs * currentWidth;
-
-    // Scale down
-    let shift = 0;
-    for (let p = 0; p < imageData.length; p += hs) {
-      if (p % vs === 0) {
-        shift += 2 * hs * currentWidth;
+/**
+ * Generates mipmaps for a given GPU texture using a compute shader.
+ *
+ * This function iteratively generates each mip level for the provided texture,
+ * using a bilinear downsampling compute shader implemented in WGSL. It creates
+ * the necessary pipeline, bind groups, and dispatches compute passes for each
+ * mip level.
+ *
+ * @param {GPUDevice} device - The WebGPU device used to create resources and submit commands.
+ * @param {GPUTexture} texture - The GPU texture for which mipmaps will be generated. Must be created with mip levels.
+ * @param {number} mipLevelCount - The total number of mip levels to generate (including the base level).
+ */
+const generateMipmaps = (device, texture, mipLevelCount) => {
+  const computeShaderCode = `
+    @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+    @group(0) @binding(1) var outputTexture: texture_storage_2d<rgba8unorm, write>;
+
+    @compute @workgroup_size(8, 8)
+    fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
+      let texelCoord = vec2<i32>(global_id.xy);
+      let outputSize = textureDimensions(outputTexture);
+
+      if (texelCoord.x >= i32(outputSize.x) || texelCoord.y >= i32(outputSize.y)) {
+        return;
       }
-      for (let c = 0; c < hs; c++) {
-        let sample = oldData[shift + c];
-        sample += oldData[shift + hs + c];
-        sample += oldData[shift - 2 * vs + c];
-        sample += oldData[shift - 2 * vs + hs + c];
-        sample /= 4;
-        imageData[p + c] = sample;
+
+      let inputSize = textureDimensions(inputTexture);
+      let scale = vec2<f32>(inputSize) / vec2<f32>(outputSize);
+
+      // Compute the floating-point source coordinate
+      let srcCoord = (vec2<f32>(texelCoord) + 0.5) * scale - 0.5;
+
+      // Get integer coordinates for the four surrounding texels
+      let x0 = i32(floor(srcCoord.x));
+      let x1 = min(x0 + 1, i32(inputSize.x) - 1);
+      let y0 = i32(floor(srcCoord.y));
+      let y1 = min(y0 + 1, i32(inputSize.y) - 1);
+
+      // Compute the weights
+      let wx = srcCoord.x - f32(x0);
+      let wy = srcCoord.y - f32(y0);
+
+      // Fetch the four texels
+      let c00 = textureLoad(inputTexture, vec2<i32>(x0, y0), 0);
+      let c10 = textureLoad(inputTexture, vec2<i32>(x1, y0), 0);
+      let c01 = textureLoad(inputTexture, vec2<i32>(x0, y1), 0);
+      let c11 = textureLoad(inputTexture, vec2<i32>(x1, y1), 0);
+
+      // Bilinear interpolation
+      let color = mix(
+        mix(c00, c10, wx),
+        mix(c01, c11, wx),
+        wy
+      );
+
+      textureStore(outputTexture, texelCoord, color);
+    }
+  `;
+  const computeShader = device.createShaderModule({
+    code: computeShaderCode
+  });
+  const bindGroupLayout = device.createBindGroupLayout({
+    entries: [{
+      binding: 0,
+      // eslint-disable-next-line no-undef
+      visibility: GPUShaderStage.COMPUTE,
+      texture: {
+        sampleType: 'float'
       }
-      shift += 2 * hs;
-    }
-
-    // Horizontal Pass
-    let dataCopy = [...imageData];
-    for (let p = 0; p < imageData.length; p += hs) {
-      for (let c = 0; c < hs; c++) {
-        let x = -(kernel.length - 1) / 2;
-        let kw = kernelWeight;
-        let value = 0.0;
-        for (let k = 0; k < kernel.length; k++) {
-          let index = p + c + x * hs;
-          const lineShift = index % vs - (p + c) % vs;
-          if (lineShift > hs) index += vs;
-          if (lineShift < -hs) index -= vs;
-          if (dataCopy[index]) {
-            value += dataCopy[index] * kernel[k];
-          } else {
-            kw -= kernel[k];
-          }
-          x += 1;
-        }
-        imageData[p + c] = value / kw;
+    }, {
+      binding: 1,
+      // eslint-disable-next-line no-undef
+      visibility: GPUShaderStage.COMPUTE,
+      storageTexture: {
+        format: 'rgba8unorm',
+        access: 'write-only'
       }
-    }
-    // Vertical Pass
-    dataCopy = [...imageData];
-    for (let p = 0; p < imageData.length; p += hs) {
-      for (let c = 0; c < hs; c++) {
-        let x = -(kernel.length - 1) / 2;
-        let kw = kernelWeight;
-        let value = 0.0;
-        for (let k = 0; k < kernel.length; k++) {
-          const index = p + c + x * vs;
-          if (dataCopy[index]) {
-            value += dataCopy[index] * kernel[k];
-          } else {
-            kw -= kernel[k];
-          }
-          x += 1;
-        }
-        imageData[p + c] = value / kw;
+    }, {
+      binding: 2,
+      // eslint-disable-next-line no-undef
+      visibility: GPUShaderStage.COMPUTE,
+      sampler: {
+        type: 'filtering'
       }
+    }]
+  });
+  const pipelineLayout = device.createPipelineLayout({
+    bindGroupLayouts: [bindGroupLayout]
+  });
+  const pipeline = device.createComputePipeline({
+    layout: pipelineLayout,
+    compute: {
+      module: computeShader,
+      entryPoint: 'main'
     }
-    maps.push(imageData);
+  });
+  const sampler = device.createSampler({
+    magFilter: 'linear',
+    minFilter: 'linear'
+  });
+
+  // Generate each mip level
+  for (let mipLevel = 1; mipLevel < mipLevelCount; mipLevel++) {
+    const srcView = texture.createView({
+      baseMipLevel: mipLevel - 1,
+      mipLevelCount: 1
+    });
+    const dstView = texture.createView({
+      baseMipLevel: mipLevel,
+      mipLevelCount: 1
+    });
+    const bindGroup = device.createBindGroup({
+      layout: pipeline.getBindGroupLayout(0),
+      entries: [{
+        binding: 0,
+        resource: srcView
+      }, {
+        binding: 1,
+        resource: dstView
+      }, {
+        binding: 2,
+        resource: sampler
+      }]
+    });
+    const commandEncoder = device.createCommandEncoder();
+    const computePass = commandEncoder.beginComputePass();
+    computePass.setPipeline(pipeline);
+    computePass.setBindGroup(0, bindGroup);
+    const mipWidth = Math.max(1, texture.width >> mipLevel);
+    const mipHeight = Math.max(1, texture.height >> mipLevel);
+    const workgroupsX = Math.ceil(mipWidth / 8);
+    const workgroupsY = Math.ceil(mipHeight / 8);
+    computePass.dispatchWorkgroups(workgroupsX, workgroupsY);
+    computePass.end();
+    device.queue.submit([commandEncoder.finish()]);
   }
-  return maps;
 };
 
 // ----------------------------------------------------------------------------

package/Rendering/WebGPU/Buffer.js

@@ -42,13 +42,14 @@ function vtkWebGPUBuffer(publicAPI, model) {
     bufferSubData(model.device.getHandle(), model.handle, 0, data.buffer);
   };
   publicAPI.createAndWrite = (data, usage) => {
+    const paddedSize = Math.ceil(data.byteLength / 4) * 4;
     model.handle = model.device.getHandle().createBuffer({
-      size: data.byteLength,
+      size: paddedSize,
       usage,
       mappedAtCreation: true,
       label: model.label
     });
-    model.sizeInBytes = data.byteLength;
+    model.sizeInBytes = paddedSize;
     model.usage = usage;
     new Uint8Array(model.handle.getMappedRange()).set(new Uint8Array(data.buffer)); // memcpy
     model.handle.unmap();

package/Rendering/WebGPU/CellArrayMapper.js

@@ -595,44 +595,65 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     const fDesc = pipeline.getShaderDescription('fragment');
     code = fDesc.getCode();
     const actor = model.WebGPUActor.getRenderable();
+    const property = actor.getProperty();
     const checkDims = texture => {
       if (!texture) return false;
       const dims = texture.getDimensionality();
       return dims === numComp;
     };
     const usedTextures = [];
-    if (actor.getProperty().getDiffuseTexture?.()?.getImageLoaded() || actor.getTextures()[0] || model.colorTexture) {
+    const diffuseTexture = property.getDiffuseTexture?.();
+    if (diffuseTexture?.getImageLoaded() || actor.getTextures()[0] || model.colorTexture) {
       if (
       // Chained or statements here are questionable
-      checkDims(actor.getProperty().getDiffuseTexture?.()) || checkDims(actor.getTextures()[0]) || checkDims(model.colorTexture)) {
+      checkDims(diffuseTexture) || checkDims(actor.getTextures()[0]) || checkDims(model.colorTexture)) {
         usedTextures.push('_diffuseMap = textureSample(DiffuseTexture, DiffuseTextureSampler, input.tcoordVS);');
       }
     }
-    if (actor.getProperty().getRoughnessTexture?.()?.getImageLoaded()) {
-      if (checkDims(actor.getProperty().getRoughnessTexture())) {
-        usedTextures.push('_roughnessMap = textureSample(RoughnessTexture, RoughnessTextureSampler, input.tcoordVS);');
+    const ormTexture = property.getORMTexture?.();
+    const rmTexture = property.getRMTexture?.();
+    const roughnessTexture = property.getRoughnessTexture?.();
+    const metallicTexture = property.getMetallicTexture?.();
+    const ambientOcclusionTexture = property.getAmbientOcclusionTexture?.();
+    const emissionTexture = property.getEmissionTexture?.();
+    const normalTexture = property.getNormalTexture?.();
+
+    // ORM texture support: if present, sample R/G/B for AO/Roughness/Metallic
+    if (ormTexture?.getImageLoaded()) {
+      if (checkDims(ormTexture)) {
+        usedTextures.push('_ambientOcclusionMap = textureSample(ORMTexture, ORMTextureSampler, input.tcoordVS).rrra;', '_roughnessMap = textureSample(ORMTexture, ORMTextureSampler, input.tcoordVS).ggga;', '_metallicMap = textureSample(ORMTexture, ORMTextureSampler, input.tcoordVS).bbba;');
       }
-    }
-    if (actor.getProperty().getMetallicTexture?.()?.getImageLoaded()) {
-      if (checkDims(actor.getProperty().getMetallicTexture())) {
-        usedTextures.push('_metallicMap = textureSample(MetallicTexture, MetallicTextureSampler, input.tcoordVS);');
+    } else if (rmTexture?.getImageLoaded()) {
+      if (checkDims(rmTexture)) {
+        usedTextures.push('_roughnessMap = textureSample(RMTexture, RMTextureSampler, input.tcoordVS).ggga;', '_metallicMap = textureSample(RMTexture, RMTextureSampler, input.tcoordVS).bbba;');
       }
-    }
-    if (actor.getProperty().getNormalTexture?.()?.getImageLoaded()) {
-      if (checkDims(actor.getProperty().getNormalTexture())) {
-        usedTextures.push('_normalMap = textureSample(NormalTexture, NormalTextureSampler, input.tcoordVS);');
+    } else {
+      if (roughnessTexture?.getImageLoaded()) {
+        if (checkDims(roughnessTexture)) {
+          usedTextures.push('_roughnessMap = textureSample(RoughnessTexture, RoughnessTextureSampler, input.tcoordVS);');
+        }
       }
-    }
-    if (actor.getProperty().getAmbientOcclusionTexture?.()?.getImageLoaded()) {
-      if (checkDims(actor.getProperty().getAmbientOcclusionTexture())) {
-        usedTextures.push('_ambientOcclusionMap = textureSample(AmbientOcclusionTexture, AmbientOcclusionTextureSampler, input.tcoordVS);');
+      if (metallicTexture?.getImageLoaded()) {
+        if (checkDims(metallicTexture)) {
+          usedTextures.push('_metallicMap = textureSample(MetallicTexture, MetallicTextureSampler, input.tcoordVS);');
+        }
+      }
+      if (ambientOcclusionTexture?.getImageLoaded()) {
+        if (checkDims(ambientOcclusionTexture)) {
+          usedTextures.push('_ambientOcclusionMap = textureSample(AmbientOcclusionTexture, AmbientOcclusionTextureSampler, input.tcoordVS);');
+        }
       }
     }
-    if (actor.getProperty().getEmissionTexture?.()?.getImageLoaded()) {
-      if (checkDims(actor.getProperty().getEmissionTexture())) {
+    if (emissionTexture?.getImageLoaded()) {
+      if (checkDims(emissionTexture)) {
         usedTextures.push('_emissionMap = textureSample(EmissionTexture, EmissionTextureSampler, input.tcoordVS);');
       }
     }
+    if (normalTexture?.getImageLoaded()) {
+      if (checkDims(normalTexture)) {
+        usedTextures.push('_normalMap = textureSample(NormalTexture, NormalTextureSampler, input.tcoordVS);');
+      }
+    }
     code = vtkWebGPUShaderCache.substitute(code, '//VTK::TCoord::Impl', usedTextures).result;
     fDesc.setCode(code);
   };
@@ -863,6 +884,14 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
       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);

package/Rendering/WebGPU/ForwardPass.js

@@ -144,7 +144,7 @@ function vtkForwardPass(publicAPI, model) {
               dstFactor: 'one-minus-src-alpha'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one-minus-src-alpha'
             }
           }

package/Rendering/WebGPU/OrderIndependentTranslucentPass.js

@@ -156,7 +156,7 @@ function vtkWebGPUOrderIndependentTranslucentPass(publicAPI, model) {
               dstFactor: 'one'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one'
             }
           }
@@ -168,7 +168,7 @@ function vtkWebGPUOrderIndependentTranslucentPass(publicAPI, model) {
               dstFactor: 'one-minus-src'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one-minus-src-alpha'
             }
           }
@@ -209,7 +209,7 @@ function vtkWebGPUOrderIndependentTranslucentPass(publicAPI, model) {
               dstFactor: 'one-minus-src-alpha'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one-minus-src-alpha'
             }
           }

package/Rendering/WebGPU/RenderEncoder.js

@@ -190,7 +190,7 @@ function extend(publicAPI, model) {
             dstFactor: 'one-minus-src-alpha'
           },
           alpha: {
-            srcfactor: 'one',
+            srcFactor: 'one',
             dstFactor: 'one-minus-src-alpha'
           }
         }

package/Rendering/WebGPU/Texture.js

@@ -67,6 +67,11 @@ function vtkWebGPUTexture(publicAPI, model) {
         texture: model.handle,
         premultipliedAlpha: true
       }, [model.width, model.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;
       return;
     }
@@ -80,35 +85,48 @@ function vtkWebGPUTexture(publicAPI, model) {
     }
     const tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
     let bufferBytesPerRow = model.width * tDetails.stride;
-    const fixAll = (arr, height, depth) => {
+    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
       // we need to have width be a multiple of 64
-      const inWidthInBytes = arr.length / (height * depth) * arr.BYTES_PER_ELEMENT;
-
-      // is this a half float texture?
+      // Check if the texture is half float
       const halfFloat = tDetails.elementSize === 2 && tDetails.sampleType === 'float';
+      const bytesPerElement = arr.BYTES_PER_ELEMENT;
+      const inWidthInBytes = arr.length / (height * depth) * bytesPerElement;
+
+      // No changes needed if not half float and already aligned
+      if (!halfFloat && inWidthInBytes % 256 === 0) {
+        return [arr, inWidthInBytes];
+      }
+
+      // Calculate dimensions for the new buffer
+      const inWidth = inWidthInBytes / bytesPerElement;
+      const outBytesPerElement = tDetails.elementSize;
+      const outWidthInBytes = 256 * Math.floor((inWidth * outBytesPerElement + 255) / 256);
+      const outWidth = outWidthInBytes / outBytesPerElement;
 
-      // if we need to copy the data
-      if (halfFloat || inWidthInBytes % 256) {
-        const inArray = arr;
-        const inWidth = inWidthInBytes / inArray.BYTES_PER_ELEMENT;
-        const outBytesPerElement = tDetails.elementSize;
-        const outWidthInBytes = 256 * Math.floor((inWidth * outBytesPerElement + 255) / 256);
-        const outWidth = outWidthInBytes / outBytesPerElement;
-        const outArray = macro.newTypedArray(halfFloat ? 'Uint16Array' : inArray.constructor.name, outWidth * height * depth);
-        for (let v = 0; v < height * depth; v++) {
-          if (halfFloat) {
-            for (let i = 0; i < inWidth; i++) {
-              outArray[v * outWidth + i] = HalfFloat.toHalf(inArray[v * inWidth + i]);
-            }
-          } else {
-            outArray.set(inArray.subarray(v * inWidth, (v + 1) * inWidth), v * outWidth);
+      // Create the output array
+      const outArray = macro.newTypedArray(halfFloat ? 'Uint16Array' : arr.constructor.name, outWidth * height * depth);
+
+      // Copy and convert data when needed
+      const totalRows = height * depth;
+      if (halfFloat) {
+        for (let v = 0; v < totalRows; v++) {
+          const inOffset = v * inWidth;
+          const outOffset = v * outWidth;
+          for (let i = 0; i < inWidth; i++) {
+            outArray[outOffset + i] = HalfFloat.toHalf(arr[inOffset + i]);
           }
         }
-        return [outArray, outWidthInBytes];
+      } else if (outWidth === inWidth) {
+        // If the output width is the same as input, just copy
+        outArray.set(arr);
+      } else {
+        for (let v = 0; v < totalRows; v++) {
+          outArray.set(arr.subarray(v * inWidth, (v + 1) * inWidth), v * outWidth);
+        }
       }
-      return [arr, inWidthInBytes];
+      return [outArray, outWidthInBytes];
     };
     if (req.nativeArray) {
       nativeArray = req.nativeArray;
@@ -126,48 +144,43 @@ function vtkWebGPUTexture(publicAPI, model) {
     }
     const cmdEnc = model.device.createCommandEncoder();
     if (publicAPI.getDimensionality() !== 3) {
-      // Non-3D, supports mipmaps
-      const mips = vtkTexture.generateMipmaps(nativeArray, model.width, model.height, model.mipLevel);
-      let currentWidth = model.width;
-      let currentHeight = model.height;
-      for (let m = 0; m <= model.mipLevel; m++) {
-        const fix = fixAll(mips[m], currentHeight, 1);
-        bufferBytesPerRow = fix[1];
-        const buffRequest = {
-          dataArray: req.dataArray ? req.dataArray : null,
-          nativeArray: fix[0],
-          /* eslint-disable no-undef */
-          usage: BufferUsage.Texture
-          /* eslint-enable no-undef */
-        };
+      // 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]);
 
-        const buff = model.device.getBufferManager().getBuffer(buffRequest);
-        cmdEnc.copyBufferToTexture({
-          buffer: buff.getHandle(),
-          offset: 0,
-          bytesPerRow: bufferBytesPerRow,
-          rowsPerImage: currentHeight
-        }, {
-          texture: model.handle,
-          mipLevel: m
-        }, [currentWidth, currentHeight, 1]);
-        currentWidth /= 2;
-        currentHeight /= 2;
-      }
+      // 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);
+      }
       model.ready = true;
     } else {
       // 3D, no mipmaps
-      const fix = fixAll(nativeArray, model.height, model.depth);
-      bufferBytesPerRow = fix[1];
+      const ret = alignTextureData(nativeArray, model.height, model.depth);
+      bufferBytesPerRow = ret[1];
       const buffRequest = {
         dataArray: req.dataArray ? req.dataArray : null,
-        /* eslint-disable no-undef */
         usage: BufferUsage.Texture
-        /* eslint-enable no-undef */
       };
-
-      buffRequest.nativeArray = fix[0];
+      buffRequest.nativeArray = ret[0];
       const buff = model.device.getBufferManager().getBuffer(buffRequest);
       cmdEnc.copyBufferToTexture({
         buffer: buff.getHandle(),

package/Rendering/WebGPU/TextureManager.js

@@ -2,6 +2,7 @@ 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;
@@ -69,6 +70,7 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       req.height = req.image.height;
       req.depth = 1;
       req.format = 'rgba8unorm';
+      req.usage = GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING;
     }
 
     // fill in based on js imageData
@@ -79,6 +81,7 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       req.format = 'rgba8unorm';
       req.flip = true;
       req.nativeArray = req.jsImageData.data;
+      req.usage = GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING;
     }
     if (req.canvas) {
       req.width = req.canvas.width;
@@ -116,7 +119,7 @@ function vtkWebGPUTextureManager(publicAPI, model) {
   // get a texture or create it if not cached.
   // this is the main entry point
   publicAPI.getTexture = req => {
-    // if we have a source the get/create/cache the texture
+    // if we have a source then get/create/cache the texture
     if (req.hash) {
       // if a matching texture already exists then return it
       return model.device.getCachedObject(req.hash, _createTexture, req);

package/Rendering/WebGPU/VolumePass.js

@@ -424,7 +424,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
               operation: 'max'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one',
               operation: 'max'
             }
@@ -438,7 +438,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
               operation: 'min'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one',
               operation: 'min'
             }
@@ -516,7 +516,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
               dstFactor: 'one-minus-src-alpha'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one-minus-src-alpha'
             }
           }
@@ -549,7 +549,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
               dstFactor: 'one-minus-src-alpha'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one-minus-src-alpha'
             }
           }
@@ -590,7 +590,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
               dstFactor: 'one-minus-src-alpha'
             },
             alpha: {
-              srcfactor: 'one',
+              srcFactor: 'one',
               dstFactor: 'one-minus-src-alpha'
             }
           }

package/package.json

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