WebGPU: test bindGroupLayout filtering and depth

README.md

WebGPU: test bindGroupLayout filtering and depth

view on jsgist

index.css

html, body {
  margin: 0;
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
}

index.html

<canvas></canvas>

index.js

const code = `
@group(0) @binding(0) var tex : texture_depth_2d;
@group(0) @binding(1) var smp : sampler;
//@group(0) @binding(2) var tex2 : texture_2d<f32>;

// Load the depth value and return it as the frag_depth.
@compute @workgroup_size(1) fn cs() {
  _ = textureSampleLevel(tex, smp, vec2f(0), 0);
  //_ = textureSampleLevel(tex2, smp, vec2f(0), 0);
}
`;

(async() => {
  const adapter = await navigator.gpu?.requestAdapter();
  const device = await adapter?.requestDevice();
  if (!device) {
    alert('need webgpu');
    return;
  }
  device.addEventListener('uncapturederror', e => console.log(e.error.message));

  const module = device.createShaderModule({ code });
  const p = device.createComputePipeline({
    layout: 'auto',
    compute: { module },
  })

  const tex = device.createTexture({
    size: [1],
    format: 'depth16unorm',
    usage: GPUTextureUsage.TEXTURE_BINDING,
  })

  const tex2 = device.createTexture({
    size: [1],
    format: 'rgba8unorm',
    usage: GPUTextureUsage.TEXTURE_BINDING,
  });

  const smp = device.createSampler({
    minFilter: 'linear',
  });

  const bg = device.createBindGroup({
    layout: p.getBindGroupLayout(0),
    entries: [
      { binding: 0, resource: tex.createView() },
      { binding: 1, resource: smp },
      //{ binding: 2, resource: tex2.createView() },
    ],
  });

  const encoder = device.createCommandEncoder();
  const pass = encoder.beginComputePass();
  pass.setPipeline(p);
  pass.setBindGroup(0, bg);
  pass.dispatchWorkgroups(1);
  pass.end();

  device.queue.submit([encoder.finish()]);

})();

jsGist.json

{"name":"WebGPU: test bindGroupLayout filtering and depth","settings":{},"filenames":["index.html","index.css","index.js"]}