@kitware/vtk.js 25.3.0 → 25.4.0

package/README.md

@@ -48,8 +48,8 @@ In general VTK tries to be as portable as possible; the specific configurations
 
 vtk.js supports the following development environments:
 
-- Node 12+
-- NPM 6+
+- Node 14+
+- NPM 7+
 
 and we use [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env) with the [defaults](https://github.com/Kitware/vtk-js/blob/master/.browserslistrc) set of [browsers target](https://browserl.ist/?q=defaults).
 But when built from source this could be adjusted to support any browser as long they provide WebGL.

package/Rendering/Core/Renderer.d.ts

@@ -35,6 +35,10 @@ export interface IRendererInitialValues extends IViewportInitialValues {
 	occlusionRatio?: number;
 	maximumNumberOfPeels?: number;
 	texturedBackground?: boolean;
+	environmentTexture?: vtkTexture;
+	environmentTextureDiffuseStrength?: number;
+	environmentTextureSpecularStrength?: number;
+	useEnvironmentTextureAsBackground?: boolean;
 	pass?: number;
 }
 
@@ -115,7 +119,25 @@ export interface vtkRenderer extends vtkViewport {
 	 * 
 	 * @default null
 	 */
-	getBackgroundTexture(): vtkTexture;
+	getEnvironmentTexture(): vtkTexture;
+
+	/**
+	 * Returns the diffuse strength of the set environment texture.
+	 * @default 1
+	 */
+	getEnvironmentTextureDiffuseStrength(): number;
+
+	/**
+	 * Returns the specular strength of the set environment texture.
+	 * @default 1
+	 */
+	getEnvironmentTextureSpecularStrength(): number;
+
+	/**
+	  * Gets whether or not the environment texture is being used as the background for the view.
+	  * @default false
+	  */
+	getUseEnvironmentTextureAsBackground(): boolean;
 
 	/**
 	 * 
@@ -347,9 +369,27 @@ export interface vtkRenderer extends vtkViewport {
 
 	/**
 	 * 
-	 * @param {vtkTexture} backgroundTexture 
+	 * @param {vtkTexture} environmentTexture 
+	 */
+	setEnvironmentTexture(environmentTexture: vtkTexture): boolean;
+
+	/**
+	 * Sets the diffuse strength of the set environment texture.
+	 * @param {number} diffuseStrength the new diffuse strength.
 	 */
-	setBackgroundTexture(backgroundTexture: vtkTexture): boolean;
+	setEnvironmentTextureDiffuseStrength(diffuseStrength: number): boolean;
+
+	 /**
+	  * Sets the specular strength of the set environment texture.
+	  * @param {number} specularStrength the new specular strength.
+	  */
+	setEnvironmentTextureSpecularStrength(specularStrength: number): boolean;
+
+	/**
+	  * Sets whether or not to use the environment texture as the background for the view.
+	  * @param {number} textureAsBackground
+	  */
+	setUseEnvironmentTextureAsBackground(textureAsBackground: boolean): boolean;
 
 	/**
 	 * 

package/Rendering/Core/Renderer.js

@@ -593,6 +593,10 @@ var DEFAULT_VALUES = {
   delegate: null,
   texturedBackground: false,
   backgroundTexture: null,
+  environmentTexture: null,
+  environmentTextureDiffuseStrength: 1,
+  environmentTextureSpecularStrength: 1,
+  useEnvironmentTextureAsBackground: false,
   pass: 0
 }; // ----------------------------------------------------------------------------
 
@@ -611,7 +615,7 @@ function extend(publicAPI, model) {
   if (model.background.length === 3) model.background.push(1); // Build VTK API
 
   get(publicAPI, model, ['_renderWindow', 'allocatedRenderTime', 'timeFactor', 'lastRenderTimeInSeconds', 'numberOfPropsRendered', 'lastRenderingUsedDepthPeeling', 'selector']);
-  setGet(publicAPI, model, ['twoSidedLighting', 'lightFollowCamera', 'automaticLightCreation', 'erase', 'draw', 'nearClippingPlaneTolerance', 'clippingRangeExpansion', 'backingStore', 'interactive', 'layer', 'preserveColorBuffer', 'preserveDepthBuffer', 'useDepthPeeling', 'occlusionRatio', 'maximumNumberOfPeels', 'delegate', 'backgroundTexture', 'texturedBackground', 'useShadows', 'pass']);
+  setGet(publicAPI, model, ['twoSidedLighting', 'lightFollowCamera', 'automaticLightCreation', 'erase', 'draw', 'nearClippingPlaneTolerance', 'clippingRangeExpansion', 'backingStore', 'interactive', 'layer', 'preserveColorBuffer', 'preserveDepthBuffer', 'useDepthPeeling', 'occlusionRatio', 'maximumNumberOfPeels', 'delegate', 'backgroundTexture', 'texturedBackground', 'environmentTexture', 'environmentTextureDiffuseStrength', 'environmentTextureSpecularStrength', 'useEnvironmentTextureAsBackground', 'useShadows', 'pass']);
   getArray(publicAPI, model, ['actors', 'volumes', 'lights']);
   setGetArray(publicAPI, model, ['background'], 4, 1.0);
   moveToProtected(publicAPI, model, ['renderWindow']); // Object methods

package/Rendering/Core/Texture.d.ts

@@ -5,6 +5,7 @@ export interface ITextureInitialValues {
 	interpolate?: boolean;
 	edgeClamp?: boolean;
 	imageLoaded?: boolean;
+	mipLevel?: number;
 }
 
 export interface vtkTexture extends vtkAlgorithm {
@@ -34,6 +35,11 @@ export interface vtkTexture extends vtkAlgorithm {
 	 */
 	getImageLoaded(): boolean;
 
+	/**
+	 * 
+	 */
+	getMipLevel(): number;
+
 	/**
 	 * 
 	 * @param repeat 
@@ -62,6 +68,11 @@ export interface vtkTexture extends vtkAlgorithm {
 	 * @default null
 	 */
 	setImage(image: any): void;
+
+	/**
+	 * @param level
+	 */
+	setMipLevel(level: number): boolean;
 }
 
 /**
@@ -79,6 +90,17 @@ export function extend(publicAPI: object, model: object, initialValues?: ITextur
  */
 export function newInstance(initialValues?: ITextureInitialValues): vtkTexture;
 
+/**
+ * Method used to create mipmaps from given texture data. Works best with textures that have a 
+ * width and a height that are powers of two.
+ * 
+ * @param nativeArray the array of data to create mipmaps from.
+ * @param width the width of the data
+ * @param height the height of the data
+ * @param level the level to which additional mipmaps are generated.
+ */
+export function generateMipmaps(nativeArray: any, width: number, height: number, level: number): Array<Uint8ClampedArray>;
+
 /** 
  * vtkTexture is an image algorithm that handles loading and binding of texture maps.
  * It obtains its data from an input image data dataset type. 

package/Rendering/Core/Texture.js

@@ -1,5 +1,10 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import macro from '../../macros.js';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // vtkTexture methods
 // ----------------------------------------------------------------------------
 
@@ -103,19 +108,160 @@ function vtkTexture(publicAPI, model) {
     var dimensionality = (width > 1) + (height > 1) + (depth > 1);
     return dimensionality;
   };
-} // ----------------------------------------------------------------------------
+
+  publicAPI.getInputAsJsImageData = function () {
+    if (!model.imageLoaded || publicAPI.getInputData()) return null;
+
+    if (model.jsImageData) {
+      return model.jsImageData();
+    }
+
+    if (model.canvas) {
+      var context = model.canvas.getContext('2d');
+      var imageData = context.getImageData(0, 0, model.canvas.width, model.canvas.height);
+      return imageData;
+    }
+
+    if (model.image) {
+      var canvas = document.createElement('canvas');
+      canvas.width = model.image.width;
+      canvas.height = model.image.height;
+
+      var _context = canvas.getContext('2d');
+
+      _context.translate(0, canvas.height);
+
+      _context.scale(1, -1);
+
+      _context.drawImage(model.image, 0, 0, model.image.width, model.image.height);
+
+      var _imageData = _context.getImageData(0, 0, canvas.width, canvas.height);
+
+      return _imageData;
+    }
+
+    return null;
+  };
+} // Use nativeArray instead of self
+
+
+var generateMipmaps = function generateMipmaps(nativeArray, width, height, level) {
+  // TODO: FIX UNEVEN TEXTURE MIP GENERATION:
+  // When textures don't have standard ratios, higher mip levels
+  // result in their color chanels getting messed up and shifting
+  // 3x3 gaussian kernel
+  var g3m = [1, 2, 1]; // eslint-disable-line
+
+  var g3w = 4; // eslint-disable-line
+
+  var kernel = g3m;
+  var kernelWeight = g3w;
+  var hs = nativeArray.length / (width * height); // TODO: support for textures with depth more than 1
+
+  var currentWidth = width;
+  var currentHeight = height;
+  var imageData = nativeArray;
+  var maps = [imageData];
+
+  for (var i = 0; i < level; i++) {
+    var oldData = _toConsumableArray(imageData);
+
+    currentWidth /= 2;
+    currentHeight /= 2;
+    imageData = new Uint8ClampedArray(currentWidth * currentHeight * hs);
+    var vs = hs * currentWidth; // Scale down
+
+    var shift = 0;
+
+    for (var p = 0; p < imageData.length; p += hs) {
+      if (p % vs === 0) {
+        shift += 2 * hs * currentWidth;
+      }
+
+      for (var c = 0; c < hs; c++) {
+        var sample = oldData[shift + c];
+        sample += oldData[shift + hs + c];
+        sample += oldData[shift - 2 * vs + c];
+        sample += oldData[shift - 2 * vs + hs + c];
+        sample /= 4;
+        imageData[p + c] = sample;
+      }
+
+      shift += 2 * hs;
+    } // Horizontal Pass
+
+
+    var dataCopy = _toConsumableArray(imageData);
+
+    for (var _p = 0; _p < imageData.length; _p += hs) {
+      for (var _c = 0; _c < hs; _c++) {
+        var x = -(kernel.length - 1) / 2;
+        var kw = kernelWeight;
+        var value = 0.0;
+
+        for (var k = 0; k < kernel.length; k++) {
+          var index = _p + _c + x * hs;
+          var lineShift = index % vs - (_p + _c) % vs;
+          if (lineShift > hs) index += vs;
+          if (lineShift < -hs) index -= vs;
+
+          if (dataCopy[index]) {
+            value += dataCopy[index] * kernel[k];
+          } else {
+            kw -= kernel[k];
+          }
+
+          x += 1;
+        }
+
+        imageData[_p + _c] = value / kw;
+      }
+    } // Vertical Pass
+
+
+    dataCopy = _toConsumableArray(imageData);
+
+    for (var _p2 = 0; _p2 < imageData.length; _p2 += hs) {
+      for (var _c2 = 0; _c2 < hs; _c2++) {
+        var _x = -(kernel.length - 1) / 2;
+
+        var _kw = kernelWeight;
+        var _value = 0.0;
+
+        for (var _k = 0; _k < kernel.length; _k++) {
+          var _index = _p2 + _c2 + _x * vs;
+
+          if (dataCopy[_index]) {
+            _value += dataCopy[_index] * kernel[_k];
+          } else {
+            _kw -= kernel[_k];
+          }
+
+          _x += 1;
+        }
+
+        imageData[_p2 + _c2] = _value / _kw;
+      }
+    }
+
+    maps.push(imageData);
+  }
+
+  return maps;
+}; // ----------------------------------------------------------------------------
 // Object factory
 // ----------------------------------------------------------------------------
 
 
 var DEFAULT_VALUES = {
-  repeat: false,
-  interpolate: false,
-  edgeClamp: false,
   image: null,
   canvas: null,
+  jsImageData: null,
   imageLoaded: false,
-  jsImageData: null
+  repeat: false,
+  interpolate: false,
+  edgeClamp: false,
+  mipLevel: 0
 }; // ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
@@ -125,15 +271,18 @@ function extend(publicAPI, model) {
   macro.obj(publicAPI, model);
   macro.algo(publicAPI, model, 6, 0);
   macro.get(publicAPI, model, ['canvas', 'image', 'jsImageData', 'imageLoaded']);
-  macro.setGet(publicAPI, model, ['repeat', 'edgeClamp', 'interpolate']);
+  macro.setGet(publicAPI, model, ['repeat', 'edgeClamp', 'interpolate', 'mipLevel']);
   vtkTexture(publicAPI, model);
 } // ----------------------------------------------------------------------------
 
-var newInstance = macro.newInstance(extend, 'vtkTexture'); // ----------------------------------------------------------------------------
+var newInstance = macro.newInstance(extend, 'vtkTexture');
+var STATIC = {
+  generateMipmaps: generateMipmaps
+}; // ----------------------------------------------------------------------------
 
-var vtkTexture$1 = {
+var vtkTexture$1 = _objectSpread({
   newInstance: newInstance,
   extend: extend
-};
+}, STATIC);
 
-export { vtkTexture$1 as default, extend, newInstance };
+export { STATIC, vtkTexture$1 as default, extend, newInstance };

package/Rendering/WebGPU/CellArrayMapper.js

@@ -18,7 +18,7 @@ var ScalarMode = vtkMapper.ScalarMode;
 var CoordinateSystem = vtkProp.CoordinateSystem;
 var DisplayLocation = vtkProperty2D.DisplayLocation;
 var vtkWebGPUPolyDataVS = "\n//VTK::Renderer::Dec\n\n//VTK::Color::Dec\n\n//VTK::Normal::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::Select::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::IOStructs::Dec\n\n@vertex\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output : vertexOutput;\n\n  var vertex: vec4<f32> = vertexBC;\n\n  //VTK::Color::Impl\n\n  //VTK::Normal::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Select::Impl\n\n  //VTK::Position::Impl\n\n  return output;\n}\n";
-var vtkWebGPUPolyDataFS = "\nstruct PBRData {\n  diffuse: vec3<f32>,\n  specular: vec3<f32>,\n}\n\n// Dot product with the max already in it\nfn mdot(a: vec3<f32>, b: vec3<f32>) -> f32 {\n  return max(0.0, dot(a, b));\n}\n\n// Lambertian diffuse model\nfn lambertDiffuse(base: vec3<f32>, N: vec3<f32>, L: vec3<f32>) -> vec3<f32> {\n  var pi: f32 = 3.14159265359; \n  var NdotL: f32 = mdot(N, L);\n  NdotL = pow(NdotL, 1.5);\n  return (base/pi)*NdotL;\n}\n\n// Yasuhiro Fujii improvement on the Oren-Nayar model\n// https://mimosa-pudica.net/improved-oren-nayar.html\n// p is surface color, o is roughness\nfn fujiiOrenNayar(p: vec3<f32>, o: f32, N: vec3<f32>, L: vec3<f32>, V: vec3<f32>) -> vec3<f32> {\n  var invpi: f32 = 0.31830988618; // 1/pi\n\n  var o2 = o*o;\n  var NdotL: f32 = mdot(N, L);\n  NdotL = pow(NdotL, 1.5); // Less physically accurate, but hides the \"seams\" between lights better\n\n  var NdotV: f32 = mdot(N, V);\n  var LdotV: f32 = mdot(L, V);\n\n  var s: f32 = LdotV - NdotL*NdotV;\n  var t: f32 = mix(1, max(NdotL, NdotV), step(0, s)); // Mix with step is the equivalent of an if statement\n  var A: vec3<f32> = 0.5*(o2 / (o2 + 0.33)) + 0.17*p*(o2 / (o2 + 0.13));\n  A = invpi*(1 - A);\n  var B: f32 = 0.45*(o2 / (o2 + 0.09));\n  B = invpi*B;\n\n  return p*NdotL*(A + B*(s/t));\n}\n\n// Fresnel portion of BRDF (IOR only, simplified)\nfn schlickFresnelIOR(V: vec3<f32>, N: vec3<f32>, ior: f32, k: f32) -> f32 {\n  var NdotV: f32 = mdot(V, N);\n  // var R0: f32 = pow((ior - 1.0) / (ior + 1.0), 2); // 1.0 is about the ior of air, and it is assumed that light will be traveling through air\n  var F0: f32 = (pow((ior - 1.0), 2) + k*k) / (pow((ior + 1.0), 2) + k*k); // This takes into account the roughness, whic the other one does not\n  return F0 + (1 - F0) * pow((1-NdotV), 5); \n}\n\n// Fresnel portion of BRDF (Color ior, better)\nfn schlickFresnelRGB(V: vec3<f32>, N: vec3<f32>, F0: vec3<f32>) -> vec3<f32> {\n  var NdotV: f32 = mdot(V, N);\n  return F0 + (1 - F0) * pow((1-NdotV), 5); \n}\n\n// Normal portion of BRDF\n// https://learnopengl.com/PBR/Theory\n// Trowbridge-Reitz GGX functions: normal, halfway, roughness^2\nfn trGGX(N: vec3<f32>, H: vec3<f32>, a: f32) -> f32 {\n  var pi: f32 = 3.14159265359; \n\n  var a2: f32 = a*a;\n  var NdotH = mdot(N, H);\n  var NdotH2 = NdotH*NdotH;\n  \n  var denom: f32 = NdotH2 * (a2 - 1.0) + 1.0;\n\n  return a2 / max((pi*denom*denom), 0.000001);\n}\n\n// A VERY bad approximation of anisotropy. Real anisotropic calculations require tangent and bitangent\nfn anisotrophicTrGGX(N: vec3<f32>, H: vec3<f32>, O: vec3<f32>, s: f32, a: f32) -> f32 {\n  var Op: vec3<f32> = (rendererUBO.WCVCNormals * vec4<f32>(normalize(O) * s, 0.)).xyz;\n\n  var ggx1: f32 = trGGX(N + Op*s, H, a);\n  var ggx2: f32 = trGGX(N - Op*s, H, a);\n  return (0.5 * ggx1 + 0.5 * ggx2);\n}\n\n// Geometry portion of BRDF\nfn schlickGGX(N: vec3<f32>, X: vec3<f32>, k: f32) -> f32 {\n  var NdotX = mdot(N, X);\n  return NdotX / max(0.000001, (NdotX*(1-k) + k));\n}\n\nfn smithSurfaceRoughness(N: vec3<f32>, V: vec3<f32>, L: vec3<f32>, k: f32) -> f32 {\n  var ggx1: f32 = max(0.01, schlickGGX(N, V, k)); // Prevents void zones at the cost of some accuracy\n  var ggx2: f32 = schlickGGX(N, L, k);\n  return ggx1*ggx2;\n}\n\n// BRDF Combination\nfn cookTorrance(D: f32, F: f32, G: f32, N: vec3<f32>, V: vec3<f32>, L: vec3<f32>) -> f32 {\n  var num: f32 = D*F*G;\n  var denom: f32 = 4*mdot(V, N)*mdot(L, N);\n\n  return num / max(denom, 0.000001);\n}\n\n// Different lighting calculations for different light sources\nfn calcDirectionalLight(N: vec3<f32>, V: vec3<f32>, ior: f32, roughness: f32, metallic: f32, direction: vec3<f32>, color: vec3<f32>, base: vec3<f32>) -> PBRData {  \n  var L: vec3<f32> = normalize(direction); // Light Vector\n  var H: vec3<f32> = normalize(L + V); // Halfway Vector\n\n  var alpha = roughness*roughness;\n  var k: f32 = alpha*alpha / 2;\n\n  var D: f32 = trGGX(N, H, alpha); // Distribution\n  // var F: f32 = schlickFresnelIOR(V, N, ior, k); // Fresnel\n  var G: f32 = smithSurfaceRoughness(N, V, L, k); // Geometry\n\n  var brdf: f32 = cookTorrance(D, 1, G, N, V, L); // Fresnel term is replaced with 1 because it is added later\n  var incoming: vec3<f32> = color;\n  var angle: f32 = mdot(L, N);\n  angle = pow(angle, 1.5);\n\n  var specular: vec3<f32> = brdf*incoming*angle;\n  // Oren-Nayar gives a clay-like effect when fully rough which some people may not want, so it might be better to give a separate\n  // control property for the diffuse vs specular roughness\n  var diffuse: vec3<f32> = incoming*fujiiOrenNayar(base, roughness, N, L, V); \n  // Stores the specular and diffuse separately to allow for finer post processing\n  // Could also be done (propably more properly) with a struct\n  var out = PBRData(diffuse, specular);\n  \n  return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)\n}\n\n// TODO: find some way to reduce the number of arguments going in here\nfn calcPointLight(N: vec3<f32>, V: vec3<f32>, fragPos: vec3<f32>, ior: f32, roughness: f32, metallic: f32, position: vec3<f32>, color: vec3<f32>, base: vec3<f32>) -> PBRData {\n  var L: vec3<f32> = normalize(position - fragPos); // Light Vector\n  var H: vec3<f32> = normalize(L + V); // Halfway Vector\n  var dist = distance(position, fragPos);\n\n  var alpha = roughness*roughness;\n  var k: f32 = alpha*alpha / 2; // could also be pow(alpha + 1.0, 2) / 8\n\n  var D: f32 = trGGX(N, H, alpha); // Distribution\n  // var F: f32 = schlickFresnelIOR(V, N, ior, k); // Fresnel\n  var G: f32 = smithSurfaceRoughness(N, V, L, k); // Geometry\n\n  var brdf: f32 = cookTorrance(D, 1, G, N, V, L);  \n  var incoming: vec3<f32> = color * (1. / (dist*dist));\n  var angle: f32 = mdot(L, N);\n  angle = pow(angle, 1.5); // Smoothing factor makes it less accurate, but reduces ugly \"seams\" bewteen light sources\n\n  var specular: vec3<f32> = brdf*incoming*angle;\n  var diffuse: vec3<f32> = incoming*fujiiOrenNayar(base, roughness, N, L, V);\n\n  // Stores the specular and diffuse separately to allow for finer post processing\n  // Could also be done (propably more properly) with a struct\n  var out = PBRData(diffuse, specular);\n  \n  return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)\n}\n\n// For a reason unknown to me, spheres dont seem to behave propperly with head-on spot lights\nfn calcSpotLight(N: vec3<f32>, V: vec3<f32>, fragPos: vec3<f32>, ior: f32, roughness: f32, metallic: f32, position: vec3<f32>, direction: vec3<f32>, cones: vec2<f32>, color: vec3<f32>, base: vec3<f32>) -> PBRData {\n  var L: vec3<f32> = normalize(position - fragPos);\n  var H: vec3<f32> = normalize(L + V); // Halfway Vector\n  var dist = distance(position, fragPos);\n\n  var alpha = roughness*roughness;\n  var k: f32 = alpha*alpha / 2; // could also be pow(alpha + 1.0, 2) / 8\n\n  var D: f32 = trGGX(N, H, alpha); // Distribution\n  // var F: f32 = schlickFresnelIOR(V, N, ior, k); // Fresnel\n  var G: f32 = smithSurfaceRoughness(N, V, L, k); // Geometry\n\n  var brdf: f32 = cookTorrance(D, 1, G, N, V, L);  \n  \n  // Cones.x is the inner phi and cones.y is the outer phi\n  var theta: f32 = mdot(normalize(direction), L);\n  var epsilon: f32 = cones.x - cones.y;\n  var intensity: f32 = (theta - cones.y) / epsilon;\n  intensity = clamp(intensity, 0.0, 1.0);\n  intensity /= dist*dist;\n\n  var incoming: vec3<f32> = color * intensity;\n\n  var angle: f32 = mdot(L, N);\n  angle = pow(angle, 1.5); // Smoothing factor makes it less accurate, but reduces ugly \"seams\" bewteen light sources\n\n  var specular: vec3<f32> = brdf*incoming*angle;\n  var diffuse: vec3<f32> = incoming*fujiiOrenNayar(base, roughness, N, L, V);\n\n  // Stores the specular and diffuse separately to allow for finer post processing\n  // Could also be done (propably more properly) with a struct\n  var out = PBRData(diffuse, specular);\n  \n  return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)\n}\n\n// Environment mapping stuff\n// Takes in a vector and converts it to an equivalent coordinate in a rectilinear texture. Should be replaced with cubemaps at some point\nfn vecToRectCoord(dir: vec3<f32>) -> vec2<f32> {\n  var tau: f32 = 6.28318530718;\n  var out: vec2<f32> = vec2<f32>(0.);\n\n  out.x = atan2(dir.z, dir.x) / tau;\n  out.x += 0.5;\n\n  out.y = (dir.y * .5) + .5;\n\n  return out;\n}\n\n//VTK::Renderer::Dec\n\n//VTK::Color::Dec\n\n//VTK::TCoord::Dec\n\n// optional surface normal declaration\n//VTK::Normal::Dec\n\n//VTK::Select::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::Mapper::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  // Temporary ambient, diffuse, and opacity\n  var ambientColor: vec4<f32> = mapperUBO.AmbientColor;\n  var diffuseColor: vec4<f32> = mapperUBO.DiffuseColor;\n  var opacity: f32 = mapperUBO.Opacity;\n\n  // This should be declared somewhere else\n  var _diffuseMap: vec4<f32> = vec4<f32>(1);\n  var _roughnessMap: vec4<f32> = vec4<f32>(1);\n  var _metallicMap: vec4<f32> = vec4<f32>(1);\n  var _normalMap: vec4<f32> = vec4<f32>(0, 0, 1, 0); // normal map was setting off the normal vector detection in fragment\n  var _ambientOcclusionMap: vec4<f32> = vec4<f32>(0);\n  var _emissionMap: vec4<f32> = vec4<f32>(0);\n\n  //VTK::Color::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Normal::Impl\n\n  var computedColor: vec4<f32> = vec4<f32>(diffuseColor.rgb, 1.);\n\n  //VTK::Light::Impl\n\n  //VTK::Select::Impl\n\n  if (computedColor.a == 0.0) { discard; };\n\n  //VTK::Position::Impl\n\n  //VTK::RenderEncoder::Impl\n\n  return output;\n}\n";
+var vtkWebGPUPolyDataFS = "\nstruct PBRData {\n  diffuse: vec3<f32>,\n  specular: vec3<f32>,\n}\n\n// Dot product with the max already in it\nfn mdot(a: vec3<f32>, b: vec3<f32>) -> f32 {\n  return max(0.0, dot(a, b));\n}\n// Dot product with a max in it that does not allow for negative values\n// Physically based rendering is accurate as long as normals are accurate,\n// however this is pretty often not the case. In order to prevent negative\n// values from ruining light calculations and creating zones of zero light,\n// this remapping is used, which smoothly clamps the dot product between\n// zero and one while still maintaining a good amount of accuracy.\nfn cdot(a: vec3<f32>, b: vec3<f32>) -> f32 {\n  var d: f32 = max(0.0, dot(a, b));\n  d = pow((d + 1) / 2.0, 2.6);\n  return d;\n}\n\n// Lambertian diffuse model\nfn lambertDiffuse(base: vec3<f32>, N: vec3<f32>, L: vec3<f32>) -> vec3<f32> {\n  var pi: f32 = 3.14159265359; \n  var NdotL: f32 = mdot(N, L);\n  NdotL = pow(NdotL, 1.5);\n  return (base/pi)*NdotL;\n}\n\n// Yasuhiro Fujii improvement on the Oren-Nayar model\n// https://mimosa-pudica.net/improved-oren-nayar.html\n// p is surface color, o is roughness\nfn fujiiOrenNayar(p: vec3<f32>, o: f32, N: vec3<f32>, L: vec3<f32>, V: vec3<f32>) -> vec3<f32> {\n  var invpi: f32 = 0.31830988618; // 1/pi\n\n  var o2 = o*o;\n  var NdotL: f32 = mdot(N, L);\n  NdotL = pow(NdotL, 1.5); // Less physically accurate, but hides the \"seams\" between lights better\n\n  var NdotV: f32 = mdot(N, V);\n  var LdotV: f32 = mdot(L, V);\n\n  var s: f32 = LdotV - NdotL*NdotV;\n  var t: f32 = mix(1, max(NdotL, NdotV), step(0, s)); // Mix with step is the equivalent of an if statement\n  var A: vec3<f32> = 0.5*(o2 / (o2 + 0.33)) + 0.17*p*(o2 / (o2 + 0.13));\n  A = invpi*(1 - A);\n  var B: f32 = 0.45*(o2 / (o2 + 0.09));\n  B = invpi*B;\n\n  return p*NdotL*(A + B*(s/t));\n}\n\n// Fresnel portion of BRDF (IOR only, simplified)\nfn schlickFresnelIOR(V: vec3<f32>, N: vec3<f32>, ior: f32, k: f32) -> f32 {\n  var NdotV: f32 = mdot(V, N);\n  var F0: f32 = (pow((ior - 1.0), 2) + k*k) / (pow((ior + 1.0), 2) + k*k); // This takes into account the roughness, which the other one does not\n  return F0 + (1 - F0) * pow((1-NdotV), 5); \n}\n\n// Fresnel portion of BRDF (Color ior, better)\nfn schlickFresnelRGB(V: vec3<f32>, N: vec3<f32>, F0: vec3<f32>) -> vec3<f32> {\n  var NdotV: f32 = mdot(V, N);\n  return F0 + (1 - F0) * pow((1-NdotV), 5); \n}\n\n// Normal portion of BRDF\n// https://learnopengl.com/PBR/Theory\n// Trowbridge-Reitz GGX functions: normal, halfway, roughness^2\nfn trGGX(N: vec3<f32>, H: vec3<f32>, a: f32) -> f32 {\n  var pi: f32 = 3.14159265359; \n\n  var a2: f32 = a*a;\n  var NdotH = mdot(N, H);\n  var NdotH2 = NdotH*NdotH;\n  \n  var denom: f32 = NdotH2 * (a2 - 1.0) + 1.0;\n\n  return a2 / max((pi*denom*denom), 0.000001);\n}\n\n// A VERY bad approximation of anisotropy. Real anisotropic calculations require tangent and bitangent\nfn anisotrophicTrGGX(N: vec3<f32>, H: vec3<f32>, O: vec3<f32>, s: f32, a: f32) -> f32 {\n  var Op: vec3<f32> = (rendererUBO.WCVCNormals * vec4<f32>(normalize(O) * s, 0.)).xyz;\n\n  var ggx1: f32 = trGGX(N + Op*s, H, a);\n  var ggx2: f32 = trGGX(N - Op*s, H, a);\n  return (0.5 * ggx1 + 0.5 * ggx2);\n}\n\n// Geometry portion of BRDF\nfn schlickGGX(N: vec3<f32>, X: vec3<f32>, k: f32) -> f32 {\n  var NdotX = cdot(N, X);\n  return NdotX / max(0.000001, (NdotX*(1-k) + k));\n}\n\nfn smithSurfaceRoughness(N: vec3<f32>, V: vec3<f32>, L: vec3<f32>, k: f32) -> f32 {\n  var ggx1: f32 = min(1, schlickGGX(N, V, k));\n  var ggx2: f32 = min(1, schlickGGX(N, L, k));\n  return ggx1*ggx2;\n}\n\n// BRDF Combination\nfn cookTorrance(D: f32, F: f32, G: f32, N: vec3<f32>, V: vec3<f32>, L: vec3<f32>) -> f32 {\n  var num: f32 = D*F*G;\n  var denom: f32 = 4*cdot(V, N)*cdot(L, N);\n\n  return num / max(denom, 0.000001);\n}\n\n// Different lighting calculations for different light sources\nfn calcDirectionalLight(N: vec3<f32>, V: vec3<f32>, ior: f32, roughness: f32, metallic: f32, direction: vec3<f32>, color: vec3<f32>, base: vec3<f32>) -> PBRData {  \n  var L: vec3<f32> = normalize(direction); // Light Vector\n  var H: vec3<f32> = normalize(L + V); // Halfway Vector\n\n  var alpha = roughness*roughness;\n  var k: f32 = alpha*alpha / 2;\n\n  var D: f32 = trGGX(N, H, alpha); // Distribution\n  // var F: f32 = schlickFresnelIOR(V, N, ior, k); // Fresnel\n  var G: f32 = smithSurfaceRoughness(N, V, L, k); // Geometry\n\n  var brdf: f32 = cookTorrance(D, 1, G, N, V, L); // Fresnel term is replaced with 1 because it is added later\n  var incoming: vec3<f32> = color;\n  var angle: f32 = mdot(L, N);\n  angle = pow(angle, 1.5);\n\n  var specular: vec3<f32> = brdf*incoming*angle;\n  // Oren-Nayar gives a clay-like effect when fully rough which some people may not want, so it might be better to give a separate\n  // control property for the diffuse vs specular roughness\n  var diffuse: vec3<f32> = incoming*fujiiOrenNayar(base, roughness, N, L, V); \n  // Stores the specular and diffuse separately to allow for finer post processing\n  var out = PBRData(diffuse, specular);\n  \n  return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)\n}\n\n// TODO: find some way to reduce the number of arguments going in here\nfn calcPointLight(N: vec3<f32>, V: vec3<f32>, fragPos: vec3<f32>, ior: f32, roughness: f32, metallic: f32, position: vec3<f32>, color: vec3<f32>, base: vec3<f32>) -> PBRData {\n  var L: vec3<f32> = normalize(position - fragPos); // Light Vector\n  var H: vec3<f32> = normalize(L + V); // Halfway Vector\n  var dist = distance(position, fragPos);\n\n  var alpha = roughness*roughness;\n  var k: f32 = alpha*alpha / 2; // could also be pow(alpha + 1.0, 2) / 8\n\n  var D: f32 = trGGX(N, H, alpha); // Distribution\n  // var F: f32 = schlickFresnelIOR(V, N, ior, k); // Fresnel\n  var G: f32 = smithSurfaceRoughness(N, V, L, k); // Geometry\n\n  var brdf: f32 = cookTorrance(D, 1, G, N, V, L);  \n  var incoming: vec3<f32> = color * (1. / (dist*dist));\n  var angle: f32 = mdot(L, N);\n  angle = pow(angle, 1.5); // Smoothing factor makes it less accurate, but reduces ugly \"seams\" bewteen light sources\n\n  var specular: vec3<f32> = brdf*incoming*angle;\n  var diffuse: vec3<f32> = incoming*fujiiOrenNayar(base, roughness, N, L, V);\n\n  // Stores the specular and diffuse separately to allow for finer post processing\n  // Could also be done (propably more properly) with a struct\n  var out = PBRData(diffuse, specular);\n  \n  return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)\n}\n\n// For a reason unknown to me, spheres dont seem to behave propperly with head-on spot lights\nfn calcSpotLight(N: vec3<f32>, V: vec3<f32>, fragPos: vec3<f32>, ior: f32, roughness: f32, metallic: f32, position: vec3<f32>, direction: vec3<f32>, cones: vec2<f32>, color: vec3<f32>, base: vec3<f32>) -> PBRData {\n  var L: vec3<f32> = normalize(position - fragPos);\n  var H: vec3<f32> = normalize(L + V); // Halfway Vector\n  var dist = distance(position, fragPos);\n\n  var alpha = roughness*roughness;\n  var k: f32 = alpha*alpha / 2; // could also be pow(alpha + 1.0, 2) / 8\n\n  var D: f32 = trGGX(N, H, alpha); // Distribution\n  // var F: f32 = schlickFresnelIOR(V, N, ior, k); // Fresnel\n  var G: f32 = smithSurfaceRoughness(N, V, L, k); // Geometry\n\n  var brdf: f32 = cookTorrance(D, 1, G, N, V, L);  \n  \n  // Cones.x is the inner phi and cones.y is the outer phi\n  var theta: f32 = mdot(normalize(direction), L);\n  var epsilon: f32 = cones.x - cones.y;\n  var intensity: f32 = (theta - cones.y) / epsilon;\n  intensity = clamp(intensity, 0.0, 1.0);\n  intensity /= dist*dist;\n\n  var incoming: vec3<f32> = color * intensity;\n\n  var angle: f32 = mdot(L, N);\n  angle = pow(angle, 1.5); // Smoothing factor makes it less accurate, but reduces ugly \"seams\" bewteen light sources\n\n  var specular: vec3<f32> = brdf*incoming*angle;\n  var diffuse: vec3<f32> = incoming*fujiiOrenNayar(base, roughness, N, L, V);\n\n  // Stores the specular and diffuse separately to allow for finer post processing\n  // Could also be done (propably more properly) with a struct\n  var out = PBRData(diffuse, specular);\n  \n  return out; // Returns angle along with color of light so the final color can be multiplied by angle as well (creates black areas)\n}\n\n// Environment mapping stuff\n// Takes in a vector and converts it to an equivalent coordinate in a rectilinear texture. Should be replaced with cubemaps at some point\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::Color::Dec\n\n//VTK::TCoord::Dec\n\n// optional surface normal declaration\n//VTK::Normal::Dec\n\n//VTK::Select::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::Mapper::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  // Temporary ambient, diffuse, and opacity\n  var ambientColor: vec4<f32> = mapperUBO.AmbientColor;\n  var diffuseColor: vec4<f32> = mapperUBO.DiffuseColor;\n  var opacity: f32 = mapperUBO.Opacity;\n\n  // This should be declared somewhere else\n  var _diffuseMap: vec4<f32> = vec4<f32>(1);\n  var _roughnessMap: vec4<f32> = vec4<f32>(1);\n  var _metallicMap: vec4<f32> = vec4<f32>(1);\n  var _normalMap: vec4<f32> = vec4<f32>(0, 0, 1, 0); // normal map was setting off the normal vector detection in fragment\n  var _ambientOcclusionMap: vec4<f32> = vec4<f32>(1);\n  var _emissionMap: vec4<f32> = vec4<f32>(0);\n\n  //VTK::Color::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Normal::Impl\n\n  var computedColor: vec4<f32> = vec4<f32>(diffuseColor.rgb, 1.0);\n\n  //VTK::Light::Impl\n\n  //VTK::Select::Impl\n\n  if (computedColor.a == 0.0) { discard; };\n\n  //VTK::Position::Impl\n\n  //VTK::RenderEncoder::Impl\n\n  return output;\n}\n";
 
 function isEdges(hash) {
   // edge pipelines have "edge" in them
@@ -209,7 +209,7 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
       code = fDesc.getCode();
 
       if (actor.getProperty().getNormalTexture()) {
-        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Normal::Impl', ['  var normal: vec3<f32> = input.normalVC;', '  if (!input.frontFacing) { normal = -normal; }', '  var tangent: vec3<f32> = input.tangentVC;', '  var bitangent: vec3<f32> = input.bitangentVC;', '  var TCVCMatrix: mat3x3<f32> = mat3x3<f32>(', '    tangent.x, bitangent.x, normal.x,', '    tangent.y, bitangent.y, normal.y,', '    tangent.z, bitangent.z, normal.z,', '  );', '  normal = TCVCMatrix * (_normalMap.xyz * 2 - 1);', '  normal = mix(input.normalVC, normal, mapperUBO.NormalStrength);', '  normal = normalize(normal);']).result;
+        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Normal::Impl', ['  var normal: vec3<f32> = input.normalVC;', '  if (!input.frontFacing) { normal = -normal; }', '  var tangent: vec3<f32> = input.tangentVC;', '  var bitangent: vec3<f32> = input.bitangentVC;', '  var TCVCMatrix: mat3x3<f32> = mat3x3<f32>(', '    tangent.x, bitangent.x, normal.x,', '    tangent.y, bitangent.y, normal.y,', '    tangent.z, bitangent.z, normal.z,', '  );', '  var mappedNormal: vec3<f32> = TCVCMatrix * (_normalMap.xyz * 2 - 1);', '  normal = mix(normal, mappedNormal, mapperUBO.NormalStrength);', '  normal = normalize(normal);']).result;
       } else {
         code = vtkWebGPUShaderCache.substitute(code, '//VTK::Normal::Impl', ['  var normal: vec3<f32> = input.normalVC;', '  if (!input.frontFacing) { normal = -normal; }', '  normal = normalize(normal);']).result;
       }
@@ -225,18 +225,30 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     if (hash.includes('sel')) return;
     var vDesc = pipeline.getShaderDescription('vertex');
     if (!vDesc.hasOutput('vertexVC')) vDesc.addOutput('vec4<f32>', 'vertexVC');
+    var renderer = model.WebGPURenderer.getRenderable();
     var fDesc = pipeline.getShaderDescription('fragment');
     var code = fDesc.getCode(); // Code that runs if the fragment shader includes normals
 
     if (code.includes('var normal:') && model.useRendererMatrix && !isEdges(hash) && !model.is2D && !hash.includes('sel')) {
-      code = vtkWebGPUShaderCache.substitute(code, '//VTK::Light::Impl', [// Constants
+      var _renderer$getEnvironm;
+
+      var lightingCode = [// Constants
       '  var pi: f32 = 3.14159265359;', // Vectors needed for light calculations
       '  var fragPos: vec3<f32> = vec3<f32>(input.vertexVC.xyz);', '  var V: vec3<f32> = mix(normalize(-fragPos), vec3<f32>(0, 0, 1), f32(rendererUBO.cameraParallel)); // View Vector', // Values needed for light calculations
       '  var baseColor: vec3<f32> = _diffuseMap.rgb * diffuseColor.rgb;', '  var roughness: f32 = max(0.000001, mapperUBO.Roughness * _roughnessMap.r);', // Need to have a different way of sampling greyscale values aside from .r
       '  var metallic: f32 = mapperUBO.Metallic * _metallicMap.r;', '  var alpha: f32 = roughness*roughness;', '  var ior: f32 = mapperUBO.BaseIOR;', '  var k: f32 = alpha*alpha / 2;', // Split diffuse and specular components
       '  var diffuse: vec3<f32> = vec3<f32>(0.);', '  var specular: vec3<f32> = vec3<f32>(0.);', '  var emission: vec3<f32> = _emissionMap.rgb * mapperUBO.Emission;', // Summing diffuse and specular components of directional lights
       '  {', '    var i: i32 = 0;', '    loop {', '      if !(i < rendererUBO.LightCount) { break; }', '      switch (i32(rendererLightSSBO.values[i].LightData.x)) {', '         // Point Light', '         case 0 {', '           var color: vec3<f32> = rendererLightSSBO.values[i].LightColor.rgb * rendererLightSSBO.values[i].LightColor.w;', '           var pos: vec3<f32> = (rendererLightSSBO.values[i].LightPos).xyz;', '           var calculated: PBRData = calcPointLight(normal, V, fragPos, ior, roughness, metallic, pos, color, baseColor);', '           diffuse += max(vec3<f32>(0), calculated.diffuse);', '           specular += max(vec3<f32>(0), calculated.specular);', '          }', '         // Directional light', '         case 1 {', '           var dir: vec3<f32> = (rendererUBO.WCVCNormals * vec4<f32>(normalize(rendererLightSSBO.values[i].LightDir.xyz), 0.)).xyz;', '           dir = normalize(dir);', '           var color: vec3<f32> = rendererLightSSBO.values[i].LightColor.rgb * rendererLightSSBO.values[i].LightColor.w;', '           var calculated: PBRData = calcDirectionalLight(normal, V, ior, roughness, metallic, dir, color, baseColor); // diffuseColor.rgb needs to be fixed with a more dynamic diffuse color', '           diffuse += max(vec3<f32>(0), calculated.diffuse);', '           specular += max(vec3<f32>(0), calculated.specular);', '         }', '         // Spot Light', '         case 2 {', '           var color: vec3<f32> = rendererLightSSBO.values[i].LightColor.rgb * rendererLightSSBO.values[i].LightColor.w;', '           var pos: vec3<f32> = (rendererLightSSBO.values[i].LightPos).xyz;', '           var dir: vec3<f32> = (rendererUBO.WCVCNormals * vec4<f32>(normalize(rendererLightSSBO.values[i].LightDir.xyz), 0.)).xyz;', '           dir = normalize(dir);', '           var cones: vec2<f32> = vec2<f32>(rendererLightSSBO.values[i].LightData.y, rendererLightSSBO.values[i].LightData.z);', '           var calculated: PBRData = calcSpotLight(normal, V, fragPos, ior, roughness, metallic, pos, dir, cones, color, baseColor);', '           diffuse += max(vec3<f32>(0), calculated.diffuse);', '           specular += max(vec3<f32>(0), calculated.specular);', '         }', '         default { continue; }', '       }', '      continuing { i++; }', '    }', '  }', // Final variables for combining specular and diffuse
-      '  var fresnel: f32 = schlickFresnelIOR(V, normal, ior, k); // Fresnel', '  fresnel = min(1, fresnel);', '  // This could be controlled with its own variable (that isnt base color) for better artistic control', '  var fresnelMetallic: vec3<f32> = schlickFresnelRGB(V, normal, baseColor); // Fresnel for metal, takes color into account', '  var kS: vec3<f32> = mix(vec3<f32>(fresnel), fresnelMetallic, metallic);', '  kS = min(vec3<f32>(1), kS);', '  var kD: vec3<f32> = (1.0 - kS) * (1.0 - metallic);', '  var PBR: vec3<f32> = mapperUBO.DiffuseIntensity*kD*diffuse + kS*specular;', '  PBR += emission;', '  computedColor = vec4<f32>(PBR, mapperUBO.Opacity);']).result;
+      '  var fresnel: f32 = schlickFresnelIOR(V, normal, ior, k); // Fresnel', '  fresnel = min(1, fresnel);', '  // This could be controlled with its own variable (that isnt base color) for better artistic control', '  var fresnelMetallic: vec3<f32> = schlickFresnelRGB(V, normal, baseColor); // Fresnel for metal, takes color into account', '  var kS: vec3<f32> = mix(vec3<f32>(fresnel), fresnelMetallic, metallic);', '  kS = min(vec3<f32>(1), kS);', '  var kD: vec3<f32> = (1.0 - kS) * (1.0 - metallic);', '  var PBR: vec3<f32> = mapperUBO.DiffuseIntensity*kD*diffuse + kS*specular;', '  PBR += emission;', '  computedColor = vec4<f32>(PBR, mapperUBO.Opacity);'];
+
+      if ((_renderer$getEnvironm = renderer.getEnvironmentTexture()) !== null && _renderer$getEnvironm !== void 0 && _renderer$getEnvironm.getImageLoaded()) {
+        lightingCode.push('  // To get diffuse IBL, the texture is sampled with normals in worldspace', '  var diffuseIBLCoords: vec3<f32> = (transpose(rendererUBO.WCVCNormals) * vec4<f32>(normal, 1.)).xyz;', '  var diffuseCoords: vec2<f32> = vecToRectCoord(diffuseIBLCoords);', '  // To get specular IBL, the texture is sampled as the worldspace reflection between the normal and view vectors', '  // Reflections are first calculated in viewspace, then converted to worldspace to sample the environment', '  var VreflN: vec3<f32> = normalize(reflect(-V, normal));', '  var reflectionIBLCoords = (transpose(rendererUBO.WCVCNormals) * vec4<f32>(VreflN, 1.)).xyz;', '  var specularCoords: vec2<f32> = vecToRectCoord(reflectionIBLCoords);', '  var diffuseIBL = textureSampleLevel(EnvironmentTexture, EnvironmentTextureSampler, diffuseCoords, rendererUBO.MaxEnvironmentMipLevel);', // Level multiplier should be set by UBO
+        '  var level = roughness * rendererUBO.MaxEnvironmentMipLevel;', '  var specularIBL = textureSampleLevel(EnvironmentTexture, EnvironmentTextureSampler, specularCoords, level);', // Manual mip smoothing since not all formats support smooth level sampling
+        '  var specularIBLContribution: vec3<f32> = specularIBL.rgb*rendererUBO.BackgroundSpecularStrength;', '  computedColor += vec4<f32>(specularIBLContribution*kS, 0);', '  var diffuseIBLContribution: vec3<f32> = diffuseIBL.rgb*rendererUBO.BackgroundDiffuseStrength;', '  diffuseIBLContribution *= baseColor * _ambientOcclusionMap.rgb;', // Multipy by baseColor may be changed
+        '  computedColor += vec4<f32>(diffuseIBLContribution*kD, 0);');
+      }
+
+      code = vtkWebGPUShaderCache.substitute(code, '//VTK::Light::Impl', lightingCode).result;
       fDesc.setCode(code); // If theres no normals, just set the specular color to be flat
     } else {
       code = vtkWebGPUShaderCache.substitute(code, '//VTK::Light::Impl', ['  var diffuse: vec3<f32> = diffuseColor.rgb;', '  var specular: vec3<f32> = mapperUBO.SpecularColor.rgb * mapperUBO.SpecularColor.a;', '  computedColor = vec4<f32>(diffuse * _diffuseMap.rgb, mapperUBO.Opacity);']).result;
@@ -287,8 +299,7 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
     var numComp = vtkWebGPUTypes.getNumberOfComponentsFromBufferFormat(tcoords.getArrayInformation()[0].format);
     var code = vDesc.getCode();
     vDesc.addOutput("vec".concat(numComp, "<f32>"), 'tcoordVS');
-    code = vtkWebGPUShaderCache.substitute(code, '//VTK::TCoord::Impl', ['  output.tcoordVS = tcoord;' // Ensure that UV coordinates are always between 0-1
-    ]).result;
+    code = vtkWebGPUShaderCache.substitute(code, '//VTK::TCoord::Impl', ['  output.tcoordVS = tcoord;']).result;
     vDesc.setCode(code);
     var fDesc = pipeline.getShaderDescription('fragment');
     code = fDesc.getCode();
@@ -568,7 +579,7 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
   };
 
   publicAPI.updateTextures = function () {
-    var _model$renderable$get2, _model$renderable2, _actor$getProperty$ge14, _actor$getProperty8, _actor$getProperty$ge15, _actor$getProperty9, _actor$getProperty$ge16, _actor$getProperty10, _actor$getProperty$ge17, _actor$getProperty11, _actor$getProperty$ge18, _actor$getProperty12, _actor$getProperty$ge19, _actor$getProperty13, _renderer$getBackgrou;
+    var _model$renderable$get2, _model$renderable2, _actor$getProperty$ge14, _actor$getProperty8, _actor$getProperty$ge15, _actor$getProperty9, _actor$getProperty$ge16, _actor$getProperty10, _actor$getProperty$ge17, _actor$getProperty11, _actor$getProperty$ge18, _actor$getProperty12, _actor$getProperty$ge19, _actor$getProperty13, _renderer$getEnvironm2;
 
     // we keep track of new and used textures so
     // that we can clean up any unused textures so we don't hold onto them
@@ -634,8 +645,8 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
       textures.push(_pair7);
     }
 
-    if ((_renderer$getBackgrou = renderer.getBackgroundTexture) !== null && _renderer$getBackgrou !== void 0 && _renderer$getBackgrou.call(renderer)) {
-      var _pair8 = ['Background', renderer.getBackgroundTexture()];
+    if ((_renderer$getEnvironm2 = renderer.getEnvironmentTexture) !== null && _renderer$getEnvironm2 !== void 0 && _renderer$getEnvironm2.call(renderer)) {
+      var _pair8 = ['Environment', renderer.getEnvironmentTexture()];
       textures.push(_pair8);
     }
 
@@ -671,10 +682,29 @@ function vtkWebGPUCellArrayMapper(publicAPI, model) {
           model.textures.push(newTex);
           model.textureViews.push(tview);
           var interpolate = srcTexture.getInterpolate() ? 'linear' : 'nearest';
-          tview.addSampler(model.device, {
-            minFilter: interpolate,
-            magFilter: interpolate
-          });
+          var addressMode = null;
+          if (!addressMode && srcTexture.getEdgeClamp() && srcTexture.getRepeat()) addressMode = 'mirror-repeat';
+          if (!addressMode && srcTexture.getEdgeClamp()) addressMode = 'clamp-to-edge';
+          if (!addressMode && srcTexture.getRepeat()) addressMode = 'repeat';
+
+          if (textureName !== 'Environment') {
+            tview.addSampler(model.device, {
+              addressModeU: addressMode,
+              addressModeV: addressMode,
+              addressModeW: addressMode,
+              minFilter: interpolate,
+              magFilter: interpolate
+            });
+          } else {
+            tview.addSampler(model.device, {
+              addressModeU: 'repeat',
+              addressModeV: 'clamp-to-edge',
+              addressModeW: 'repeat',
+              minFilter: interpolate,
+              magFilter: interpolate,
+              mipmapFilter: 'linear'
+            });
+          }
         }
       }
     } // remove unused textures

package/Rendering/WebGPU/FullScreenQuad.js

@@ -12,8 +12,9 @@ function vtkWebGPUFullScreenQuad(publicAPI, model) {
   publicAPI.replaceShaderPosition = function (hash, pipeline, vertexInput) {
     var vDesc = pipeline.getShaderDescription('vertex');
     vDesc.addBuiltinOutput('vec4<f32>', '@builtin(position) Position');
+    vDesc.addOutput('vec4<f32>', 'vertexVC');
     var code = vDesc.getCode();
-    code = vtkWebGPUShaderCache.substitute(code, '//VTK::Position::Impl', ['output.tcoordVS = vec2<f32>(vertexBC.x * 0.5 + 0.5, 1.0 - vertexBC.y * 0.5 - 0.5);', 'output.Position = vec4<f32>(vertexBC, 1.0);']).result;
+    code = vtkWebGPUShaderCache.substitute(code, '//VTK::Position::Impl', ['output.tcoordVS = vec2<f32>(vertexBC.x * 0.5 + 0.5, 1.0 - vertexBC.y * 0.5 - 0.5);', 'output.Position = vec4<f32>(vertexBC, 1.0);', 'output.vertexVC = vec4<f32>(vertexBC, 1);']).result;
     vDesc.setCode(code);
   };
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitware/vtk.js",
-  "version": "25.3.0",
+  "version": "25.4.0",
   "description": "Visualization Toolkit for the Web",
   "keywords": [
     "3d",
@@ -96,7 +96,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",