@kitware/vtk.js 28.10.2 → 28.11.0

package/Rendering/WebGPU/VolumePassFSQ.js

@@ -1,5 +1,4 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import macro from '../../macros.js';
+import { m as macro } from '../../macros2.js';
 import { mat4 } from 'gl-matrix';
 import vtkWebGPUFullScreenQuad from './FullScreenQuad.js';
 import vtkWebGPUUniformBuffer from './UniformBuffer.js';
@@ -9,307 +8,643 @@ import vtkWebGPUSampler from './Sampler.js';
 import vtkWebGPUTypes from './Types.js';
 import { BlendMode } from '../Core/VolumeMapper/Constants.js';
 
-var volFragTemplate = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::Volume::TraverseDec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::IOStructs::Dec\n\nfn getTextureValue(vTex: texture_3d<f32>, tpos: vec4<f32>) -> f32\n{\n  // todo multicomponent support\n  return textureSampleLevel(vTex, clampSampler, tpos.xyz, 0.0).r;\n}\n\nfn getGradient(vTex: texture_3d<f32>, tpos: vec4<f32>, vNum: i32, scalar: f32) -> vec4<f32>\n{\n  var result: vec4<f32>;\n\n  var tstep: vec4<f32> = volumeSSBO.values[vNum].tstep;\n  result.x = getTextureValue(vTex, tpos + vec4<f32>(tstep.x, 0.0, 0.0, 1.0)) - scalar;\n  result.y = getTextureValue(vTex, tpos + vec4<f32>(0.0, tstep.y, 0.0, 1.0)) - scalar;\n  result.z = getTextureValue(vTex, tpos + vec4<f32>(0.0, 0.0, tstep.z, 1.0)) - scalar;\n  result.w = 0.0;\n\n  // divide by spacing as that is our delta\n  result = result / volumeSSBO.values[vNum].spacing;\n  // now we have a gradient in unit tcoords\n\n  var grad: f32 = length(result.xyz);\n  if (grad > 0.0)\n  {\n    // rotate to View Coords, needed for lighting and shading\n    var nMat: mat4x4<f32> = rendererUBO.SCVCMatrix * volumeSSBO.values[vNum].planeNormals;\n    result = nMat * result;\n    result = result / length(result);\n  }\n\n  // store gradient magnitude in .w\n  result.w = grad;\n\n  return result;\n}\n\nfn processVolume(vTex: texture_3d<f32>, vNum: i32, cNum: i32, posSC: vec4<f32>, tfunRows: f32) -> vec4<f32>\n{\n  var outColor: vec4<f32> = vec4<f32>(0.0, 0.0, 0.0, 0.0);\n\n  // convert to tcoords and reject if outside the volume\n  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*posSC;\n  if (tpos.x < 0.0 || tpos.y < 0.0 || tpos.z < 0.0 ||\n      tpos.x > 1.0 || tpos.y > 1.0 || tpos.z > 1.0) { return outColor; }\n\n  var scalar: f32 = getTextureValue(vTex, tpos);\n\n  var coord: vec2<f32> =\n    vec2<f32>(scalar * componentSSBO.values[cNum].cScale + componentSSBO.values[cNum].cShift,\n      (0.5 + 2.0 * f32(vNum)) / tfunRows);\n  var color: vec4<f32> = textureSampleLevel(tfunTexture, clampSampler, coord, 0.0);\n\n  var gofactor: f32 = 1.0;\n  var normal: vec4<f32> = vec4<f32>(0.0,0.0,0.0,0.0);\n  if (componentSSBO.values[cNum].gomin <  1.0 || volumeSSBO.values[vNum].shade[0] > 0.0)\n  {\n    normal = getGradient(vTex, tpos, vNum, scalar);\n    if (componentSSBO.values[cNum].gomin <  1.0)\n    {\n      gofactor = clamp(normal.a*componentSSBO.values[cNum].goScale + componentSSBO.values[cNum].goShift,\n      componentSSBO.values[cNum].gomin, componentSSBO.values[cNum].gomax);\n    }\n  }\n\n  coord.x = (scalar * componentSSBO.values[cNum].oScale + componentSSBO.values[cNum].oShift);\n  var opacity: f32 = textureSampleLevel(ofunTexture, clampSampler, coord, 0.0).r;\n\n  if (volumeSSBO.values[vNum].shade[0] > 0.0)\n  {\n    color = color*abs(normal.z);\n  }\n\n  outColor = vec4<f32>(color.rgb, gofactor * opacity);\n\n  return outColor;\n}\n\n// adjust the start and end point of a raycast such that it intersects the unit cube.\n// This function is used to take a raycast starting point and step vector\n// and numSteps and return the startijng and ending steps for intersecting the\n// unit cube. Recall for a 3D texture, the unit cube is the range of texture coordsinates\n// that have valid values. So this funtion can be used to take a ray in texture coordinates\n// and bound it to intersecting the texture.\n//\nfn adjustBounds(tpos: vec4<f32>, tstep: vec4<f32>, numSteps: f32) -> vec2<f32>\n{\n  var result: vec2<f32> = vec2<f32>(0.0, numSteps);\n  var tpos2: vec4<f32> = tpos + tstep*numSteps;\n\n  // move tpos to the start of the volume\n  var adjust: f32 =\n    min(\n      max(tpos.x/tstep.x, (tpos.x - 1.0)/tstep.x),\n      min(\n        max((tpos.y - 1.0)/tstep.y, tpos.y/tstep.y),\n        max((tpos.z - 1.0)/tstep.z, tpos.z/tstep.z)));\n  if (adjust < 0.0)\n  {\n    result.x = result.x - adjust;\n  }\n\n  // adjust length to the end\n  adjust =\n    max(\n      min(tpos2.x/tstep.x, (tpos2.x - 1.0)/tstep.x),\n      max(\n        min((tpos2.y - 1.0)/tstep.y, tpos2.y/tstep.y),\n        min((tpos2.z - 1.0)/tstep.z, tpos2.z/tstep.z)));\n  if (adjust > 0.0)\n  {\n    result.y = result.y - adjust;\n  }\n\n  return result;\n}\n\nfn getSimpleColor(scalar: f32, vNum: i32, cNum: i32) -> vec4<f32>\n{\n  // how many rows (tfuns) do we have in our tfunTexture\n  var tfunRows: f32 = f32(textureDimensions(tfunTexture).y);\n\n  var coord: vec2<f32> =\n    vec2<f32>(scalar * componentSSBO.values[cNum].cScale + componentSSBO.values[cNum].cShift,\n      (0.5 + 2.0 * f32(vNum)) / tfunRows);\n  var color: vec4<f32> = textureSampleLevel(tfunTexture, clampSampler, coord, 0.0);\n  coord.x = (scalar * componentSSBO.values[cNum].oScale + componentSSBO.values[cNum].oShift);\n  var opacity: f32 = textureSampleLevel(ofunTexture, clampSampler, coord, 0.0).r;\n  return vec4<f32>(color.rgb, opacity);\n}\n\nfn traverseMax(vTex: texture_3d<f32>, vNum: i32, cNum: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)\n{\n  // convert to tcoords and reject if outside the volume\n  var numSteps: f32 = rayLengthSC/mapperUBO.SampleDistance;\n  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*minPosSC;\n  var tpos2: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*(minPosSC + rayStepSC);\n  var tstep: vec4<f32> = tpos2 - tpos;\n\n  var rayBounds: vec2<f32> = adjustBounds(tpos, tstep, numSteps);\n\n  // did we hit anything\n  if (rayBounds.x >= rayBounds.y)\n  {\n    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);\n    return;\n  }\n\n  tpos = tpos + tstep*rayBounds.x;\n  var curDist: f32 = rayBounds.x;\n  var maxVal: f32 = -1.0e37;\n  loop\n  {\n    var scalar: f32 = getTextureValue(vTex, tpos);\n    if (scalar > maxVal)\n    {\n      maxVal = scalar;\n    }\n\n    // increment position\n    curDist = curDist + 1.0;\n    tpos = tpos + tstep;\n\n    // check if we have reached a terminating condition\n    if (curDist > rayBounds.y) { break; }\n  }\n\n  // process to get the color and opacity\n  traverseVals[vNum] = getSimpleColor(maxVal, vNum, cNum);\n}\n\nfn traverseMin(vTex: texture_3d<f32>, vNum: i32, cNum: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)\n{\n  // convert to tcoords and reject if outside the volume\n  var numSteps: f32 = rayLengthSC/mapperUBO.SampleDistance;\n  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*minPosSC;\n  var tpos2: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*(minPosSC + rayStepSC);\n  var tstep: vec4<f32> = tpos2 - tpos;\n\n  var rayBounds: vec2<f32> = adjustBounds(tpos, tstep, numSteps);\n\n  // did we hit anything\n  if (rayBounds.x >= rayBounds.y)\n  {\n    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);\n    return;\n  }\n\n  tpos = tpos + tstep*rayBounds.x;\n  var curDist: f32 = rayBounds.x;\n  var minVal: f32 = 1.0e37;\n  loop\n  {\n    var scalar: f32 = getTextureValue(vTex, tpos);\n    if (scalar < minVal)\n    {\n      minVal = scalar;\n    }\n\n    // increment position\n    curDist = curDist + 1.0;\n    tpos = tpos + tstep;\n\n    // check if we have reached a terminating condition\n    if (curDist > rayBounds.y) { break; }\n  }\n\n  // process to get the color and opacity\n  traverseVals[vNum] = getSimpleColor(minVal, vNum, cNum);\n}\n\nfn traverseAverage(vTex: texture_3d<f32>, vNum: i32, cNum: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)\n{\n  // convert to tcoords and reject if outside the volume\n  var numSteps: f32 = rayLengthSC/mapperUBO.SampleDistance;\n  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*minPosSC;\n  var tpos2: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*(minPosSC + rayStepSC);\n  var tstep: vec4<f32> = tpos2 - tpos;\n\n  var rayBounds: vec2<f32> = adjustBounds(tpos, tstep, numSteps);\n\n  // did we hit anything\n  if (rayBounds.x >= rayBounds.y)\n  {\n    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);\n    return;\n  }\n\n  let ipRange: vec4<f32> = volumeSSBO.values[vNum].ipScalarRange;\n  tpos = tpos + tstep*rayBounds.x;\n  var curDist: f32 = rayBounds.x;\n  var avgVal: f32 = 0.0;\n  var sampleCount: f32 = 0.0;\n  loop\n  {\n    var sample: f32 = getTextureValue(vTex, tpos);\n    // right now leave filtering off until WebGL changes get merged\n    // if (ipRange.z == 0.0 || sample >= ipRange.x && sample <= ipRange.y)\n    // {\n      avgVal = avgVal + sample;\n      sampleCount = sampleCount + 1.0;\n    // }\n\n    // increment position\n    curDist = curDist + 1.0;\n    tpos = tpos + tstep;\n\n    // check if we have reached a terminating condition\n    if (curDist > rayBounds.y) { break; }\n  }\n\n  if (sampleCount <= 0.0)\n  {\n    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);\n  }\n\n  // process to get the color and opacity\n  traverseVals[vNum] = getSimpleColor(avgVal/sampleCount, vNum, cNum);\n}\n\nfn traverseAdditive(vTex: texture_3d<f32>, vNum: i32, cNum: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)\n{\n  // convert to tcoords and reject if outside the volume\n  var numSteps: f32 = rayLengthSC/mapperUBO.SampleDistance;\n  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*minPosSC;\n  var tpos2: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*(minPosSC + rayStepSC);\n  var tstep: vec4<f32> = tpos2 - tpos;\n\n  var rayBounds: vec2<f32> = adjustBounds(tpos, tstep, numSteps);\n\n  // did we hit anything\n  if (rayBounds.x >= rayBounds.y)\n  {\n    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);\n    return;\n  }\n\n  let ipRange: vec4<f32> = volumeSSBO.values[vNum].ipScalarRange;\n  tpos = tpos + tstep*rayBounds.x;\n  var curDist: f32 = rayBounds.x;\n  var sumVal: f32 = 0.0;\n  loop\n  {\n    var sample: f32 = getTextureValue(vTex, tpos);\n    // right now leave filtering off until WebGL changes get merged\n    // if (ipRange.z == 0.0 || sample >= ipRange.x && sample <= ipRange.y)\n    // {\n      sumVal = sumVal + sample;\n    // }\n\n    // increment position\n    curDist = curDist + 1.0;\n    tpos = tpos + tstep;\n\n    // check if we have reached a terminating condition\n    if (curDist > rayBounds.y) { break; }\n  }\n\n  // process to get the color and opacity\n  traverseVals[vNum] = getSimpleColor(sumVal, vNum, cNum);\n}\n\nfn composite(rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>) -> vec4<f32>\n{\n  // initial ray position is at the beginning\n  var rayPosSC: vec4<f32> = minPosSC;\n\n  // how many rows (tfuns) do we have in our tfunTexture\n  var tfunRows: f32 = f32(textureDimensions(tfunTexture).y);\n\n  var curDist: f32 = 0.0;\n  var computedColor: vec4<f32> = vec4<f32>(0.0, 0.0, 0.0, 0.0);\n  var sampleColor: vec4<f32>;\n//VTK::Volume::TraverseCalls\n\n  loop\n  {\n    // for each volume, sample and accumulate color\n//VTK::Volume::CompositeCalls\n\n    // increment position\n    curDist = curDist + mapperUBO.SampleDistance;\n    rayPosSC = rayPosSC + rayStepSC;\n\n    // check if we have reached a terminating condition\n    if (curDist > rayLengthSC) { break; }\n    if (computedColor.a > 0.98) { break; }\n  }\n  return computedColor;\n}\n\n@fragment\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output: fragmentOutput;\n\n  var rayMax: f32 = textureSampleLevel(maxTexture, clampSampler, input.tcoordVS, 0.0).r;\n  var rayMin: f32 = textureSampleLevel(minTexture, clampSampler, input.tcoordVS, 0.0).r;\n\n  // discard empty rays\n  if (rayMax <= rayMin) { discard; }\n  else\n  {\n    // compute start and end ray positions in view coordinates\n    var minPosSC: vec4<f32> = rendererUBO.PCSCMatrix*vec4<f32>(2.0 * input.tcoordVS.x - 1.0, 1.0 - 2.0 * input.tcoordVS.y, rayMax, 1.0);\n    minPosSC = minPosSC * (1.0 / minPosSC.w);\n    var maxPosSC: vec4<f32> = rendererUBO.PCSCMatrix*vec4<f32>(2.0 * input.tcoordVS.x - 1.0, 1.0 - 2.0 * input.tcoordVS.y, rayMin, 1.0);\n    maxPosSC = maxPosSC * (1.0 / maxPosSC.w);\n\n    var rayLengthSC: f32 = distance(minPosSC.xyz, maxPosSC.xyz);\n    var rayStepSC: vec4<f32> = (maxPosSC - minPosSC)*(mapperUBO.SampleDistance/rayLengthSC);\n    rayStepSC.w = 0.0;\n\n    var computedColor: vec4<f32>;\n\n//VTK::Volume::Loop\n\n//VTK::RenderEncoder::Impl\n  }\n\n  return output;\n}\n";
-var tmpMat4 = new Float64Array(16);
-var tmp2Mat4 = new Float64Array(16); // ----------------------------------------------------------------------------
+const volFragTemplate = `
+//VTK::Renderer::Dec
+
+//VTK::Mapper::Dec
+
+//VTK::TCoord::Dec
+
+//VTK::Volume::TraverseDec
+
+//VTK::RenderEncoder::Dec
+
+//VTK::IOStructs::Dec
+
+fn getTextureValue(vTex: texture_3d<f32>, tpos: vec4<f32>) -> f32
+{
+  // todo multicomponent support
+  return textureSampleLevel(vTex, clampSampler, tpos.xyz, 0.0).r;
+}
+
+fn getGradient(vTex: texture_3d<f32>, tpos: vec4<f32>, vNum: i32, scalar: f32) -> vec4<f32>
+{
+  var result: vec4<f32>;
+
+  var tstep: vec4<f32> = volumeSSBO.values[vNum].tstep;
+  result.x = getTextureValue(vTex, tpos + vec4<f32>(tstep.x, 0.0, 0.0, 1.0)) - scalar;
+  result.y = getTextureValue(vTex, tpos + vec4<f32>(0.0, tstep.y, 0.0, 1.0)) - scalar;
+  result.z = getTextureValue(vTex, tpos + vec4<f32>(0.0, 0.0, tstep.z, 1.0)) - scalar;
+  result.w = 0.0;
+
+  // divide by spacing as that is our delta
+  result = result / volumeSSBO.values[vNum].spacing;
+  // now we have a gradient in unit tcoords
+
+  var grad: f32 = length(result.xyz);
+  if (grad > 0.0)
+  {
+    // rotate to View Coords, needed for lighting and shading
+    var nMat: mat4x4<f32> = rendererUBO.SCVCMatrix * volumeSSBO.values[vNum].planeNormals;
+    result = nMat * result;
+    result = result / length(result);
+  }
+
+  // store gradient magnitude in .w
+  result.w = grad;
+
+  return result;
+}
+
+fn processVolume(vTex: texture_3d<f32>, vNum: i32, cNum: i32, posSC: vec4<f32>, tfunRows: f32) -> vec4<f32>
+{
+  var outColor: vec4<f32> = vec4<f32>(0.0, 0.0, 0.0, 0.0);
+
+  // convert to tcoords and reject if outside the volume
+  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*posSC;
+  if (tpos.x < 0.0 || tpos.y < 0.0 || tpos.z < 0.0 ||
+      tpos.x > 1.0 || tpos.y > 1.0 || tpos.z > 1.0) { return outColor; }
+
+  var scalar: f32 = getTextureValue(vTex, tpos);
+
+  var coord: vec2<f32> =
+    vec2<f32>(scalar * componentSSBO.values[cNum].cScale + componentSSBO.values[cNum].cShift,
+      (0.5 + 2.0 * f32(vNum)) / tfunRows);
+  var color: vec4<f32> = textureSampleLevel(tfunTexture, clampSampler, coord, 0.0);
+
+  var gofactor: f32 = 1.0;
+  var normal: vec4<f32> = vec4<f32>(0.0,0.0,0.0,0.0);
+  if (componentSSBO.values[cNum].gomin <  1.0 || volumeSSBO.values[vNum].shade[0] > 0.0)
+  {
+    normal = getGradient(vTex, tpos, vNum, scalar);
+    if (componentSSBO.values[cNum].gomin <  1.0)
+    {
+      gofactor = clamp(normal.a*componentSSBO.values[cNum].goScale + componentSSBO.values[cNum].goShift,
+      componentSSBO.values[cNum].gomin, componentSSBO.values[cNum].gomax);
+    }
+  }
+
+  coord.x = (scalar * componentSSBO.values[cNum].oScale + componentSSBO.values[cNum].oShift);
+  var opacity: f32 = textureSampleLevel(ofunTexture, clampSampler, coord, 0.0).r;
+
+  if (volumeSSBO.values[vNum].shade[0] > 0.0)
+  {
+    color = color*abs(normal.z);
+  }
+
+  outColor = vec4<f32>(color.rgb, gofactor * opacity);
+
+  return outColor;
+}
+
+// adjust the start and end point of a raycast such that it intersects the unit cube.
+// This function is used to take a raycast starting point and step vector
+// and numSteps and return the startijng and ending steps for intersecting the
+// unit cube. Recall for a 3D texture, the unit cube is the range of texture coordsinates
+// that have valid values. So this funtion can be used to take a ray in texture coordinates
+// and bound it to intersecting the texture.
+//
+fn adjustBounds(tpos: vec4<f32>, tstep: vec4<f32>, numSteps: f32) -> vec2<f32>
+{
+  var result: vec2<f32> = vec2<f32>(0.0, numSteps);
+  var tpos2: vec4<f32> = tpos + tstep*numSteps;
+
+  // move tpos to the start of the volume
+  var adjust: f32 =
+    min(
+      max(tpos.x/tstep.x, (tpos.x - 1.0)/tstep.x),
+      min(
+        max((tpos.y - 1.0)/tstep.y, tpos.y/tstep.y),
+        max((tpos.z - 1.0)/tstep.z, tpos.z/tstep.z)));
+  if (adjust < 0.0)
+  {
+    result.x = result.x - adjust;
+  }
+
+  // adjust length to the end
+  adjust =
+    max(
+      min(tpos2.x/tstep.x, (tpos2.x - 1.0)/tstep.x),
+      max(
+        min((tpos2.y - 1.0)/tstep.y, tpos2.y/tstep.y),
+        min((tpos2.z - 1.0)/tstep.z, tpos2.z/tstep.z)));
+  if (adjust > 0.0)
+  {
+    result.y = result.y - adjust;
+  }
+
+  return result;
+}
+
+fn getSimpleColor(scalar: f32, vNum: i32, cNum: i32) -> vec4<f32>
+{
+  // how many rows (tfuns) do we have in our tfunTexture
+  var tfunRows: f32 = f32(textureDimensions(tfunTexture).y);
+
+  var coord: vec2<f32> =
+    vec2<f32>(scalar * componentSSBO.values[cNum].cScale + componentSSBO.values[cNum].cShift,
+      (0.5 + 2.0 * f32(vNum)) / tfunRows);
+  var color: vec4<f32> = textureSampleLevel(tfunTexture, clampSampler, coord, 0.0);
+  coord.x = (scalar * componentSSBO.values[cNum].oScale + componentSSBO.values[cNum].oShift);
+  var opacity: f32 = textureSampleLevel(ofunTexture, clampSampler, coord, 0.0).r;
+  return vec4<f32>(color.rgb, opacity);
+}
+
+fn traverseMax(vTex: texture_3d<f32>, vNum: i32, cNum: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)
+{
+  // convert to tcoords and reject if outside the volume
+  var numSteps: f32 = rayLengthSC/mapperUBO.SampleDistance;
+  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*minPosSC;
+  var tpos2: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*(minPosSC + rayStepSC);
+  var tstep: vec4<f32> = tpos2 - tpos;
+
+  var rayBounds: vec2<f32> = adjustBounds(tpos, tstep, numSteps);
+
+  // did we hit anything
+  if (rayBounds.x >= rayBounds.y)
+  {
+    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);
+    return;
+  }
+
+  tpos = tpos + tstep*rayBounds.x;
+  var curDist: f32 = rayBounds.x;
+  var maxVal: f32 = -1.0e37;
+  loop
+  {
+    var scalar: f32 = getTextureValue(vTex, tpos);
+    if (scalar > maxVal)
+    {
+      maxVal = scalar;
+    }
+
+    // increment position
+    curDist = curDist + 1.0;
+    tpos = tpos + tstep;
+
+    // check if we have reached a terminating condition
+    if (curDist > rayBounds.y) { break; }
+  }
+
+  // process to get the color and opacity
+  traverseVals[vNum] = getSimpleColor(maxVal, vNum, cNum);
+}
+
+fn traverseMin(vTex: texture_3d<f32>, vNum: i32, cNum: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)
+{
+  // convert to tcoords and reject if outside the volume
+  var numSteps: f32 = rayLengthSC/mapperUBO.SampleDistance;
+  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*minPosSC;
+  var tpos2: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*(minPosSC + rayStepSC);
+  var tstep: vec4<f32> = tpos2 - tpos;
+
+  var rayBounds: vec2<f32> = adjustBounds(tpos, tstep, numSteps);
+
+  // did we hit anything
+  if (rayBounds.x >= rayBounds.y)
+  {
+    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);
+    return;
+  }
+
+  tpos = tpos + tstep*rayBounds.x;
+  var curDist: f32 = rayBounds.x;
+  var minVal: f32 = 1.0e37;
+  loop
+  {
+    var scalar: f32 = getTextureValue(vTex, tpos);
+    if (scalar < minVal)
+    {
+      minVal = scalar;
+    }
+
+    // increment position
+    curDist = curDist + 1.0;
+    tpos = tpos + tstep;
+
+    // check if we have reached a terminating condition
+    if (curDist > rayBounds.y) { break; }
+  }
+
+  // process to get the color and opacity
+  traverseVals[vNum] = getSimpleColor(minVal, vNum, cNum);
+}
+
+fn traverseAverage(vTex: texture_3d<f32>, vNum: i32, cNum: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)
+{
+  // convert to tcoords and reject if outside the volume
+  var numSteps: f32 = rayLengthSC/mapperUBO.SampleDistance;
+  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*minPosSC;
+  var tpos2: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*(minPosSC + rayStepSC);
+  var tstep: vec4<f32> = tpos2 - tpos;
+
+  var rayBounds: vec2<f32> = adjustBounds(tpos, tstep, numSteps);
+
+  // did we hit anything
+  if (rayBounds.x >= rayBounds.y)
+  {
+    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);
+    return;
+  }
+
+  let ipRange: vec4<f32> = volumeSSBO.values[vNum].ipScalarRange;
+  tpos = tpos + tstep*rayBounds.x;
+  var curDist: f32 = rayBounds.x;
+  var avgVal: f32 = 0.0;
+  var sampleCount: f32 = 0.0;
+  loop
+  {
+    var sample: f32 = getTextureValue(vTex, tpos);
+    // right now leave filtering off until WebGL changes get merged
+    // if (ipRange.z == 0.0 || sample >= ipRange.x && sample <= ipRange.y)
+    // {
+      avgVal = avgVal + sample;
+      sampleCount = sampleCount + 1.0;
+    // }
+
+    // increment position
+    curDist = curDist + 1.0;
+    tpos = tpos + tstep;
+
+    // check if we have reached a terminating condition
+    if (curDist > rayBounds.y) { break; }
+  }
+
+  if (sampleCount <= 0.0)
+  {
+    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);
+  }
+
+  // process to get the color and opacity
+  traverseVals[vNum] = getSimpleColor(avgVal/sampleCount, vNum, cNum);
+}
+
+fn traverseAdditive(vTex: texture_3d<f32>, vNum: i32, cNum: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)
+{
+  // convert to tcoords and reject if outside the volume
+  var numSteps: f32 = rayLengthSC/mapperUBO.SampleDistance;
+  var tpos: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*minPosSC;
+  var tpos2: vec4<f32> = volumeSSBO.values[vNum].SCTCMatrix*(minPosSC + rayStepSC);
+  var tstep: vec4<f32> = tpos2 - tpos;
+
+  var rayBounds: vec2<f32> = adjustBounds(tpos, tstep, numSteps);
+
+  // did we hit anything
+  if (rayBounds.x >= rayBounds.y)
+  {
+    traverseVals[vNum] = vec4<f32>(0.0,0.0,0.0,0.0);
+    return;
+  }
+
+  let ipRange: vec4<f32> = volumeSSBO.values[vNum].ipScalarRange;
+  tpos = tpos + tstep*rayBounds.x;
+  var curDist: f32 = rayBounds.x;
+  var sumVal: f32 = 0.0;
+  loop
+  {
+    var sample: f32 = getTextureValue(vTex, tpos);
+    // right now leave filtering off until WebGL changes get merged
+    // if (ipRange.z == 0.0 || sample >= ipRange.x && sample <= ipRange.y)
+    // {
+      sumVal = sumVal + sample;
+    // }
+
+    // increment position
+    curDist = curDist + 1.0;
+    tpos = tpos + tstep;
+
+    // check if we have reached a terminating condition
+    if (curDist > rayBounds.y) { break; }
+  }
+
+  // process to get the color and opacity
+  traverseVals[vNum] = getSimpleColor(sumVal, vNum, cNum);
+}
+
+fn composite(rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>) -> vec4<f32>
+{
+  // initial ray position is at the beginning
+  var rayPosSC: vec4<f32> = minPosSC;
+
+  // how many rows (tfuns) do we have in our tfunTexture
+  var tfunRows: f32 = f32(textureDimensions(tfunTexture).y);
+
+  var curDist: f32 = 0.0;
+  var computedColor: vec4<f32> = vec4<f32>(0.0, 0.0, 0.0, 0.0);
+  var sampleColor: vec4<f32>;
+//VTK::Volume::TraverseCalls
+
+  loop
+  {
+    // for each volume, sample and accumulate color
+//VTK::Volume::CompositeCalls
+
+    // increment position
+    curDist = curDist + mapperUBO.SampleDistance;
+    rayPosSC = rayPosSC + rayStepSC;
+
+    // check if we have reached a terminating condition
+    if (curDist > rayLengthSC) { break; }
+    if (computedColor.a > 0.98) { break; }
+  }
+  return computedColor;
+}
+
+@fragment
+fn main(
+//VTK::IOStructs::Input
+)
+//VTK::IOStructs::Output
+{
+  var output: fragmentOutput;
+
+  var rayMax: f32 = textureSampleLevel(maxTexture, clampSampler, input.tcoordVS, 0.0).r;
+  var rayMin: f32 = textureSampleLevel(minTexture, clampSampler, input.tcoordVS, 0.0).r;
+
+  // discard empty rays
+  if (rayMax <= rayMin) { discard; }
+  else
+  {
+    // compute start and end ray positions in view coordinates
+    var minPosSC: vec4<f32> = rendererUBO.PCSCMatrix*vec4<f32>(2.0 * input.tcoordVS.x - 1.0, 1.0 - 2.0 * input.tcoordVS.y, rayMax, 1.0);
+    minPosSC = minPosSC * (1.0 / minPosSC.w);
+    var maxPosSC: vec4<f32> = rendererUBO.PCSCMatrix*vec4<f32>(2.0 * input.tcoordVS.x - 1.0, 1.0 - 2.0 * input.tcoordVS.y, rayMin, 1.0);
+    maxPosSC = maxPosSC * (1.0 / maxPosSC.w);
+
+    var rayLengthSC: f32 = distance(minPosSC.xyz, maxPosSC.xyz);
+    var rayStepSC: vec4<f32> = (maxPosSC - minPosSC)*(mapperUBO.SampleDistance/rayLengthSC);
+    rayStepSC.w = 0.0;
+
+    var computedColor: vec4<f32>;
+
+//VTK::Volume::Loop
+
+//VTK::RenderEncoder::Impl
+  }
+
+  return output;
+}
+`;
+const tmpMat4 = new Float64Array(16);
+const tmp2Mat4 = new Float64Array(16);
+
+// ----------------------------------------------------------------------------
 // vtkWebGPUVolumePassFSQ methods
 // ----------------------------------------------------------------------------
 
 function vtkWebGPUVolumePassFSQ(publicAPI, model) {
   // Set our className
   model.classHierarchy.push('vtkWebGPUVolumePassFSQ');
-
-  publicAPI.replaceShaderPosition = function (hash, pipeline, vertexInput) {
-    var vDesc = pipeline.getShaderDescription('vertex');
+  publicAPI.replaceShaderPosition = (hash, pipeline, vertexInput) => {
+    const vDesc = pipeline.getShaderDescription('vertex');
     vDesc.addBuiltinOutput('vec4<f32>', '@builtin(position) Position');
-    var code = vDesc.getCode();
+    let 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;
     vDesc.setCode(code);
-    var fDesc = pipeline.getShaderDescription('fragment');
+    const fDesc = pipeline.getShaderDescription('fragment');
     fDesc.addBuiltinInput('vec4<f32>', '@builtin(position) fragPos');
   };
-
   model.shaderReplacements.set('replaceShaderPosition', publicAPI.replaceShaderPosition);
-
-  publicAPI.replaceShaderVolume = function (hash, pipeline, vertexInput) {
-    var fDesc = pipeline.getShaderDescription('fragment');
-    var code = fDesc.getCode();
-    var compositeCalls = [];
-    var traverseCalls = [];
-
-    for (var i = 0; i < model.volumes.length; i++) {
+  publicAPI.replaceShaderVolume = (hash, pipeline, vertexInput) => {
+    const fDesc = pipeline.getShaderDescription('fragment');
+    let code = fDesc.getCode();
+    const compositeCalls = [];
+    const traverseCalls = [];
+    for (let i = 0; i < model.volumes.length; i++) {
       // todo pass rowPos
-      var blendMode = model.volumes[i].getRenderable().getMapper().getBlendMode();
-
+      const blendMode = model.volumes[i].getRenderable().getMapper().getBlendMode();
       if (blendMode === BlendMode.COMPOSITE_BLEND) {
-        compositeCalls.push("    sampleColor = processVolume(volTexture".concat(i, ", ").concat(i, ", ").concat(model.rowStarts[i], ", rayPosSC, tfunRows);"));
-        compositeCalls.push("    computedColor = vec4<f32>(\n          sampleColor.a * sampleColor.rgb * (1.0 - computedColor.a) + computedColor.rgb,\n          (1.0 - computedColor.a)*sampleColor.a + computedColor.a);");
+        compositeCalls.push(`    sampleColor = processVolume(volTexture${i}, ${i}, ${model.rowStarts[i]}, rayPosSC, tfunRows);`);
+        compositeCalls.push(`    computedColor = vec4<f32>(
+          sampleColor.a * sampleColor.rgb * (1.0 - computedColor.a) + computedColor.rgb,
+          (1.0 - computedColor.a)*sampleColor.a + computedColor.a);`);
       } else {
-        traverseCalls.push("  sampleColor = traverseVals[".concat(i, "];"));
-        traverseCalls.push("  computedColor = vec4<f32>(\n          sampleColor.a * sampleColor.rgb * (1.0 - computedColor.a) + computedColor.rgb,\n          (1.0 - computedColor.a)*sampleColor.a + computedColor.a);");
+        traverseCalls.push(`  sampleColor = traverseVals[${i}];`);
+        traverseCalls.push(`  computedColor = vec4<f32>(
+          sampleColor.a * sampleColor.rgb * (1.0 - computedColor.a) + computedColor.rgb,
+          (1.0 - computedColor.a)*sampleColor.a + computedColor.a);`);
       }
     }
-
     code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::CompositeCalls', compositeCalls).result;
     code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::TraverseCalls', traverseCalls).result;
-    code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::TraverseDec', ["var<private> traverseVals: array<vec4<f32>,".concat(model.volumes.length, ">;")]).result; // call the full and partial methods as needed
+    code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::TraverseDec', [`var<private> traverseVals: array<vec4<f32>,${model.volumes.length}>;`]).result;
 
-    var compositeWhileTraversing = false;
-
-    for (var vidx = 0; vidx < model.volumes.length; vidx++) {
-      var _blendMode = model.volumes[vidx].getRenderable().getMapper().getBlendMode();
-
-      if (_blendMode === BlendMode.COMPOSITE_BLEND) {
+    // call the full and partial methods as needed
+    let compositeWhileTraversing = false;
+    for (let vidx = 0; vidx < model.volumes.length; vidx++) {
+      const blendMode = model.volumes[vidx].getRenderable().getMapper().getBlendMode();
+      if (blendMode === BlendMode.COMPOSITE_BLEND) {
         compositeWhileTraversing = true;
-      } else if (_blendMode === BlendMode.MAXIMUM_INTENSITY_BLEND) {
-        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', ["    traverseMax(volTexture".concat(vidx, ", ").concat(vidx, ", ").concat(vidx, ", rayLengthSC, minPosSC, rayStepSC);"), "    computedColor = traverseVals[".concat(vidx, "];"), '//VTK::Volume::Loop']).result;
-      } else if (_blendMode === BlendMode.MINIMUM_INTENSITY_BLEND) {
-        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', ["    traverseMin(volTexture".concat(vidx, ", ").concat(vidx, ", ").concat(vidx, ", rayLengthSC, minPosSC, rayStepSC);"), "    computedColor = traverseVals[".concat(vidx, "];"), '//VTK::Volume::Loop']).result;
-      } else if (_blendMode === BlendMode.AVERAGE_INTENSITY_BLEND) {
-        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', ["    traverseAverage(volTexture".concat(vidx, ", ").concat(vidx, ", ").concat(vidx, ", rayLengthSC, minPosSC, rayStepSC);"), "    computedColor = traverseVals[".concat(vidx, "];"), '//VTK::Volume::Loop']).result;
-      } else if (_blendMode === BlendMode.ADDITIVE_INTENSITY_BLEND) {
-        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', ["    traverseAdditive(volTexture".concat(vidx, ", ").concat(vidx, ", ").concat(vidx, ", rayLengthSC, minPosSC, rayStepSC);"), "    computedColor = traverseVals[".concat(vidx, "];"), '//VTK::Volume::Loop']).result;
+      } else if (blendMode === BlendMode.MAXIMUM_INTENSITY_BLEND) {
+        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', [`    traverseMax(volTexture${vidx}, ${vidx}, ${vidx}, rayLengthSC, minPosSC, rayStepSC);`, `    computedColor = traverseVals[${vidx}];`, '//VTK::Volume::Loop']).result;
+      } else if (blendMode === BlendMode.MINIMUM_INTENSITY_BLEND) {
+        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', [`    traverseMin(volTexture${vidx}, ${vidx}, ${vidx}, rayLengthSC, minPosSC, rayStepSC);`, `    computedColor = traverseVals[${vidx}];`, '//VTK::Volume::Loop']).result;
+      } else if (blendMode === BlendMode.AVERAGE_INTENSITY_BLEND) {
+        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', [`    traverseAverage(volTexture${vidx}, ${vidx}, ${vidx}, rayLengthSC, minPosSC, rayStepSC);`, `    computedColor = traverseVals[${vidx}];`, '//VTK::Volume::Loop']).result;
+      } else if (blendMode === BlendMode.ADDITIVE_INTENSITY_BLEND) {
+        code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', [`    traverseAdditive(volTexture${vidx}, ${vidx}, ${vidx}, rayLengthSC, minPosSC, rayStepSC);`, `    computedColor = traverseVals[${vidx}];`, '//VTK::Volume::Loop']).result;
       }
     }
-
     if (compositeWhileTraversing) {
       code = vtkWebGPUShaderCache.substitute(code, '//VTK::Volume::Loop', ['    computedColor = composite(rayLengthSC, minPosSC, rayStepSC);']).result;
     }
-
     fDesc.setCode(code);
   };
-
   model.shaderReplacements.set('replaceShaderVolume', publicAPI.replaceShaderVolume);
-
-  publicAPI.updateLUTImage = function (device) {
+  publicAPI.updateLUTImage = device => {
     // depends on
     // - volumes array (length and values) - mtime
     // - tfun arrays - renderable/property mtime
-    var mtime = publicAPI.getMTime();
 
-    for (var i = 0; i < model.volumes.length; i++) {
-      var vol = model.volumes[i].getRenderable();
-      var image = vol.getMapper().getInputData();
+    let mtime = publicAPI.getMTime();
+    for (let i = 0; i < model.volumes.length; i++) {
+      const vol = model.volumes[i].getRenderable();
+      const image = vol.getMapper().getInputData();
       mtime = Math.max(mtime, vol.getMTime(), image.getMTime());
     }
-
     if (mtime < model.lutBuildTime.getMTime()) {
       return;
-    } // first determine how large the image should be
-
+    }
 
+    // first determine how large the image should be
     model.numRows = 0;
     model.rowStarts = [];
-
-    for (var vidx = 0; vidx < model.volumes.length; vidx++) {
+    for (let vidx = 0; vidx < model.volumes.length; vidx++) {
       model.rowStarts.push(model.numRows);
-      var webgpuvol = model.volumes[vidx];
-      var actor = webgpuvol.getRenderable();
-      var volMapr = actor.getMapper();
-      var vprop = actor.getProperty();
-
-      var _image = volMapr.getInputData();
-
-      var scalars = _image.getPointData() && _image.getPointData().getScalars();
-
-      var numComp = scalars.getNumberOfComponents();
-      var iComps = vprop.getIndependentComponents();
-      var numIComps = iComps ? numComp : 1;
+      const webgpuvol = model.volumes[vidx];
+      const actor = webgpuvol.getRenderable();
+      const volMapr = actor.getMapper();
+      const vprop = actor.getProperty();
+      const image = volMapr.getInputData();
+      const scalars = image.getPointData() && image.getPointData().getScalars();
+      const numComp = scalars.getNumberOfComponents();
+      const iComps = vprop.getIndependentComponents();
+      const numIComps = iComps ? numComp : 1;
       model.numRows += numIComps;
-    } // allocate the image array
-
-
-    var colorArray = new Uint8Array(model.numRows * 2 * model.rowLength * 4);
-    var opacityArray = new Float32Array(model.numRows * 2 * model.rowLength);
-    var imgRow = 0;
-    var tmpTable = new Float32Array(model.rowLength * 3);
-    var rowLength = model.rowLength;
-
-    for (var _vidx = 0; _vidx < model.volumes.length; _vidx++) {
-      var _webgpuvol = model.volumes[_vidx];
-
-      var _actor = _webgpuvol.getRenderable();
-
-      var _volMapr = _actor.getMapper();
-
-      var _vprop = _actor.getProperty();
-
-      var _image2 = _volMapr.getInputData();
-
-      var _scalars = _image2.getPointData() && _image2.getPointData().getScalars();
-
-      var _numComp = _scalars.getNumberOfComponents();
-
-      var _iComps = _vprop.getIndependentComponents();
-
-      var _numIComps = _iComps ? _numComp : 1;
-
-      for (var c = 0; c < _numIComps; ++c) {
-        var cfun = _vprop.getRGBTransferFunction(c);
+    }
 
-        var cRange = cfun.getRange();
+    // allocate the image array
+    const colorArray = new Uint8Array(model.numRows * 2 * model.rowLength * 4);
+    const opacityArray = new Float32Array(model.numRows * 2 * model.rowLength);
+    let imgRow = 0;
+    const tmpTable = new Float32Array(model.rowLength * 3);
+    const rowLength = model.rowLength;
+    for (let vidx = 0; vidx < model.volumes.length; vidx++) {
+      const webgpuvol = model.volumes[vidx];
+      const actor = webgpuvol.getRenderable();
+      const volMapr = actor.getMapper();
+      const vprop = actor.getProperty();
+      const image = volMapr.getInputData();
+      const scalars = image.getPointData() && image.getPointData().getScalars();
+      const numComp = scalars.getNumberOfComponents();
+      const iComps = vprop.getIndependentComponents();
+      const numIComps = iComps ? numComp : 1;
+      for (let c = 0; c < numIComps; ++c) {
+        const cfun = vprop.getRGBTransferFunction(c);
+        const cRange = cfun.getRange();
         cfun.getTable(cRange[0], cRange[1], rowLength, tmpTable, 1);
-        var ioffset = imgRow * rowLength * 4;
-
-        for (var _i = 0; _i < rowLength; ++_i) {
-          colorArray[ioffset + _i * 4] = 255.0 * tmpTable[_i * 3];
-          colorArray[ioffset + _i * 4 + 1] = 255.0 * tmpTable[_i * 3 + 1];
-          colorArray[ioffset + _i * 4 + 2] = 255.0 * tmpTable[_i * 3 + 2];
-          colorArray[ioffset + _i * 4 + 3] = 255.0;
-
-          for (var co = 0; co < 4; co++) {
-            colorArray[ioffset + (rowLength + _i) * 4 + co] = colorArray[ioffset + _i * 4 + co];
+        let ioffset = imgRow * rowLength * 4;
+        for (let i = 0; i < rowLength; ++i) {
+          colorArray[ioffset + i * 4] = 255.0 * tmpTable[i * 3];
+          colorArray[ioffset + i * 4 + 1] = 255.0 * tmpTable[i * 3 + 1];
+          colorArray[ioffset + i * 4 + 2] = 255.0 * tmpTable[i * 3 + 2];
+          colorArray[ioffset + i * 4 + 3] = 255.0;
+          for (let co = 0; co < 4; co++) {
+            colorArray[ioffset + (rowLength + i) * 4 + co] = colorArray[ioffset + i * 4 + co];
           }
         }
-
-        var ofun = _vprop.getScalarOpacity(c);
-
-        var opacityFactor = model.sampleDist / _vprop.getScalarOpacityUnitDistance(c);
-
-        var oRange = ofun.getRange();
-        ofun.getTable(oRange[0], oRange[1], rowLength, tmpTable, 1); // adjust for sample distance etc
-
+        const ofun = vprop.getScalarOpacity(c);
+        const opacityFactor = model.sampleDist / vprop.getScalarOpacityUnitDistance(c);
+        const oRange = ofun.getRange();
+        ofun.getTable(oRange[0], oRange[1], rowLength, tmpTable, 1);
+        // adjust for sample distance etc
         ioffset = imgRow * rowLength;
-
-        for (var _i2 = 0; _i2 < rowLength; ++_i2) {
-          opacityArray[ioffset + _i2] = 1.0 - Math.pow(1.0 - tmpTable[_i2], opacityFactor);
-          opacityArray[ioffset + _i2 + rowLength] = opacityArray[ioffset + _i2];
+        for (let i = 0; i < rowLength; ++i) {
+          opacityArray[ioffset + i] = 1.0 - (1.0 - tmpTable[i]) ** opacityFactor;
+          opacityArray[ioffset + i + rowLength] = opacityArray[ioffset + i];
         }
-
         imgRow += 2;
       }
     }
-
     {
-      var treq = {
+      const treq = {
         nativeArray: colorArray,
         width: model.rowLength,
         height: model.numRows * 2,
         depth: 1,
         format: 'rgba8unorm'
       };
-      var newTex = device.getTextureManager().getTexture(treq);
-      var tview = newTex.createView('tfunTexture');
+      const newTex = device.getTextureManager().getTexture(treq);
+      const tview = newTex.createView('tfunTexture');
       model.textureViews[2] = tview;
     }
     {
-      var _treq = {
+      const treq = {
         nativeArray: opacityArray,
         width: model.rowLength,
         height: model.numRows * 2,
         depth: 1,
         format: 'r16float'
       };
-
-      var _newTex = device.getTextureManager().getTexture(_treq);
-
-      var _tview = _newTex.createView('ofunTexture');
-
-      model.textureViews[3] = _tview;
+      const newTex = device.getTextureManager().getTexture(treq);
+      const tview = newTex.createView('ofunTexture');
+      model.textureViews[3] = tview;
     }
     model.lutBuildTime.modified();
   };
-
-  publicAPI.updateSSBO = function (device) {
+  publicAPI.updateSSBO = device => {
     // if any of
     // - color or opacity tfun ranges changed - volume Mtime
     // - any volume matrix changed - volume MTime
     // - stabilized center changed - ren.stabilizedMTime
     // - any volume's input data worldtoindex or dimensions changed - input's mtime
     //
-    var mtime = Math.max(publicAPI.getMTime(), model.WebGPURenderer.getStabilizedTime());
-
-    for (var i = 0; i < model.volumes.length; i++) {
-      var vol = model.volumes[i].getRenderable();
-      var volMapr = vol.getMapper();
-      var image = volMapr.getInputData();
+    let mtime = Math.max(publicAPI.getMTime(), model.WebGPURenderer.getStabilizedTime());
+    for (let i = 0; i < model.volumes.length; i++) {
+      const vol = model.volumes[i].getRenderable();
+      const volMapr = vol.getMapper();
+      const image = volMapr.getInputData();
       mtime = Math.max(mtime, vol.getMTime(), image.getMTime(), volMapr.getMTime());
     }
-
     if (mtime < model.SSBO.getSendTime()) {
       return;
-    } // create the volumeSBBO
-
+    }
 
-    var center = model.WebGPURenderer.getStabilizedCenterByReference();
+    // create the volumeSBBO
+    const center = model.WebGPURenderer.getStabilizedCenterByReference();
     model.SSBO.clearData();
-    model.SSBO.setNumberOfInstances(model.volumes.length); // create SCTC matrices  SC -> world -> model -> index -> tcoord
+    model.SSBO.setNumberOfInstances(model.volumes.length);
+
+    // create SCTC matrices  SC -> world -> model -> index -> tcoord
     //
     // when doing coord conversions from A to C recall
     // the order is mat4.mult(AtoC, BtoC, AtoB);
     //
-
-    var marray = new Float64Array(model.volumes.length * 16);
-    var vPlaneArray = new Float64Array(model.volumes.length * 16);
-    var tstepArray = new Float64Array(model.volumes.length * 4);
-    var shadeArray = new Float64Array(model.volumes.length * 4);
-    var spacingArray = new Float64Array(model.volumes.length * 4);
-    var ipScalarRangeArray = new Float64Array(model.volumes.length * 4);
-
-    for (var vidx = 0; vidx < model.volumes.length; vidx++) {
-      var webgpuvol = model.volumes[vidx];
-      var actor = webgpuvol.getRenderable();
-
-      var _volMapr2 = actor.getMapper();
-
-      var _image3 = _volMapr2.getInputData();
-
+    const marray = new Float64Array(model.volumes.length * 16);
+    const vPlaneArray = new Float64Array(model.volumes.length * 16);
+    const tstepArray = new Float64Array(model.volumes.length * 4);
+    const shadeArray = new Float64Array(model.volumes.length * 4);
+    const spacingArray = new Float64Array(model.volumes.length * 4);
+    const ipScalarRangeArray = new Float64Array(model.volumes.length * 4);
+    for (let vidx = 0; vidx < model.volumes.length; vidx++) {
+      const webgpuvol = model.volumes[vidx];
+      const actor = webgpuvol.getRenderable();
+      const volMapr = actor.getMapper();
+      const image = volMapr.getInputData();
       mat4.identity(tmpMat4);
-      mat4.translate(tmpMat4, tmpMat4, center); // tmpMat4 is now SC->World
+      mat4.translate(tmpMat4, tmpMat4, center);
+      // tmpMat4 is now SC->World
 
-      var mcwcmat = actor.getMatrix();
+      const mcwcmat = actor.getMatrix();
       mat4.transpose(tmp2Mat4, mcwcmat);
-      mat4.invert(tmp2Mat4, tmp2Mat4); // tmp2Mat4 is now world to model
+      mat4.invert(tmp2Mat4, tmp2Mat4);
+      // tmp2Mat4 is now world to model
+
+      mat4.multiply(tmpMat4, tmp2Mat4, tmpMat4);
+      // tmp4Mat is now SC->Model
 
-      mat4.multiply(tmpMat4, tmp2Mat4, tmpMat4); // tmp4Mat is now SC->Model
       // the method on the data is world to index but the volume is in
       // model coordinates so really in this context it is model to index
+      const modelToIndex = image.getWorldToIndex();
+      mat4.multiply(tmpMat4, modelToIndex, tmpMat4);
+      // tmpMat4 is now SC -> Index
 
-      var modelToIndex = _image3.getWorldToIndex();
-
-      mat4.multiply(tmpMat4, modelToIndex, tmpMat4); // tmpMat4 is now SC -> Index
-
-      var dims = _image3.getDimensions();
-
+      const dims = image.getDimensions();
       mat4.identity(tmp2Mat4);
       mat4.scale(tmp2Mat4, tmp2Mat4, [1.0 / dims[0], 1.0 / dims[1], 1.0 / dims[2]]);
-      mat4.multiply(tmpMat4, tmp2Mat4, tmpMat4); // tmpMat4 is now SC -> Tcoord
+      mat4.multiply(tmpMat4, tmp2Mat4, tmpMat4);
+      // tmpMat4 is now SC -> Tcoord
 
-      for (var j = 0; j < 16; j++) {
+      for (let j = 0; j < 16; j++) {
         marray[vidx * 16 + j] = tmpMat4[j];
       }
-
-      mat4.invert(tmpMat4, tmpMat4); // now it is Tcoord To SC
-
-      for (var _j = 0; _j < 4; _j++) {
-        vPlaneArray[vidx * 16 + _j * 4] = tmpMat4[_j * 4];
-        vPlaneArray[vidx * 16 + _j * 4 + 1] = tmpMat4[_j * 4 + 1];
-        vPlaneArray[vidx * 16 + _j * 4 + 2] = tmpMat4[_j * 4 + 2];
-        vPlaneArray[vidx * 16 + _j * 4 + 3] = 0.0;
+      mat4.invert(tmpMat4, tmpMat4);
+      // now it is Tcoord To SC
+
+      for (let j = 0; j < 4; j++) {
+        vPlaneArray[vidx * 16 + j * 4] = tmpMat4[j * 4];
+        vPlaneArray[vidx * 16 + j * 4 + 1] = tmpMat4[j * 4 + 1];
+        vPlaneArray[vidx * 16 + j * 4 + 2] = tmpMat4[j * 4 + 2];
+        vPlaneArray[vidx * 16 + j * 4 + 3] = 0.0;
       }
-
       tstepArray[vidx * 4] = 1.0 / dims[0];
       tstepArray[vidx * 4 + 1] = 1.0 / dims[1];
       tstepArray[vidx * 4 + 2] = 1.0 / dims[2];
       tstepArray[vidx * 4 + 3] = 1.0;
       shadeArray[vidx * 4] = actor.getProperty().getShade() ? 1.0 : 0.0;
-
-      var spacing = _image3.getSpacing();
-
+      const spacing = image.getSpacing();
       spacingArray[vidx * 4] = spacing[0];
       spacingArray[vidx * 4 + 1] = spacing[1];
       spacingArray[vidx * 4 + 2] = spacing[2];
-      spacingArray[vidx * 4 + 3] = 1.0; // handle filteringMode
-
-      var tScale = model.textureViews[vidx + 4].getTexture().getScale();
-
-      var ipScalarRange = _volMapr2.getIpScalarRange();
+      spacingArray[vidx * 4 + 3] = 1.0;
 
+      // handle filteringMode
+      const tScale = model.textureViews[vidx + 4].getTexture().getScale();
+      const ipScalarRange = volMapr.getIpScalarRange();
       ipScalarRangeArray[vidx * 4] = ipScalarRange[0] / tScale;
       ipScalarRangeArray[vidx * 4 + 1] = ipScalarRange[1] / tScale;
-      ipScalarRangeArray[vidx * 4 + 2] = _volMapr2.getFilterMode();
+      ipScalarRangeArray[vidx * 4 + 2] = volMapr.getFilterMode();
     }
-
     model.SSBO.addEntry('SCTCMatrix', 'mat4x4<f32>');
     model.SSBO.addEntry('planeNormals', 'mat4x4<f32>');
     model.SSBO.addEntry('shade', 'vec4<f32>');
@@ -322,75 +657,68 @@ function vtkWebGPUVolumePassFSQ(publicAPI, model) {
     model.SSBO.setAllInstancesFromArray('tstep', tstepArray);
     model.SSBO.setAllInstancesFromArray('spacing', spacingArray);
     model.SSBO.setAllInstancesFromArray('ipScalarRange', ipScalarRangeArray);
-    model.SSBO.send(device); // now create the componentSSBO
+    model.SSBO.send(device);
 
+    // now create the componentSSBO
     model.componentSSBO.clearData();
     model.componentSSBO.setNumberOfInstances(model.numRows);
-    var cScaleArray = new Float64Array(model.numRows);
-    var cShiftArray = new Float64Array(model.numRows);
-    var oScaleArray = new Float64Array(model.numRows);
-    var oShiftArray = new Float64Array(model.numRows);
-    var gominArray = new Float64Array(model.numRows);
-    var gomaxArray = new Float64Array(model.numRows);
-    var goshiftArray = new Float64Array(model.numRows);
-    var goscaleArray = new Float64Array(model.numRows);
-    var rowIdx = 0;
-
-    for (var _vidx2 = 0; _vidx2 < model.volumes.length; _vidx2++) {
-      var _webgpuvol2 = model.volumes[_vidx2];
-
-      var _actor2 = _webgpuvol2.getRenderable();
-
-      var _volMapr3 = _actor2.getMapper();
+    const cScaleArray = new Float64Array(model.numRows);
+    const cShiftArray = new Float64Array(model.numRows);
+    const oScaleArray = new Float64Array(model.numRows);
+    const oShiftArray = new Float64Array(model.numRows);
+    const gominArray = new Float64Array(model.numRows);
+    const gomaxArray = new Float64Array(model.numRows);
+    const goshiftArray = new Float64Array(model.numRows);
+    const goscaleArray = new Float64Array(model.numRows);
+    let rowIdx = 0;
+    for (let vidx = 0; vidx < model.volumes.length; vidx++) {
+      const webgpuvol = model.volumes[vidx];
+      const actor = webgpuvol.getRenderable();
+      const volMapr = actor.getMapper();
+      const vprop = actor.getProperty();
+      const image = volMapr.getInputData();
+      const scalars = image.getPointData() && image.getPointData().getScalars();
+      const numComp = scalars.getNumberOfComponents();
+      const iComps = vprop.getIndependentComponents();
+      // const numIComps = iComps ? numComp : 1;
 
-      var vprop = _actor2.getProperty();
-
-      var _image4 = _volMapr3.getInputData();
-
-      var scalars = _image4.getPointData() && _image4.getPointData().getScalars();
-
-      var numComp = scalars.getNumberOfComponents();
-      var iComps = vprop.getIndependentComponents(); // const numIComps = iComps ? numComp : 1;
       // half float?
-
-      var tformat = model.textureViews[_vidx2 + 4].getTexture().getFormat();
-
-      var tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(tformat);
-      var halfFloat = tDetails.elementSize === 2 && tDetails.sampleType === 'float';
-      var volInfo = {
+      const tformat = model.textureViews[vidx + 4].getTexture().getFormat();
+      const tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(tformat);
+      const halfFloat = tDetails.elementSize === 2 && tDetails.sampleType === 'float';
+      const volInfo = {
         scale: [255.0],
         offset: [0.0]
       };
-
       if (halfFloat) {
         volInfo.scale[0] = 1.0;
-      } // three levels of shift scale combined into one
-      // for performance in the fragment shader
-
+      }
 
-      for (var compIdx = 0; compIdx < numComp; compIdx++) {
-        var target = iComps ? compIdx : 0;
-        var sscale = volInfo.scale[compIdx];
-        var ofun = vprop.getScalarOpacity(target);
-        var oRange = ofun.getRange();
-        var oscale = sscale / (oRange[1] - oRange[0]);
-        var oshift = (volInfo.offset[compIdx] - oRange[0]) / (oRange[1] - oRange[0]);
+      // three levels of shift scale combined into one
+      // for performance in the fragment shader
+      for (let compIdx = 0; compIdx < numComp; compIdx++) {
+        const target = iComps ? compIdx : 0;
+        const sscale = volInfo.scale[compIdx];
+        const ofun = vprop.getScalarOpacity(target);
+        const oRange = ofun.getRange();
+        const oscale = sscale / (oRange[1] - oRange[0]);
+        const oshift = (volInfo.offset[compIdx] - oRange[0]) / (oRange[1] - oRange[0]);
         oShiftArray[rowIdx] = oshift;
         oScaleArray[rowIdx] = oscale;
-        var cfun = vprop.getRGBTransferFunction(target);
-        var cRange = cfun.getRange();
+        const cfun = vprop.getRGBTransferFunction(target);
+        const cRange = cfun.getRange();
         cShiftArray[rowIdx] = (volInfo.offset[compIdx] - cRange[0]) / (cRange[1] - cRange[0]);
-        cScaleArray[rowIdx] = sscale / (cRange[1] - cRange[0]); // todo sscale for dependent should be based off of the A channel?
-        // not target (which is 0 in that case)
-
-        var useGO = vprop.getUseGradientOpacity(target);
+        cScaleArray[rowIdx] = sscale / (cRange[1] - cRange[0]);
 
+        // todo sscale for dependent should be based off of the A channel?
+        // not target (which is 0 in that case)
+        const useGO = vprop.getUseGradientOpacity(target);
         if (useGO) {
-          var gomin = vprop.getGradientOpacityMinimumOpacity(target);
-          var gomax = vprop.getGradientOpacityMaximumOpacity(target);
+          const gomin = vprop.getGradientOpacityMinimumOpacity(target);
+          const gomax = vprop.getGradientOpacityMaximumOpacity(target);
           gominArray[rowIdx] = gomin;
           gomaxArray[rowIdx] = gomax;
-          var goRange = [vprop.getGradientOpacityMinimumValue(target), vprop.getGradientOpacityMaximumValue(target)];
+          const goRange = [vprop.getGradientOpacityMinimumValue(target), vprop.getGradientOpacityMaximumValue(target)];
           goscaleArray[rowIdx] = sscale * (gomax - gomin) / (goRange[1] - goRange[0]);
           goshiftArray[rowIdx] = -goRange[0] * (gomax - gomin) / (goRange[1] - goRange[0]) + gomin;
         } else {
@@ -399,11 +727,9 @@ function vtkWebGPUVolumePassFSQ(publicAPI, model) {
           goscaleArray[rowIdx] = 0.0;
           goshiftArray[rowIdx] = 1.0;
         }
-
         rowIdx++;
       }
     }
-
     model.componentSSBO.addEntry('cScale', 'f32');
     model.componentSSBO.addEntry('cShift', 'f32');
     model.componentSSBO.addEntry('oScale', 'f32');
@@ -422,59 +748,48 @@ function vtkWebGPUVolumePassFSQ(publicAPI, model) {
     model.componentSSBO.setAllInstancesFromArray('gomax', gomaxArray);
     model.componentSSBO.send(device);
   };
-
-  var superClassUpdateBuffers = publicAPI.updateBuffers;
-
-  publicAPI.updateBuffers = function () {
-    superClassUpdateBuffers(); // compute the min step size
-
-    var sampleDist = model.volumes[0].getRenderable().getMapper().getSampleDistance();
-
-    for (var i = 0; i < model.volumes.length; i++) {
-      var vol = model.volumes[i];
-      var volMapr = vol.getRenderable().getMapper();
-      var sd = volMapr.getSampleDistance();
-
+  const superClassUpdateBuffers = publicAPI.updateBuffers;
+  publicAPI.updateBuffers = () => {
+    superClassUpdateBuffers();
+    // compute the min step size
+    let sampleDist = model.volumes[0].getRenderable().getMapper().getSampleDistance();
+    for (let i = 0; i < model.volumes.length; i++) {
+      const vol = model.volumes[i];
+      const volMapr = vol.getRenderable().getMapper();
+      const sd = volMapr.getSampleDistance();
       if (sd < sampleDist) {
         sampleDist = sd;
       }
     }
-
     if (model.sampleDist !== sampleDist) {
       model.sampleDist = sampleDist;
       model.UBO.setValue('SampleDistance', sampleDist);
       model.UBO.sendIfNeeded(model.device);
-    } // add in 3d volume textures
-
-
-    for (var vidx = 0; vidx < model.volumes.length; vidx++) {
-      var webgpuvol = model.volumes[vidx];
-      var actor = webgpuvol.getRenderable();
-
-      var _volMapr4 = actor.getMapper();
-
-      var image = _volMapr4.getInputData();
-
-      var newTex = model.device.getTextureManager().getTextureForImageData(image);
+    }
 
+    // add in 3d volume textures
+    for (let vidx = 0; vidx < model.volumes.length; vidx++) {
+      const webgpuvol = model.volumes[vidx];
+      const actor = webgpuvol.getRenderable();
+      const volMapr = actor.getMapper();
+      const image = volMapr.getInputData();
+      const newTex = model.device.getTextureManager().getTextureForImageData(image);
       if (!model.textureViews[vidx + 4] || model.textureViews[vidx + 4].getTexture() !== newTex) {
-        var tview = newTex.createView("volTexture".concat(vidx));
+        const tview = newTex.createView(`volTexture${vidx}`);
         model.textureViews[vidx + 4] = tview;
       }
-    } // clear any old leftovers
-
+    }
 
+    // clear any old leftovers
     if (model.volumes.length < model.lastVolumeLength) {
       // we may have gaps in the array right now so no splice
-      for (var _i3 = model.volumes.length; _i3 < model.lastVolumeLength; _i3++) {
+      for (let i = model.volumes.length; i < model.lastVolumeLength; i++) {
         model.textureViews.pop();
       }
     }
-
     model.lastVolumeLength = model.volumes.length;
     publicAPI.updateLUTImage(model.device);
     publicAPI.updateSSBO(model.device);
-
     if (!model.clampSampler) {
       model.clampSampler = vtkWebGPUSampler.newInstance({
         label: 'clampSampler'
@@ -485,56 +800,55 @@ function vtkWebGPUVolumePassFSQ(publicAPI, model) {
       });
     }
   };
-
-  publicAPI.computePipelineHash = function () {
+  publicAPI.computePipelineHash = () => {
     model.pipelineHash = 'volfsq';
-
-    for (var vidx = 0; vidx < model.volumes.length; vidx++) {
-      var blendMode = model.volumes[vidx].getRenderable().getMapper().getBlendMode();
-      model.pipelineHash += "".concat(blendMode);
+    for (let vidx = 0; vidx < model.volumes.length; vidx++) {
+      const blendMode = model.volumes[vidx].getRenderable().getMapper().getBlendMode();
+      model.pipelineHash += `${blendMode}`;
     }
-  }; // marks modified when needed
-
+  };
 
-  publicAPI.setVolumes = function (val) {
+  // marks modified when needed
+  publicAPI.setVolumes = val => {
     if (!model.volumes || model.volumes.length !== val.length) {
-      model.volumes = _toConsumableArray(val);
+      model.volumes = [...val];
       publicAPI.modified();
       return;
     }
-
-    for (var i = 0; i < val.length; i++) {
+    for (let i = 0; i < val.length; i++) {
       if (val[i] !== model.volumes[i]) {
-        model.volumes = _toConsumableArray(val);
+        model.volumes = [...val];
         publicAPI.modified();
         return;
       }
     }
   };
-
-  var superclassGetBindables = publicAPI.getBindables;
-
-  publicAPI.getBindables = function () {
-    var bindables = superclassGetBindables();
+  const superclassGetBindables = publicAPI.getBindables;
+  publicAPI.getBindables = () => {
+    const bindables = superclassGetBindables();
     bindables.push(model.componentSSBO);
     bindables.push(model.clampSampler);
     return bindables;
   };
-} // ----------------------------------------------------------------------------
+}
+
+// ----------------------------------------------------------------------------
 // Object factory
 // ----------------------------------------------------------------------------
 
-
-var DEFAULT_VALUES = {
+const DEFAULT_VALUES = {
   volumes: null,
   rowLength: 1024,
   lastVolumeLength: 0
-}; // ----------------------------------------------------------------------------
+};
+
+// ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
-  var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.assign(model, DEFAULT_VALUES, initialValues); // Inheritance
+  let initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  Object.assign(model, DEFAULT_VALUES, initialValues);
 
+  // Inheritance
   vtkWebGPUFullScreenQuad.extend(publicAPI, model, initialValues);
   model.fragmentShaderTemplate = volFragTemplate;
   model.UBO = vtkWebGPUUniformBuffer.newInstance({
@@ -550,16 +864,21 @@ function extend(publicAPI, model) {
   model.lutBuildTime = {};
   macro.obj(model.lutBuildTime, {
     mtime: 0
-  }); // Object methods
+  });
 
+  // Object methods
   vtkWebGPUVolumePassFSQ(publicAPI, model);
-} // ----------------------------------------------------------------------------
+}
 
-var newInstance = macro.newInstance(extend, 'vtkWebGPUVolumePassFSQ'); // ----------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
+
+const newInstance = macro.newInstance(extend, 'vtkWebGPUVolumePassFSQ');
+
+// ----------------------------------------------------------------------------
 
 var vtkWebGPUVolumePassFSQ$1 = {
-  newInstance: newInstance,
-  extend: extend
+  newInstance,
+  extend
 };
 
 export { vtkWebGPUVolumePassFSQ$1 as default, extend, newInstance };