feat(WebGPU): add MSAA (multi-sample anti-aliasing) support

Add configurable sampleCount to the WebGPU render pipeline:
- RenderWindow: expose setSampleCount()/getSampleCount() (default: 1)
- Texture: support sampleCount in create(), resize(), resizeToMatch()
- RenderEncoder: add resolveTextureViews for MSAA resolve targets
- OpaquePass: create multisampled color/depth textures when sampleCount > 1,
  with a resolved (1-sample) color texture for downstream sampling
- RenderWindow.getPixelsAsync: use resolved texture for readback when MSAA active

Usage:
  const gpuRenderWindow = vtkWebGPURenderWindow.newInstance();
  gpuRenderWindow.setSampleCount(4); // Enable 4x MSAA

Author: MaxKopacz

Sources/Rendering/WebGPU/OpaquePass/index.js

@@ -22,50 +22,85 @@ function vtkWebGPUOpaquePass(publicAPI, model) {
     model._currentParent = viewNode;
 
     const device = viewNode.getDevice();
+    const sampleCount = viewNode.getSampleCount
+      ? viewNode.getSampleCount()
+      : 1;
 
     if (!model.renderEncoder) {
-      publicAPI.createRenderEncoder();
+      publicAPI.createRenderEncoder(sampleCount);
+
+      const width = viewNode.getCanvas().width;
+      const height = viewNode.getCanvas().height;
+
+      // Color texture — multisampled when sampleCount > 1
       model.colorTexture = vtkWebGPUTexture.newInstance({
         label: 'opaquePassColor',
       });
+      /* eslint-disable no-undef */
+      /* eslint-disable no-bitwise */
       model.colorTexture.create(device, {
-        width: viewNode.getCanvas().width,
-        height: viewNode.getCanvas().height,
+        width,
+        height,
         format: 'rgba16float',
-        /* eslint-disable no-undef */
-        /* eslint-disable no-bitwise */
+        sampleCount,
         usage:
           GPUTextureUsage.RENDER_ATTACHMENT |
-          GPUTextureUsage.TEXTURE_BINDING |
-          GPUTextureUsage.COPY_SRC,
+          (sampleCount === 1
+            ? GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC
+            : 0),
       });
       const ctView = model.colorTexture.createView('opaquePassColorTexture');
       model.renderEncoder.setColorTextureView(0, ctView);
 
+      // When MSAA is active, create a resolve target (1-sample) for
+      // downstream passes that need to sample the color result
+      if (sampleCount > 1) {
+        model.resolveColorTexture = vtkWebGPUTexture.newInstance({
+          label: 'opaquePassResolveColor',
+        });
+        model.resolveColorTexture.create(device, {
+          width,
+          height,
+          format: 'rgba16float',
+          usage:
+            GPUTextureUsage.RENDER_ATTACHMENT |
+            GPUTextureUsage.TEXTURE_BINDING |
+            GPUTextureUsage.COPY_SRC,
+        });
+        const resolveView = model.resolveColorTexture.createView(
+          'opaquePassColorTexture'
+        );
+        model.renderEncoder.setResolveTextureView(0, resolveView);
+      }
+
+      // Depth texture — also multisampled
       model.depthFormat = 'depth32float';
       model.depthTexture = vtkWebGPUTexture.newInstance({
         label: 'opaquePassDepth',
       });
       model.depthTexture.create(device, {
-        width: viewNode.getCanvas().width,
-        height: viewNode.getCanvas().height,
+        width,
+        height,
         format: model.depthFormat,
+        sampleCount,
         usage:
           GPUTextureUsage.RENDER_ATTACHMENT |
-          GPUTextureUsage.TEXTURE_BINDING |
-          GPUTextureUsage.COPY_SRC,
+          (sampleCount === 1
+            ? GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC
+            : 0),
       });
+      /* eslint-enable no-undef */
+      /* eslint-enable no-bitwise */
       const dView = model.depthTexture.createView('opaquePassDepthTexture');
       model.renderEncoder.setDepthTextureView(dView);
     } else {
-      model.colorTexture.resize(
-        viewNode.getCanvas().width,
-        viewNode.getCanvas().height
-      );
-      model.depthTexture.resize(
-        viewNode.getCanvas().width,
-        viewNode.getCanvas().height
-      );
+      const width = viewNode.getCanvas().width;
+      const height = viewNode.getCanvas().height;
+      model.colorTexture.resize(width, height);
+      model.depthTexture.resize(width, height);
+      if (model.resolveColorTexture) {
+        model.resolveColorTexture.resize(width, height);
+      }
     }
 
     model.renderEncoder.attachTextureViews();
@@ -74,18 +109,30 @@ function vtkWebGPUOpaquePass(publicAPI, model) {
     renNode.traverse(publicAPI);
   };
 
-  publicAPI.getColorTextureView = () =>
-    model.renderEncoder.getColorTextureViews()[0];
+  // When MSAA is active, downstream passes must sample from the resolved
+  // (1-sample) texture, not the multisampled one
+  publicAPI.getColorTextureView = () => {
+    if (model.resolveColorTexture) {
+      return model.resolveColorTexture.createView('opaquePassColorTexture');
+    }
+    return model.renderEncoder.getColorTextureViews()[0];
+  };
 
   publicAPI.getDepthTextureView = () =>
     model.renderEncoder.getDepthTextureView();
 
-  publicAPI.createRenderEncoder = () => {
+  publicAPI.createRenderEncoder = (sampleCount = 1) => {
     model.renderEncoder = vtkWebGPURenderEncoder.newInstance({
       label: 'OpaquePass',
     });
     // default settings are fine for this
     model.renderEncoder.setPipelineHash('op');
+    // Set multisample state in pipeline settings when MSAA is active
+    if (sampleCount > 1) {
+      const settings = model.renderEncoder.getPipelineSettings();
+      settings.multisample = { count: sampleCount };
+      model.renderEncoder.setPipelineSettings(settings);
+    }
   };
 }
 
@@ -97,6 +144,7 @@ const DEFAULT_VALUES = {
   renderEncoder: null,
   colorTexture: null,
   depthTexture: null,
+  resolveColorTexture: null,
 };
 
 // ----------------------------------------------------------------------------
@@ -107,7 +155,11 @@ export function extend(publicAPI, model, initialValues = {}) {
   // Build VTK API
   vtkRenderPass.extend(publicAPI, model, initialValues);
 
-  macro.get(publicAPI, model, ['colorTexture', 'depthTexture']);
+  macro.get(publicAPI, model, [
+    'colorTexture',
+    'depthTexture',
+    'resolveColorTexture',
+  ]);
 
   // Object methods
   vtkWebGPUOpaquePass(publicAPI, model);

Sources/Rendering/WebGPU/RenderEncoder/index.js

@@ -96,6 +96,13 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
     model.colorTextureViews[idx] = view;
   };
 
+  publicAPI.setResolveTextureView = (idx, view) => {
+    if (model.resolveTextureViews[idx] === view) {
+      return;
+    }
+    model.resolveTextureViews[idx] = view;
+  };
+
   publicAPI.activateBindGroup = (bg) => {
     const device = model.boundPipeline.getDevice();
     const midx = model.boundPipeline.getBindGroupLayoutCount(bg.getLabel());
@@ -126,6 +133,14 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
         model.description.colorAttachments[i].view =
           model.colorTextureViews[i].getHandle();
       }
+      // MSAA: set resolveTarget if a resolve texture view is provided
+      if (model.resolveTextureViews[i]) {
+        model.description.colorAttachments[i].resolveTarget =
+          model.resolveTextureViews[i].getHandle();
+        // When using MSAA, the multisampled texture is transient;
+        // store only into the resolve target
+        model.description.colorAttachments[i].storeOp = 'discard';
+      }
     }
     if (model.depthTextureView) {
       model.description.depthStencilAttachment.view =
@@ -225,6 +240,7 @@ export function extend(publicAPI, model, initialValues = {}) {
   };
 
   model.colorTextureViews = [];
+  model.resolveTextureViews = [];
 
   macro.get(publicAPI, model, ['boundPipeline', 'colorTextureViews']);
 

Sources/Rendering/WebGPU/RenderWindow/index.js

@@ -469,7 +469,11 @@ function vtkWebGPURenderWindow(publicAPI, model) {
 
   publicAPI.getPixelsAsync = async () => {
     const device = model.device;
-    const texture = model.renderPasses[0].getOpaquePass().getColorTexture();
+    const opaquePass = model.renderPasses[0].getOpaquePass();
+    // When MSAA is active, use the resolved (1-sample) texture for readback
+    const texture = opaquePass.getResolveColorTexture()
+      ? opaquePass.getResolveColorTexture()
+      : opaquePass.getColorTexture();
 
     // as this is async we really don't want to store things in
     // the class as multiple calls may start before resolving
@@ -578,6 +582,7 @@ const DEFAULT_VALUES = {
   nextPropID: 1,
   xrSupported: false,
   presentationFormat: null,
+  sampleCount: 1,
 };
 
 // ----------------------------------------------------------------------------
@@ -621,6 +626,7 @@ export function extend(publicAPI, model, initialValues = {}) {
     'presentationFormat',
     'useBackgroundImage',
     'xrSupported',
+    'sampleCount',
   ]);
 
   macro.setGet(publicAPI, model, [
@@ -632,6 +638,7 @@ export function extend(publicAPI, model, initialValues = {}) {
     'notifyStartCaptureImage',
     'cursor',
     'useOffScreen',
+    'sampleCount',
   ]);
 
   macro.setGetArray(publicAPI, model, ['size'], 2);

Sources/Rendering/WebGPU/Texture/index.js

@@ -24,6 +24,7 @@ function vtkWebGPUTexture(publicAPI, model) {
     const dimension = model.depth === 1 ? '2d' : '3d';
     model.format = options.format ? options.format : 'rgba8unorm';
     model.mipLevel = options.mipLevel ? options.mipLevel : 0;
+    model.sampleCount = options.sampleCount ? options.sampleCount : 1;
     /* eslint-disable no-undef */
     /* eslint-disable no-bitwise */
     model.usage = options.usage
@@ -37,6 +38,7 @@ function vtkWebGPUTexture(publicAPI, model) {
       usage: model.usage,
       label: model.label,
       dimension,
+      sampleCount: model.sampleCount,
       mipLevelCount: model.mipLevel + 1,
     });
   };
@@ -266,6 +268,7 @@ function vtkWebGPUTexture(publicAPI, model) {
         format: model.format,
         usage: model.usage,
         label: model.label,
+        sampleCount: model.sampleCount,
       });
     }
   };
@@ -284,6 +287,7 @@ function vtkWebGPUTexture(publicAPI, model) {
         format: model.format,
         usage: model.usage,
         label: model.label,
+        sampleCount: model.sampleCount,
       });
     }
   };
@@ -309,6 +313,7 @@ const DEFAULT_VALUES = {
   buffer: null,
   ready: false,
   label: null,
+  sampleCount: 1,
 };
 
 // ----------------------------------------------------------------------------
@@ -327,6 +332,7 @@ export function extend(publicAPI, model, initialValues = {}) {
     'depth',
     'format',
     'usage',
+    'sampleCount',
   ]);
   macro.setGet(publicAPI, model, ['device', 'label']);