const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const adapter = await navigator.gpu?.requestAdapter();
const device = await adapter?.requestDevice();

const context = canvas.getContext('webgpu') as GPUCanvasContext;

const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

//配置 GPUCanvasContext 的方法，用于将 WebGPU 的渲染管道与 HTML <canvas> 结合起来。
//这个方法会指定如何配置画布的渲染属性，包括格式、尺寸等，
//从而将 WebGPU 的渲染输出直接呈现在浏览器的 <canvas> 元素上。
context.configure({
  device,
  format: presentationFormat,
  alphaMode: 'premultiplied',
});

//创建pipeline
...
...