@kitware/vtk.js 34.0.0-beta.1 → 34.0.0-beta.2

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(): Nullable<HTMLImageElement>;
+
+  /**
+   * Returns an ImageBitmap object.
    */
-  getImage(): any;
+  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;
 }
 
 /**
@@ -98,26 +142,34 @@ 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.
+ *
+ * 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 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.
+ * @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>;
 
 /**
- * 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

@@ -1,5 +1,7 @@
 import { m as macro } from '../../macros2.js';
 
+/* eslint-disable no-bitwise */
+
 // ----------------------------------------------------------------------------
 // vtkTexture methods
 // ----------------------------------------------------------------------------
@@ -23,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;
@@ -38,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;
@@ -54,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;
@@ -86,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');
@@ -100,104 +129,159 @@ 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;
   };
 }
 
-// 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({
+    label: 'ComputeMipmapPipeline',
+    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({
+      label: `MipmapGenerateCommandEncoder`
+    });
+    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;
 };
 
 // ----------------------------------------------------------------------------
@@ -208,6 +292,7 @@ const DEFAULT_VALUES = {
   image: null,
   canvas: null,
   jsImageData: null,
+  imageBitmap: null,
   imageLoaded: false,
   repeat: false,
   interpolate: false,
@@ -225,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);
 }