🏡 index : cold-air-networks/mirror-webgpu-cts.git

export const description = `
Test related to depth buffer, depth op, compare func, etc.
`;

import { makeTestGroup } from '../../../../common/framework/test_group.js';
import { TypedArrayBufferView } from '../../../../common/util/util.js';
import { isStencilTextureFormat, kDepthTextureFormats } from '../../../format_info.js';
import { AllFeaturesMaxLimitsGPUTest } from '../../../gpu_test.js';
import * as ttu from '../../../texture_test_utils.js';
import { TexelView } from '../../../util/texture/texel_view.js';

const backgroundColor = [0x00, 0x00, 0x00, 0xff];
const triangleColor = [0xff, 0xff, 0xff, 0xff];

const kBaseColor = new Float32Array([1.0, 1.0, 1.0, 1.0]);
const kRedStencilColor = new Float32Array([1.0, 0.0, 0.0, 1.0]);
const kGreenStencilColor = new Float32Array([0.0, 1.0, 0.0, 1.0]);

type TestStates = {
  state: GPUDepthStencilState;
  color: Float32Array;
  depth: number;
};

class DepthTest extends AllFeaturesMaxLimitsGPUTest {
  runDepthStateTest(testStates: TestStates[], expectedColor: Float32Array) {
    const renderTargetFormat = 'rgba8unorm';

    const renderTarget = this.createTextureTracked({
      format: renderTargetFormat,
      size: { width: 1, height: 1, depthOrArrayLayers: 1 },
      usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
    });

    const depthStencilFormat: GPUTextureFormat = 'depth24plus-stencil8';
    const depthTexture = this.createTextureTracked({
      size: { width: 1, height: 1, depthOrArrayLayers: 1 },
      format: depthStencilFormat,
      sampleCount: 1,
      mipLevelCount: 1,
      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,
    });

    const depthStencilAttachment: GPURenderPassDepthStencilAttachment = {
      view: depthTexture.createView(),
      depthLoadOp: 'load',
      depthStoreOp: 'store',
      stencilLoadOp: 'load',
      stencilStoreOp: 'store',
    };

    const encoder = this.device.createCommandEncoder();
    const pass = encoder.beginRenderPass({
      colorAttachments: [
        {
          view: renderTarget.createView(),
          loadOp: 'load',
          storeOp: 'store',
        },
      ],
      depthStencilAttachment,
    });

    // Draw a triangle with the given depth state, color, and depth.
    for (const test of testStates) {
      const testPipeline = this.createRenderPipelineForTest(test.state, test.depth);
      pass.setPipeline(testPipeline);
      pass.setBindGroup(
        0,
        this.createBindGroupForTest(testPipeline.getBindGroupLayout(0), test.color)
      );
      pass.draw(1);
    }

    pass.end();
    this.device.queue.submit([encoder.finish()]);

    const expColor = {
      R: expectedColor[0],
      G: expectedColor[1],
      B: expectedColor[2],
      A: expectedColor[3],
    };
    const expTexelView = TexelView.fromTexelsAsColors(renderTargetFormat, _coords => expColor);

    ttu.expectTexelViewComparisonIsOkInTexture(
      this,
      { texture: renderTarget },
      expTexelView,
      [1, 1]
    );
  }

  createRenderPipelineForTest(
    depthStencil: GPUDepthStencilState,
    depth: number
  ): GPURenderPipeline {
    return this.device.createRenderPipeline({
      layout: 'auto',
      vertex: {
        module: this.device.createShaderModule({
          code: `
            @vertex
            fn main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
                return vec4<f32>(0.0, 0.0, ${depth}, 1.0);
            }
            `,
        }),
        entryPoint: 'main',
      },
      fragment: {
        targets: [{ format: 'rgba8unorm' }],
        module: this.device.createShaderModule({
          code: `
            struct Params {
              color : vec4<f32>
            }
            @group(0) @binding(0) var<uniform> params : Params;

            @fragment fn main() -> @location(0) vec4<f32> {
                return vec4<f32>(params.color);
            }`,
        }),
        entryPoint: 'main',
      },
      primitive: { topology: 'point-list' },
      depthStencil,
    });
  }

  createBindGroupForTest(layout: GPUBindGroupLayout, data: TypedArrayBufferView): GPUBindGroup {
    return this.device.createBindGroup({
      layout,
      entries: [
        {
          binding: 0,
          resource: {
            buffer: this.makeBufferWithContents(data, GPUBufferUsage.UNIFORM),
          },
        },
      ],
    });
  }
}

export const g = makeTestGroup(DepthTest);

g.test('depth_disabled')
  .desc('Tests render results with depth test disabled.')
  .fn(t => {
    const depthSpencilFormat: GPUTextureFormat = 'depth24plus-stencil8';
    const state = {
      format: depthSpencilFormat,
      depthWriteEnabled: false,
      depthCompare: 'always' as GPUCompareFunction,
    };

    const testStates = [
      { state, color: kBaseColor, depth: 0.0 },
      { state, color: kRedStencilColor, depth: 0.5 },
      { state, color: kGreenStencilColor, depth: 1.0 },
    ];

    // Test that for all combinations and ensure the last triangle drawn is the one visible
    // regardless of depth testing.
    for (let last = 0; last < 3; ++last) {
      const i = (last + 1) % 3;
      const j = (last + 2) % 3;

      t.runDepthStateTest([testStates[i], testStates[j], testStates[last]], testStates[last].color);
      t.runDepthStateTest([testStates[j], testStates[i], testStates[last]], testStates[last].color);
    }
  });

g.test('depth_write_disabled')
  .desc(
    `
  Test that depthWriteEnabled behaves as expected.
  If enabled, a depth value of 0.0 is written.
  If disabled, it's not written, so it keeps the previous value of 1.0.
  Use a depthCompare: 'equal' check at the end to check the value.
  `
  )
  .params(u =>
    u //
      .combineWithParams([
        { depthWriteEnabled: false, lastDepth: 0.0, _expectedColor: kRedStencilColor },
        { depthWriteEnabled: true, lastDepth: 0.0, _expectedColor: kGreenStencilColor },
        { depthWriteEnabled: false, lastDepth: 1.0, _expectedColor: kGreenStencilColor },
        { depthWriteEnabled: true, lastDepth: 1.0, _expectedColor: kRedStencilColor },
      ])
  )
  .fn(t => {
    const { depthWriteEnabled, lastDepth, _expectedColor } = t.params;

    const depthStencilFormat: GPUTextureFormat = 'depth24plus-stencil8';

    const stencilState = {
      compare: 'always',
      failOp: 'keep',
      depthFailOp: 'keep',
      passOp: 'keep',
    } as const;

    const baseState = {
      format: depthStencilFormat,
      depthWriteEnabled: true,
      depthCompare: 'always',
      stencilFront: stencilState,
      stencilBack: stencilState,
      stencilReadMask: 0xff,
      stencilWriteMask: 0xff,
    } as const;

    const depthWriteState = {
      format: depthStencilFormat,
      depthWriteEnabled,
      depthCompare: 'always',
      stencilFront: stencilState,
      stencilBack: stencilState,
      stencilReadMask: 0xff,
      stencilWriteMask: 0xff,
    } as const;

    const checkState = {
      format: depthStencilFormat,
      depthWriteEnabled: false,
      depthCompare: 'equal',
      stencilFront: stencilState,
      stencilBack: stencilState,
      stencilReadMask: 0xff,
      stencilWriteMask: 0xff,
    } as const;

    const testStates = [
      // Draw a base point with depth write enabled.
      { state: baseState, color: kBaseColor, depth: 1.0 },
      // Draw a second point without depth write enabled.
      { state: depthWriteState, color: kRedStencilColor, depth: 0.0 },
      // Draw a third point which should occlude the second even though it is behind it.
      { state: checkState, color: kGreenStencilColor, depth: lastDepth },
    ];

    t.runDepthStateTest(testStates, _expectedColor);
  });

g.test('depth_test_fail')
  .desc(
    `
  Test that render results on depth test failure cases with 'less' depthCompare operation and
  depthWriteEnabled is true.
  `
  )
  .params(u =>
    u //
      .combineWithParams([
        { secondDepth: 1.0, lastDepth: 2.0, _expectedColor: kBaseColor }, // fail -> fail.
        { secondDepth: 0.0, lastDepth: 2.0, _expectedColor: kRedStencilColor }, // pass -> fail.
        { secondDepth: 2.0, lastDepth: 0.9, _expectedColor: kGreenStencilColor }, // fail -> pass.
      ] as const)
  )
  .fn(t => {
    const { secondDepth, lastDepth, _expectedColor } = t.params;

    const depthStencilFormat: GPUTextureFormat = 'depth24plus-stencil8';

    const baseState = {
      format: depthStencilFormat,
      depthWriteEnabled: true,
      depthCompare: 'always',
      stencilReadMask: 0xff,
      stencilWriteMask: 0xff,
    } as const;

    const depthTestState = {
      format: depthStencilFormat,
      depthWriteEnabled: true,
      depthCompare: 'less',
      stencilReadMask: 0xff,
      stencilWriteMask: 0xff,
    } as const;

    const testStates = [
      { state: baseState, color: kBaseColor, depth: 1.0 },
      { state: depthTestState, color: kRedStencilColor, depth: secondDepth },
      { state: depthTestState, color: kGreenStencilColor, depth: lastDepth },
    ];

    t.runDepthStateTest(testStates, _expectedColor);
  });

// Use a depth value of 0.4, which is exactly representable in depth16unorm (26214 / (2^16-1))
// and depth24unorm (6710886 / (2^24-1)), and closely approximated in depth32float
// (0.4000000059604644775390625).
// This can help prevent shaders and depthClearValue get rounded in different way making equal
// comparison result unexpected.
const kMiddleDepthValue = 0.4;

g.test('depth_compare_func')
  .desc(
    `Tests each depth compare function works properly. Clears the depth attachment to various values, and renders a point at depth 0.5 with various depthCompare modes.`
  )
  .params(u =>
    u.combine('format', kDepthTextureFormats).combineWithParams([
      { depthCompare: 'never', depthClearValue: 1.0, _expected: backgroundColor },
      { depthCompare: 'never', depthClearValue: kMiddleDepthValue, _expected: backgroundColor },
      { depthCompare: 'never', depthClearValue: 0.0, _expected: backgroundColor },
      { depthCompare: 'less', depthClearValue: 1.0, _expected: triangleColor },
      { depthCompare: 'less', depthClearValue: kMiddleDepthValue, _expected: backgroundColor },
      { depthCompare: 'less', depthClearValue: 0.0, _expected: backgroundColor },
      { depthCompare: 'less-equal', depthClearValue: 1.0, _expected: triangleColor },
      {
        depthCompare: 'less-equal',
        depthClearValue: kMiddleDepthValue,
        _expected: triangleColor,
      },
      { depthCompare: 'less-equal', depthClearValue: 0.0, _expected: backgroundColor },
      { depthCompare: 'equal', depthClearValue: 1.0, _expected: backgroundColor },
      { depthCompare: 'equal', depthClearValue: kMiddleDepthValue, _expected: triangleColor },
      { depthCompare: 'equal', depthClearValue: 0.0, _expected: backgroundColor },
      { depthCompare: 'not-equal', depthClearValue: 1.0, _expected: triangleColor },
      {
        depthCompare: 'not-equal',
        depthClearValue: kMiddleDepthValue,
        _expected: backgroundColor,
      },
      { depthCompare: 'not-equal', depthClearValue: 0.0, _expected: triangleColor },
      { depthCompare: 'greater-equal', depthClearValue: 1.0, _expected: backgroundColor },
      {
        depthCompare: 'greater-equal',
        depthClearValue: kMiddleDepthValue,
        _expected: triangleColor,
      },
      { depthCompare: 'greater-equal', depthClearValue: 0.0, _expected: triangleColor },
      { depthCompare: 'greater', depthClearValue: 1.0, _expected: backgroundColor },
      { depthCompare: 'greater', depthClearValue: kMiddleDepthValue, _expected: backgroundColor },
      { depthCompare: 'greater', depthClearValue: 0.0, _expected: triangleColor },
      { depthCompare: 'always', depthClearValue: 1.0, _expected: triangleColor },
      { depthCompare: 'always', depthClearValue: kMiddleDepthValue, _expected: triangleColor },
      { depthCompare: 'always', depthClearValue: 0.0, _expected: triangleColor },
    ] as const)
  )
  .fn(t => {
    const { depthCompare, depthClearValue, _expected, format } = t.params;
    t.skipIfTextureFormatNotSupported(format);

    const colorAttachmentFormat = 'rgba8unorm';
    const colorAttachment = t.createTextureTracked({
      format: colorAttachmentFormat,
      size: { width: 1, height: 1, depthOrArrayLayers: 1 },
      usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
    });
    const colorAttachmentView = colorAttachment.createView();

    const depthTexture = t.createTextureTracked({
      size: { width: 1, height: 1 },
      format,
      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
    });
    const depthTextureView = depthTexture.createView();

    const pipelineDescriptor: GPURenderPipelineDescriptor = {
      layout: 'auto',
      vertex: {
        module: t.device.createShaderModule({
          code: `
            @vertex fn main(
              @builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
              return vec4<f32>(0.5, 0.5, ${kMiddleDepthValue}, 1.0);
            }
            `,
        }),
        entryPoint: 'main',
      },
      fragment: {
        module: t.device.createShaderModule({
          code: `
            @fragment fn main() -> @location(0) vec4<f32> {
              return vec4<f32>(1.0, 1.0, 1.0, 1.0);
            }
            `,
        }),
        entryPoint: 'main',
        targets: [{ format: colorAttachmentFormat }],
      },
      primitive: { topology: 'point-list' },
      depthStencil: {
        depthWriteEnabled: true,
        depthCompare,
        format,
      },
    };
    const pipeline = t.device.createRenderPipeline(pipelineDescriptor);

    const encoder = t.device.createCommandEncoder();
    const depthStencilAttachment: GPURenderPassDepthStencilAttachment = {
      view: depthTextureView,
      depthClearValue,
      depthLoadOp: 'clear',
      depthStoreOp: 'store',
    };
    if (isStencilTextureFormat(format)) {
      depthStencilAttachment.stencilClearValue = 0;
      depthStencilAttachment.stencilLoadOp = 'clear';
      depthStencilAttachment.stencilStoreOp = 'store';
    }
    const pass = encoder.beginRenderPass({
      colorAttachments: [
        {
          view: colorAttachmentView,
          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
          loadOp: 'clear',
          storeOp: 'store',
        },
      ],
      depthStencilAttachment,
    });
    pass.setPipeline(pipeline);
    pass.draw(1);
    pass.end();
    t.device.queue.submit([encoder.finish()]);

    ttu.expectSinglePixelComparisonsAreOkInTexture(t, { texture: colorAttachment }, [
      {
        coord: { x: 0, y: 0 },
        exp: new Uint8Array(_expected),
      },
    ]);
  });

g.test('reverse_depth')
  .desc(
    `Tests simple rendering with reversed depth buffer, ensures depth test works properly: fragments are in correct order and out of range fragments are clipped.
    Note that in real use case the depth range remapping is done by the modified projection matrix.
(see https://developer.nvidia.com/content/depth-precision-visualized).`
  )
  .params(u => u.combine('reversed', [false, true]))
  .fn(t => {
    const colorAttachmentFormat = 'rgba8unorm';
    const colorAttachment = t.createTextureTracked({
      format: colorAttachmentFormat,
      size: { width: 1, height: 1, depthOrArrayLayers: 1 },
      usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
    });
    const colorAttachmentView = colorAttachment.createView();

    const depthBufferFormat = 'depth32float';
    const depthTexture = t.createTextureTracked({
      size: { width: 1, height: 1 },
      format: depthBufferFormat,
      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
    });
    const depthTextureView = depthTexture.createView();

    const pipelineDescriptor: GPURenderPipelineDescriptor = {
      layout: 'auto',
      vertex: {
        module: t.device.createShaderModule({
          code: `
            struct Output {
              @builtin(position) Position : vec4<f32>,
              @location(0) color : vec4<f32>,
            };

            @vertex fn main(
              @builtin(vertex_index) VertexIndex : u32,
              @builtin(instance_index) InstanceIndex : u32) -> Output {
              let zv = array(0.2, 0.3, -0.1, 1.1);
              let z = zv[InstanceIndex];

              var output : Output;
              output.Position = vec4<f32>(0.5, 0.5, z, 1.0);
              var colors : array<vec4<f32>, 4> = array<vec4<f32>, 4>(
                  vec4<f32>(1.0, 0.0, 0.0, 1.0),
                  vec4<f32>(0.0, 1.0, 0.0, 1.0),
                  vec4<f32>(0.0, 0.0, 1.0, 1.0),
                  vec4<f32>(1.0, 1.0, 1.0, 1.0)
              );
              output.color = colors[InstanceIndex];
              return output;
            }
            `,
        }),
        entryPoint: 'main',
      },
      fragment: {
        module: t.device.createShaderModule({
          code: `
            @fragment fn main(
              @location(0) color : vec4<f32>
              ) -> @location(0) vec4<f32> {
              return color;
            }
            `,
        }),
        entryPoint: 'main',
        targets: [{ format: colorAttachmentFormat }],
      },
      primitive: { topology: 'point-list' },
      depthStencil: {
        depthWriteEnabled: true,
        depthCompare: t.params.reversed ? 'greater' : 'less',
        format: depthBufferFormat,
      },
    };
    const pipeline = t.device.createRenderPipeline(pipelineDescriptor);

    const encoder = t.device.createCommandEncoder();
    const pass = encoder.beginRenderPass({
      colorAttachments: [
        {
          view: colorAttachmentView,
          clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 },
          loadOp: 'clear',
          storeOp: 'store',
        },
      ],
      depthStencilAttachment: {
        view: depthTextureView,

        depthClearValue: t.params.reversed ? 0.0 : 1.0,
        depthLoadOp: 'clear',
        depthStoreOp: 'store',
      },
    });
    pass.setPipeline(pipeline);
    pass.draw(1, 4);
    pass.end();
    t.device.queue.submit([encoder.finish()]);

    ttu.expectSinglePixelComparisonsAreOkInTexture(t, { texture: colorAttachment }, [
      {
        coord: { x: 0, y: 0 },
        exp: new Uint8Array(
          t.params.reversed ? [0x00, 0xff, 0x00, 0xff] : [0xff, 0x00, 0x00, 0xff]
        ),
      },
    ]);
  });