@kitware/vtk.js 22.5.4 → 22.5.5

package/Rendering/Core/ScalarBarActor.js

@@ -221,22 +221,6 @@ function vtkScalarBarActorHelper(publicAPI, model) {
       model.lastRedrawTime.modified();
       model.forceViewUpdate = false;
     }
-  }; // The text atlas is an image and as loading images is async we call this when
-  // the promise resolves. The old texture is used until then
-
-
-  publicAPI.completedImage = function (doUpdate) {
-    if (model.nextImage && model.nextImage.complete) {
-      model.tmTexture.setImage(model.nextImage);
-      model.nextImage = null;
-      model._tmAtlas = model._nextAtlas;
-      model._nextAtlas = null;
-
-      if (doUpdate) {
-        model.forceViewUpdate = true;
-        model.renderWindow.render();
-      }
-    }
   }; // create the texture map atlas that contains the rendering of
   // all the text strings. Only needs to be called when the text strings
   // have changed (labels and ticks)
@@ -317,19 +301,10 @@ function vtkScalarBarActorHelper(publicAPI, model) {
       applyTextStyle(model.tmContext, value.textStyle);
       model.tmContext.fillText(key, 1, value.startingHeight + value.height - 1);
     });
-    var image = new Image();
-    image.src = model.tmCanvas.toDataURL('image/png');
-    model.nextImage = image;
-    model._nextAtlas = newTmAtlas;
-
-    if (image.complete) {
-      publicAPI.completedImage(false);
-    } else {
-      image.addEventListener('load', function () {
-        publicAPI.completedImage(true);
-      });
-    }
+    model.tmTexture.setCanvas(model.tmCanvas); // mark as modified since the canvas typically doesn't change
 
+    model.tmTexture.modified();
+    model._tmAtlas = newTmAtlas;
     return results;
   };
 

package/Rendering/Core/Texture.js

@@ -13,14 +13,52 @@ function vtkTexture(publicAPI, model) {
     publicAPI.modified();
   };
 
+  publicAPI.setJsImageData = function (imageData) {
+    if (model.jsImageData === imageData) {
+      return;
+    } // clear other entries
+
+
+    if (imageData !== null) {
+      publicAPI.setInputData(null);
+      publicAPI.setInputConnection(null);
+      model.image = null;
+      model.canvas = null;
+    }
+
+    model.jsImageData = imageData;
+    model.imageLoaded = true;
+    publicAPI.modified();
+  };
+
+  publicAPI.setCanvas = function (canvas) {
+    if (model.canvas === canvas) {
+      return;
+    } // clear other entries
+
+
+    if (canvas !== null) {
+      publicAPI.setInputData(null);
+      publicAPI.setInputConnection(null);
+      model.image = null;
+      model.jsImageData = null;
+    }
+
+    model.canvas = canvas;
+    publicAPI.modified();
+  };
+
   publicAPI.setImage = function (image) {
     if (model.image === image) {
       return;
-    }
+    } // clear other entries
+
 
     if (image !== null) {
       publicAPI.setInputData(null);
       publicAPI.setInputConnection(null);
+      model.canvas = null;
+      model.jsImageData = null;
     }
 
     model.image = image;
@@ -44,7 +82,9 @@ var DEFAULT_VALUES = {
   interpolate: false,
   edgeClamp: false,
   image: null,
-  imageLoaded: false
+  canvas: null,
+  imageLoaded: false,
+  jsImageData: null
 }; // ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
@@ -53,8 +93,8 @@ function extend(publicAPI, model) {
 
   macro.obj(publicAPI, model);
   macro.algo(publicAPI, model, 6, 0);
-  macro.get(publicAPI, model, ['imageLoaded']);
-  macro.setGet(publicAPI, model, ['repeat', 'edgeClamp', 'interpolate', 'image']);
+  macro.get(publicAPI, model, ['canvas', 'image', 'jsImageData', 'imageLoaded']);
+  macro.setGet(publicAPI, model, ['repeat', 'edgeClamp', 'interpolate']);
   vtkTexture(publicAPI, model);
 } // ----------------------------------------------------------------------------
 

package/Rendering/OpenGL/Texture.js

@@ -78,7 +78,36 @@ function vtkOpenGLTexture(publicAPI, model) {
           publicAPI.sendParameters();
           model.textureBuildTime.modified();
         }
-      } // if we have Inputdata
+      } // if we have a canvas
+
+
+      if (model.renderable.getCanvas() !== null) {
+        if (model.renderable.getInterpolate()) {
+          model.generateMipmap = true;
+          publicAPI.setMinificationFilter(Filter.LINEAR_MIPMAP_LINEAR);
+        }
+
+        var canvas = model.renderable.getCanvas();
+        publicAPI.create2DFromRaw(canvas.width, canvas.height, 4, VtkDataTypes.UNSIGNED_CHAR, canvas, true);
+        publicAPI.activate();
+        publicAPI.sendParameters();
+        model.textureBuildTime.modified();
+      } // if we have jsImageData
+
+
+      if (model.renderable.getJsImageData() !== null) {
+        var jsid = model.renderable.getJsImageData();
+
+        if (model.renderable.getInterpolate()) {
+          model.generateMipmap = true;
+          publicAPI.setMinificationFilter(Filter.LINEAR_MIPMAP_LINEAR);
+        }
+
+        publicAPI.create2DFromRaw(jsid.width, jsid.height, 4, VtkDataTypes.UNSIGNED_CHAR, jsid.data, true);
+        publicAPI.activate();
+        publicAPI.sendParameters();
+        model.textureBuildTime.modified();
+      } // if we have InputData
 
 
       var input = model.renderable.getInputData(0);
@@ -678,6 +707,7 @@ function vtkOpenGLTexture(publicAPI, model) {
 
 
   publicAPI.create2DFromRaw = function (width, height, numComps, dataType, data) {
+    var flip = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
     // Now determine the texture parameters using the arguments.
     publicAPI.getOpenGLDataType(dataType);
     publicAPI.getInternalFormat(dataType, numComps);
@@ -701,13 +731,18 @@ function vtkOpenGLTexture(publicAPI, model) {
     var dataArray = [data];
     var pixData = updateArrayDataType(dataType, dataArray);
     var scaledData = scaleTextureToHighestPowerOfTwo(pixData); // Source texture data from the PBO.
-    // model.context.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 
+    model.context.pixelStorei(model.context.UNPACK_FLIP_Y_WEBGL, flip);
     model.context.pixelStorei(model.context.UNPACK_ALIGNMENT, 1);
     model.context.texImage2D(model.target, 0, model.internalFormat, model.width, model.height, 0, model.format, model.openGLDataType, scaledData[0]);
 
     if (model.generateMipmap) {
       model.context.generateMipmap(model.target);
+    } // always reset the flip
+
+
+    if (flip) {
+      model.context.pixelStorei(model.context.UNPACK_FLIP_Y_WEBGL, false);
     }
 
     publicAPI.deactivate();
@@ -867,15 +902,7 @@ function vtkOpenGLTexture(publicAPI, model) {
     var 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); // In Chrome 69 on Windows and Ubuntu, there is a bug that prevents some
-    // canvases from working properly with webGL textures.  By getting any
-    // image data from the canvas, this works around the bug.  See
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=896307
-
-    if (navigator.userAgent.indexOf('Chrome/69') >= 0) {
-      ctx.getImageData(0, 0, 1, 1);
-    }
-
+    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
     var safeImage = canvas;
     model.context.texImage2D(model.target, 0, model.internalFormat, model.format, model.openGLDataType, safeImage);
 

package/Rendering/WebGPU/PolyDataMapper.js

@@ -432,7 +432,7 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
     var textures = actor.getTextures();
 
     for (var i = 0; i < textures.length; i++) {
-      if (textures[i].getInputData()) {
+      if (textures[i].getInputData() || textures[i].getJsImageData() || textures[i].getCanvas()) {
         newTextures.push(textures[i]);
       }
 
@@ -445,7 +445,9 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
 
     for (var _i = 0; _i < newTextures.length; _i++) {
       var srcTexture = newTextures[_i];
-      var treq = {};
+      var treq = {
+        time: srcTexture.getMTime()
+      };
 
       if (srcTexture.getInputData()) {
         treq.imageData = srcTexture.getInputData();
@@ -453,6 +455,12 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
       } else if (srcTexture.getImage()) {
         treq.image = srcTexture.getImage();
         treq.owner = treq.image;
+      } else if (srcTexture.getJsImageData()) {
+        treq.jsImageData = srcTexture.getJsImageData();
+        treq.owner = treq.jsImageData;
+      } else if (srcTexture.getCanvas()) {
+        treq.canvas = srcTexture.getCanvas();
+        treq.owner = treq.canvas;
       }
 
       var newTex = model.device.getTextureManager().getTexture(treq);

package/Rendering/WebGPU/Texture.js

@@ -21,7 +21,7 @@ function vtkWebGPUTexture(publicAPI, model) {
     model.height = options.height;
     model.depth = options.depth ? options.depth : 1;
     var dimension = model.depth === 1 ? '2d' : '3d';
-    model.format = options.format ? options.format : 'rgbaunorm';
+    model.format = options.format ? options.format : 'rgba8unorm';
     /* eslint-disable no-undef */
 
     /* eslint-disable no-bitwise */
@@ -47,7 +47,7 @@ function vtkWebGPUTexture(publicAPI, model) {
     model.width = options.width;
     model.height = options.height;
     model.depth = options.depth ? options.depth : 1;
-    model.format = options.format ? options.format : 'rgbaunorm';
+    model.format = options.format ? options.format : 'rgba8unorm';
     /* eslint-disable no-undef */
 
     /* eslint-disable no-bitwise */
@@ -60,6 +60,27 @@ function vtkWebGPUTexture(publicAPI, model) {
 
 
   publicAPI.writeImageData = function (req) {
+    if (req.canvas) {
+      model.device.getHandle().queue.copyExternalImageToTexture({
+        source: req.canvas,
+        flipY: req.flip
+      }, {
+        texture: model.handle,
+        premultipliedAlpha: true
+      }, [model.width, model.height, model.depth]);
+      model.ready = true;
+      return;
+    }
+
+    if (req.jsImageData && !req.nativeArray) {
+      req.width = req.jsImageData.width;
+      req.height = req.jsImageData.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = true;
+      req.nativeArray = req.jsImageData.data;
+    }
+
     var tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
     var bufferBytesPerRow = model.width * tDetails.stride;
 

package/Rendering/WebGPU/TextureManager.js

@@ -64,11 +64,36 @@ function vtkWebGPUTextureManager(publicAPI, model) {
 
 
     if (req.image) {
-      req.time = 0;
       req.width = req.image.width;
       req.height = req.image.height;
       req.depth = 1;
       req.format = 'rgba8unorm';
+    } // fill in based on js imageData
+
+
+    if (req.jsImageData) {
+      req.width = req.jsImageData.width;
+      req.height = req.jsImageData.height;
+      req.depth = 1;
+      req.format = 'rgba8unorm';
+      req.flip = true;
+      req.nativeArray = req.jsImageData.data;
+    }
+
+    if (req.canvas) {
+      req.width = req.canvas.width;
+      req.height = req.canvas.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 */
     }
   } // create a texture (used by getTexture)
 
@@ -79,10 +104,11 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       width: req.width,
       height: req.height,
       depth: req.depth,
-      format: req.format
+      format: req.format,
+      usage: req.usage
     }); // fill the texture if we have data
 
-    if (req.nativeArray || req.image) {
+    if (req.nativeArray || req.image || req.canvas) {
       newTex.writeImageData(req);
     }
 

package/package.json

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