@kitware/vtk.js 33.2.0 → 33.2.1

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/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/package.json

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