WebGPU | 相关API使用例子

 | 这篇博客我会持续更新，因为目前WebGPU标准仍在更新阶段，不稳定， 主要是参照标准API，举出例子，因为WebGPU标准介绍是在太难懂了，我按照一些实现WebGPU的代码例子，把各模块功能调用的语法总结出来，供之后编程参考使用。

 

检查是否支持GPU：<!navigator.gpu>

 

const checkgpu = ()=>{
     let result ='ok,你的浏览器支持WebGPU'; 
     if(!navigator.gpu){
         result ='no，你对浏览器不支持WebGPU'
    }
    return result;
}

对adapter是否支持的另一种写法
if (!navigator.gpu) throw Error("WebGPU not supported.");   //检查浏览器是否支持WebGPU，如果不支持会显示这个打印

const adapter = await navigator.gpu.requestAdapter();    //检查适配器支持情况，如果不支持显示这个打印
if (!adapter) throw Error("Couldn’t request WebGPU adapter.");

const device = await adapter.requestDevice();          //检查GPU设备是否正确支持，如果不支持显示这个打印
if (!device) throw Error("Couldn’t request WebGPU logical device.");

 

 

 

 

计算管道和渲染管道：<ComputePipeline : RenderPipeline>

const module = device.createShaderModule({    //渲染管线示例
  code: `
    @stage(compute) @workgroup_size(64)
    fn main() {
      // Pointless!
    }
  `,
});

const pipeline = device.createComputePipeline({   //计算管线示例
  compute: {
    module,
    entryPoint: "main",
  },
});