柚子快报激活码778899分享：WebGPU学习（一）: 开篇
本系列从0开始学习WebGPU API，并给出相关的demo。
介绍
大家好，本系列从0开始学习WebGPU API，并给出相关的demo。
上一篇博文
WebGPU学习系列目录
下一篇博文
WebGPU学习（二）: 学习“绘制一个三角形”示例
WebGPU介绍
参考WebGPU 开发状态与计划：
WebGL是老的Web 3D图形API，它的版本演进如下图所示：
WebGPU是最新的Web 3D图形API，与WebGL的对比为：
浏览器封装了现代图形API（Dx12、Vulkan、Metal），提供给Web 3D程序员WebGPU API。
WebGPU概要：
为什么要学习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，学习成本低；
后者的好处是新语言功能更强大，性能更好。
参考资料
WebGPU 开发状态与计划-2018.11.17
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
大家可以使用我下载的Chrome Canary。
对于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（我fork到本地了），掌握基础的API调用，讲解相关的概念
第二部分（开始写了）
学习光线追踪，并实现对应的sample
第三部分（没有开始写）
综合运用所学内容，实现一些demo（如gpu driven render pipeline）
柚子快报激活码778899分享：WebGPU学习（一）: 开篇
发表评论