Merge pull request #2148 from Kitware/webgpu_coincident_offset

feat(WebGPU): use invereted depth and improve edges

Author: martinken

Sources/Rendering/WebGPU/BufferManager/index.js

@@ -548,12 +548,12 @@ function vtkWebGPUBufferManager(publicAPI, model) {
 
     // prettier-ignore
     const array = new Float32Array([
-      -1.0, -1.0, 1.0,
-       1.0, -1.0, 1.0,
-       1.0, 1.0, 1.0,
-      -1.0, -1.0, 1.0,
-       1.0, 1.0, 1.0,
-      -1.0, 1.0, 1.0,
+      -1.0, -1.0, 0.0,
+       1.0, -1.0, 0.0,
+       1.0, 1.0, 0.0,
+      -1.0, -1.0, 0.0,
+       1.0, 1.0, 0.0,
+      -1.0, 1.0, 0.0,
     ]);
     model.fullScreenQuadBuffer.createAndWrite(array, GPUBufferUsage.VERTEX);
     model.fullScreenQuadBuffer.setStrideInBytes(12);

Sources/Rendering/WebGPU/Camera/index.js

@@ -13,6 +13,67 @@ function vtkWebGPUCamera(publicAPI, model) {
   // Set our className
   model.classHierarchy.push('vtkWebGPUCamera');
 
+  publicAPI.getProjectionMatrix = (outMat, aspect, cRange, windowCenter) => {
+    mat4.identity(outMat);
+    if (model.renderable.getParallelProjection()) {
+      // set up a rectangular parallelipiped
+      const parallelScale = model.renderable.getParallelScale();
+      const width = parallelScale * aspect;
+      const height = parallelScale;
+
+      const xmin = (windowCenter[0] - 1.0) * width;
+      const xmax = (windowCenter[0] + 1.0) * width;
+      const ymin = (windowCenter[1] - 1.0) * height;
+      const ymax = (windowCenter[1] + 1.0) * height;
+
+      const xr = 1.0 / (xmax - xmin);
+      const yr = 1.0 / (ymax - ymin);
+      outMat[0] = 2.0 * xr;
+      outMat[5] = 2.0 * yr;
+      outMat[10] = 1.0 / (cRange[1] - cRange[0]);
+      outMat[12] = (xmax + xmin) * xr;
+      outMat[13] = (ymax + ymin) * yr;
+      outMat[14] = cRange[1] / (cRange[1] - cRange[0]);
+    } else {
+      const tmp = Math.tan((Math.PI * model.renderable.getViewAngle()) / 360.0);
+      let width;
+      let height;
+      if (model.renderable.getUseHorizontalViewAngle() === true) {
+        width = cRange[0] * tmp;
+        height = (cRange[0] * tmp) / aspect;
+      } else {
+        width = cRange[0] * tmp * aspect;
+        height = cRange[0] * tmp;
+      }
+
+      const xmin = (windowCenter[0] - 1.0) * width;
+      const xmax = (windowCenter[0] + 1.0) * width;
+      const ymin = (windowCenter[1] - 1.0) * height;
+      const ymax = (windowCenter[1] + 1.0) * height;
+
+      outMat[0] = (2.0 * cRange[0]) / (xmax - xmin);
+      outMat[5] = (2.0 * cRange[0]) / (ymax - ymin);
+      outMat[12] = (xmin + xmax) / (xmax - xmin);
+      outMat[13] = (ymin + ymax) / (ymax - ymin);
+      outMat[10] = 0.0;
+      outMat[14] = cRange[0];
+      outMat[11] = -1.0;
+      outMat[15] = 0.0;
+    }
+  };
+
+  publicAPI.convertToOpenGLDepth = (val) => {
+    if (model.renderable.getParallelProjection()) {
+      return 1.0 - val;
+    }
+    const cRange = model.renderable.getClippingRangeByReference();
+    let zval = -cRange[0] / val;
+    zval =
+      (cRange[0] + cRange[1]) / (cRange[1] - cRange[0]) +
+      (2.0 * cRange[0] * cRange[1]) / (zval * (cRange[1] - cRange[0]));
+    return 0.5 * zval + 0.5;
+  };
+
   publicAPI.getKeyMatrices = (webGPURenderer) => {
     // has the camera changed?
     const ren = webGPURenderer.getRenderable();
@@ -44,14 +105,13 @@ function vtkWebGPUCamera(publicAPI, model) {
 
       const aspectRatio = webGPURenderer.getAspectRatio();
 
-      const vcpc = model.renderable.getProjectionMatrix(aspectRatio, -1, 1);
-      mat4.transpose(model.keyMatrices.vcpc, vcpc);
-
-      // adjust due to WebGPU using a different coordinate system in Z
-      model.keyMatrices.vcpc[2] = 0.5 * vcpc[8] + 0.5 * vcpc[12];
-      model.keyMatrices.vcpc[6] = 0.5 * vcpc[9] + 0.5 * vcpc[13];
-      model.keyMatrices.vcpc[10] = 0.5 * vcpc[10] + 0.5 * vcpc[14];
-      model.keyMatrices.vcpc[14] = 0.5 * vcpc[11] + 0.5 * vcpc[15];
+      const cRange = model.renderable.getClippingRangeByReference();
+      publicAPI.getProjectionMatrix(
+        model.keyMatrices.vcpc,
+        aspectRatio,
+        cRange,
+        model.renderable.getWindowCenterByReference()
+      );
 
       mat4.multiply(
         model.keyMatrices.scpc,

Sources/Rendering/WebGPU/Glyph3DMapper/index.js

@@ -71,7 +71,7 @@ function vtkWebGPUGlyph3DMapper(publicAPI, model) {
   publicAPI.replaceShaderSelect = (hash, pipeline, vertexInput) => {
     if (hash.includes('sel')) {
       const vDesc = pipeline.getShaderDescription('vertex');
-      vDesc.addOutput('u32', 'compositeID');
+      vDesc.addOutput('u32', 'compositeID', 'flat');
       let code = vDesc.getCode();
       code = vtkWebGPUShaderCache.substitute(code, '//VTK::Select::Impl', [
         '  output.compositeID = input.instanceIndex;',

Sources/Rendering/WebGPU/HardwareSelectionPass/index.js

@@ -98,7 +98,7 @@ function vtkWebGPUHardwareSelectionPass(publicAPI, model) {
       primitive: { cullMode: 'none' },
       depthStencil: {
         depthWriteEnabled: true,
-        depthCompare: 'less',
+        depthCompare: 'greater',
         format: 'depth32float',
       },
       fragment: {

Sources/Rendering/WebGPU/HardwareSelector/index.js

@@ -72,6 +72,7 @@ function getPixelInformationWithData(
           buffdata.zbufferBufferWidth +
         inDisplayPosition[0];
       info.zValue = buffdata.depthValues[offset];
+      info.zValue = buffdata.webGPURenderer.convertToOpenGLDepth(info.zValue);
       info.displayPosition = inDisplayPosition;
     }
     return info;

Sources/Rendering/WebGPU/OrderIndependentTranslucentPass/index.js

@@ -176,7 +176,7 @@ function vtkWebGPUOrderIndependentTranslucentPass(publicAPI, model) {
       primitive: { cullMode: 'none' },
       depthStencil: {
         depthWriteEnabled: false,
-        depthCompare: 'less',
+        depthCompare: 'greater',
         format: 'depth32float',
       },
       fragment: {

Sources/Rendering/WebGPU/PolyDataMapper/index.js

@@ -104,6 +104,8 @@ fn main(
 
   if (computedColor.a == 0.0) { discard; };
 
+  //VTK::Position::Impl
+
   //VTK::RenderEncoder::Impl
   return output;
 }
@@ -214,9 +216,23 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
     const vDesc = pipeline.getShaderDescription('vertex');
     vDesc.addBuiltinOutput('vec4<f32>', '[[builtin(position)]] Position');
     let code = vDesc.getCode();
-    code = vtkWebGPUShaderCache.substitute(code, '//VTK::Position::Impl', [
-      '    output.Position = rendererUBO.SCPCMatrix*mapperUBO.BCSCMatrix*vertexBC;',
-    ]).result;
+    if (isEdges(hash)) {
+      vDesc.addBuiltinInput('u32', '[[builtin(instance_index)]] instanceIndex');
+      // widen the edge
+      code = vtkWebGPUShaderCache.substitute(code, '//VTK::Position::Impl', [
+        '    var tmpPos: vec4<f32> = rendererUBO.SCPCMatrix*mapperUBO.BCSCMatrix*vertexBC;',
+        '    var tmpPos2: vec3<f32> = tmpPos.xyz / tmpPos.w;',
+        '    tmpPos2.x = tmpPos2.x + 1.4*(f32(input.instanceIndex % 2u) - 0.5)/rendererUBO.viewportSize.x;',
+        '    tmpPos2.y = tmpPos2.y + 1.4*(f32(input.instanceIndex / 2u) - 0.5)/rendererUBO.viewportSize.y;',
+        '    tmpPos2.z = tmpPos2.z + 0.00001;', // could become a setting
+        '    output.Position = vec4<f32>(tmpPos2.xyz * tmpPos.w, tmpPos.w);',
+      ]).result;
+    } else {
+      code = vtkWebGPUShaderCache.substitute(code, '//VTK::Position::Impl', [
+        '    output.Position = rendererUBO.SCPCMatrix*mapperUBO.BCSCMatrix*vertexBC;',
+      ]).result;
+    }
+
     vDesc.setCode(code);
   };
 
@@ -712,7 +728,7 @@ function vtkWebGPUPolyDataMapper(publicAPI, model) {
           );
 
           primHelper.setWebGPURenderer(model.WebGPURenderer);
-          primHelper.setNumberOfInstances(1);
+          primHelper.setNumberOfInstances(4);
           const vbo = primHelper.getVertexInput().getBuffer('vertexBC');
           primHelper.setNumberOfVertices(
             vbo.getSizeInBytes() / vbo.getStrideInBytes()

Sources/Rendering/WebGPU/README.md

@@ -128,3 +128,43 @@ Note that none of the classes in the WebGPU directory are meant to be accessed d
 The volume renderer in WebGPU starts in the ForwardPass, which if it detects volumes invokes a volume pass. The volume pass requests bounding boxes from all volumes and renders them, along with the opaque polygonal depth buffer to create min and max ray depth textures. These textures are bounds for each fragment's ray casting. Then the VolumePassFSQ gets invoked with these two bounding textures to actually perfom the ray casting of the voxels between the min and max.
 
 The ray casting is done for all volumes at once and the VolumePassFSQ class is where all the complexity and work is done.
+
+
+## Zbuffer implementation and calculations
+
+The depth buffer is stored as a 32bit float and ranges from 1.0 to 0.0. The distance to the near clipping plane is by far the largest factor determining the accuracy of the zbuffer. The farther out you can place the near plane the better. See https://zero-radiance.github.io/post/z-buffer/ for a more detailed analysis of why we use this approach.
+
+### Orthographic
+
+For orthographic projections the zbuffer ranges from 1.0 at the near plane to 0.0 at the far plane. The depth value in both the vertex and fragment shader is given as
+
+```position.z = (zVC + f)/(f - n)```
+
+within the fragment shader you can get the z value (in view coordinates)
+
+```zVC = position.z * (far - near) - far```
+
+The depth valus are linear in depth.
+
+### Perspective
+
+For perspective we use a reverse infinite far clip projection which ranges from 1.0 at the near plane to 0.0 at infinity. The depth value in the vertex shader is
+
+```position.z = near```
+```position.w = -zVC```
+
+and in the fragment after division by w as
+
+```position.z = -near / zVC```
+
+within the shader you can get the z value (in view coordinates)
+
+```zVC = -near / position.z```
+
+The depth values are not linear in depth.
+
+You can offset geometry by a factor cF ranging from 0.0 to 1.0 using the following forumla
+
+```z' = 1.0 - (1.0 - cF)*(1.0 - z)```
+```z' = z + cF - cF*z```
+```z' = (1.0 - cF)*z + cF```

Sources/Rendering/WebGPU/RenderEncoder/index.js

@@ -141,7 +141,7 @@ export function extend(publicAPI, model, initialValues = {}) {
     ],
     depthStencilAttachment: {
       view: undefined,
-      depthLoadValue: 1.0,
+      depthLoadValue: 0.0,
       depthStoreOp: 'store',
       stencilLoadValue: 0,
       stencilStoreOp: 'store',
@@ -164,7 +164,7 @@ export function extend(publicAPI, model, initialValues = {}) {
     primitive: { cullMode: 'none' },
     depthStencil: {
       depthWriteEnabled: true,
-      depthCompare: 'less-equal',
+      depthCompare: 'greater-equal',
       format: 'depth32float',
     },
     fragment: {

Sources/Rendering/WebGPU/Renderer/index.js

@@ -51,11 +51,15 @@ function vtkWebGPURenderer(publicAPI, model) {
         return;
       }
 
+      model.camera = model.renderable.getActiveCamera();
+
       publicAPI.updateLights();
       publicAPI.prepareNodes();
-      publicAPI.addMissingNode(model.renderable.getActiveCamera());
+      publicAPI.addMissingNode(model.camera);
       publicAPI.addMissingNodes(model.renderable.getViewPropsWithNestedProps());
       publicAPI.removeUnusedNodes();
+
+      model.webgpuCamera = publicAPI.getViewNodeFor(model.camera);
       publicAPI.updateStabilizedMatrix();
     }
   };
@@ -87,10 +91,9 @@ function vtkWebGPURenderer(publicAPI, model) {
     // when the center of the view frustum moves a lot
     // we recenter it. The center of the view frustum is roughly
     // camPos + dirOfProj*(far + near)*0.5
-    const cam = model.renderable.getActiveCamera();
-    const clipRange = cam.getClippingRange();
-    const pos = cam.getPositionByReference();
-    const dop = cam.getDirectionOfProjectionByReference();
+    const clipRange = model.camera.getClippingRange();
+    const pos = model.camera.getPositionByReference();
+    const dop = model.camera.getDirectionOfProjectionByReference();
     const center = [];
     const offset = [];
     vec3.scale(offset, dop, 0.5 * (clipRange[0] + clipRange[1]));
@@ -137,23 +140,27 @@ function vtkWebGPURenderer(publicAPI, model) {
   publicAPI.updateUBO = () => {
     // make sure the data is up to date
     // has the camera changed?
-    const cam = model.renderable.getActiveCamera();
-    const webgpuCamera = publicAPI.getViewNodeFor(cam);
     const utime = model.UBO.getSendTime();
     if (
       model.parent.getMTime() > utime ||
       publicAPI.getMTime() > utime ||
-      cam.getMTime() > utime ||
+      model.camera.getMTime() > utime ||
       model.renderable.getMTime() > utime
     ) {
-      const keyMats = webgpuCamera.getKeyMatrices(publicAPI);
+      const keyMats = model.webgpuCamera.getKeyMatrices(publicAPI);
       model.UBO.setArray('WCVCMatrix', keyMats.wcvc);
       model.UBO.setArray('SCPCMatrix', keyMats.scpc);
       model.UBO.setArray('PCSCMatrix', keyMats.pcsc);
       model.UBO.setArray('SCVCMatrix', keyMats.scvc);
       model.UBO.setArray('VCPCMatrix', keyMats.vcpc);
       model.UBO.setArray('WCVCNormals', keyMats.normalMatrix);
-      model.UBO.setValue('cameraParallel', cam.getParallelProjection());
+
+      const tsize = publicAPI.getYInvertedTiledSizeAndOrigin();
+      model.UBO.setArray('viewportSize', [tsize.usize, tsize.vsize]);
+      model.UBO.setValue(
+        'cameraParallel',
+        model.camera.getParallelProjection()
+      );
 
       const device = model.parent.getDevice();
       model.UBO.sendIfNeeded(device);
@@ -299,6 +306,9 @@ function vtkWebGPURenderer(publicAPI, model) {
     );
   };
 
+  publicAPI.convertToOpenGLDepth = (val) =>
+    model.webgpuCamera.convertToOpenGLDepth(val);
+
   publicAPI.getYInvertedTiledSizeAndOrigin = () => {
     const res = publicAPI.getTiledSizeAndOrigin();
     const size = model.parent.getSizeByReference();
@@ -393,6 +403,7 @@ export function extend(publicAPI, model, initialValues = {}) {
   model.UBO.addEntry('SCVCMatrix', 'mat4x4<f32>');
   model.UBO.addEntry('VCPCMatrix', 'mat4x4<f32>');
   model.UBO.addEntry('WCVCNormals', 'mat4x4<f32>');
+  model.UBO.addEntry('viewportSize', 'vec2<f32>');
   model.UBO.addEntry('cameraParallel', 'u32');
 
   model.bindGroup = vtkWebGPUBindGroup.newInstance();