Orillusion

    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 标签

    WebGPU小白入门(一): 零基础创建第一个WebGPU项目

    Wiki
    orillusion tutorial webgpu
    8
    15
    1427
    正在加载更多帖子
    • 从旧到新
    • 从新到旧
    • 最多赞同
    回复
    • 在新帖中回复
    登录后回复
    此主题已被删除。只有拥有主题管理权限的用户可以查看。
    • admin
      admin 最后由 shuangliu 编辑

      看了这么多WebGPU的发展和优势,你是不是也有点手痒了,心想,WebGPU听起来那么复杂,到底怎么开始着手?发布一个WebGPU的Project到底怎么做?

      我们不知道把大象放冰箱是不是只要三步,但是我们可以告诉大家,有了Orillusion的模板,制作一个WebGPU的项目是多么轻松!

      Orillusion提供并部署了Chrome WebGPU Token,运行后,在Chrome 100+ 上即可支持WebGPU内容(支持最新wgsl版本)。

      Orillusion WebGPU模板链接:
      https://github.com/Orillusion/orillusion-webgpu-samples

      在Terminal中,输入以下命令,下载Github库,使用npm或yarn安装库,并运行,浏览器打开localhost:3000,即可看到运行结果,一个小小的三角形。

      # Clone the repo
      git clone https://github.com/Orillusion/orillusion-webgpu-samples.git
      ​
      # Go inside the folder
      cd orillusion-webgpu-samples
      ​
      # Start installing dependencies
      npm install #or yarn add
      ​
      # Run project at localhost:3000
      npm run dev #or yarn run dev
      

      就是这么简单,相信你已经在自己的电脑上实现了第一个WebGPU小程序,下面我们来看一下,在这个小小三角形下,Orillusion的工程师为我们做了什么吧!

      使用Vite打包

      前端技术的朋友们比较熟悉的打包工具还有Webpack、Rollup 和 Parcel 等,它们极大地改善了前端开发者的开发体验。Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类,通过原生ESM加载,极大的改进了代码编译时间,启动和热更新速度非常快,几乎是毫秒级更新。

      对 TypeScript、JSX、CSS 等支持开箱即用,Vite 使用 esbuild 将 TypeScript 转译到 JavaScript,约是 tsc 速度的 20~30 倍,同时 HMR 更新反映到浏览器的时间小于 50ms。这些特点优势对开发者是非常友好的。

      使用Vite开发的文件结构如下:

      ├─ 📂 node_modules/   # Dependencies
      │  ├─ 📁 @webgpu      # WebGPU types for TS
      │  └─ 📁 ...          # Other dependencies (TypeScript, Vite, etc.)
      ├─ 📂 src/            # Source files
      │  ├─ 📁 shaders      # Folder for shader files
      │  └─ 📄 *.ts         # TS files for each demo
      ├─ 📂 samples/        # Sample html
      │  └─ 📄 *.html       # HTML entry for each demo
      ├─ 📄 .gitignore      # Ignore certain files in git repo
      ├─ 📄 index.html      # Entry page
      ├─ 📄 LICENSE         # MIT
      ├─ 📄 logo.png        # Orillusion logo image
      ├─ 📄 package.json    # Node package file
      ├─ 📄 readme.md       # Read Me!
      └─ 📄 tsconfig.json   # TS configuration file
      

      安装WebGPU库,配置tsconfig文件

      我们的模板库已经安装了@webgpu/types,来支持WebGPU:

      npm install @webgpu/types --save
      

      将 vite/client 和 @webgpu/types 添加到 tsconfig 中的 compilerOptions.types 下:

      {
        "compilerOptions": {
          .. .. ..
          "types": ["vite/client", "@webgpu/types"]
        }
        "include": ["src"]
      }
      

      vite/client 会提供以下类型定义补充:

      • 资源导入 (例如:导入一个 .wgsl 文件)

      • import.meta.env 上 Vite 注入的环境变量的类型定义

      • import.meta.hot 上的 HMR API 类型定义

      绘制三角形

      Chrome 100+ wgsl 使用新的@ 标签 ,如果wgsl报错无法显示,请更新Chrome版本。

      1. 顶点着色器 triangle.vert.wgsl
      // 使用最新的wgsl标准
      @stage(vertex)
      fn main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
      var pos = array<vec2<f32>, 3>(
        vec2<f32>(0.0, 0.5),
        vec2<f32>(-0.5, -0.5),
        vec2<f32>(0.5, -0.5)
        );
        return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
      }
      
      1. 片元着色器 red.frag.wgsl
      // 使用最新的wgsl标准
      @stage(fragment)
      fn main() -> @location(0) vec4<f32> {
        return vec4<f32>(1.0, 0.0, 0.0, 1.0);
      }
      
      1. 绘制三角形 basicTriangle.ts

      vite/client 可以很方便的引入 string 类型的 wgsl 文件,在链接后添加<?raw>标注即可

      import triangleVertWGSL from './shaders/triangle.vert.wgsl?raw'
      import redFragWGSL from './shaders/red.frag.wgsl?raw'
      

      通过90行代码,来初始化webgpu的device,调用canvas,创建一个pipeline,传入顶点和片元着色器代码,最后绘制成功!

      Screenshot 2022-03-06 at 01.42.04.png

      WebGPU Origin Trial Token

      为了方便本地开发,Orillusion 申请了在 localhost 环境中可以使用的 Chrome WebGPU 的 Origin Trial Token,配置在 vite.config.js 中,可以不用下载Chrome Canary版本,也无需手动设置 unsafe-webgpu flag,在普通 Chrome 96+ 中均可支持WebGPU。在WebGPU正式发布前,Orillusion 会定期更新 token。

      // vite.config.js
      import { defineConfig } from 'vite'
      const devToken = 'Amu*****************=='
      module.exports = defineConfig({
        plugins: [
        {
          name: 'Origin-Trial',
          configureServer: server => {
            server.middlewares.use((_req, res, next) => {
              res.setHeader("Origin-Trial", devToken)
              next()
            })
          }
        }
        ]
      })
      

      小练习

      我们介绍了顶点着色器和片元着色器,那么尝试改变下坐标和颜色,来制作专属你的图形!Push到Git里,和我们一起交流分享!

      Orillusion WebGPU模板链接:
      https://github.com/Orillusion/orillusion-webgpu-samples

      我们知道,一个三角形怎么能满足同学们的求知欲呢,Orillusion团队计划发布更多WebGPU的课程,让我们一起来探索WebGPU,关注我们,敬请期待后续的分享!

      支阿怪 1 条回复 最后回复 回复 引用 1
      • 支阿怪
        支阿怪 @admin 最后由 shuangliu 编辑

        @admin 1f4d5f3f-8334-4881-b662-b3403b75e5b7-1646876396(1).jpg

        7b2fb08b-8a35-4a7f-a39a-97cef062d792-image.png

        1.请问出现No adapter found,是什么原因呢?
        2.如果浏览器不支持webgpu应该是Not support WebGPU吧,使用的edge最新版,还是说必须要用Chrome才可以?
        3.是否可以在vite.config.js配置中修改,使得Edge正常运行么?

        没有捷径,自发光芒

        shuangliu 1 条回复 最后回复 回复 引用 0
        • shuangliu
          shuangliu @支阿怪 最后由 shuangliu 编辑

          @wenhao0807
          目前webgpu没有正式发布,各大浏览器默认都是不开启webgpu的支持的,需要通过配置来启用webgpu的api,比如在chrome canary 中通过 chrome://flags/#enable-unsafe-webgpu 手动开启才可以。普通版本的chrome是没有这个选项的

          同样,edge其实也是基于chrome内核,其大部分配置跟chrome是一样的,也可以在 edge canary 中访问 edge://flags 开启webgpu。但同样普通edge版本中也没有该选项。

          除了这种手动设置flag的开启方式,chrome有另一种方法来测试webgpu,可以通过向chrome申请特定域名下的某个未公开的api的使用权限,也就是我们内置在 vite.config.js 中的那个devtoken,有了这个token,就可以在 localhost:3000 域名下的页面中使用webgpu权限了。但这个token只有在chrome中才起作用。

          Edge也有chrome一样的测试机制,可以识别chrome的token,但edge的验证服务和chrome是独立的,不能验证chrome的token,所以就出现一个bug,在edge中navigator.gpu存在,理论上可以用webgpu的api,但实际上没有权限调用。

          edge 目前的origin trail计划中没有webgpu的测试项目,所以目前只有在edge的开发者版本里通过设置flag手动启用webgpu才可以
          edge://flags/#enable-unsafe-webgpu

          支阿怪 1 条回复 最后回复 回复 引用 0
          • 支阿怪
            支阿怪 @shuangliu 最后由 编辑

            @shuangliu 感谢回复,了解了

            没有捷径,自发光芒

            1 条回复 最后回复 回复 引用 0
            • N
              Nerd 最后由 编辑

              好评, 相比起视频版我更喜欢文字, 期待下一期

              1 条回复 最后回复 回复 引用 0
              • G
                galooha 最后由 编辑

                chrome 101稳定版加入WebGpu的API了吗

                shuangliu 1 条回复 最后回复 回复 引用 0
                • shuangliu
                  shuangliu @galooha 最后由 编辑

                  @galooha 还没有,目前还是处于测试阶段,预计到105版本才会加入

                  1 条回复 最后回复 回复 引用 0
                  • S
                    shibingli 最后由 编辑

                    因工作需要,最近开始学习这个,感谢!

                    1 条回复 最后回复 回复 引用 0
                    • C
                      cx32205991 最后由 shuangliu 编辑

                      8b64b27b-535b-42cb-b90a-097844bc71e9-image.png
                      3bbc546f-8378-4b4b-9010-c58f0e5df5d4-image.png
                      684f9a80-58d1-47cf-830d-ae031869e73d-image.png
                      请问我在chrome102版本中显示不支持webgpu并且是拉取的模板已经存在了token是为什么?

                      shuangliu 1 条回复 最后回复 回复 引用 0
                      • shuangliu
                        shuangliu @cx32205991 最后由 编辑

                        @cx32205991 看您贴图的token 应该是已经过期了,请重新pull我们最新的代码,token需要定期更新。

                        另外,最新的 sample 代码使用的是最新的webgpu api,有一些 Chrome 102 版本已经不支持了,请尝试使用 Chrome Canary 版本运行

                        C J 2 条回复 最后回复 回复 引用 0
                        • C
                          cx32205991 @shuangliu 最后由 编辑

                          @shuangliu 好的多谢指导

                          1 条回复 最后回复 回复 引用 0
                          • J
                            jellyl823 @shuangliu 最后由 编辑

                            @shuangliu 已经拉取了最新的代码,但还是not surpport webgpu。

                            chrome canary版本106
                            chrome://flags/里面和webgpu有关的选项为WebGPU Developer Features设置为enable了
                            414eabfb-2ce7-40a5-ad7f-6e46ccd8611e-image.png

                            shuangliu 1 条回复 最后回复 回复 引用 0
                            • shuangliu
                              shuangliu @jellyl823 最后由 shuangliu 编辑

                              @jellyl823 是 Canary 的发布 bug,出现过好几次,Chrome 新版本发布时 忘了改 WebGPU 的版本 flag,导致 106 版本无法使用 WebGPU

                              1. 一般 Chrome 会在几天内修复该问题,可以保持更新
                              2. 可以先暂时启用 M105 的 flag,可以手动开启 webgpu,等106修复后再关闭正常使用

                              20220725-193637.jpg

                              J 2 条回复 最后回复 回复 引用 0
                              • J
                                jellyl823 @shuangliu 最后由 编辑

                                @shuangliu 多谢大佬,目前已经开了两个feature
                                0a28b9f7-f960-468b-85ac-a3c24cdb56c1-image.png
                                但还是不能跑起来
                                1834b5c3-e3ab-491d-a380-8e79dde54c36-image.png

                                1 条回复 最后回复 回复 引用 0
                                • J
                                  jellyl823 @shuangliu 最后由 编辑

                                  @shuangliu 多谢大佬,我刚试了一下,重新下载canary105
                                  开启chrome://flags/#enable-unsafe-webgpu,可以正常运行了!多谢!
                                  45c7ad65-cf14-417d-b48a-3d0a7e1acb97-image.png
                                  83bdeb67-759d-42aa-bfca-981c846b3f59-image.png

                                  1 条回复 最后回复 回复 引用 0
                                  • First post
                                    Last post

                                  Recent Post

                                  • 回复: Three.js vs Babylon.js vs Orillusion - Box 渲染测试

                                    rt,请问可以获得这个例子中渲染所使用的代码吗?我想进一步探究这种性能差距究竟来自于代码(开发者)还是框架(运行时)。

                                    • 阅读更多
                                  • J

                                    @shuangliu 多谢大佬,我刚试了一下,重新下载canary105
                                    开启chrome://flags/#enable-unsafe-webgpu,可以正常运行了!多谢!
                                    45c7ad65-cf14-417d-b48a-3d0a7e1acb97-image.png
                                    83bdeb67-759d-42aa-bfca-981c846b3f59-image.png

                                    • 阅读更多
                                  • J

                                    @shuangliu 多谢大佬,目前已经开了两个feature
                                    0a28b9f7-f960-468b-85ac-a3c24cdb56c1-image.png
                                    但还是不能跑起来
                                    1834b5c3-e3ab-491d-a380-8e79dde54c36-image.png

                                    • 阅读更多
                                  • @jellyl823 是 Canary 的发布 bug,出现过好几次,Chrome 新版本发布时 忘了改 WebGPU 的版本 flag,导致 106 版本无法使用 WebGPU

                                    一般 Chrome 会在几天内修复该问题,可以保持更新 可以先暂时启用 M105 的 flag,可以手动开启 webgpu,等106修复后再关闭正常使用

                                    20220725-193637.jpg

                                    • 阅读更多
                                  • J

                                    @shuangliu 已经拉取了最新的代码,但还是not surpport webgpu。

                                    chrome canary版本106
                                    chrome://flags/里面和webgpu有关的选项为WebGPU Developer Features设置为enable了
                                    414eabfb-2ce7-40a5-ad7f-6e46ccd8611e-image.png

                                    • 阅读更多

                                  Copyright © 2022 Orillusion | Contact US