@kitware/vtk.js 34.0.0 → 34.1.0

package/Rendering/OpenGL/Texture.d.ts

@@ -246,7 +246,14 @@ export interface vtkOpenGLTexture extends vtkViewNode {
    * @param image The image to use for the texture.
    * @returns {boolean} True if the texture was successfully created, false otherwise.
    */
-  create2DFromImage(image: any): boolean;
+  create2DFromImage(image: HTMLImageElement): boolean;
+
+  /**
+   * Creates a 2D texture from an ImageBitmap.
+   * @param imageBitmap  The ImageBitmap to use for the texture.
+   *  @returns {boolean} True if the texture was successfully created, false otherwise.
+   */
+  create2DFromImageBitmap(imageBitmap: ImageBitmap): boolean;
 
   /**
    * Creates a 2D filterable texture from raw data, with a preference for size over accuracy if necessary.

package/Rendering/OpenGL/Texture.js

@@ -75,6 +75,19 @@ function vtkOpenGLTexture(publicAPI, model) {
     }
     // create the texture if it is not done already
     if (!model.handle || model.renderable.getMTime() > model.textureBuildTime.getMTime()) {
+      if (model.renderable.getImageBitmap() !== null) {
+        if (model.renderable.getInterpolate()) {
+          model.generateMipmap = true;
+          publicAPI.setMinificationFilter(Filter.LINEAR_MIPMAP_LINEAR);
+        }
+        // Have an Image which may not be complete
+        if (model.renderable.getImageBitmap() && model.renderable.getImageLoaded()) {
+          publicAPI.create2DFromImageBitmap(model.renderable.getImageBitmap());
+          publicAPI.activate();
+          publicAPI.sendParameters();
+          model.textureBuildTime.modified();
+        }
+      }
       // if we have an Image
       if (model.renderable.getImage() !== null) {
         if (model.renderable.getInterpolate()) {
@@ -1013,7 +1026,7 @@ function vtkOpenGLTexture(publicAPI, model) {
 
   //----------------------------------------------------------------------------
   publicAPI.create2DFromImage = image => {
-    // Now determine the texture parameters using the arguments.
+    // Determine the texture parameters using the arguments.
     publicAPI.getOpenGLDataType(VtkDataTypes.UNSIGNED_CHAR);
     publicAPI.getInternalFormat(VtkDataTypes.UNSIGNED_CHAR, 4);
     publicAPI.getFormat(VtkDataTypes.UNSIGNED_CHAR, 4);
@@ -1028,30 +1041,79 @@ function vtkOpenGLTexture(publicAPI, model) {
     model._openGLRenderWindow.activateTexture(publicAPI);
     publicAPI.createTexture();
     publicAPI.bind();
+    const needNearestPowerOfTwo = !model._openGLRenderWindow.getWebgl2() && (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height));
+    let textureSource = image;
+    let targetWidth = image.width;
+    let targetHeight = image.height;
+    let flipY = true;
+
+    // For WebGL1, we need to scale the image to the nearest power of two
+    // dimensions if the image is not already a power of two. For WebGL2, we can
+    // use the image as is. Note: Chrome has a perf issue where the path
+    // HTMLImageElement -> Canvas -> texSubImage2D is faster than
+    // HTMLImageElement -> texSubImage2D directly. See
+    // https://issues.chromium.org/issues/41311312#comment7
+    // Tested on Chrome 137.0.7151.104 Windows 11
+    const isChrome = window.chrome;
+    if (needNearestPowerOfTwo || isChrome) {
+      const canvas = new OffscreenCanvas(nearestPowerOfTwo(image.width), nearestPowerOfTwo(image.height));
+      targetWidth = canvas.width;
+      targetHeight = canvas.height;
+      const ctx = canvas.getContext('2d');
+      ctx.translate(0, canvas.height);
+      ctx.scale(1, -1);
+      ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+      textureSource = canvas;
+      flipY = false; // we are flipping the image manually using translate/scale
+    }
+
+    model.width = targetWidth;
+    model.height = targetHeight;
 
     // Source texture data from the PBO.
-    // model.context.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    model.context.pixelStorei(model.context.UNPACK_FLIP_Y_WEBGL, flipY);
     model.context.pixelStorei(model.context.UNPACK_ALIGNMENT, 1);
+    if (useTexStorage(VtkDataTypes.UNSIGNED_CHAR)) {
+      model.context.texStorage2D(model.target, 1, model.internalFormat, model.width, model.height);
+      model.context.texSubImage2D(model.target, 0, 0, 0, model.width, model.height, model.format, model.openGLDataType, textureSource);
+    } else {
+      model.context.texImage2D(model.target, 0, model.internalFormat, model.width, model.height, 0, model.format, model.openGLDataType, textureSource);
+    }
+    if (model.generateMipmap) {
+      model.context.generateMipmap(model.target);
+    }
+    model.allocatedGPUMemoryInBytes = model.width * model.height * model.depth * model.components * model._openGLRenderWindow.getDefaultTextureByteSize(VtkDataTypes.UNSIGNED_CHAR, getNorm16Ext(), publicAPI.useHalfFloat());
+    publicAPI.deactivate();
+    return true;
+  };
 
-    // Scale up the texture to the next highest power of two dimensions (if needed) and flip y.
-    const needNearestPowerOfTwo = !model._openGLRenderWindow.getWebgl2() && (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height));
-    const canvas = document.createElement('canvas');
-    canvas.width = needNearestPowerOfTwo ? nearestPowerOfTwo(image.width) : image.width;
-    canvas.height = needNearestPowerOfTwo ? nearestPowerOfTwo(image.height) : image.height;
-    model.width = canvas.width;
-    model.height = canvas.height;
-    const ctx = canvas.getContext('2d');
-    ctx.translate(0, canvas.height);
-    ctx.scale(1, -1);
-    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
-    const safeImage = canvas;
+  //----------------------------------------------------------------------------
+  publicAPI.create2DFromImageBitmap = imageBitmap => {
+    // Determine the texture parameters.
+    publicAPI.getOpenGLDataType(VtkDataTypes.UNSIGNED_CHAR);
+    publicAPI.getInternalFormat(VtkDataTypes.UNSIGNED_CHAR, 4);
+    publicAPI.getFormat(VtkDataTypes.UNSIGNED_CHAR, 4);
+    if (!model.internalFormat || !model.format || !model.openGLDataType) {
+      vtkErrorMacro('Failed to determine texture parameters.');
+      return false;
+    }
+    model.target = model.context.TEXTURE_2D;
+    model.components = 4;
+    model.depth = 1;
+    model.numberOfDimensions = 2;
+    model._openGLRenderWindow.activateTexture(publicAPI);
+    publicAPI.createTexture();
+    publicAPI.bind();
+
+    // Prepare texture unpack alignment
+    model.context.pixelStorei(model.context.UNPACK_ALIGNMENT, 1);
+    model.width = imageBitmap.width;
+    model.height = imageBitmap.height;
     if (useTexStorage(VtkDataTypes.UNSIGNED_CHAR)) {
       model.context.texStorage2D(model.target, 1, model.internalFormat, model.width, model.height);
-      if (safeImage != null) {
-        model.context.texSubImage2D(model.target, 0, 0, 0, model.width, model.height, model.format, model.openGLDataType, safeImage);
-      }
+      model.context.texSubImage2D(model.target, 0, 0, 0, model.width, model.height, model.format, model.openGLDataType, imageBitmap);
     } else {
-      model.context.texImage2D(model.target, 0, model.internalFormat, model.width, model.height, 0, model.format, model.openGLDataType, safeImage);
+      model.context.texImage2D(model.target, 0, model.internalFormat, model.width, model.height, 0, model.format, model.openGLDataType, imageBitmap);
     }
     if (model.generateMipmap) {
       model.context.generateMipmap(model.target);

package/package.json

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