refactor(WebGPU): simplify vtkWebGPUCellArrayMapper

This commit centralizes the definition of pi as a constant and removes
redundant declarations in the WGSL shader code. It streamlines the
updateUBO function, making property and buffer updates more readable and
efficient. The updateTextures function is also refactored for clarity.

Author: daker

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

@@ -15,7 +15,6 @@ export interface ITextureInitialValues {
 }
 
 export interface vtkTexture extends vtkAlgorithm {
-
   /**
    * Returns the canvas used by the texture.
    */
@@ -39,22 +38,24 @@ export interface vtkTexture extends vtkAlgorithm {
   /**
    * Returns the image used by the texture.
    */
-  getImage(): HTMLImageElement;
+  getImage(): Nullable<HTMLImageElement>;
 
   /**
    * Returns an ImageBitmap object.
    */
-  getImageBitmap(): ImageBitmap;
+  getImageBitmap(): Nullable<ImageBitmap>;
 
   /**
    * Returns true if the image is loaded.
    */
   getImageLoaded(): boolean;
 
   /**
-   * Returns the input image data as a JavaScript ImageData object.
+   * Returns the input image data object.
    */
-  getInputAsJsImageData(): any;
+  getInputAsJsImageData(): Nullable<
+    ImageData | ImageBitmap | HTMLCanvasElement | HTMLImageElement
+  >;
 
   /**
    * Returns the current mip level of the texture.
@@ -105,7 +106,7 @@ export interface vtkTexture extends vtkAlgorithm {
    * Sets the input image data as a JavaScript ImageData object.
    * @param imageData
    */
-  setJsImageData(imageData: any): void;
+  setJsImageData(imageData: ImageData): void;
 
   /**
    * Sets the current mip level of the texture.
@@ -164,6 +165,11 @@ export function generateMipmaps(
  * 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;

Sources/Rendering/Core/Texture/index.js

@@ -134,11 +134,11 @@ function vtkTexture(publicAPI, model) {
     if (!model.imageLoaded || publicAPI.getInputData()) return null;
 
     if (model.jsImageData) {
-      return model.jsImageData();
+      return model.jsImageData;
     }
 
     if (model.imageBitmap) {
-      return model.imageBitmap();
+      return model.imageBitmap;
     }
 
     if (model.canvas) {
@@ -151,21 +151,16 @@ 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;
     }