WebGPU: Read Pixel via texture_storage_2d from different mip levels (via render pass)

README.md

WebGPU: Read Pixel via texture_storage_2d from different mip levels (via render pass)

view on jsgist

index.css

:root { color-scheme: light dark; }
pre { margin: 0;}

index.html

/*bug-in-github-api-content-can-not-be-empty*/

index.js

const adapter = await navigator.gpu.requestAdapter({
  featureLevel: 'compatibility',
});
const device = await adapter.requestDevice({
  requiredLimits: { maxStorageTexturesInFragmentStage: 1 },
});
device.addEventListener('uncapturederror', e => console.error(e.error.message));

const texture = device.createTexture({
  format: 'rgba8unorm',
  size: [2, 2, 1],
  mipLevelCount: 2,
  usage: GPUTextureUsage.COPY_DST |
         GPUTextureUsage.TEXTURE_BINDING |
         GPUTextureUsage.STORAGE_BINDING,
});

const layers = [0, -2, -1, 21, 22];

const c = {
  black: [0, 0, 0, 0],
  red: [255, 0, 0, 255],
  green: [0, 255, 0, 255],
  blue: [0, 0, 255, 255],
  yellow: [255, 255, 0, 255],
  cyan: [0, 255, 255, 255],
  magenta: [255, 0, 255, 255],
  gray: [128, 128, 128, 255],
  orange: [255, 168, 0, 255],
};
const valueToColor = new Map(Object.entries(c).map(([k, v]) => [v.toString(), k]));

const colors = [
  // mip level 0
  [
    c.red, c.red,
    c.red, c.red,
  ],
  // miplevel 2
  [
    c.green
  ],
];

for (let z = 0; z < texture.mipLevelCount; ++z) {
  log('mip level:', z);
  const width = texture.width >> z;
  const height = texture.width >> z;
  for (let y = 0; y < height; ++y) {
    const row = [];
    for (let x = 0; x < width; ++x) {
      row.push(pixelToColor(colors[z][y * width + x]));
    }
    log('  ', row.join(', '))
  }
}

device.queue.writeTexture(
  {texture},
  new Uint8Array(colors[0].flat()),
  { bytesPerRow: 8, rowsPerImage: 2 },
  [ 2, 2 ],
);
device.queue.writeTexture(
  {texture, mipLevel: 1},
  new Uint8Array(colors[1].flat()),
  { bytesPerRow: 4, rowsPerImage: 1 },
  [ 1, 1 ],
);

const sampler = device.createSampler({
  addressModeW: 'repeat',
});

const code = `
@group(0) @binding(0) var t0: texture_storage_2d<rgba8unorm, read>;
@group(0) @binding(1) var t1: texture_2d<f32>;

@vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
  let pos = array(vec2f(-1, 3), vec2f(3, -1), vec2f(-1, -1));
  return vec4f(pos[i], 0, 1);
}

@fragment fn fs(@builtin(position) p: vec4f) -> @location(0) vec4f {
  let r0 = textureLoad(t0, vec2u(0));
  let r1 = textureLoad(t1, vec2u(0), 0);
  return select(r0, r1, p.x > 1.0);
}

`;
log(code);
const module = device.createShaderModule({code});
const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: { module },
  fragment: { module, targets: [ { format: 'rgba32float' }] },
});

const target0 = device.createTexture({
  size: [2, 1],
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
  format: 'rgba32float',
});
const target1 = device.createTexture({
  size: [2, 1],
  usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
  format: 'rgba32float',
});
const targets = [target0, target1];

const resultBuffer = device.createBuffer({
  size: 32 * 2,
  usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
});

const encoder = device.createCommandEncoder();
for (let i = 0; i < 2; ++i) {
  const pass = encoder.beginRenderPass({
    colorAttachments: [
      {
        view: targets[i].createView(),
        loadOp: 'clear',
        storeOp: 'store',
      },
    ],
  });
  pass.setPipeline(pipeline);
  const bindGroup = device.createBindGroup({
    layout: pipeline.getBindGroupLayout(0),
    entries: [
      { binding: 0, resource: texture.createView({baseMipLevel: i, mipLevelCount: 1}) },
      { binding: 1, resource: texture.createView({baseMipLevel: i, mipLevelCount: 1}) },
    ],
  });

  pass.setBindGroup(0, bindGroup);
  pass.draw(3);
  pass.end();
  encoder.copyTextureToBuffer(
    { texture: targets[i] },
    { buffer: resultBuffer, offset: i * 32 },
    [ 2, 1 ],
  );
}
device.queue.submit([encoder.finish()]);

await resultBuffer.mapAsync(GPUMapMode.READ);
const result = new Float32Array(resultBuffer.getMappedRange());
log(result.length);
const pixels = Array.from(result).map(v => v * 255 | 0);
for (let i = 0; i < 2; ++i) {
  for (let j = 0; j < 2; ++j) {
    log(`${i} ${j}: ${pixelToColor(pixels.slice(i * 8 + j * 4, i * 8 + j * 4 + 4))}`);
  }
}

function pixelToColor(p) {
  const name = valueToColor.get(p.toString());
  return name ?? p.toString();
}

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = args.join(' ');
  document.body.appendChild(elem);
}

jsGist.json

{"name":"WebGPU: Read Pixel via texture_storage_2d from different mip levels (via render pass)","settings":{},"filenames":["index.html","index.css","index.js"]}