feat(Texture): add support for ImageBitmap texture

Author: daker

Sources/Rendering/Core/Texture/index.d.ts

@@ -1,4 +1,5 @@
 import { vtkAlgorithm } from '../../../interfaces';
+import { Nullable } from '../../../types';
 
 /**
  *
@@ -14,68 +15,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(): HTMLImageElement;
+
+  /**
+   * Returns an ImageBitmap object.
    */
-  getImage(): any;
+  getImageBitmap(): ImageBitmap;
 
   /**
-   *
+   * Returns true if the image is loaded.
    */
   getImageLoaded(): boolean;
 
   /**
-   *
+   * Returns the input image data as a JavaScript ImageData object.
+   */
+  getInputAsJsImageData(): any;
+
+  /**
+   * 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: any): 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 +159,11 @@ 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.
  */
 export declare const vtkTexture: {
   newInstance: typeof newInstance;

Sources/Rendering/Core/Texture/index.js

@@ -26,13 +26,34 @@ 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;
@@ -43,6 +64,7 @@ function vtkTexture(publicAPI, model) {
       publicAPI.setInputData(null);
       publicAPI.setInputConnection(null);
       model.image = null;
+      model.imageBitmap = null;
       model.jsImageData = null;
     }
 
@@ -61,6 +83,7 @@ function vtkTexture(publicAPI, model) {
       publicAPI.setInputConnection(null);
       model.canvas = null;
       model.jsImageData = null;
+      model.imageBitmap = null;
     }
 
     model.image = image;
@@ -98,6 +121,11 @@ 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;
   };
@@ -108,6 +136,11 @@ function vtkTexture(publicAPI, model) {
     if (model.jsImageData) {
       return model.jsImageData();
     }
+
+    if (model.imageBitmap) {
+      return model.imageBitmap();
+    }
+
     if (model.canvas) {
       const context = model.canvas.getContext('2d');
       const imageData = context.getImageData(
@@ -231,6 +264,7 @@ const generateMipmaps = (device, texture, mipLevelCount) => {
   });
 
   const pipeline = device.createComputePipeline({
+    label: 'ComputeMipmapPipeline',
     layout: pipelineLayout,
     compute: {
       module: computeShader,
@@ -264,7 +298,9 @@ const generateMipmaps = (device, texture, mipLevelCount) => {
       ],
     });
 
-    const commandEncoder = device.createCommandEncoder();
+    const commandEncoder = device.createCommandEncoder({
+      label: `MipmapGenerateCommandEncoder`,
+    });
     const computePass = commandEncoder.beginComputePass();
 
     computePass.setPipeline(pipeline);
@@ -290,6 +326,7 @@ const DEFAULT_VALUES = {
   image: null,
   canvas: null,
   jsImageData: null,
+  imageBitmap: null,
   imageLoaded: false,
   repeat: false,
   interpolate: false,
@@ -311,6 +348,7 @@ export function extend(publicAPI, model, initialValues = {}) {
     'canvas',
     'image',
     'jsImageData',
+    'imageBitmap',
     'imageLoaded',
     'resizable',
   ]);