@kitware/vtk.js 25.2.4 → 25.5.0

package/Rendering/WebGPU/Renderer.js

@@ -9,7 +9,12 @@ import vtkWebGPUUniformBuffer from './UniformBuffer.js';
 import { registerOverride } from './ViewNodeFactory.js';
 
 var vtkDebugMacro = vtkDebugMacro$1;
-var clearFragTemplate = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::IOStructs::Dec\n\n@fragment\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output: fragmentOutput;\n\n  var computedColor: vec4<f32> = mapperUBO.BackgroundColor;\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n"; // Light type index gives either 0, 1, or 2 which indicates what type of light there is.
+var clearFragColorTemplate = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::IOStructs::Dec\n\n@fragment\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output: fragmentOutput;\n\n  var computedColor: vec4<f32> = mapperUBO.BackgroundColor;\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n";
+var clearFragTextureTemplate = "\nfn vecToRectCoord(dir: vec3<f32>) -> vec2<f32> {\n  var tau: f32 = 6.28318530718;\n  var pi: f32 = 3.14159265359;\n  var out: vec2<f32> = vec2<f32>(0.0);\n\n  out.x = atan2(dir.z, dir.x) / tau;\n  out.x += 0.5;\n\n  var phix: f32 = length(vec2(dir.x, dir.z));\n  out.y = atan2(dir.y, phix) / pi + 0.5;\n\n  return out;\n}\n\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::IOStructs::Dec\n\n@fragment\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output: fragmentOutput;\n\n  var tcoord: vec4<f32> = vec4<f32>(input.vertexVC.xy, -1, 1);\n  var V: vec4<f32> = normalize(mapperUBO.FSQMatrix * tcoord); // vec2<f32>((input.tcoordVS.x - 0.5) * 2, -(input.tcoordVS.y - 0.5) * 2);\n  // textureSampleLevel gets rid of some ugly artifacts\n  var background = textureSampleLevel(EnvironmentTexture, EnvironmentTextureSampler, vecToRectCoord(V.xyz), 0);\n  var computedColor: vec4<f32> = vec4<f32>(background.rgb, 1);\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n";
+
+var _fsqClearMat4 = new Float64Array(16);
+
+var _tNormalMat4 = new Float64Array(16); // Light type index gives either 0, 1, or 2 which indicates what type of light there is.
 // While technically, there are only spot and directional lights, within the CellArrayMapper
 // there is a third, positional light. It is technically just a variant of a spot light with
 // a cone angle of 90 or above, however certain calculations can be skipped if it is treated
@@ -19,6 +24,7 @@ var clearFragTemplate = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::
 // 1 -> directional light
 // 2 -> spot light
 
+
 function getLightTypeIndex(light) {
   if (light.getPositional()) {
     if (light.getConeAngle() >= 90) {
@@ -124,6 +130,8 @@ function vtkWebGPURenderer(publicAPI, model) {
     var utime = model.UBO.getSendTime();
 
     if (model._parent.getMTime() > utime || publicAPI.getMTime() > utime || model.camera.getMTime() > utime || model.renderable.getMTime() > utime) {
+      var _model$renderable$get;
+
       var keyMats = model.webgpuCamera.getKeyMatrices(publicAPI);
       model.UBO.setArray('WCVCMatrix', keyMats.wcvc);
       model.UBO.setArray('SCPCMatrix', keyMats.scpc);
@@ -132,6 +140,9 @@ function vtkWebGPURenderer(publicAPI, model) {
       model.UBO.setArray('VCPCMatrix', keyMats.vcpc);
       model.UBO.setArray('WCVCNormals', keyMats.normalMatrix);
       model.UBO.setValue('LightCount', model.renderable.getLights().length);
+      model.UBO.setValue('MaxEnvironmentMipLevel', (_model$renderable$get = model.renderable.getEnvironmentTexture()) === null || _model$renderable$get === void 0 ? void 0 : _model$renderable$get.getMipLevel());
+      model.UBO.setValue('BackgroundDiffuseStrength', model.renderable.getEnvironmentTextureDiffuseStrength());
+      model.UBO.setValue('BackgroundSpecularStrength', model.renderable.getEnvironmentTextureSpecularStrength());
       var tsize = publicAPI.getYInvertedTiledSizeAndOrigin();
       model.UBO.setArray('viewportSize', [tsize.usize, tsize.vsize]);
       model.UBO.setValue('cameraParallel', model.camera.getParallelProjection());
@@ -162,8 +173,7 @@ function vtkWebGPURenderer(publicAPI, model) {
 
         var viewCoordinatePosition = lights[_i].getPosition();
 
-        vec3.transformMat4(viewCoordinatePosition, viewCoordinatePosition, keyMats.wcvc); // console.log(viewCoordinatePosition);
-        // viewCoordinatePosition
+        vec3.transformMat4(viewCoordinatePosition, viewCoordinatePosition, keyMats.wcvc); // viewCoordinatePosition
 
         lightPosArray[offset] = viewCoordinatePosition[0];
         lightPosArray[offset + 1] = viewCoordinatePosition[1];
@@ -240,26 +250,85 @@ function vtkWebGPURenderer(publicAPI, model) {
   };
 
   publicAPI.clear = function () {
+    var _model$backgroundTex;
+
     if (model.renderable.getTransparent() || model.suppressClear) {
       return;
     }
 
-    var device = model._parent.getDevice();
+    var device = model._parent.getDevice(); // Normal Solid Color
+
 
     if (!model.clearFSQ) {
       model.clearFSQ = vtkWebGPUFullScreenQuad.newInstance();
       model.clearFSQ.setDevice(device);
       model.clearFSQ.setPipelineHash('clearfsq');
-      model.clearFSQ.setFragmentShaderTemplate(clearFragTemplate);
+      model.clearFSQ.setFragmentShaderTemplate(clearFragColorTemplate);
       var ubo = vtkWebGPUUniformBuffer.newInstance({
         label: 'mapperUBO'
       });
+      ubo.addEntry('FSQMatrix', 'mat4x4<f32>');
       ubo.addEntry('BackgroundColor', 'vec4<f32>');
       model.clearFSQ.setUBO(ubo);
+      model.backgroundTex = model.renderable.getEnvironmentTexture();
+    } // Textured Background
+
+
+    if (model.clearFSQ.getPipelineHash() !== 'clearfsqwithtexture' && model.renderable.getUseEnvironmentTextureAsBackground() && (_model$backgroundTex = model.backgroundTex) !== null && _model$backgroundTex !== void 0 && _model$backgroundTex.getImageLoaded()) {
+      model.clearFSQ.setFragmentShaderTemplate(clearFragTextureTemplate);
+
+      var _ubo = vtkWebGPUUniformBuffer.newInstance({
+        label: 'mapperUBO'
+      });
+
+      _ubo.addEntry('FSQMatrix', 'mat4x4<f32>');
+
+      _ubo.addEntry('BackgroundColor', 'vec4<f32>');
+
+      model.clearFSQ.setUBO(_ubo);
+      var environmentTextureHash = device.getTextureManager().getTextureForVTKTexture(model.backgroundTex);
+
+      if (environmentTextureHash.getReady()) {
+        var tview = environmentTextureHash.createView("EnvironmentTexture");
+        model.clearFSQ.setTextureViews([tview]);
+        model.backgroundTexLoaded = true;
+        var interpolate = model.backgroundTex.getInterpolate() ? 'linear' : 'nearest';
+        tview.addSampler(device, {
+          addressModeU: 'repeat',
+          addressModeV: 'clamp-to-edge',
+          addressModeW: 'repeat',
+          minFilter: interpolate,
+          magFilter: interpolate,
+          mipmapFilter: 'linear'
+        });
+      }
+
+      model.clearFSQ.setPipelineHash('clearfsqwithtexture');
+    } else if (model.clearFSQ.getPipelineHash() === 'clearfsqwithtexture' && !model.renderable.getUseEnvironmentTextureAsBackground()) {
+      // In case the mode is changed at runtime
+      model.clearFSQ = vtkWebGPUFullScreenQuad.newInstance();
+      model.clearFSQ.setDevice(device);
+      model.clearFSQ.setPipelineHash('clearfsq');
+      model.clearFSQ.setFragmentShaderTemplate(clearFragColorTemplate);
+
+      var _ubo2 = vtkWebGPUUniformBuffer.newInstance({
+        label: 'mapperUBO'
+      });
+
+      _ubo2.addEntry('FSQMatrix', 'mat4x4<f32>');
+
+      _ubo2.addEntry('BackgroundColor', 'vec4<f32>');
+
+      model.clearFSQ.setUBO(_ubo2);
     }
 
+    var keyMats = model.webgpuCamera.getKeyMatrices(publicAPI);
     var background = model.renderable.getBackgroundByReference();
     model.clearFSQ.getUBO().setArray('BackgroundColor', background);
+    mat4.transpose(_tNormalMat4, keyMats.normalMatrix);
+    mat4.mul(_fsqClearMat4, keyMats.scvc, keyMats.pcsc);
+    mat4.mul(_fsqClearMat4, _tNormalMat4, _fsqClearMat4);
+    model.clearFSQ.getUBO().setArray('FSQMatrix', _fsqClearMat4);
     model.clearFSQ.getUBO().sendIfNeeded(device);
     model.clearFSQ.prepareAndDraw(model.renderEncoder);
   };
@@ -395,6 +464,9 @@ function extend(publicAPI, model) {
   model.UBO.addEntry('WCVCNormals', 'mat4x4<f32>');
   model.UBO.addEntry('viewportSize', 'vec2<f32>');
   model.UBO.addEntry('LightCount', 'i32');
+  model.UBO.addEntry('MaxEnvironmentMipLevel', 'f32');
+  model.UBO.addEntry('BackgroundDiffuseStrength', 'f32');
+  model.UBO.addEntry('BackgroundSpecularStrength', 'f32');
   model.UBO.addEntry('cameraParallel', 'u32'); // SSBO (Light data)
 
   model.SSBO = vtkWebGPUStorageBuffer.newInstance({

package/Rendering/WebGPU/Sampler.js

@@ -12,8 +12,12 @@ function vtkWebGPUSampler(publicAPI, model) {
   publicAPI.create = function (device) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     model.device = device;
+    model.options.addressModeU = options.addressModeU ? options.addressModeU : 'clamp-to-edge';
+    model.options.addressModeV = options.addressModeV ? options.addressModeV : 'clamp-to-edge';
+    model.options.addressModeW = options.addressModeW ? options.addressModeW : 'clamp-to-edge';
     model.options.magFilter = options.magFilter ? options.magFilter : 'nearest';
     model.options.minFilter = options.minFilter ? options.minFilter : 'nearest';
+    model.options.mipmapFilter = options.mipmapFilter ? options.mipmapFilter : 'nearest';
     model.options.label = model.label;
     model.handle = model.device.getHandle().createSampler(model.options);
     model.bindGroupTime.modified();

package/Rendering/WebGPU/Texture.js

@@ -3,6 +3,7 @@ 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';
 
 var BufferUsage = vtkWebGPUBufferManager.BufferUsage; // ----------------------------------------------------------------------------
 // Global methods
@@ -22,6 +23,7 @@ function vtkWebGPUTexture(publicAPI, model) {
     model.depth = options.depth ? options.depth : 1;
     var dimension = model.depth === 1 ? '2d' : '3d';
     model.format = options.format ? options.format : 'rgba8unorm';
+    model.mipLevel = options.mipLevel ? options.mipLevel : 0;
     /* eslint-disable no-undef */
 
     /* eslint-disable no-bitwise */
@@ -37,7 +39,8 @@ function vtkWebGPUTexture(publicAPI, model) {
       // 'rgba8unorm',
       usage: model.usage,
       label: model.label,
-      dimension: dimension
+      dimension: dimension,
+      mipLevelCount: model.mipLevel + 1
     });
   };
 
@@ -56,10 +59,11 @@ function vtkWebGPUTexture(publicAPI, model) {
     /* eslint-enable no-undef */
 
     /* eslint-enable no-bitwise */
-  }; // set the data
-
+  };
 
   publicAPI.writeImageData = function (req) {
+    var nativeArray = [];
+
     if (req.canvas) {
       model.device.getHandle().queue.copyExternalImageToTexture({
         source: req.canvas,
@@ -84,36 +88,23 @@ function vtkWebGPUTexture(publicAPI, model) {
     var tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(model.format);
     var bufferBytesPerRow = model.width * tDetails.stride;
 
-    if (req.nativeArray) {
-      // create and write the buffer
-      var buffRequest = {
-        /* eslint-disable no-undef */
-        usage: BufferUsage.Texture
-        /* eslint-enable no-undef */
-
-      };
-
-      if (req.dataArray) {
-        buffRequest.dataArray = req.dataArray;
-      }
-
-      buffRequest.nativeArray = req.nativeArray; // bytesPerRow must be a multiple of 256 so we might need to rebuild
+    var fixAll = function fixAll(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
-
-      var inWidthInBytes = req.nativeArray.length / (model.height * model.depth) * req.nativeArray.BYTES_PER_ELEMENT; // is this a half float texture?
+      var inWidthInBytes = arr.length / (height * depth) * arr.BYTES_PER_ELEMENT; // is this a half float texture?
 
       var halfFloat = tDetails.elementSize === 2 && tDetails.sampleType === 'float'; // if we need to copy the data
 
       if (halfFloat || inWidthInBytes % 256) {
-        var inArray = req.nativeArray;
+        var inArray = arr;
         var inWidth = inWidthInBytes / inArray.BYTES_PER_ELEMENT;
         var outBytesPerElement = tDetails.elementSize;
         var outWidthInBytes = 256 * Math.floor((inWidth * outBytesPerElement + 255) / 256);
         var outWidth = outWidthInBytes / outBytesPerElement;
-        var outArray = macro.newTypedArray(halfFloat ? 'Uint16Array' : inArray.constructor.name, outWidth * model.height * model.depth);
+        var outArray = macro.newTypedArray(halfFloat ? 'Uint16Array' : inArray.constructor.name, outWidth * height * depth);
 
-        for (var v = 0; v < model.height * model.depth; v++) {
+        for (var v = 0; v < height * depth; v++) {
           if (halfFloat) {
             for (var i = 0; i < inWidth; i++) {
               outArray[v * outWidth + i] = HalfFloat.toHalf(inArray[v * inWidth + i]);
@@ -123,12 +114,14 @@ function vtkWebGPUTexture(publicAPI, model) {
           }
         }
 
-        buffRequest.nativeArray = outArray;
-        bufferBytesPerRow = outWidthInBytes;
+        return [outArray, outWidthInBytes];
       }
 
-      var buff = model.device.getBufferManager().getBuffer(buffRequest);
-      model.buffer = buff;
+      return [arr, inWidthInBytes];
+    };
+
+    if (req.nativeArray) {
+      nativeArray = req.nativeArray;
     }
 
     if (req.image) {
@@ -139,35 +132,74 @@ function vtkWebGPUTexture(publicAPI, model) {
       ctx.translate(0, canvas.height);
       ctx.scale(1, -1);
       ctx.drawImage(req.image, 0, 0, req.image.width, req.image.height, 0, 0, canvas.width, canvas.height);
-      var imageData = ctx.getImageData(0, 0, req.image.width, req.image.height); // create and write the buffer
+      var imageData = ctx.getImageData(0, 0, req.image.width, req.image.height);
+      nativeArray = imageData.data;
+    }
 
+    var cmdEnc = model.device.createCommandEncoder();
+
+    if (publicAPI.getDimensionality() !== 3) {
+      // Non-3D, supports mipmaps
+      var mips = vtkTexture.generateMipmaps(nativeArray, model.width, model.height, model.mipLevel);
+      var currentWidth = model.width;
+      var currentHeight = model.height;
+
+      for (var m = 0; m <= model.mipLevel; m++) {
+        var fix = fixAll(mips[m], currentHeight, 1);
+        bufferBytesPerRow = fix[1];
+        var buffRequest = {
+          dataArray: req.dataArray ? req.dataArray : null,
+          nativeArray: fix[0],
+
+          /* eslint-disable no-undef */
+          usage: BufferUsage.Texture
+          /* eslint-enable no-undef */
+
+        };
+        var 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;
+      }
+
+      model.device.submitCommandEncoder(cmdEnc);
+      model.ready = true;
+    } else {
+      // 3D, no mipmaps
+      var _fix = fixAll(nativeArray, model.height, model.depth);
+
+      bufferBytesPerRow = _fix[1];
       var _buffRequest = {
-        nativeArray: imageData.data,
+        dataArray: req.dataArray ? req.dataArray : null,
 
         /* eslint-disable no-undef */
-        usage: BufferUsage.Texture,
-
+        usage: BufferUsage.Texture
         /* eslint-enable no-undef */
-        format: 'unorm8x4'
+
       };
+      _buffRequest.nativeArray = _fix[0];
 
       var _buff = model.device.getBufferManager().getBuffer(_buffRequest);
 
-      model.buffer = _buff;
-    } // get a buffer for the image
-
-
-    var cmdEnc = model.device.createCommandEncoder();
-    cmdEnc.copyBufferToTexture({
-      buffer: model.buffer.getHandle(),
-      offset: 0,
-      bytesPerRow: bufferBytesPerRow,
-      rowsPerImage: model.height
-    }, {
-      texture: model.handle
-    }, [model.width, model.height, model.depth]);
-    model.device.submitCommandEncoder(cmdEnc);
-    model.ready = true;
+      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;
+    }
   }; // when data is pulled out of this texture what scale must be applied to
   // get back to the original source data. For formats such as r8unorm we
   // have to multiply by 255.0, for formats such as r16float it is 1.0

package/Rendering/WebGPU/TextureManager.js

@@ -105,7 +105,8 @@ function vtkWebGPUTextureManager(publicAPI, model) {
       height: req.height,
       depth: req.depth,
       format: req.format,
-      usage: req.usage
+      usage: req.usage,
+      mipLevel: req.mipLevel
     }); // fill the texture if we have data
 
     if (req.nativeArray || req.image || req.canvas) {
@@ -135,7 +136,7 @@ function vtkWebGPUTextureManager(publicAPI, model) {
 
     _fillRequest(treq);
 
-    treq.hash = treq.time + treq.format;
+    treq.hash = treq.time + treq.format + treq.mipLevel;
     return model.device.getTextureManager().getTexture(treq);
   };
 
@@ -157,7 +158,8 @@ function vtkWebGPUTextureManager(publicAPI, model) {
 
     _fillRequest(treq);
 
-    treq.hash = treq.time + treq.format;
+    treq.mipLevel = srcTexture.getMipLevel();
+    treq.hash = treq.time + treq.format + treq.mipLevel;
     return model.device.getTextureManager().getTexture(treq);
   };
 } // ----------------------------------------------------------------------------

package/index.js

@@ -5,7 +5,6 @@ import Interaction from './Interaction/index.js';
 import IO from './IO/index.js';
 import Rendering from './Rendering/index.js';
 import VTKProxy from './Proxy/index.js';
-import { T as ThirdParty } from './ThirdParty/index.js';
 import Widgets from './Widgets/index.js';
 import macro from './macros.js';
 import vtk from './vtk.js';
@@ -17,7 +16,6 @@ vtk.Interaction = Interaction;
 vtk.IO = IO;
 vtk.Proxy = VTKProxy;
 vtk.Rendering = Rendering;
-vtk.ThirdParty = ThirdParty;
 vtk.Widgets = Widgets;
 vtk.mtime = macro.getCurrentGlobalMTime;
 vtk.macro = macro; // Expose vtk to global scope without exporting it so nested namespace

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitware/vtk.js",
-  "version": "25.2.4",
+  "version": "25.5.0",
   "description": "Visualization Toolkit for the Web",
   "keywords": [
     "3d",
@@ -33,14 +33,13 @@
     "@babel/runtime": "7.17.9",
     "commander": "9.2.0",
     "d3-scale": "4.0.2",
+    "fflate": "0.7.3",
     "gl-matrix": "3.4.3",
     "globalthis": "1.0.3",
-    "jszip": "3.9.1",
-    "pako": "2.0.4",
     "seedrandom": "3.0.5",
     "shader-loader": "1.3.1",
     "shelljs": "0.8.5",
-    "spark-md5": "^3.0.2",
+    "spark-md5": "3.0.2",
     "stream-browserify": "3.0.0",
     "webworker-promise": "0.5.0",
     "worker-loader": "3.0.8",
@@ -96,7 +95,7 @@
     "kw-doc": "3.1.2",
     "lodash": "4.17.21",
     "magic-string": "0.26.2",
-    "moment": "2.29.3",
+    "moment": "2.29.4",
     "patch-package": "6.4.7",
     "pixelmatch": "5.3.0",
     "postcss-loader": "6.2.1",

package/ThirdParty/index.js

@@ -1,9 +0,0 @@
-import JSZip from 'jszip';
-import pako from 'pako';
-
-var ThirdParty = {
-  JSZip: JSZip,
-  pako: pako
-};
-
-export { ThirdParty as T };