perf(WebGPU): improve texture upload using ImageBitmap

daker · sankhesh · commit b2815ae85be5 · 2025-06-13T01:14:53.000Z
This commit refactors writeImageData to support texture uploads from
ImageBitmap and OffscreenCanvas sources. It also simplifies the code path
for 2D and 3D uploads by using `queue.writeTexture`, removing buffer usage.
diff --git a/Sources/Rendering/WebGPU/Texture/index.js b/Sources/Rendering/WebGPU/Texture/index.js
@@ -1,12 +1,9 @@
 import macro from 'vtk.js/Sources/macros';
 import HalfFloat from 'vtk.js/Sources/Common/Core/HalfFloat';
-import vtkWebGPUBufferManager from 'vtk.js/Sources/Rendering/WebGPU/BufferManager';
 import vtkWebGPUTextureView from 'vtk.js/Sources/Rendering/WebGPU/TextureView';
 import vtkWebGPUTypes from 'vtk.js/Sources/Rendering/WebGPU/Types';
 import vtkTexture from 'vtk.js/Sources/Rendering/Core/Texture';
 
-const { BufferUsage } = vtkWebGPUBufferManager;
-
 // ----------------------------------------------------------------------------
 // Global methods
 // ----------------------------------------------------------------------------
@@ -62,14 +59,19 @@ 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]
+        {
+          texture: model.handle,
+          premultipliedAlpha: true,
+          mipLevel: 0,
+          origin: { x: 0, y: 0, z: 0 },
+        },
+        [source.width, source.height, model.depth]
       );
 
       // Generate mipmaps on GPU if needed
@@ -82,6 +84,20 @@ function vtkWebGPUTexture(publicAPI, model) {
       }
 
       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;
     }
 
@@ -97,6 +113,15 @@ function vtkWebGPUTexture(publicAPI, model) {
     const tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
     let bufferBytesPerRow = model.width * tDetails.stride;
 
+    /**
+     * 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
@@ -156,9 +181,7 @@ function vtkWebGPUTexture(publicAPI, model) {
     }
 
     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);
@@ -183,68 +206,42 @@ function vtkWebGPUTexture(publicAPI, model) {
       nativeArray = imageData.data;
     }
 
-    const cmdEnc = model.device.createCommandEncoder();
-
-    if (publicAPI.getDimensionality() !== 3) {
-      // 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]
-      );
-
-      // 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
-        );
+    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 },
+      },
+      data,
+      {
+        offset: 0,
+        bytesPerRow: bufferBytesPerRow,
+        rowsPerImage: model.height,
+      },
+      {
+        width: model.width,
+        height: model.height,
+        depthOrArrayLayers: is3D ? model.depth : 1,
       }
-      model.ready = true;
-    } else {
-      // 3D, no mipmaps
-      const ret = alignTextureData(nativeArray, model.height, model.depth);
-      bufferBytesPerRow = ret[1];
-      const buffRequest = {
-        dataArray: req.dataArray ? req.dataArray : null,
-        usage: BufferUsage.Texture,
-      };
-      buffRequest.nativeArray = ret[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]
+    );
+
+    if (!is3D && model.mipLevel > 0) {
+      vtkTexture.generateMipmaps(
+        model.device.getHandle(),
+        model.handle,
+        model.mipLevel + 1
       );
-      model.device.submitCommandEncoder(cmdEnc);
-      model.ready = true;
     }
+    model.ready = true;
   };
 
   // when data is pulled out of this texture what scale must be applied to
diff --git a/Sources/Rendering/WebGPU/TextureManager/index.js b/Sources/Rendering/WebGPU/TextureManager/index.js
@@ -1,5 +1,3 @@
-/* eslint-disable no-bitwise */
-/* eslint-disable no-undef */
 import macro from 'vtk.js/Sources/macros';
 import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
 import vtkWebGPUTexture from 'vtk.js/Sources/Rendering/WebGPU/Texture';
@@ -70,10 +68,14 @@ 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
@@ -84,10 +86,31 @@ 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 |
+        GPUTextureUsage.COPY_SRC;
+      /* eslint-enable no-undef */
+      /* eslint-enable no-bitwise */
     }
 
     if (req.canvas) {
@@ -121,7 +144,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;
@@ -156,6 +179,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();
     }
