@kitware/vtk.js 22.3.0 → 22.5.0

package/IO/Core/DataAccessHelper/HttpDataAccessHelper.js

@@ -74,7 +74,14 @@ function fetchArray(instance, baseURL, array) {
 
   if (array.ref && !array.ref.pending) {
     return new Promise(function (resolve, reject) {
-      var url = [baseURL, array.ref.basepath, options.compression ? "".concat(array.ref.id, ".gz") : array.ref.id].join('/');
+      var url = null;
+
+      if (array.ref.url) {
+        url = array.ref.url;
+      } else {
+        url = [baseURL, array.ref.basepath, options.compression ? "".concat(array.ref.id, ".gz") : array.ref.id].join('/');
+      }
+
       var xhr = openAsyncXHR('GET', url, options);
 
       xhr.onreadystatechange = function (e) {

package/Rendering/Core/ScalarBarActor.js

@@ -1,5 +1,5 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { vec3, mat4 } from 'gl-matrix';
 import * as d3 from 'd3-scale';
 import { K as nearestPowerOfTwo } from '../../Common/Core/Math/index.js';
@@ -8,7 +8,6 @@ import vtkActor from './Actor.js';
 import vtkDataArray from '../../Common/Core/DataArray.js';
 import vtkScalarsToColors from '../../Common/Core/ScalarsToColors.js';
 import vtkMapper from './Mapper.js';
-import vtkPixelSpaceCallbackMapper from './PixelSpaceCallbackMapper.js';
 import vtkPolyData from '../../Common/DataModel/PolyData.js';
 import vtkTexture from './Texture.js';
 
@@ -19,6 +18,16 @@ var VectorMode = vtkScalarsToColors.VectorMode; // -----------------------------
 // vtkScalarBarActor
 //
 // Note log scales are currently not supported
+//
+// Developer note: This class is broken into the main class and a helper
+// class. The main class holds view independent properties (those properties
+// that do not change as the view's resolution/aspect ratio change). The
+// helper class is instantiated one per view and holds properties that can
+// depend on view specific values such as resolution. The helper class code
+// could have been left to the View specific implementation (such as
+// vtkWebGPUScalarBarActor) but is instead placed here to it can be shared by
+// multiple rendering backends.
+//
 // ----------------------------------------------------------------------------
 // some shared temp variables to reduce heap allocs
 
@@ -38,10 +47,9 @@ function applyTextStyle(ctx, style) {
 } // ----------------------------------------------------------------------------
 // Default autoLayout function
 // ----------------------------------------------------------------------------
-// compute good values to use based on window size etc
-// a bunch of heuristics here with hand tuned constants
-// These values worked for me but really this method
-// could be redically changed. The basic gist is
+// compute good values to use based on window size etc a bunch of heuristics
+// here with hand tuned constants These values worked for me but really this
+// method could be redically changed. The basic gist is
 // 1) compute a resonable font size
 // 2) render the text atlas using those font sizes
 // 3) pick horizontal or vertical bsed on window size
@@ -49,96 +57,151 @@ function applyTextStyle(ctx, style) {
 //    compute the box size and position such that
 //    the text will all fit nicely and the bar will be a resonable size
 // 5) compute the bar segments based on the above settings
+//
+// Note that this function can and should read values from the
+// ScalarBarActor but should only write values to the view dependent helper
+// instance that is provided as those values are the ones that will be used
+// for rendering.
+//
 
 
 function defaultAutoLayout(publicAPI, model) {
-  return function () {
+  return function (helper) {
     // we don't do a linear scale, the proportions for
     // a 700 pixel window differ from a 1400
-    var xAxisAdjust = Math.pow(model.lastSize[0] / 700, 0.8);
-    var yAxisAdjust = Math.pow(model.lastSize[1] / 700, 0.8);
-    var minAdjust = Math.min(xAxisAdjust, yAxisAdjust); // compute a reasonable font size first
-
-    model.axisTextStyle.fontSize = Math.max(24 * minAdjust, 12);
-
-    if (model.lastAspectRatio > 1.0) {
-      model.tickTextStyle.fontSize = Math.max(20 * minAdjust, 10);
+    var lastSize = helper.getLastSize();
+    var xAxisAdjust = Math.pow(lastSize[0] / 700, 0.8);
+    var yAxisAdjust = Math.pow(lastSize[1] / 700, 0.8);
+    var minAdjust = Math.min(xAxisAdjust, yAxisAdjust);
+    var axisTextStyle = helper.getAxisTextStyle();
+    var tickTextStyle = helper.getTickTextStyle();
+    Object.assign(axisTextStyle, model.axisTextStyle);
+    Object.assign(tickTextStyle, model.tickTextStyle); // compute a reasonable font size first
+
+    axisTextStyle.fontSize = Math.max(24 * minAdjust, 12);
+
+    if (helper.getLastAspectRatio() > 1.0) {
+      tickTextStyle.fontSize = Math.max(20 * minAdjust, 10);
     } else {
-      model.tickTextStyle.fontSize = Math.max(16 * minAdjust, 10);
+      tickTextStyle.fontSize = Math.max(16 * minAdjust, 10);
     } // rebuild the text atlas
 
 
-    var textSizes = publicAPI.updateTextureAtlas(); // now compute the boxSize and pixel offsets, different algorithm
+    var textSizes = helper.updateTextureAtlas(); // now compute the boxSize and pixel offsets, different algorithm
     // for horizonal versus vertical
 
-    model.topTitle = false; // if vertical
+    helper.setTopTitle(false);
+    var boxSize = helper.getBoxSizeByReference(); // if vertical
 
-    if (model.lastAspectRatio > 1.0) {
-      model.tickLabelPixelOffset = 0.4 * model.tickTextStyle.fontSize;
-      var tickWidth = 2.0 * (textSizes.tickWidth + model.tickLabelPixelOffset) / model.lastSize[0];
-      model.axisTitlePixelOffset = 0.8 * model.axisTextStyle.fontSize; // width required if the title is vertical
+    if (helper.getLastAspectRatio() > 1.0) {
+      helper.setTickLabelPixelOffset(0.4 * tickTextStyle.fontSize);
+      var tickWidth = 2.0 * (textSizes.tickWidth + helper.getTickLabelPixelOffset()) / lastSize[0];
+      helper.setAxisTitlePixelOffset(0.8 * axisTextStyle.fontSize); // width required if the title is vertical
 
-      var titleWidth = 2.0 * (textSizes.titleHeight + model.axisTitlePixelOffset) / model.lastSize[0]; // if the title will fit within the width of the bar then that looks
-      // nicer to put it at the top (model.topTitle), otherwise rotate it
+      var titleWidth = 2.0 * (textSizes.titleHeight + helper.getAxisTitlePixelOffset()) / lastSize[0]; // if the title will fit within the width of the bar then that looks
+      // nicer to put it at the top (helper.topTitle), otherwise rotate it
       // and place it sideways
 
-      if (tickWidth + 0.4 * titleWidth > 2.0 * textSizes.titleWidth / model.lastSize[0]) {
-        model.topTitle = true;
-        model.boxSize[0] = tickWidth + 0.4 * titleWidth;
-        model.boxPosition = [0.98 - model.boxSize[0], -0.92];
+      if (tickWidth + 0.4 * titleWidth > 2.0 * textSizes.titleWidth / lastSize[0]) {
+        helper.setTopTitle(true);
+        boxSize[0] = tickWidth + 0.4 * titleWidth;
+        helper.setBoxPosition([0.98 - boxSize[0], -0.92]);
       } else {
-        model.boxSize[0] = tickWidth + 1.4 * titleWidth;
-        model.boxPosition = [0.99 - model.boxSize[0], -0.92];
+        boxSize[0] = tickWidth + 1.4 * titleWidth;
+        helper.setBoxPosition([0.99 - boxSize[0], -0.92]);
       }
 
-      model.boxSize[1] = Math.max(1.2, Math.min(1.84 / yAxisAdjust, 1.84));
+      boxSize[1] = Math.max(1.2, Math.min(1.84 / yAxisAdjust, 1.84));
     } else {
       // horizontal
-      model.axisTitlePixelOffset = 2.0 * model.tickTextStyle.fontSize;
-      model.tickLabelPixelOffset = 0.5 * model.tickTextStyle.fontSize;
-      var tickHeight = 2.0 * (textSizes.tickHeight + model.tickLabelPixelOffset) / model.lastSize[1];
-      var titleHeight = 2.0 * (textSizes.titleHeight + model.axisTitlePixelOffset) / model.lastSize[1];
+      helper.setAxisTitlePixelOffset(2.0 * tickTextStyle.fontSize);
+      helper.setTickLabelPixelOffset(0.5 * tickTextStyle.fontSize);
+      var tickHeight = 2.0 * (textSizes.tickHeight + helper.getTickLabelPixelOffset()) / lastSize[1];
+      var titleHeight = 2.0 * (textSizes.titleHeight + helper.getAxisTitlePixelOffset()) / lastSize[1];
 
-      var _tickWidth = 2.0 * textSizes.tickWidth / model.lastSize[0];
+      var _tickWidth = 2.0 * textSizes.tickWidth / lastSize[0];
 
-      model.boxSize[0] = Math.min(1.9, Math.max(1.4, 1.4 * _tickWidth * (model.ticks.length + 3)));
-      model.boxSize[1] = tickHeight + titleHeight;
-      model.boxPosition = [-0.5 * model.boxSize[0], -0.97];
+      boxSize[0] = Math.min(1.9, Math.max(1.4, 1.4 * _tickWidth * (helper.getTicks().length + 3)));
+      boxSize[1] = tickHeight + titleHeight;
+      helper.setBoxPosition([-0.5 * boxSize[0], -0.97]);
     } // recomute bar segments based on positioning
 
 
-    publicAPI.recomputeBarSegments(textSizes);
+    helper.recomputeBarSegments(textSizes);
   };
-}
+} // many properties of this actor depend on the API specific view The main
+// dependency being the resolution as that drives what font sizes to use.
+// Bacause of this we need to do some of the calculations in a API specific
+// subclass. But... we don't want a lot of duplicated code between WebGL and
+// WebGPU for example so we have this helper class, that is designed to be
+// fairly API independent so that API specific views can call this to do
+// most of the work.
 
-function vtkScalarBarActor(publicAPI, model) {
+
+function vtkScalarBarActorHelper(publicAPI, model) {
   // Set our className
-  model.classHierarchy.push('vtkScalarBarActor'); // main method to rebuild the scalarBar when something has changed
-  // tracks modified times
+  model.classHierarchy.push('vtkScalarBarActorHelper');
+
+  publicAPI.setRenderable = function (renderable) {
+    if (model.renderable === renderable) {
+      return;
+    }
 
-  publicAPI.update = function () {
-    if (!model.scalarsToColors || !model.visibility) {
+    model.renderable = renderable;
+    model.barActor.setProperty(renderable.getProperty());
+    model.barActor.setParentProp(renderable);
+    model.tmActor.setProperty(renderable.getProperty());
+    model.tmActor.setParentProp(renderable);
+    model.axisTextStyle = _objectSpread({}, renderable.getAxisTextStyle());
+    model.tickTextStyle = _objectSpread({}, renderable.getTickTextStyle());
+    publicAPI.modified();
+  };
+
+  publicAPI.updateAPISpecificData = function (size, camera, renderWindow) {
+    // has the size changed?
+    if (model.lastSize[0] !== size[0] || model.lastSize[1] !== size[1]) {
+      model.lastSize[0] = size[0];
+      model.lastSize[1] = size[1];
+      model.lastAspectRatio = size[0] / size[1];
+      model.forceUpdate = true;
+    }
+
+    var scalarsToColors = model.renderable.getScalarsToColors();
+
+    if (!scalarsToColors || !model.renderable.getVisibility()) {
       return;
     } // make sure the lut is assigned to our mapper
 
 
-    model.barMapper.setLookupTable(model.scalarsToColors); // did something significant change? If so rebuild a lot of things
+    model.barMapper.setLookupTable(scalarsToColors); // camera should be the same for all views
 
-    if (model.forceUpdate || Math.max(model.scalarsToColors.getMTime(), publicAPI.getMTime()) > model.lastRebuildTime.getMTime()) {
-      var range = model.scalarsToColors.getMappingRange();
+    model.camera = camera;
+    model.renderWindow = renderWindow; // did something significant change? If so rebuild a lot of things
+
+    if (model.forceUpdate || Math.max(scalarsToColors.getMTime(), publicAPI.getMTime()) > model.lastRebuildTime.getMTime()) {
+      var range = scalarsToColors.getMappingRange();
       model.lastTickBounds = _toConsumableArray(range);
       model.barMapper.setScalarRange(model.lastTickBounds); // compute tick marks for axes (update for log scale)
 
       var scale = d3.scaleLinear().domain([model.lastTickBounds[0], model.lastTickBounds[1]]);
       model.ticks = scale.ticks(5);
       var format = scale.tickFormat(5);
-      model.tickStrings = model.ticks.map(format);
+      model.tickstrings = model.ticks.map(format);
 
-      if (model.automated) {
-        model.autoLayout();
+      if (model.renderable.getAutomated()) {
+        model.renderable.getAutoLayout()(publicAPI);
       } else {
-        // rebuild the texture only when force or changed bounds, face
+        // copy values from renderable
+        model.axisTextStyle = _objectSpread({}, model.renderable.getAxisTextStyle());
+        model.tickTextStyle = _objectSpread({}, model.renderable.getTickTextStyle());
+        model.barPosition = _toConsumableArray(model.renderable.getBarPosition());
+        model.barSize = _toConsumableArray(model.renderable.getBarSize());
+        model.boxPosition = _toConsumableArray(model.renderable.getBoxPosition());
+        model.boxSize = _toConsumableArray(model.renderable.getBoxSize());
+        model.axisTitlePixelOffset = model.renderable.getAxisTitlePixelOffset();
+        model.tickLabelPixelOffset = model.renderable.getTickLabelPixelOffset(); // rebuild the texture only when force or changed bounds, face
         // visibility changes do to change the atlas
+
         var textSizes = publicAPI.updateTextureAtlas(); // recompute bar segments based on positioning
 
         publicAPI.recomputeBarSegments(textSizes);
@@ -171,7 +234,7 @@ function vtkScalarBarActor(publicAPI, model) {
 
       if (doUpdate) {
         model.forceViewUpdate = true;
-        publicAPI.update();
+        model.renderWindow.render();
       }
     }
   }; // create the texture map atlas that contains the rendering of
@@ -191,14 +254,14 @@ function vtkScalarBarActor(publicAPI, model) {
     var totalHeight = 1; // start one pixel in so we have a border
 
     applyTextStyle(model.tmContext, model.axisTextStyle);
-    var metrics = model.tmContext.measureText(model.axisLabel);
+    var metrics = model.tmContext.measureText(model.renderable.getAxisLabel());
     var entry = {
       height: metrics.actualBoundingBoxAscent + 2,
       startingHeight: totalHeight,
       width: metrics.width + 2,
       textStyle: model.axisTextStyle
     };
-    newTmAtlas.set(model.axisLabel, entry);
+    newTmAtlas.set(model.renderable.getAxisLabel(), entry);
     totalHeight += entry.height;
     maxWidth = entry.width;
     results.titleWidth = entry.width;
@@ -207,7 +270,7 @@ function vtkScalarBarActor(publicAPI, model) {
     results.tickWidth = 0;
     results.tickHeight = 0;
     applyTextStyle(model.tmContext, model.tickTextStyle);
-    var strings = [].concat(_toConsumableArray(model.tickStrings), ['NaN', 'Below', 'Above']);
+    var strings = [].concat(_toConsumableArray(model.tickstrings), ['NaN', 'Below', 'Above']);
 
     for (var t = 0; t < strings.length; t++) {
       if (!newTmAtlas.has(strings[t])) {
@@ -319,7 +382,7 @@ function vtkScalarBarActor(publicAPI, model) {
 
 
   publicAPI.recomputeBarSegments = function (textSizes) {
-    var _model$scalarsToColor, _model$scalarsToColor2, _model$scalarsToColor3, _model$scalarsToColor4;
+    var _model$renderable$get, _model$renderable$get2, _model$renderable$get3, _model$renderable$get4;
 
     // first compute the barSize/Position
     var segSize = publicAPI.computeBarSize(textSizes);
@@ -339,22 +402,22 @@ function vtkScalarBarActor(publicAPI, model) {
       startPos[barAxis] += segSize[barAxis] + segSpace;
     }
 
-    if (model.drawNanAnnotation && model.scalarsToColors.getNanColor) {
+    if (model.renderable.getDrawNanAnnotation() && model.renderable.getScalarsToColors().getNanColor()) {
       pushSeg('NaN', [NaN, NaN, NaN, NaN]);
     }
 
-    if (model.drawBelowRangeSwatch && (_model$scalarsToColor = (_model$scalarsToColor2 = model.scalarsToColors).getUseBelowRangeColor) !== null && _model$scalarsToColor !== void 0 && _model$scalarsToColor.call(_model$scalarsToColor2)) {
+    if (model.renderable.getDrawBelowRangeSwatch() && (_model$renderable$get = (_model$renderable$get2 = model.renderable.getScalarsToColors()).getUseBelowRangeColor) !== null && _model$renderable$get !== void 0 && _model$renderable$get.call(_model$renderable$get2)) {
       pushSeg('Below', [-0.1, -0.1, -0.1, -0.1]);
     }
 
-    var haveAbove = (_model$scalarsToColor3 = (_model$scalarsToColor4 = model.scalarsToColors).getUseAboveRangeColor) === null || _model$scalarsToColor3 === void 0 ? void 0 : _model$scalarsToColor3.call(_model$scalarsToColor4); // extra space around the ticks section
+    var haveAbove = (_model$renderable$get3 = (_model$renderable$get4 = model.renderable.getScalarsToColors()).getUseAboveRangeColor) === null || _model$renderable$get3 === void 0 ? void 0 : _model$renderable$get3.call(_model$renderable$get4); // extra space around the ticks section
 
     startPos[barAxis] += segSpace;
     var oldSegSize = segSize[barAxis];
     segSize[barAxis] = haveAbove ? 1.0 - 2.0 * segSpace - segSize[barAxis] - startPos[barAxis] : 1.0 - segSpace - startPos[barAxis];
     pushSeg('ticks', model.vertical ? [0, 0, 0.995, 0.995] : [0, 0.995, 0.995, 0]);
 
-    if (model.drawAboveRangeSwatch && haveAbove) {
+    if (model.renderable.getDrawAboveRangeSwatch() && haveAbove) {
       segSize[barAxis] = oldSegSize;
       startPos[barAxis] += segSpace;
       pushSeg('Above', [1.1, 1.1, 1.1, 1.1]);
@@ -464,7 +527,7 @@ function vtkScalarBarActor(publicAPI, model) {
     } // update the polydata
 
 
-    var numLabels = model.tickStrings.length + model.barSegments.length;
+    var numLabels = model.tickstrings.length + model.barSegments.length;
     var numPts = numLabels * 4;
     var numTris = numLabels * 2;
     var points = new Float64Array(numPts * 3);
@@ -489,14 +552,14 @@ function vtkScalarBarActor(publicAPI, model) {
         tmpv3[1] = model.barPosition[1] + model.barSize[1];
         vec3.transformMat4(ptv3, tmpv3, invmat); // write the axis label
 
-        publicAPI.createPolyDataForOneLabel(model.axisLabel, ptv3, xDir, yDir, [0, 1], model.axisTitlePixelOffset, results);
+        publicAPI.createPolyDataForOneLabel(model.renderable.getAxisLabel(), ptv3, xDir, yDir, [0, 1], model.axisTitlePixelOffset, results);
       } else {
         tmpv3[0] = model.barPosition[0] + model.barSize[0];
         tmpv3[1] = model.barPosition[1] + 0.5 * model.barSize[1];
         vec3.transformMat4(ptv3, tmpv3, invmat); // write the axis label
 
         vec3.scale(xDir, xDir, -1);
-        publicAPI.createPolyDataForOneLabel(model.axisLabel, ptv3, yDir, xDir, [0, -1], model.axisTitlePixelOffset, results);
+        publicAPI.createPolyDataForOneLabel(model.renderable.getAxisLabel(), ptv3, yDir, xDir, [0, -1], model.axisTitlePixelOffset, results);
         vec3.scale(xDir, xDir, -1);
       }
 
@@ -505,7 +568,7 @@ function vtkScalarBarActor(publicAPI, model) {
       tmpv3[0] = model.barPosition[0] + 0.5 * model.barSize[0];
       tmpv3[1] = model.barPosition[1] + model.barSize[1];
       vec3.transformMat4(ptv3, tmpv3, invmat);
-      publicAPI.createPolyDataForOneLabel(model.axisLabel, ptv3, xDir, yDir, dir, model.axisTitlePixelOffset, results);
+      publicAPI.createPolyDataForOneLabel(model.renderable.getAxisLabel(), ptv3, xDir, yDir, dir, model.axisTitlePixelOffset, results);
     }
 
     tmp2v3[2] = -0.99; // near plane
@@ -536,7 +599,7 @@ function vtkScalarBarActor(publicAPI, model) {
       var tickPos = (model.ticks[t] - model.lastTickBounds[0]) / (model.lastTickBounds[1] - model.lastTickBounds[0]);
       tmp2v3[spacedAxis] = tickSegmentStart + tickSegmentSize * tickPos;
       vec3.transformMat4(ptv3, tmp2v3, invmat);
-      publicAPI.createPolyDataForOneLabel(model.tickStrings[t], ptv3, xDir, yDir, dir, model.tickLabelPixelOffset, results);
+      publicAPI.createPolyDataForOneLabel(model.tickstrings[t], ptv3, xDir, yDir, dir, model.tickLabelPixelOffset, results);
     }
 
     var tcoordDA = vtkDataArray.newInstance({
@@ -553,22 +616,23 @@ function vtkScalarBarActor(publicAPI, model) {
   };
 
   publicAPI.updatePolyDataForBarSegments = function () {
-    var _model$scalarsToColor5, _model$scalarsToColor6, _model$scalarsToColor7, _model$scalarsToColor8;
+    var _scalarsToColors$getU, _scalarsToColors$getU2;
 
     var cmat = model.camera.getCompositeProjectionMatrix(model.lastAspectRatio, -1, 1);
     mat4.transpose(cmat, cmat);
     mat4.invert(invmat, cmat);
+    var scalarsToColors = model.renderable.getScalarsToColors();
     var numberOfExtraColors = 0;
 
-    if (model.drawNanAnnotation && model.scalarsToColors.getNanColor) {
+    if (model.renderable.getDrawNanAnnotation() && scalarsToColors.getNanColor()) {
       numberOfExtraColors += 1;
     }
 
-    if (model.drawBelowRangeSwatch && (_model$scalarsToColor5 = (_model$scalarsToColor6 = model.scalarsToColors).getUseBelowRangeColor) !== null && _model$scalarsToColor5 !== void 0 && _model$scalarsToColor5.call(_model$scalarsToColor6)) {
+    if (model.renderable.getDrawBelowRangeSwatch() && (_scalarsToColors$getU = scalarsToColors.getUseBelowRangeColor) !== null && _scalarsToColors$getU !== void 0 && _scalarsToColors$getU.call(scalarsToColors)) {
       numberOfExtraColors += 1;
     }
 
-    if (model.drawAboveRangeSwatch && (_model$scalarsToColor7 = (_model$scalarsToColor8 = model.scalarsToColors).getUseAboveRangeColor) !== null && _model$scalarsToColor7 !== void 0 && _model$scalarsToColor7.call(_model$scalarsToColor8)) {
+    if (model.renderable.getDrawAboveRangeSwatch() && (_scalarsToColors$getU2 = scalarsToColors.getUseAboveRangeColor) !== null && _scalarsToColors$getU2 !== void 0 && _scalarsToColors$getU2.call(scalarsToColors)) {
       numberOfExtraColors += 1;
     }
 
@@ -577,8 +641,8 @@ function vtkScalarBarActor(publicAPI, model) {
 
     var numComps = 1;
 
-    if (model.scalarsToColors.getVectorMode() === VectorMode.COMPONENT) {
-      numComps = model.scalarsToColors.getVectorComponent() + 1;
+    if (scalarsToColors.getVectorMode() === VectorMode.COMPONENT) {
+      numComps = scalarsToColors.getVectorComponent() + 1;
     } // create the colored bars
 
 
@@ -628,14 +692,66 @@ function vtkScalarBarActor(publicAPI, model) {
     model.polyData.getPolys().modified();
     model.polyData.modified();
   };
+}
 
-  publicAPI.getActors = function () {
-    return [model.barActor, model.tmActor];
+var newScalarBarActorHelper = macro.newInstance(function (publicAPI, model) {
+  var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    renderable: null
   };
+  Object.assign(model, {}, initialValues); // Inheritance
 
-  publicAPI.getNestedProps = function () {
-    return publicAPI.getActors();
-  };
+  macro.obj(publicAPI, model);
+  macro.setGet(publicAPI, model, ['axisTitlePixelOffset', 'tickLabelPixelOffset', 'renderable', 'topTitle']);
+  macro.get(publicAPI, model, ['lastSize', 'lastAspectRatio', 'axisTextStyle', 'tickTextStyle', 'barActor', 'tmActor', 'ticks']);
+  macro.getArray(publicAPI, model, ['boxPosition', 'boxSize']);
+  macro.setArray(publicAPI, model, ['boxPosition', 'boxSize'], 2);
+  model.forceUpdate = false;
+  model.lastRedrawTime = {};
+  macro.obj(model.lastRedrawTime, {
+    mtime: 0
+  });
+  model.lastRebuildTime = {};
+  macro.obj(model.lastRebuildTime, {
+    mtime: 0
+  });
+  model.lastSize = [-1, -1];
+  model.tmCanvas = document.createElement('canvas');
+  model.tmContext = model.tmCanvas.getContext('2d');
+  model._tmAtlas = new Map();
+  model.barMapper = vtkMapper.newInstance();
+  model.barMapper.setInterpolateScalarsBeforeMapping(true);
+  model.polyData = vtkPolyData.newInstance();
+  model.barMapper.setInputData(model.polyData);
+  model.barActor = vtkActor.newInstance();
+  model.barActor.setMapper(model.barMapper); // for texture atlas
+
+  model.tmPolyData = vtkPolyData.newInstance();
+  model.tmMapper = vtkMapper.newInstance();
+  model.tmMapper.setInputData(model.tmPolyData);
+  model.tmTexture = vtkTexture.newInstance();
+  model.tmTexture.setInterpolate(false);
+  model.tmActor = vtkActor.newInstance({
+    parentProp: publicAPI
+  });
+  model.tmActor.setMapper(model.tmMapper);
+  model.tmActor.addTexture(model.tmTexture);
+  model.barPosition = [0, 0];
+  model.barSize = [0, 0];
+  model.boxPosition = [0.88, -0.92];
+  model.boxSize = [0.1, 1.1]; // internal variables
+
+  model.lastTickBounds = [];
+  vtkScalarBarActorHelper(publicAPI, model);
+}, 'vtkScalarBarActorHelper'); //
+// Now we define the public class that the application sets view independent
+// properties on. This class is fairly small as it mainly just holds
+// properties setter and getters leaving all calculations to the helper
+// class.
+//
+
+function vtkScalarBarActor(publicAPI, model) {
+  // Set our className
+  model.classHierarchy.push('vtkScalarBarActor');
 
   publicAPI.setTickTextStyle = function (tickStyle) {
     model.tickTextStyle = _objectSpread(_objectSpread({}, model.tickTextStyle), tickStyle);
@@ -647,12 +763,6 @@ function vtkScalarBarActor(publicAPI, model) {
     publicAPI.modified();
   };
 
-  var setVisibility = macro.chain(publicAPI.setVisibility, model.barActor.setVisibility, model.tmActor.setVisibility);
-
-  publicAPI.setVisibility = function () {
-    return setVisibility.apply(void 0, arguments).some(Boolean);
-  };
-
   publicAPI.resetAutoLayoutToDefault = function () {
     model.autoLayout = defaultAutoLayout(publicAPI, model);
   };
@@ -700,64 +810,6 @@ function extend(publicAPI, model) {
   vtkActor.extend(publicAPI, model, initialValues);
   publicAPI.getProperty().setDiffuse(0.0);
   publicAPI.getProperty().setAmbient(1.0);
-  model._tmAtlas = new Map(); // internal variables
-
-  model.lastSize = [800, 800];
-  model.lastAspectRatio = 1.0;
-  model.textValues = [];
-  model.lastTickBounds = [];
-  model.barMapper = vtkMapper.newInstance();
-  model.barMapper.setInterpolateScalarsBeforeMapping(true);
-  model.polyData = vtkPolyData.newInstance();
-  model.barMapper.setInputData(model.polyData);
-  model.barActor = vtkActor.newInstance({
-    parentProp: publicAPI
-  });
-  model.barActor.setMapper(model.barMapper);
-  model.barActor.setProperty(publicAPI.getProperty());
-  model.lastRedrawTime = {};
-  macro.obj(model.lastRedrawTime, {
-    mtime: 0
-  });
-  model.lastRebuildTime = {};
-  macro.obj(model.lastRebuildTime, {
-    mtime: 0
-  });
-  model.textPolyData = vtkPolyData.newInstance(); // for texture atlas
-
-  model.tmPolyData = vtkPolyData.newInstance();
-  model.tmMapper = vtkMapper.newInstance();
-  model.tmMapper.setInputData(model.tmPolyData);
-  model.tmTexture = vtkTexture.newInstance();
-  model.tmTexture.setInterpolate(false);
-  model.tmActor = vtkActor.newInstance({
-    parentProp: publicAPI
-  });
-  model.tmActor.setMapper(model.tmMapper);
-  model.tmActor.addTexture(model.tmTexture);
-  model.tmActor.setProperty(publicAPI.getProperty());
-  model.tmCanvas = document.createElement('canvas');
-  model.tmContext = model.tmCanvas.getContext('2d'); // PixelSpaceCallbackMapper - we do need an empty polydata
-  // really just used to get the window size which we need to do
-  // proper text positioning and scaling.
-
-  model.mapper = vtkPixelSpaceCallbackMapper.newInstance();
-  model.pixelMapperPolyData = vtkPolyData.newInstance();
-  model.mapper.setInputData(model.pixelMapperPolyData);
-  model.mapper.setCallback(function (coords, camera, aspect, depthValues, size) {
-    model.camera = camera;
-
-    if (model.lastSize[0] !== size[0] || model.lastSize[1] !== size[1]) {
-      model.lastSize[0] = size[0];
-      model.lastSize[1] = size[1];
-      model.lastAspectRatio = size[0] / size[1]; // we could use modified, but really the public state is not
-      // modified
-
-      model.forceUpdate = true;
-    }
-
-    publicAPI.update();
-  });
   macro.setGet(publicAPI, model, ['automated', 'autoLayout', 'axisTitlePixelOffset', 'axisLabel', 'scalarsToColors', 'tickLabelPixelOffset', 'drawNanAnnotation', 'drawBelowRangeSwatch', 'drawAboveRangeSwatch']);
   macro.get(publicAPI, model, ['axisTextStyle', 'tickTextStyle']);
   macro.getArray(publicAPI, model, ['boxPosition', 'boxSize']);
@@ -770,7 +822,8 @@ var newInstance = macro.newInstance(extend, 'vtkScalarBarActor'); // -----------
 
 var vtkScalarBarActor$1 = {
   newInstance: newInstance,
-  extend: extend
+  extend: extend,
+  newScalarBarActorHelper: newScalarBarActorHelper
 };
 
 export { vtkScalarBarActor$1 as default, extend, newInstance };

package/Rendering/OpenGL/Profiles/All.js

@@ -4,6 +4,7 @@ import '../Actor.js';
 import '../Actor2D.js';
 import '../PolyDataMapper.js';
 import '../PolyDataMapper2D.js';
+import '../ScalarBarActor.js';
 import '../Skybox.js';
 import '../Texture.js';
 import '../Glyph3DMapper.js';

package/Rendering/OpenGL/Profiles/Geometry.js

@@ -4,6 +4,7 @@ import '../Actor.js';
 import '../Actor2D.js';
 import '../PolyDataMapper.js';
 import '../PolyDataMapper2D.js';
+import '../ScalarBarActor.js';
 import '../Skybox.js';
 import '../Texture.js';
 import '../PixelSpaceCallbackMapper.js';

package/Rendering/OpenGL/ScalarBarActor.js

@@ -0,0 +1,61 @@
+import { newInstance as newInstance$1 } from '../../macros.js';
+import vtkScalarBarActor from '../Core/ScalarBarActor.js';
+import vtkViewNode from '../SceneGraph/ViewNode.js';
+import { registerOverride } from './ViewNodeFactory.js';
+
+// vtkOpenGLScalarBarActor methods
+// ----------------------------------------------------------------------------
+
+function vtkOpenGLScalarBarActor(publicAPI, model) {
+  model.classHierarchy.push('vtkOpenGLScalarBarActor'); // Builds myself.
+
+  publicAPI.buildPass = function (prepass) {
+    if (prepass) {
+      model.openGLRenderer = publicAPI.getFirstAncestorOfType('vtkOpenGLRenderer');
+      model.openGLRenderWindow = model.openGLRenderer.getParent();
+
+      if (!model.scalarBarActorHelper.getRenderable()) {
+        model.scalarBarActorHelper.setRenderable(model.renderable);
+      }
+
+      publicAPI.prepareNodes();
+      publicAPI.addMissingNode(model.scalarBarActorHelper.getBarActor());
+      publicAPI.addMissingNode(model.scalarBarActorHelper.getTmActor());
+      publicAPI.removeUnusedNodes();
+    }
+  };
+
+  publicAPI.opaquePass = function (prepass, renderPass) {
+    if (prepass) {
+      var camera = model.openGLRenderer ? model.openGLRenderer.getRenderable().getActiveCamera() : null;
+      var tsize = model.openGLRenderer.getTiledSizeAndOrigin();
+      model.scalarBarActorHelper.updateAPISpecificData([tsize.usize, tsize.vsize], camera, model.openGLRenderWindow.getRenderable());
+    }
+  };
+} // ----------------------------------------------------------------------------
+// Object factory
+// ----------------------------------------------------------------------------
+
+
+var DEFAULT_VALUES = {}; // ----------------------------------------------------------------------------
+
+function extend(publicAPI, model) {
+  var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  Object.assign(model, DEFAULT_VALUES, initialValues); // Inheritance
+
+  vtkViewNode.extend(publicAPI, model, initialValues);
+  model.scalarBarActorHelper = vtkScalarBarActor.newScalarBarActorHelper(); // Object methods
+
+  vtkOpenGLScalarBarActor(publicAPI, model);
+} // ----------------------------------------------------------------------------
+
+var newInstance = newInstance$1(extend, 'vtkOpenGLScalarBarActor'); // ----------------------------------------------------------------------------
+
+var index = {
+  newInstance: newInstance,
+  extend: extend
+}; // Register ourself to OpenGL backend if imported
+
+registerOverride('vtkScalarBarActor', newInstance);
+
+export { index as default, extend, newInstance };

package/Rendering/Profiles/All.js

@@ -4,6 +4,7 @@ import '../OpenGL/Actor.js';
 import '../OpenGL/Actor2D.js';
 import '../OpenGL/PolyDataMapper.js';
 import '../OpenGL/PolyDataMapper2D.js';
+import '../OpenGL/ScalarBarActor.js';
 import '../OpenGL/Skybox.js';
 import '../OpenGL/Texture.js';
 import '../OpenGL/Glyph3DMapper.js';
@@ -19,6 +20,7 @@ import '../WebGPU/Camera.js';
 import '../WebGPU/Renderer.js';
 import '../WebGPU/Actor.js';
 import '../WebGPU/PolyDataMapper.js';
+import '../WebGPU/ScalarBarActor.js';
 import '../WebGPU/Texture.js';
 import '../WebGPU/Glyph3DMapper.js';
 import '../WebGPU/ImageMapper.js';

package/Rendering/Profiles/Geometry.js

@@ -4,6 +4,7 @@ import '../OpenGL/Actor.js';
 import '../OpenGL/Actor2D.js';
 import '../OpenGL/PolyDataMapper.js';
 import '../OpenGL/PolyDataMapper2D.js';
+import '../OpenGL/ScalarBarActor.js';
 import '../OpenGL/Skybox.js';
 import '../OpenGL/Texture.js';
 import '../OpenGL/PixelSpaceCallbackMapper.js';
@@ -11,5 +12,6 @@ import '../WebGPU/Camera.js';
 import '../WebGPU/Renderer.js';
 import '../WebGPU/Actor.js';
 import '../WebGPU/PolyDataMapper.js';
+import '../WebGPU/ScalarBarActor.js';
 import '../WebGPU/Texture.js';
 import '../WebGPU/PixelSpaceCallbackMapper.js';

package/Rendering/WebGPU/HardwareSelectionPass.js

@@ -84,8 +84,8 @@ function vtkWebGPUHardwareSelectionPass(publicAPI, model) {
       fDesc.setCode(code);
     });
     var renDesc = model.selectionRenderEncoder.getDescription();
-    renDesc.colorAttachments[0].loadValue = [0.0, 0.0, 0.0, 0.0];
-    renDesc.depthStencilAttachment.stencilLoadValue = 'load';
+    renDesc.colorAttachments[0].clearValue = [0.0, 0.0, 0.0, 0.0];
+    renDesc.depthStencilAttachment.stencilLoadOp = 'load';
     model.selectionRenderEncoder.setPipelineSettings({
       primitive: {
         cullMode: 'none'

package/Rendering/WebGPU/OrderIndependentTranslucentPass.js

@@ -96,18 +96,20 @@ function vtkWebGPUOrderIndependentTranslucentPass(publicAPI, model) {
     var rDesc = model.translucentRenderEncoder.getDescription();
     rDesc.colorAttachments = [{
       view: undefined,
-      loadValue: [0.0, 0.0, 0.0, 0.0],
+      clearValue: [0.0, 0.0, 0.0, 0.0],
+      loadOp: 'clear',
       storeOp: 'store'
     }, {
       view: undefined,
-      loadValue: [1.0, 0.0, 0.0, 0.0],
+      clearValue: [1.0, 0.0, 0.0, 0.0],
+      loadOp: 'clear',
       storeOp: 'store'
     }];
     rDesc.depthStencilAttachment = {
       view: undefined,
-      depthLoadValue: 'load',
+      depthLoadOp: 'load',
       depthStoreOp: 'store',
-      stencilLoadValue: 'load',
+      stencilLoadOp: 'load',
       stencilStoreOp: 'store'
     };
     model.translucentRenderEncoder.setReplaceShaderCodeFunction(function (pipeline) {
@@ -167,7 +169,7 @@ function vtkWebGPUOrderIndependentTranslucentPass(publicAPI, model) {
     model.translucentFinalEncoder.setDescription({
       colorAttachments: [{
         view: null,
-        loadValue: 'load',
+        loadOp: 'load',
         storeOp: 'store'
       }]
     });

package/Rendering/WebGPU/Profiles/All.js

@@ -2,6 +2,7 @@ import '../Camera.js';
 import '../Renderer.js';
 import '../Actor.js';
 import '../PolyDataMapper.js';
+import '../ScalarBarActor.js';
 import '../Texture.js';
 import '../Glyph3DMapper.js';
 import '../ImageMapper.js';

package/Rendering/WebGPU/Profiles/Geometry.js

@@ -2,5 +2,6 @@ import '../Camera.js';
 import '../Renderer.js';
 import '../Actor.js';
 import '../PolyDataMapper.js';
+import '../ScalarBarActor.js';
 import '../Texture.js';
 import '../PixelSpaceCallbackMapper.js';

package/Rendering/WebGPU/RenderEncoder.js

@@ -138,14 +138,16 @@ function extend(publicAPI, model) {
   model.description = {
     colorAttachments: [{
       view: undefined,
-      loadValue: 'load',
+      loadOp: 'load',
       storeOp: 'store'
     }],
     depthStencilAttachment: {
       view: undefined,
-      depthLoadValue: 0.0,
+      depthLoadOp: 'clear',
+      depthClearValue: 0.0,
       depthStoreOp: 'store',
-      stencilLoadValue: 0,
+      stencilLoadOp: 'clear',
+      stencilClearValue: 0,
       stencilStoreOp: 'store'
     }
   }; // default shader code just writes out the computedColor

package/Rendering/WebGPU/ScalarBarActor.js

@@ -0,0 +1,61 @@
+import { newInstance as newInstance$1 } from '../../macros.js';
+import vtkScalarBarActor from '../Core/ScalarBarActor.js';
+import vtkViewNode from '../SceneGraph/ViewNode.js';
+import { registerOverride } from './ViewNodeFactory.js';
+
+// vtkWebGPUScalarBarActor methods
+// ----------------------------------------------------------------------------
+
+function vtkWebGPUScalarBarActor(publicAPI, model) {
+  model.classHierarchy.push('vtkWebGPUScalarBarActor'); // Builds myself.
+
+  publicAPI.buildPass = function (prepass) {
+    if (prepass) {
+      model.WebGPURenderer = publicAPI.getFirstAncestorOfType('vtkWebGPURenderer');
+      model.WebGPURenderWindow = model.WebGPURenderer.getParent();
+
+      if (!model.scalarBarActorHelper.getRenderable()) {
+        model.scalarBarActorHelper.setRenderable(model.renderable);
+      }
+
+      publicAPI.prepareNodes();
+      publicAPI.addMissingNode(model.scalarBarActorHelper.getBarActor());
+      publicAPI.addMissingNode(model.scalarBarActorHelper.getTmActor());
+      publicAPI.removeUnusedNodes();
+    }
+  };
+
+  publicAPI.opaquePass = function (prepass, renderPass) {
+    if (prepass) {
+      var camera = model.WebGPURenderer ? model.WebGPURenderer.getRenderable().getActiveCamera() : null;
+      var tsize = model.WebGPURenderer.getTiledSizeAndOrigin();
+      model.scalarBarActorHelper.updateAPISpecificData([tsize.usize, tsize.vsize], camera, model.WebGPURenderWindow.getRenderable());
+    }
+  };
+} // ----------------------------------------------------------------------------
+// Object factory
+// ----------------------------------------------------------------------------
+
+
+var DEFAULT_VALUES = {}; // ----------------------------------------------------------------------------
+
+function extend(publicAPI, model) {
+  var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  Object.assign(model, DEFAULT_VALUES, initialValues); // Inheritance
+
+  vtkViewNode.extend(publicAPI, model, initialValues);
+  model.scalarBarActorHelper = vtkScalarBarActor.newScalarBarActorHelper(); // Object methods
+
+  vtkWebGPUScalarBarActor(publicAPI, model);
+} // ----------------------------------------------------------------------------
+
+var newInstance = newInstance$1(extend, 'vtkWebGPUScalarBarActor'); // ----------------------------------------------------------------------------
+
+var index = {
+  newInstance: newInstance,
+  extend: extend
+}; // Register ourself to WebGPU backend if imported
+
+registerOverride('vtkScalarBarActor', newInstance);
+
+export { index as default, extend, newInstance };

package/Rendering/WebGPU/VolumePass.js

@@ -206,14 +206,20 @@ function vtkWebGPUVolumePass(publicAPI, model) {
     if (!model._animationRateSubscription) {
       // when the animation frame rate changes recompute the scale factor
       model._animationRateSubscription = rwi.onAnimationFrameRateUpdate(function () {
-        var frate = rwi.getRecentAnimationFrameRate();
-        var targetScale = model._lastScale * rwi.getDesiredUpdateRate() / frate;
-        model._lastScale = targetScale; // clamp scale to some reasonable values.
-        // Below 1.5 we will just be using full resolution as that is close enough
-        // Above 400 seems like a lot so we limit to that 1/20th per axis
-
-        if (model._lastScale > 400) {
-          model._lastScale = 400;
+        var firstMapper = model.volumes[0].getRenderable().getMapper();
+
+        if (firstMapper.getAutoAdjustSampleDistances()) {
+          var frate = rwi.getRecentAnimationFrameRate();
+          var targetScale = model._lastScale * rwi.getDesiredUpdateRate() / frate;
+          model._lastScale = targetScale; // clamp scale to some reasonable values.
+          // Below 1.5 we will just be using full resolution as that is close enough
+          // Above 400 seems like a lot so we limit to that 1/20th per axis
+
+          if (model._lastScale > 400) {
+            model._lastScale = 400;
+          }
+        } else {
+          model._lastScale = firstMapper.getImageSampleDistance() * firstMapper.getImageSampleDistance();
         }
 
         if (model._lastScale < 1.5) {
@@ -384,11 +390,13 @@ function vtkWebGPUVolumePass(publicAPI, model) {
     model._depthRangeEncoder.setDescription({
       colorAttachments: [{
         view: null,
-        loadValue: [0.0, 0.0, 0.0, 0.0],
+        clearValue: [0.0, 0.0, 0.0, 0.0],
+        loadOp: 'clear',
         storeOp: 'store'
       }, {
         view: null,
-        loadValue: [1.0, 1.0, 1.0, 1.0],
+        clearValue: [1.0, 1.0, 1.0, 1.0],
+        loadOp: 'clear',
         storeOp: 'store'
       }]
     });
@@ -498,7 +506,8 @@ function vtkWebGPUVolumePass(publicAPI, model) {
     model._clearEncoder.setDescription({
       colorAttachments: [{
         view: null,
-        loadValue: [0.0, 0.0, 0.0, 0.0],
+        clearValue: [0.0, 0.0, 0.0, 0.0],
+        loadOp: 'clear',
         storeOp: 'store'
       }]
     });
@@ -535,7 +544,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
     model._copyEncoder.setDescription({
       colorAttachments: [{
         view: null,
-        loadValue: 'load',
+        loadOp: 'load',
         storeOp: 'store'
       }]
     });
@@ -574,7 +583,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
     model._mergeEncoder.setDescription({
       colorAttachments: [{
         view: null,
-        loadValue: 'load',
+        loadOp: 'load',
         storeOp: 'store'
       }]
     });

package/Rendering/WebGPU/VolumePassFSQ.js

@@ -9,7 +9,7 @@ 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\n  // divide by spacing\n  result = result / volumeSSBO.values[vNum].spacing;\n\n  var grad: f32 = length(result.xyz);\n\n  // // rotate to View Coords, needed for lighting and shading\n  // result.xyz =\n  //   result.x * vPlaneNormal0 +\n  //   result.y * vPlaneNormal2 +\n  //   result.z * vPlaneNormal4;\n\n  if (grad > 0.0)\n  {\n    result = result * (1.0 / grad);\n  }\n\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  if (componentSSBO.values[cNum].gomin <  1.0)\n  {\n    var normal: vec4<f32> = getGradient(vTex, tpos, vNum, scalar);\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  coord.x = (scalar * componentSSBO.values[cNum].oScale + componentSSBO.values[cNum].oShift);\n  var opacity: f32 = textureSampleLevel(ofunTexture, clampSampler, coord, 0.0).r;\n\n  outColor = vec4<f32>(color.rgb, gofactor * opacity);\n\n//VTK::Volume::Process\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@stage(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 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@stage(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); // ----------------------------------------------------------------------------
 // vtkWebGPUVolumePassFSQ methods
@@ -240,7 +240,9 @@ function vtkWebGPUVolumePassFSQ(publicAPI, model) {
     //
 
     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);
 
@@ -277,10 +279,20 @@ function vtkWebGPUVolumePassFSQ(publicAPI, model) {
         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;
+      }
+
       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();
 
@@ -299,10 +311,14 @@ function vtkWebGPUVolumePassFSQ(publicAPI, model) {
     }
 
     model.SSBO.addEntry('SCTCMatrix', 'mat4x4<f32>');
+    model.SSBO.addEntry('planeNormals', 'mat4x4<f32>');
+    model.SSBO.addEntry('shade', 'vec4<f32>');
     model.SSBO.addEntry('tstep', 'vec4<f32>');
     model.SSBO.addEntry('spacing', 'vec4<f32>');
     model.SSBO.addEntry('ipScalarRange', 'vec4<f32>');
     model.SSBO.setAllInstancesFromArray('SCTCMatrix', marray);
+    model.SSBO.setAllInstancesFromArray('planeNormals', vPlaneArray);
+    model.SSBO.setAllInstancesFromArray('shade', shadeArray);
     model.SSBO.setAllInstancesFromArray('tstep', tstepArray);
     model.SSBO.setAllInstancesFromArray('spacing', spacingArray);
     model.SSBO.setAllInstancesFromArray('ipScalarRange', ipScalarRangeArray);

package/Widgets/Widgets3D/ShapeWidget/behavior.js

@@ -388,7 +388,7 @@ function widgetBehavior(publicAPI, model) {
       publicAPI.invokeInteractionEvent();
     }
 
-    return model.hasFocus ? macro.EVENT_ABORT : macro.VOID;
+    return model.hasFocus || model.isDragging ? macro.EVENT_ABORT : macro.VOID;
   }; // --------------------------------------------------------------------------
   // Left click: Add point / End interaction
   // --------------------------------------------------------------------------

package/package.json

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