@kitware/vtk.js 33.2.0 → 33.3.0

package/Rendering/WebGPU/Texture.js

@@ -1,14 +1,9 @@
 import { m as macro } from '../../macros2.js';
 import HalfFloat from '../../Common/Core/HalfFloat.js';
-import vtkWebGPUBufferManager from './BufferManager.js';
 import vtkWebGPUTextureView from './TextureView.js';
 import vtkWebGPUTypes from './Types.js';
 import vtkTexture from '../Core/Texture.js';
 
-const {
-  BufferUsage
-} = vtkWebGPUBufferManager;
-
 // ----------------------------------------------------------------------------
 // Global methods
 // ----------------------------------------------------------------------------
@@ -59,15 +54,38 @@ function vtkWebGPUTexture(publicAPI, model) {
 
   publicAPI.writeImageData = req => {
     let nativeArray = [];
-    if (req.canvas) {
+    const _copyImageToTexture = source => {
       model.device.getHandle().queue.copyExternalImageToTexture({
-        source: req.canvas,
+        source,
         flipY: req.flip
       }, {
         texture: model.handle,
-        premultipliedAlpha: true
-      }, [model.width, model.height, model.depth]);
+        premultipliedAlpha: true,
+        mipLevel: 0,
+        origin: {
+          x: 0,
+          y: 0,
+          z: 0
+        }
+      }, [source.width, source.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;
+    };
+    if (req.canvas) {
+      _copyImageToTexture(req.canvas);
+      return;
+    }
+    if (req.imageBitmap) {
+      req.width = req.imageBitmap.width;
+      req.height = req.imageBitmap.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = false;
+      _copyImageToTexture(req.imageBitmap);
       return;
     }
     if (req.jsImageData && !req.nativeArray) {
@@ -80,43 +98,64 @@ function vtkWebGPUTexture(publicAPI, model) {
     }
     const tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
     let bufferBytesPerRow = model.width * tDetails.stride;
-    const fixAll = (arr, height, depth) => {
+
+    /**
+     * Align texture data to ensure bytesPerRow is a multiple of 256.
+     * This is necessary for WebGPU texture uploads, especially for half-float formats.
+     * It also handles half-float conversion if the texture format requires it.
+     * @param {*} arr - The input array containing texture data.
+     * @param {*} height - The height of the texture.
+     * @param {*} depth - The depth of the texture (1 for 2D textures).
+     * @returns
+     */
+    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];
+      }
 
-      // 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);
+      // 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;
+
+      // 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;
     }
     if (req.image) {
-      const canvas = document.createElement('canvas');
-      canvas.width = req.image.width;
-      canvas.height = req.image.height;
+      const canvas = new OffscreenCanvas(req.image.width, req.image.height);
       const ctx = canvas.getContext('2d');
       ctx.translate(0, canvas.height);
       ctx.scale(1, -1);
@@ -124,62 +163,31 @@ function vtkWebGPUTexture(publicAPI, model) {
       const imageData = ctx.getImageData(0, 0, req.image.width, req.image.height);
       nativeArray = imageData.data;
     }
-    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 */
-        };
-
-        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;
+    const is3D = publicAPI.getDimensionality() === 3;
+    const alignedTextureData = alignTextureData(nativeArray, model.height, is3D ? model.depth : 1);
+    bufferBytesPerRow = alignedTextureData[1];
+    const data = alignedTextureData[0];
+    model.device.getHandle().queue.writeTexture({
+      texture: model.handle,
+      mipLevel: 0,
+      origin: {
+        x: 0,
+        y: 0,
+        z: 0
       }
-      model.device.submitCommandEncoder(cmdEnc);
-      model.ready = true;
-    } else {
-      // 3D, no mipmaps
-      const fix = fixAll(nativeArray, model.height, model.depth);
-      bufferBytesPerRow = fix[1];
-      const buffRequest = {
-        dataArray: req.dataArray ? req.dataArray : null,
-        /* eslint-disable no-undef */
-        usage: BufferUsage.Texture
-        /* eslint-enable no-undef */
-      };
-
-      buffRequest.nativeArray = fix[0];
-      const buff = model.device.getBufferManager().getBuffer(buffRequest);
-      cmdEnc.copyBufferToTexture({
-        buffer: buff.getHandle(),
-        offset: 0,
-        bytesPerRow: bufferBytesPerRow,
-        rowsPerImage: model.height
-      }, {
-        texture: model.handle
-      }, [model.width, model.height, model.depth]);
-      model.device.submitCommandEncoder(cmdEnc);
-      model.ready = true;
+    }, data, {
+      offset: 0,
+      bytesPerRow: bufferBytesPerRow,
+      rowsPerImage: model.height
+    }, {
+      width: model.width,
+      height: model.height,
+      depthOrArrayLayers: is3D ? model.depth : 1
+    });
+    if (!is3D && model.mipLevel > 0) {
+      vtkTexture.generateMipmaps(model.device.getHandle(), model.handle, model.mipLevel + 1);
     }
+    model.ready = true;
   };
 
   // when data is pulled out of this texture what scale must be applied to

package/Rendering/WebGPU/TextureManager.js

@@ -69,6 +69,11 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       req.height = req.image.height;
       req.depth = 1;
       req.format = 'rgba8unorm';
+      /* eslint-disable no-undef */
+      /* eslint-disable no-bitwise */
+      req.usage = GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING;
+      /* eslint-enable no-undef */
+      /* eslint-enable no-bitwise */
     }
 
     // fill in based on js imageData
@@ -79,7 +84,26 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       req.format = 'rgba8unorm';
       req.flip = true;
       req.nativeArray = req.jsImageData.data;
+      /* eslint-disable no-undef */
+      /* eslint-disable no-bitwise */
+      req.usage = GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING;
+      /* eslint-enable no-undef */
+      /* eslint-enable no-bitwise */
     }
+
+    if (req.imageBitmap) {
+      req.width = req.imageBitmap.width;
+      req.height = req.imageBitmap.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = true;
+      /* eslint-disable no-undef */
+      /* eslint-disable no-bitwise */
+      req.usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;
+      /* eslint-enable no-undef */
+      /* eslint-enable no-bitwise */
+    }
+
     if (req.canvas) {
       req.width = req.canvas.width;
       req.height = req.canvas.height;
@@ -107,7 +131,7 @@ function vtkWebGPUTextureManager(publicAPI, model) {
     });
 
     // fill the texture if we have data
-    if (req.nativeArray || req.image || req.canvas) {
+    if (req.nativeArray || req.image || req.canvas || req.imageBitmap) {
       newTex.writeImageData(req);
     }
     return newTex;
@@ -116,7 +140,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);
@@ -143,6 +167,8 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       treq.image = srcTexture.getImage();
     } else if (srcTexture.getJsImageData()) {
       treq.jsImageData = srcTexture.getJsImageData();
+    } else if (srcTexture.getImageBitmap()) {
+      treq.imageBitmap = srcTexture.getImageBitmap();
     } else if (srcTexture.getCanvas()) {
       treq.canvas = srcTexture.getCanvas();
     }

package/package.json

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