WebGPU: resolve bgra8unorm-srgb

README.md

WebGPU: resolve bgra8unorm-srgb

view on jsgist

index.css

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

index.html

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

index.js

const adapter = await navigator.gpu?.requestAdapter({
  powerPreference: 'low-power'
});
const device = await adapter?.requestDevice();
console.log(device.adapterInfo?.architecture);
console.log(device.adapterInfo?.vendor);
console.log(device.adapterInfo?.description);
device.addEventListener('uncapturederror', e => console.error(e.error.message));

for (const format of ['rgba8unorm', 'rgba8unorm-srgb', 'bgra8unorm-srgb']) {
  const texture = device.createTexture({
    size: [1, 1],
    sampleCount: 4,
    format,
    usage: GPUTextureUsage.RENDER_ATTACHMENT,
  });

  const resolveTexture = device.createTexture({
    size: [1, 1],
    sampleCount: 1,
    format,
    usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
  });

  {
    const module = device.createShaderModule({code: `
      struct VSOutput {
        @builtin(position) pos: vec4f,
      };

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

      @fragment fn fs(v: VSOutput) -> @location(0) vec4f {
        return vec4f(1);
      }
      `,
    });
    const pipeline = device.createRenderPipeline({
      layout: 'auto',
      vertex: { module },
      fragment: { module, targets: [ { format }] },
      multisample: { count: 4 }
    });

    const encoder = device.createCommandEncoder();
    const pass = encoder.beginRenderPass({
      colorAttachments: [
        {
          view: texture.createView(),
          clearValue: [0, 0, 0, 0],
          loadOp: 'clear',
          storeOp: 'store',
          resolveTarget: resolveTexture.createView(),
        },
      ],
    });
    pass.setPipeline(pipeline);
    pass.draw(6);
    pass.end();


    const buffer = device.createBuffer({
      size: 4,
      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
    });

    encoder.copyTextureToBuffer(
      { texture: resolveTexture },
      { buffer },
      [ 1 ],
    );
    device.queue.submit([encoder.finish()]);

    await buffer.mapAsync(GPUMapMode.READ);
    const result = new Uint8Array(buffer.getMappedRange()).slice();
    buffer.unmap();

    console.log(`${format}: ${[...result]}`);
  }
} 

jsGist.json

{"name":"WebGPU: resolve bgra8unorm-srgb","settings":{},"filenames":["index.html","index.css","index.js"]}