@kitware/vtk.js 25.3.0 → 25.6.0

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/ForwardPass.js

@@ -1,8 +1,14 @@
 import macro from '../../macros.js';
+import vtkWebGPUFullScreenQuad from './FullScreenQuad.js';
 import vtkWebGPUOpaquePass from './OpaquePass.js';
 import vtkWebGPUOrderIndepenentTranslucentPass from './OrderIndependentTranslucentPass.js';
+import vtkWebGPURenderEncoder from './RenderEncoder.js';
 import vtkWebGPUVolumePass from './VolumePass.js';
 import vtkRenderPass from '../SceneGraph/RenderPass.js';
+import vtkWebGPUSampler from './Sampler.js';
+import vtkWebGPUTextureView from './TextureView.js';
+
+var finalBlitFragTemplate = "\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> = clamp(textureSampleLevel(opaquePassColorTexture, finalPassSampler, input.tcoordVS, 0),vec4<f32>(0.0),vec4<f32>(1.0));\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n"; // ----------------------------------------------------------------------------
 
 function vtkForwardPass(publicAPI, model) {
   // Set our className
@@ -69,24 +75,96 @@ function vtkForwardPass(publicAPI, model) {
             model.volumePass.setDepthTextureView(model.opaquePass.getDepthTextureView());
             model.volumePass.setVolumes(model.volumes);
             model.volumePass.traverse(renNode, viewNode);
-          }
+          } // blit the result into the swap chain
+
+
+          publicAPI.finalPass(viewNode, renNode);
         }
       }
-    } // blit the result into the swap chain
-
-
-    var sctex = viewNode.getCurrentTexture();
-    var optex = model.opaquePass.getColorTexture();
-    var cmdEnc = viewNode.getCommandEncoder();
-    cmdEnc.copyTextureToTexture({
-      texture: optex.getHandle()
-    }, {
-      texture: sctex
-    }, {
-      width: optex.getWidth(),
-      height: optex.getHeight(),
-      depthOrArrayLayers: 1
+    }
+  };
+
+  publicAPI.finalPass = function (viewNode, renNode) {
+    if (!model._finalBlitEncoder) {
+      publicAPI.createFinalBlitEncoder(viewNode);
+    }
+
+    model._finalBlitOutputTextureView.createFromTextureHandle(viewNode.getCurrentTexture(), {
+      depth: 1,
+      format: viewNode.getPresentationFormat()
+    });
+
+    model._finalBlitEncoder.attachTextureViews();
+
+    model._finalBlitEncoder.begin(viewNode.getCommandEncoder());
+
+    renNode.scissorAndViewport(model._finalBlitEncoder);
+
+    model._fullScreenQuad.prepareAndDraw(model._finalBlitEncoder);
+
+    model._finalBlitEncoder.end();
+  };
+
+  publicAPI.createFinalBlitEncoder = function (viewNode) {
+    model._finalBlitEncoder = vtkWebGPURenderEncoder.newInstance({
+      label: 'forwardPassBlit'
+    });
+
+    model._finalBlitEncoder.setDescription({
+      colorAttachments: [{
+        view: null,
+        loadOp: 'load',
+        storeOp: 'store'
+      }]
+    });
+
+    model._finalBlitEncoder.setPipelineHash('fpf');
+
+    model._finalBlitEncoder.setPipelineSettings({
+      primitive: {
+        cullMode: 'none'
+      },
+      fragment: {
+        targets: [{
+          format: viewNode.getPresentationFormat(),
+          blend: {
+            color: {
+              srcFactor: 'src-alpha',
+              dstFactor: 'one-minus-src-alpha'
+            },
+            alpha: {
+              srcfactor: 'one',
+              dstFactor: 'one-minus-src-alpha'
+            }
+          }
+        }]
+      }
+    });
+
+    model._fsqSampler = vtkWebGPUSampler.newInstance({
+      label: 'finalPassSampler'
+    });
+
+    model._fsqSampler.create(viewNode.getDevice(), {
+      minFilter: 'linear',
+      magFilter: 'linear'
     });
+
+    model._fullScreenQuad = vtkWebGPUFullScreenQuad.newInstance();
+
+    model._fullScreenQuad.setDevice(viewNode.getDevice());
+
+    model._fullScreenQuad.setPipelineHash('fpfsq');
+
+    model._fullScreenQuad.setTextureViews([model.opaquePass.getColorTextureView()]);
+
+    model._fullScreenQuad.setAdditionalBindables([model._fsqSampler]);
+
+    model._fullScreenQuad.setFragmentShaderTemplate(finalBlitFragTemplate);
+
+    model._finalBlitOutputTextureView = vtkWebGPUTextureView.newInstance();
+
+    model._finalBlitEncoder.setColorTextureView(0, model._finalBlitOutputTextureView);
   };
 
   publicAPI.incrementOpaqueActorCount = function () {

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/OpaquePass.js

@@ -27,7 +27,7 @@ function vtkWebGPUOpaquePass(publicAPI, model) {
       model.colorTexture.create(device, {
         width: viewNode.getCanvas().width,
         height: viewNode.getCanvas().height,
-        format: 'bgra8unorm',
+        format: 'rgba16float',
 
         /* eslint-disable no-undef */
 

package/Rendering/WebGPU/OrderIndependentTranslucentPass.js

@@ -184,7 +184,7 @@ function vtkWebGPUOrderIndependentTranslucentPass(publicAPI, model) {
       },
       fragment: {
         targets: [{
-          format: 'bgra8unorm',
+          format: 'rgba16float',
           blend: {
             color: {
               srcFactor: 'src-alpha',

package/Rendering/WebGPU/RenderEncoder.js

@@ -51,9 +51,11 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
       console.trace();
     } else {
       for (var i = 0; i < model.colorTextureViews.length; i++) {
-        var fmt = model.colorTextureViews[i].getTexture().getFormat();
+        var _model$colorTextureVi;
 
-        if (fmt !== pd.fragment.targets[i].format) {
+        var fmt = (_model$colorTextureVi = model.colorTextureViews[i].getTexture()) === null || _model$colorTextureVi === void 0 ? void 0 : _model$colorTextureVi.getFormat();
+
+        if (fmt && fmt !== pd.fragment.targets[i].format) {
           console.log("mismatched attachments for attachment ".concat(i, " on pipeline ").concat(pd.fragment.targets[i].format, " while encoder has ").concat(fmt));
           console.trace();
         }
@@ -65,9 +67,11 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
       console.log('mismatched depth attachments');
       console.trace();
     } else if (model.depthTextureView) {
-      var dfmt = model.depthTextureView.getTexture().getFormat();
+      var _model$depthTextureVi;
+
+      var dfmt = (_model$depthTextureVi = model.depthTextureView.getTexture()) === null || _model$depthTextureVi === void 0 ? void 0 : _model$depthTextureVi.getFormat();
 
-      if (dfmt !== pd.depthStencil.format) {
+      if (dfmt && dfmt !== pd.depthStencil.format) {
         console.log("mismatched depth attachments on pipeline ".concat(pd.depthStencil.format, " while encoder has ").concat(dfmt));
         console.trace();
       }
@@ -202,7 +206,7 @@ function extend(publicAPI, model) {
     },
     fragment: {
       targets: [{
-        format: 'bgra8unorm',
+        format: 'rgba16float',
         blend: {
           color: {
             srcFactor: 'src-alpha',

package/Rendering/WebGPU/RenderWindow.js

@@ -9,6 +9,7 @@ import vtkWebGPUHardwareSelector from './HardwareSelector.js';
 import vtkWebGPUViewNodeFactory from './ViewNodeFactory.js';
 import vtkRenderPass from '../SceneGraph/RenderPass.js';
 import vtkRenderWindowViewNode from '../SceneGraph/RenderWindowViewNode.js';
+import HalfFloat from '../../Common/Core/HalfFloat.js';
 
 var vtkErrorMacro = macro.vtkErrorMacro; // const IS_CHROME = navigator.userAgent.indexOf('Chrome') !== -1;
 
@@ -67,14 +68,14 @@ function vtkWebGPURenderWindow(publicAPI, model) {
   publicAPI.recreateSwapChain = function () {
     if (model.context) {
       model.context.unconfigure();
-      var presentationFormat = navigator.gpu.getPreferredCanvasFormat(model.adapter);
+      model.presentationFormat = navigator.gpu.getPreferredCanvasFormat(model.adapter);
       /* eslint-disable no-undef */
 
       /* eslint-disable no-bitwise */
 
       model.context.configure({
         device: model.device.getHandle(),
-        format: presentationFormat,
+        format: model.presentationFormat,
         alphaMode: 'premultiplied',
         usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,
         width: model.size[0],
@@ -545,10 +546,10 @@ function vtkWebGPURenderWindow(publicAPI, model) {
             result = {
               width: texture.getWidth(),
               height: texture.getHeight()
-            }; // must be a multiple of 256 bytes, so 64 texels with rgba8
+            }; // must be a multiple of 256 bytes, so 32 texels with rgba16
 
-            result.colorBufferWidth = 64 * Math.floor((result.width + 63) / 64);
-            result.colorBufferSizeInBytes = result.colorBufferWidth * result.height * 4;
+            result.colorBufferWidth = 32 * Math.floor((result.width + 31) / 32);
+            result.colorBufferSizeInBytes = result.colorBufferWidth * result.height * 8;
             colorBuffer = vtkWebGPUBuffer.newInstance();
             colorBuffer.setDevice(device);
             /* eslint-disable no-bitwise */
@@ -565,7 +566,7 @@ function vtkWebGPURenderWindow(publicAPI, model) {
               texture: texture.getHandle()
             }, {
               buffer: colorBuffer.getHandle(),
-              bytesPerRow: 4 * result.colorBufferWidth,
+              bytesPerRow: 8 * result.colorBufferWidth,
               rowsPerImage: result.height
             }, {
               width: result.width,
@@ -581,7 +582,7 @@ function vtkWebGPURenderWindow(publicAPI, model) {
 
           case 14:
             /* eslint-enable no-undef */
-            result.colorValues = new Uint8ClampedArray(colorBuffer.getMappedRange().slice());
+            result.colorValues = new Uint16Array(colorBuffer.getMappedRange().slice());
             colorBuffer.unmap(); // repack the array
 
             tmparray = new Uint8ClampedArray(result.height * result.width * 4);
@@ -590,10 +591,10 @@ function vtkWebGPURenderWindow(publicAPI, model) {
               for (x = 0; x < result.width; x++) {
                 doffset = (y * result.width + x) * 4;
                 soffset = (y * result.colorBufferWidth + x) * 4;
-                tmparray[doffset] = result.colorValues[soffset + 2];
-                tmparray[doffset + 1] = result.colorValues[soffset + 1];
-                tmparray[doffset + 2] = result.colorValues[soffset];
-                tmparray[doffset + 3] = result.colorValues[soffset + 3];
+                tmparray[doffset] = 255.0 * HalfFloat.fromHalf(result.colorValues[soffset]);
+                tmparray[doffset + 1] = 255.0 * HalfFloat.fromHalf(result.colorValues[soffset + 1]);
+                tmparray[doffset + 2] = 255.0 * HalfFloat.fromHalf(result.colorValues[soffset + 2]);
+                tmparray[doffset + 3] = 255.0 * HalfFloat.fromHalf(result.colorValues[soffset + 3]);
               }
             }
 
@@ -635,7 +636,8 @@ var DEFAULT_VALUES = {
   useOffScreen: false,
   useBackgroundImage: false,
   nextPropID: 1,
-  xrSupported: false
+  xrSupported: false,
+  presentationFormat: null
 }; // ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
@@ -671,7 +673,7 @@ function extend(publicAPI, model) {
   macro.event(publicAPI, model, 'imageReady');
   macro.event(publicAPI, model, 'initialized'); // Build VTK API
 
-  macro.get(publicAPI, model, ['commandEncoder', 'device', 'useBackgroundImage', 'xrSupported']);
+  macro.get(publicAPI, model, ['commandEncoder', 'device', 'presentationFormat', 'useBackgroundImage', 'xrSupported']);
   macro.setGet(publicAPI, model, ['initialized', 'context', 'canvas', 'device', 'renderPasses', 'notifyStartCaptureImage', 'cursor', 'useOffScreen']);
   macro.setGetArray(publicAPI, model, ['size'], 2); // Object methods
 

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();