@kitware/vtk.js 21.6.1 → 22.1.0

package/Rendering/WebGPU/BufferManager.js

@@ -6,9 +6,9 @@ import vtkWebGPUTypes from './Types.js';
 import vtkProperty from '../Core/Property.js';
 import Constants from './BufferManager/Constants.js';
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BufferUsage = Constants.BufferUsage,
     PrimitiveTypes = Constants.PrimitiveTypes;
 var Representation = vtkProperty.Representation;

package/Rendering/WebGPU/Glyph3DMapper.js

@@ -6,9 +6,9 @@ import vtkWebGPUShaderCache from './ShaderCache.js';
 import vtkWebGPUBufferManager from './BufferManager.js';
 import { registerOverride } from './ViewNodeFactory.js';
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var PrimitiveTypes = vtkWebGPUBufferManager.PrimitiveTypes; // ----------------------------------------------------------------------------
 // vtkWebGPUSphereMapper methods
 // ----------------------------------------------------------------------------

package/Rendering/WebGPU/HardwareSelector.js

@@ -247,7 +247,7 @@ function vtkWebGPUHardwareSelector(publicAPI, model) {
               model.WebGPURenderWindow.initialize();
               _context.next = 8;
               return new Promise(function (resolve) {
-                return model.WebGPURenderWindow.onInitialized(resolve);
+                model.WebGPURenderWindow.onInitialized(resolve);
               });
 
             case 8:

package/Rendering/WebGPU/MapperHelper.js

@@ -32,7 +32,8 @@ function vtkWebGPUMapperHelper(publicAPI, model) {
     sdrs.push(vDesc);
     sdrs.push(fDesc); // look for replacements to invoke
 
-    var scode = model.vertexShaderTemplate + model.fragmentShaderTemplate;
+    var scode = model.vertexShaderTemplate + model.fragmentShaderTemplate; // eslint-disable-next-line prefer-regex-literals
+
     var re = new RegExp('//VTK::[^:]*::', 'g');
     var unique = scode.match(re).filter(function (v, i, a) {
       return a.indexOf(v) === i;

package/Rendering/WebGPU/PolyDataMapper.js

@@ -245,8 +245,8 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
       case BufferUsage.Verts:
         return 'point-list';
 
-      default:
       case BufferUsage.Lines:
+      default:
         return 'line-list';
     }
   };

package/Rendering/WebGPU/TextureManager.js

@@ -45,9 +45,9 @@ function vtkWebGPUTextureManager(publicAPI, model) {
           req.format = 'rg';
           break;
 
-        default:
         case 3:
         case 4:
+        default:
           req.format = 'rgba';
           break;
       }

package/Rendering/WebGPU/VolumePass.js

@@ -8,7 +8,9 @@ import vtkWebGPUMapperHelper from './MapperHelper.js';
 import vtkWebGPURenderEncoder from './RenderEncoder.js';
 import vtkWebGPUShaderCache from './ShaderCache.js';
 import vtkWebGPUTexture from './Texture.js';
+import vtkWebGPUFullScreenQuad from './FullScreenQuad.js';
 import vtkWebGPUVolumePassFSQ from './VolumePassFSQ.js';
+import { f as distance2BetweenPoints } from '../../Common/Core/Math/index.js';
 
 var Representation = vtkProperty.Representation;
 var BufferUsage = vtkWebGPUBufferManager.BufferUsage,
@@ -31,6 +33,7 @@ var BufferUsage = vtkWebGPUBufferManager.BufferUsage,
 
 var cubeFaceTriangles = [[0, 4, 6], [0, 6, 2], [1, 3, 7], [1, 7, 5], [0, 5, 4], [0, 1, 5], [2, 6, 7], [2, 7, 3], [0, 3, 1], [0, 2, 3], [4, 5, 7], [4, 7, 6]];
 var DepthBoundsFS = "\n//VTK::Renderer::Dec\n\n//VTK::Select::Dec\n\n//VTK::VolumePass::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::IOStructs::Dec\n\n[[stage(fragment)]]\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output : fragmentOutput;\n\n  //VTK::Select::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::VolumePass::Impl\n\n  // use the maximum (closest) of the current value and the zbuffer\n  // the blend func will then take the min to find the farthest stop value\n  var stopval: f32 = max(input.fragPos.z, textureLoad(opaquePassDepthTexture, vec2<i32>(i32(input.fragPos.x), i32(input.fragPos.y)), 0));\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n";
+var volumeCopyFragTemplate = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::IOStructs::Dec\n\n[[stage(fragment)]]\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output: fragmentOutput;\n\n  var computedColor: vec4<f32> = textureSample(volumePassSmallColorTexture,\n    volumePassSmallColorTextureSampler, input.tcoordVS);\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n";
 /* eslint-disable no-undef */
 
 /* eslint-disable no-bitwise */
@@ -38,7 +41,41 @@ var DepthBoundsFS = "\n//VTK::Renderer::Dec\n\n//VTK::Select::Dec\n\n//VTK::Volu
 
 function vtkWebGPUVolumePass(publicAPI, model) {
   // Set our className
-  model.classHierarchy.push('vtkWebGPUVolumePass');
+  model.classHierarchy.push('vtkWebGPUVolumePass'); // create the required textures, encoders, FSQ etc
+
+  publicAPI.initialize = function (viewNode) {
+    if (!model._mergeEncoder) {
+      publicAPI.createMergeEncoder(viewNode);
+    }
+
+    if (!model._clearEncoder) {
+      publicAPI.createClearEncoder(viewNode);
+    }
+
+    if (!model._copyEncoder) {
+      publicAPI.createCopyEncoder(viewNode);
+    }
+
+    if (!model._depthRangeEncoder) {
+      publicAPI.createDepthRangeEncoder(viewNode);
+    }
+
+    if (!model.fullScreenQuad) {
+      model.fullScreenQuad = vtkWebGPUVolumePassFSQ.newInstance();
+      model.fullScreenQuad.setDevice(viewNode.getDevice());
+      model.fullScreenQuad.setTextureViews(_toConsumableArray(model._depthRangeEncoder.getColorTextureViews()));
+    }
+
+    if (!model._volumeCopyQuadQuad) {
+      model._volumeCopyQuad = vtkWebGPUFullScreenQuad.newInstance();
+
+      model._volumeCopyQuad.setPipelineHash('volpassfsq');
+
+      model._volumeCopyQuad.setDevice(viewNode.getDevice());
+
+      model._volumeCopyQuad.setFragmentShaderTemplate(volumeCopyFragTemplate);
+    }
+  };
 
   publicAPI.traverse = function (renNode, viewNode) {
     if (model.deleted) {
@@ -46,28 +83,159 @@ function vtkWebGPUVolumePass(publicAPI, model) {
     } // we just render our delegates in order
 
 
-    model.currentParent = viewNode; // first render the boxes to generate a min max depth
+    model.currentParent = viewNode; // create stuff we need
+
+    publicAPI.initialize(viewNode); // determine if we are rendering a small size
+
+    publicAPI.computeTiming(viewNode); // first render the boxes to generate a min max depth
     // map for all the volumes
 
-    publicAPI.renderDepthBounds(renNode, viewNode); // then perform the ray casting using the depth bounds texture
+    publicAPI.renderDepthBounds(renNode, viewNode); // always mark true
+
+    model._firstGroup = true;
+    var device = viewNode.getDevice(); // determine how many volumes we can render at a time. We subtract
+    // 4 because we use know we use textures for min, max, ofun and tfun
+
+    var maxVolumes = device.getHandle().limits.maxSampledTexturesPerShaderStage - 4; // if we have to make multiple passes then break the volumes up into groups
+    // rendered from farthest to closest
+
+    if (model.volumes.length > maxVolumes) {
+      var cameraPos = renNode.getRenderable().getActiveCamera().getPosition(); // sort from back to front based on volume centroid
+
+      var distances = [];
+
+      for (var v = 0; v < model.volumes.length; v++) {
+        var bounds = model.volumes[v].getRenderable().getBounds();
+        var centroid = [0.5 * (bounds[1] + bounds[0]), 0.5 * (bounds[3] + bounds[2]), 0.5 * (bounds[5] + bounds[4])];
+        distances[v] = distance2BetweenPoints(centroid, cameraPos);
+      } // sort by distance
+
+
+      var volumeOrder = _toConsumableArray(Array(model.volumes.length).keys());
+
+      volumeOrder.sort(function (a, b) {
+        return distances[b] - distances[a];
+      }); // render in chunks back to front
+
+      var volumesToRender = []; // start with smallest chunk so that the last (closest) chunk
+      // has a full maxVolumes;
+
+      var chunkSize = volumeOrder.length % maxVolumes;
+
+      for (var _v = 0; _v < volumeOrder.length; _v++) {
+        volumesToRender.push(model.volumes[volumeOrder[_v]]);
+
+        if (volumesToRender.length >= chunkSize) {
+          publicAPI.rayCastPass(viewNode, renNode, volumesToRender);
+          volumesToRender = [];
+          chunkSize = maxVolumes;
+          model._firstGroup = false;
+        }
+      }
+    } else {
+      // if not rendering in chunks then just draw all of them at once
+      publicAPI.rayCastPass(viewNode, renNode, model.volumes);
+    } // copy back to the original color buffer
+
+
+    if (model.small) {
+      model._volumeCopyQuad.setTextureViews([model._smallColorTextureView]);
+    } else {
+      model._volumeCopyQuad.setTextureViews([model._largeColorTextureView]);
+    } // final composite
+
+
+    model._copyEncoder.setColorTextureView(0, model.colorTextureView);
+
+    model._copyEncoder.attachTextureViews();
+
+    renNode.setRenderEncoder(model._copyEncoder);
+
+    model._copyEncoder.begin(viewNode.getCommandEncoder());
+
+    renNode.scissorAndViewport(model._copyEncoder);
+
+    model._volumeCopyQuad.setWebGPURenderer(renNode);
 
-    if (!model.finalEncoder) {
-      publicAPI.createFinalEncoder(viewNode);
+    model._volumeCopyQuad.render(model._copyEncoder, viewNode.getDevice());
+
+    model._copyEncoder.end();
+  }; // unsubscribe from our listeners
+
+
+  publicAPI.delete = macro.chain(function () {
+    if (model._animationRateSubscription) {
+      model._animationRateSubscription.unsubscribe();
+
+      model._animationRateSubscription = null;
+    }
+  }, publicAPI.delete);
+
+  publicAPI.computeTiming = function (viewNode) {
+    model.small = false;
+    var rwi = viewNode.getRenderable().getInteractor();
+
+    if (rwi.isAnimating() && model._lastScale > 1.5) {
+      model.small = true;
+    }
+
+    if (model.small) {
+      model._activeColorTextureView = model._smallColorTextureView;
+    } else {
+      model._largeColorTexture.resize(viewNode.getCanvas().width, viewNode.getCanvas().height);
+
+      model._activeColorTextureView = model._largeColorTextureView;
     }
 
-    publicAPI.finalPass(viewNode, renNode);
+    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; // Do we need a resize? The values below are to provide some stickyness
+        // so that we are not changing texture size every second. Instead the targhet scale
+        // has to be a certain amount larger or smaller than the current value to force a
+        // change in texture size
+
+        if (targetScale > 1.4 * model._lastScale || targetScale < 0.7 * model._lastScale) {
+          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;
+          }
+
+          if (model._lastScale < 1.5) {
+            model._lastScale = 1.5;
+          } else {
+            var targetSmallWidth = 64 * Math.ceil(viewNode.getCanvas().width / (Math.sqrt(model._lastScale) * 64));
+            var targetSmallHeight = Math.ceil(targetSmallWidth * viewNode.getCanvas().height / viewNode.getCanvas().width);
+
+            model._smallColorTexture.resize(targetSmallWidth, targetSmallHeight);
+          }
+        }
+      });
+    }
   };
 
-  publicAPI.finalPass = function (viewNode, renNode) {
-    model.finalEncoder.setColorTextureView(0, model.colorTextureView);
-    model.finalEncoder.attachTextureViews();
-    renNode.setRenderEncoder(model.finalEncoder);
-    model.finalEncoder.begin(viewNode.getCommandEncoder());
-    renNode.scissorAndViewport(model.finalEncoder);
+  publicAPI.rayCastPass = function (viewNode, renNode, volumes) {
+    var encoder = model._firstGroup ? model._clearEncoder : model._mergeEncoder;
+    encoder.setColorTextureView(0, model._activeColorTextureView);
+    encoder.attachTextureViews();
+    renNode.setRenderEncoder(encoder);
+    encoder.begin(viewNode.getCommandEncoder());
+
+    var width = model._activeColorTextureView.getTexture().getWidth();
+
+    var height = model._activeColorTextureView.getTexture().getHeight();
+
+    encoder.getHandle().setViewport(0, 0, width, height, 0.0, 1.0); // set scissor
+
+    encoder.getHandle().setScissorRect(0, 0, width, height);
     model.fullScreenQuad.setWebGPURenderer(renNode);
-    model.fullScreenQuad.setVolumes(model.volumes);
-    model.fullScreenQuad.render(model.finalEncoder, viewNode.getDevice());
-    model.finalEncoder.end();
+    model.fullScreenQuad.setVolumes(volumes);
+    model.fullScreenQuad.render(encoder, viewNode.getDevice());
+    encoder.end();
   };
 
   publicAPI.renderDepthBounds = function (renNode, viewNode) {
@@ -114,7 +282,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
 
     var stime = renNode.getStabilizedTime();
 
-    if (!model._lastMTimes[model.volumes.length] || stime !== model._lastMTimes[model.volumes.length]) {
+    if (model._lastMTimes.length <= model.volumes.length || stime !== model._lastMTimes[model.volumes.length]) {
       update = true;
       model._lastMTimes[model.volumes.length] = stime;
     } // if no need to update then return
@@ -165,55 +333,32 @@ function vtkWebGPUVolumePass(publicAPI, model) {
   publicAPI.drawDepthRange = function (renNode, viewNode) {
     var device = viewNode.getDevice(); // copy current depth buffer to
 
-    if (!model.depthRangeEncoder) {
-      publicAPI.createDepthRangeEncoder();
-      model.depthRangeTexture = vtkWebGPUTexture.newInstance();
-      model.depthRangeTexture.create(device, {
-        width: viewNode.getCanvas().width,
-        height: viewNode.getCanvas().height,
-        format: 'r16float',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-      });
-      var maxView = model.depthRangeTexture.createView();
-      maxView.setName('maxTexture');
-      model.depthRangeEncoder.setColorTextureView(0, maxView);
-      model.depthRangeTexture2 = vtkWebGPUTexture.newInstance();
-      model.depthRangeTexture2.create(device, {
-        width: viewNode.getCanvas().width,
-        height: viewNode.getCanvas().height,
-        format: 'r16float',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-      });
-      var minView = model.depthRangeTexture2.createView();
-      minView.setName('minTexture');
-      model.depthRangeEncoder.setColorTextureView(1, minView);
+    model._depthRangeTexture.resizeToMatch(model.colorTextureView.getTexture());
 
-      model._mapper.setDevice(viewNode.getDevice());
+    model._depthRangeTexture2.resizeToMatch(model.colorTextureView.getTexture());
 
-      model._mapper.setTextureViews([model.depthTextureView]);
-    } else {
-      model.depthRangeTexture.resizeToMatch(model.colorTextureView.getTexture());
-      model.depthRangeTexture2.resizeToMatch(model.colorTextureView.getTexture());
-    }
+    model._depthRangeEncoder.attachTextureViews();
 
-    model.depthRangeEncoder.attachTextureViews();
     publicAPI.setCurrentOperation('volumeDepthRangePass');
-    renNode.setRenderEncoder(model.depthRangeEncoder);
+    renNode.setRenderEncoder(model._depthRangeEncoder);
     renNode.volumeDepthRangePass(true);
 
     model._mapper.setWebGPURenderer(renNode);
 
-    model._mapper.build(model.depthRangeEncoder, device);
+    model._mapper.build(model._depthRangeEncoder, device);
 
     model._mapper.registerToDraw();
 
     renNode.volumeDepthRangePass(false);
   };
 
-  publicAPI.createDepthRangeEncoder = function () {
-    model.depthRangeEncoder = vtkWebGPURenderEncoder.newInstance();
-    model.depthRangeEncoder.setPipelineHash('volr');
-    model.depthRangeEncoder.setReplaceShaderCodeFunction(function (pipeline) {
+  publicAPI.createDepthRangeEncoder = function (viewNode) {
+    var device = viewNode.getDevice();
+    model._depthRangeEncoder = vtkWebGPURenderEncoder.newInstance();
+
+    model._depthRangeEncoder.setPipelineHash('volr');
+
+    model._depthRangeEncoder.setReplaceShaderCodeFunction(function (pipeline) {
       var fDesc = pipeline.getShaderDescription('fragment');
       fDesc.addOutput('vec4<f32>', 'outColor1');
       fDesc.addOutput('vec4<f32>', 'outColor2');
@@ -221,7 +366,8 @@ function vtkWebGPUVolumePass(publicAPI, model) {
       code = vtkWebGPUShaderCache.substitute(code, '//VTK::RenderEncoder::Impl', ['output.outColor1 = vec4<f32>(input.fragPos.z, 0.0, 0.0, 0.0);', 'output.outColor2 = vec4<f32>(stopval, 0.0, 0.0, 0.0);']).result;
       fDesc.setCode(code);
     });
-    model.depthRangeEncoder.setDescription({
+
+    model._depthRangeEncoder.setDescription({
       colorAttachments: [{
         view: null,
         loadValue: [0.0, 0.0, 0.0, 0.0],
@@ -232,7 +378,8 @@ function vtkWebGPUVolumePass(publicAPI, model) {
         storeOp: 'store'
       }]
     });
-    model.depthRangeEncoder.setPipelineSettings({
+
+    model._depthRangeEncoder.setPipelineSettings({
       primitive: {
         cullMode: 'none'
       },
@@ -267,30 +414,184 @@ function vtkWebGPUVolumePass(publicAPI, model) {
           }
         }]
       }
+    }); // and the textures it needs
+
+
+    model._depthRangeTexture = vtkWebGPUTexture.newInstance();
+
+    model._depthRangeTexture.create(device, {
+      width: viewNode.getCanvas().width,
+      height: viewNode.getCanvas().height,
+      format: 'r16float',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+    });
+
+    var maxView = model._depthRangeTexture.createView();
+
+    maxView.setName('maxTexture');
+
+    model._depthRangeEncoder.setColorTextureView(0, maxView);
+
+    model._depthRangeTexture2 = vtkWebGPUTexture.newInstance();
+
+    model._depthRangeTexture2.create(device, {
+      width: viewNode.getCanvas().width,
+      height: viewNode.getCanvas().height,
+      format: 'r16float',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+    });
+
+    var minView = model._depthRangeTexture2.createView();
+
+    minView.setName('minTexture');
+
+    model._depthRangeEncoder.setColorTextureView(1, minView);
+
+    model._mapper.setDevice(viewNode.getDevice());
+
+    model._mapper.setTextureViews([model.depthTextureView]);
+  };
+
+  publicAPI.createClearEncoder = function (viewNode) {
+    model._smallColorTexture = vtkWebGPUTexture.newInstance(); // multiple of 64 pixels to help with texture alignment/size issues
+    // as webgpu textures have to be multiples of 256 bytes wide
+    // for data transfers (just in case)
+
+    var targetSmallWidth = 64 * Math.ceil(0.7 * viewNode.getCanvas().width / 64);
+
+    model._smallColorTexture.create(viewNode.getDevice(), {
+      width: targetSmallWidth,
+      height: Math.ceil(targetSmallWidth * viewNode.getCanvas().height / viewNode.getCanvas().width),
+      format: 'bgra8unorm',
+
+      /* eslint-disable no-undef */
+
+      /* eslint-disable no-bitwise */
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC
+    });
+
+    model._smallColorTextureView = model._smallColorTexture.createView();
+
+    model._smallColorTextureView.setName('volumePassSmallColorTexture');
+
+    model._smallColorTextureView.addSampler(viewNode.getDevice(), {
+      minFilter: 'linear',
+      magFilter: 'linear'
+    });
+
+    model._largeColorTexture = vtkWebGPUTexture.newInstance();
+
+    model._largeColorTexture.create(viewNode.getDevice(), {
+      width: viewNode.getCanvas().width,
+      height: viewNode.getCanvas().height,
+      format: 'bgra8unorm',
+
+      /* eslint-disable no-undef */
+
+      /* eslint-disable no-bitwise */
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC
+    });
+
+    model._largeColorTextureView = model._largeColorTexture.createView();
+
+    model._largeColorTextureView.setName('volumePassSmallColorTexture');
+
+    model._largeColorTextureView.addSampler(viewNode.getDevice(), {
+      minFilter: 'linear',
+      magFilter: 'linear'
+    });
+
+    model._clearEncoder = vtkWebGPURenderEncoder.newInstance();
+
+    model._clearEncoder.setDescription({
+      colorAttachments: [{
+        view: null,
+        loadValue: [0.0, 0.0, 0.0, 0.0],
+        storeOp: 'store'
+      }]
+    });
+
+    model._clearEncoder.setPipelineHash('volpf');
+
+    model._clearEncoder.setPipelineSettings({
+      primitive: {
+        cullMode: 'none'
+      },
+      fragment: {
+        targets: [{
+          format: 'bgra8unorm',
+          blend: {
+            color: {
+              srcFactor: 'src-alpha',
+              dstFactor: 'one-minus-src-alpha'
+            },
+            alpha: {
+              srcfactor: 'one',
+              dstFactor: 'one-minus-src-alpha'
+            }
+          }
+        }]
+      }
+    });
+  };
+
+  publicAPI.createCopyEncoder = function (viewNode) {
+    model._copyEncoder = vtkWebGPURenderEncoder.newInstance();
+
+    model._copyEncoder.setDescription({
+      colorAttachments: [{
+        view: null,
+        loadValue: 'load',
+        storeOp: 'store'
+      }]
+    });
+
+    model._copyEncoder.setPipelineHash('volcopypf');
+
+    model._copyEncoder.setPipelineSettings({
+      primitive: {
+        cullMode: 'none'
+      },
+      fragment: {
+        targets: [{
+          format: 'bgra8unorm',
+          blend: {
+            color: {
+              srcFactor: 'one',
+              dstFactor: 'one-minus-src-alpha'
+            },
+            alpha: {
+              srcfactor: 'one',
+              dstFactor: 'one-minus-src-alpha'
+            }
+          }
+        }]
+      }
     });
   };
 
-  publicAPI.createFinalEncoder = function (viewNode) {
-    model.fullScreenQuad = vtkWebGPUVolumePassFSQ.newInstance();
-    model.fullScreenQuad.setDevice(viewNode.getDevice());
-    model.fullScreenQuad.setTextureViews(_toConsumableArray(model.depthRangeEncoder.getColorTextureViews()));
-    model.finalEncoder = vtkWebGPURenderEncoder.newInstance();
-    model.finalEncoder.setDescription({
+  publicAPI.createMergeEncoder = function (viewNode) {
+    model._mergeEncoder = vtkWebGPURenderEncoder.newInstance();
+
+    model._mergeEncoder.setDescription({
       colorAttachments: [{
         view: null,
         loadValue: 'load',
         storeOp: 'store'
       }]
     });
-    model.finalEncoder.setReplaceShaderCodeFunction(function (pipeline) {
+
+    model._mergeEncoder.setReplaceShaderCodeFunction(function (pipeline) {
       var fDesc = pipeline.getShaderDescription('fragment');
       fDesc.addOutput('vec4<f32>', 'outColor');
       var code = fDesc.getCode();
-      code = vtkWebGPUShaderCache.substitute(code, '//VTK::RenderEncoder::Impl', ['output.outColor = vec4<f32>(computedColor.rgb*computedColor.a, computedColor.a);']).result;
+      code = vtkWebGPUShaderCache.substitute(code, '//VTK::RenderEncoder::Impl', ['output.outColor = vec4<f32>(computedColor.rgb, computedColor.a);']).result;
       fDesc.setCode(code);
     });
-    model.finalEncoder.setPipelineHash('volpf');
-    model.finalEncoder.setPipelineSettings({
+
+    model._mergeEncoder.setPipelineHash('volpf');
+
+    model._mergeEncoder.setPipelineSettings({
       primitive: {
         cullMode: 'none'
       },
@@ -299,7 +600,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
           format: 'bgra8unorm',
           blend: {
             color: {
-              srcFactor: 'one',
+              srcFactor: 'src-alpha',
               dstFactor: 'one-minus-src-alpha'
             },
             alpha: {
@@ -344,6 +645,7 @@ function extend(publicAPI, model) {
   Object.assign(model, DEFAULT_VALUES, initialValues); // Build VTK API
 
   vtkRenderPass.extend(publicAPI, model, initialValues);
+  model._lastScale = 2.0;
   model._mapper = vtkWebGPUMapperHelper.newInstance();
 
   model._mapper.setFragmentShaderTemplate(DepthBoundsFS);