WebGPU学习(一): 开篇

介绍

大家好,本系列从0开始学习WebGPU API,并给出相关的demo。

WebGPU介绍

WebGPU相当于DX12/Vulkan,能让程序员更灵活地操作GPU,从而大幅提升性能。

为什么要学习WebGPU

  • WebGPU更好地支持多线程

  • WebGPU支持compute shader,从而让程序员能利用GPU实现很多优化

  • WebGPU与WebGL2的区别很大,两者不容易兼容。如果要从WebGL1升级,最好直接升级到WebGPU,一劳永逸
  • WebGPU是标准,各大浏览器都会支持。不像WebGL2,苹果直接不支持。

  • 目前WebGPU虽然还未正式发布,但已经比较成熟了,也有相关的Demo可供学习

WebGPU完善程度

自从2017年提出WebGPU后,已经经过两年的发展。
目前Chrome和Safari支持得比较好,基本功能都有了(比如能够绘制pbr材质的模型,支持compute shader等),而且已经可以在MacOS中运行。

Babylonjs已经支持了WebGPU,详见WebGPU 文档

不过WebGPU对于shader使用哪种方案还没有确定:
在Chrome中,使用4.5版本的glsl ,需要通过官方提供的第三方库将其转成二进制码(SPIR-V);
在Safari中,直接使用新的语言WSL,不需要转换。

前者的好处是我们熟悉glsl,学习成本低;
后者的好处是新语言功能更强大,性能更好。

  • 参考资料

Implementation Status
WebGPU and WSL in Safari
WebGPU and WSL in Web Inspector
Babylonjs->WebGPU 文档
webgpu-samples for Chrome (uses GLSL via SPIR-V)
WebKit/Safari Demos (uses WSL)
gpuweb->issues

准备开发环境

目前只能在MacOS高版本中运行WebGPU(我之前是MacOS 10.10版本,运行不了WebGPU!升级为MacOS Catalina就可以运行了!!!)。

对于Chrome:
下载最新的Chrome Canary,并且打开 chrome://flags/#enable-unsafe-webgpu

对于Safari:
下载最新的Safari Technology Preview,选中 Safari → Preferences → Advanced → Develop menu→ Experimental Features → WebGPU

WebGPU学习资料

目前学习资料非常少,属于早期探索阶段~

WebGPU学习中文资料
WebGPU: An Explicit Graphics API for the Web
Get started with GPU Compute on the Web
WebGPU API规范

本系列技术选型

  • 开发环境

    • Chrome Canary
      因为Chrome市场占用率更高,而且shader使用glsl更简单,所以我使用Chrome Canary。
  • 技术栈

    • Javascript语言

    • 使用原生WebGPU API

能给你带来什么收益?

  • 从0学习WebGPU,熟悉原生API
  • 缩小与PC端最新的3D技术的差距(学了WebGPU,就只与目前最新的DX12 RTX差半代了!而WebGL2只相当于DX10)
  • 更新思维模式,学习最新的设计理念(WebGPU相比WebGL相当灵活和模块化,如果要被封装成引擎的话需要一些新的设计思路)

内容规划

本系列分成三个部分:

第一部分

一个一个地学习官方的sample,掌握基础的API调用,讲解相关的概念

第二部分

学习进阶内容(如多线程),并实现对应的demo

第三部分

综合运用所学内容,使用compute shader实现简单的光线追踪demo

上一篇:06 HBase安装与伪分布式配置


下一篇:BackgroundLibrary库使用与技巧