学习笔记 | Orillusion-WebGPU小白入门（二）

最新推荐文章于 2023-06-15 20:54:37 发布

VIP文章肥宅Davina

最新推荐文章于 2023-06-15 20:54:37 发布

阅读量959

点赞数

分类专栏： WebGPU学习笔记文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/m0_51146371/article/details/126901788

版权

（二）绘制三角形

/src/basicTriangle.ts

WebGPU架构&原理

初始化Device：获取Adapter和Device对象

在Html页面中添加Canvas画布，用CSS占满全屏

<head>
    <style>
        canvas {
     
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script> type="module" scr="/src/basicTriangle.ts"</script>
</body>

async function initwebgpu(){
   
    if(!navigator.gpu)
        throw new Error()
    // 请求一个GPUAdapter对象(浏览器对WebGPU的抽象代理，不能直接操作），返回promise【异步API】
    const adapter = await navigator.gpu.requestAdapter({
   
    // 设置的是一个期望值，更多是一个flag，一般可以不设置或者暴力设置为高性能
    powerPreference:'high-performance'
    })
    // 请求一个具体的、可操作的逻辑实例【API】
    if(!adapter)
        throw new Error() //避免device为空
    const device = await adapter.requestDevice({