Orillusion

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

    Khronos 会议干货 | WebGPU 1.0 即将发布

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

      2022年1月25日 Khronos 组织了一场备受瞩目的 WebGL+WebGPU 网络研讨会。

       
      会议的主要部分有 :

      • WebGL 的最新消息和版本更新(WebGL 工作组组长 Ken Russell)

      • WebGPU规范和WebGPU生态的状态更新(Kai Ninomiya)

      • WebGPU的最佳实践案例 (Brandon Jones, Google)

      • WGSL着色器语言在线编辑器展示(Takahiro Aoyagi,Mozilla)

      • PlayCanvas的更新发布(Donovan Hutchence)

       

      我们总结归纳了有关WebGPU的部分,会议内容参考以下链接。

      WebGL + WebGPU Meetup - January 2022
      https://www.khronos.org/events/webgl-webgpu-meetup-january-2022

       
       

      WebGPU规范和WebGPU生态的状态更新

       
      WebGPU是Web端的一个新的图形API。它的底层是现代图形API,包括Vulkan,DX12 和 Metal。它采用了pre-validation的方法,例如pipeline objects,bind groups,这些可以避免在运行过程中做draw time validation,并且简化了API 的编程逻辑。另外,相比WebGL,WebGPU还增加了一些新的特性,比如compute shader,shader storage,并且避免了使用global state。

      WebGPU也为未来的渲染功能打好了基础,像是bindless ray tracing shader features,尽可能多的暴露native端的一些特性,并且能够跨平台夸浏览器的使用。

      WebGPU 目前还处于研发阶段,预计将在2022年第二季度发布第一个版本1.0。同时着色器语言的规范也在快速的更迭中。
       
      Screenshot 2022-02-23 at 07.06.47.png

       

      Orillusion的官网上有WebGPU和WGSL规范的中文版,欢迎小伙伴们来查看,欢迎到我们的GitHub中留言修改。

       

      • Orillusion WebGPU中文文档 GitHub 链接

      Screenshot 2022-02-22 at 09.07.40.png

       

      虽然,WebGPU还处于测试阶段,但已经可以在Chrome和Firefox中使用啦。做本地测试的同学可以使用Chrome Canary或者Firefox Nightly,只需要设置相应的flag就可以。(在正常浏览的时候建议不要开启WebGPU)

      • Chrome Canary: 在 about:flags 中,启用enable-unsafe-webgpu

      • Firefox Nightly: 在 about:config中,设置dom.webgpu.enabled

      • Chrome Origin Trial 注册链接: https://developer.chrome.com/origintrials/#/trials/active

       

      开发者们可以利用Chrome(94+)的Origin Trial,向Chrome申请WebGPU的权限,得到一个Token,放到HTML head里就可以使用特定的API,就可以发布WebGPU的应用给到端用户,在Mac、Windows和Chrome OS系统中都可以。用户不用设置任何的Tag也可以查看WebGPU渲染的内容。

       

      • Orillusion 首页 Demo

      Screenshot 2022-02-17 at 03.59.21.jpg

       

      大家可以参考一些WebGPU的资料,包括上面介绍的W3C官方文档,以及一些JS库,例如Babylon.js,Three.js,TensorFlow.js以及用Rust编写的wgpu可以对应使用WebAssembly。在WebGPU 1.0 版本发布前后,Orillusion也会开源,迎来第一批KA developers,届时欢迎大家来探讨和使用。

      WebGPU使用一种新的着色器语言WGSL, 有一系列的着色器语言编译器,可以将「WGSL, Vulkan SPIR-V」转译成「WGSL,SPIR-V,HLSL,MSL」。大家可以参考Google Tint和Mozilla Naga。

      • Google’s Tint:https://dawn.googlesource.com/tint

      • Mozilla’s Naga:https://github.com/gfx-rs/naga

       
       

      WebGPU的最佳实践案例

       

      Brandon Jones在Google工作了9年,是一名Chrome团队的工程师。负责WebGPU的规范文档编辑和开发工作。

      最近他开发了第一款完全基于WebGPU的小游戏,Spooky Ball。游戏很简单,里面使用了shadow mapping,bloom filtering for emissive materials, 上传gltf图片,以及一些动画效果。这个小游戏更多是用来测试,WebGPU的API是否可以被正确的使用,并没有发挥WebGPU真正的实力。

       

      • Spooky Ball

      Screenshot 2022-02-21 at 12.22.18.jpg

       

      Brandon Jones还给出了一些最佳实践案例,我们来看来自Orillusion社区UGC 四季留歌 的站内分享,点击查看!

      • WebGPU的几个最佳实践

      飞书20220217-041323.jpg

      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