feat(WebGPU): add WebGPU support to VolumePassFSQ by daker · Pull Request #3526 · Kitware/vtk-js

daker · 2026-06-03T09:33:05Z

Context

Results

Changes

Documentation and TypeScript definitions were updated to match those changes

PR and Code Checklist

semantic-release commit messages
Run npm run reformat to have correctly formatted code

Testing

This change adds or fixes unit tests
Tested environment:
- vtk.js:
- OS:
- Browser:

daker · 2026-06-03T10:03:50Z

Draft to get some initial feedback

daker · 2026-06-08T10:17:45Z

@sankhesh mind doing an initial review ?

daker · 2026-06-15T14:45:03Z

@sankhesh any chance to get an initial review ?

sankhesh

This is a big change. Took me a while to go through it. I've left some questions but overall, needs more documentation and testing.

sankhesh · 2026-06-16T19:01:01Z

+  let dims = textureDimensions(vTex, 0);
+  let maxCoord = vec3<i32>(dims) - vec3<i32>(1);
+  let nearestCoord = clamp(
+    vec3<i32>(floor(tpos.xyz * vec3<f32>(dims))),
+    vec3<i32>(0),
+    maxCoord
+  );
+  let nearestValue = textureLoad(vTex, nearestCoord, 0);
+
+  if ((forceNearestMask & 1) != 0) { value.x = nearestValue.x; }
+  if ((forceNearestMask & 2) != 0) { value.y = nearestValue.y; }
+  if ((forceNearestMask & 4) != 0) { value.z = nearestValue.z; }
+  if ((forceNearestMask & 8) != 0) { value.w = nearestValue.w; }
+
+  return value;


Why does getTextureValue need to perform filtering as well now?

sankhesh · 2026-06-16T19:01:53Z

+  let nearestCoord = clamp(
+    vec3<i32>(floor(tpos.xyz * vec3<f32>(dims))),
+    vec3<i32>(0),
+    maxCoord


This does not match the exact texel-center convention used by filter sampling, especially near boundaries.

sankhesh · 2026-06-16T19:03:34Z

+{
+  if (numComp == 1u) { return sample.x; }
+  if (numComp == 2u) { return sample.y; }
+  if (numComp == 3u) { return length(sample.xyz); }


Why is opacity the length(sample.xyz) here? Was this intentional?

sankhesh · 2026-06-16T19:04:56Z

+  result.x = getComponentValue(vTex, tpos + vec4<f32>(tstep.x, 0.0, 0.0, 1.0), vNum, component) - scalar;
+  result.y = getComponentValue(vTex, tpos + vec4<f32>(0.0, tstep.y, 0.0, 1.0), vNum, component) - scalar;
+  result.z = getComponentValue(vTex, tpos + vec4<f32>(0.0, 0.0, tstep.z, 1.0), vNum, component) - scalar;


I know the webgl mapper uses forward differences only. Did you try central differences here? I think that would produce better results.

sankhesh · 2026-06-16T19:07:03Z

+    var visibility = 1.0;
+
+    var j: i32 = 0;
+    loop


This is a nested sampling loop that is known to have quite an overhead. Have you profiled this?

sankhesh · 2026-06-16T19:15:21Z

+  traverseVals[vNum] = getSimpleColor(sumVal, rowIdx, tfunRows);
+}
+
+fn traverseRadon(vTex: texture_3d<f32>, vNum: i32, rowIdx: i32, rayLengthSC: f32, minPosSC: vec4<f32>, rayStepSC: vec4<f32>)


This seems different than the opengl mapper. Could you please explain/document this function?

sankhesh · 2026-06-16T19:16:06Z

+const tmp3Mat4 = new Float64Array(16);
+const tmp4Mat4 = new Float64Array(16);
+
+function transformPoint(mat, x, y, z) {


IMHO, there are math functions already that do this.

sankhesh · 2026-06-16T19:18:14Z

+          forceNearestMask |= 1 << component;
+        }
+      }
+      componentInfoArray[vidx * 4 + 3] = forceNearestMask;


I don't follow this. Could you please explain?

sankhesh · 2026-06-16T19:18:51Z

+        const cRange = cfun.getRange();
+        colorScaleArray[vidx * 4 + component] =
+          sscale / (cRange[1] - cRange[0]);
+        colorShiftArray[vidx * 4 + component] =
+          -cRange[0] / (cRange[1] - cRange[0]);
+
+        const ofun = vprop.getScalarOpacity(
+          vprop.getIndependentComponents() ? component : 0
+        );
+        const oRange = ofun.getRange();
+        opacityScaleArray[vidx * 4 + component] =
+          sscale / (oRange[1] - oRange[0]);
+        opacityShiftArray[vidx * 4 + component] =
+          -oRange[0] / (oRange[1] - oRange[0]);
+      }


Maybe add a check to ensure the ranges are valid before dividing by them

sankhesh · 2026-06-16T19:20:41Z

+      for (let i = 0; i < jitterArray.length; i++) {
+        jitterArray[i] = Math.random();
+      }


I thought we used a perlin noise texture in the opengl mapper. This works too, but this buffer will be computed for each volume in the window.

daker added 6 commits June 3, 2026 10:58

feat(WebGPU): add multi component volume sampling

5dd0b9b

feat(WebGPU): add support for RADON_TRANSFORM_BLEND

b46c79b

feat(WebGPU): add support for shaded composite rendering

4926bbd

feat(WebGPU): add volume scattering and shadow lighting

4c4ac64

feat(WebGPU): match volume lighting features with WebGL

2b80ed8

feat(WebGPU): add independent component mix presets

1fcbc7d

daker marked this pull request as draft June 3, 2026 10:03

daker force-pushed the feat-webgpu-volumepassfsq branch from 97852ee to cfbfc19 Compare June 3, 2026 12:10

feat(WebGPU): add force-nearest volume components

2c55dfe

daker force-pushed the feat-webgpu-volumepassfsq branch from cfbfc19 to 2c55dfe Compare June 3, 2026 12:18

sankhesh reviewed Jun 16, 2026

View reviewed changes

Uh oh!

Conversation

daker commented Jun 3, 2026

Context

Results

Changes

PR and Code Checklist

Testing

Uh oh!

daker commented Jun 3, 2026

Uh oh!

daker commented Jun 8, 2026

Uh oh!

daker commented Jun 15, 2026

Uh oh!

sankhesh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants