从今天 2021年12月22日 开始学习和探索 WebGPU。
本系列教程对应的示例代码仓库：https://github.com/puxiao/react-webgpu-samples
我新创建的另外一个仓库，专门用来讲解 WebGPU 的着色器语言 WGSL
仓库地址：https://github.com/puxiao/wgsl-tutorial
为什么要学习WebGPU？
-
十几年前 Flash 的出现颠覆了网页表现形式
-
后来 HTML5 的出现又逐渐取代了 Flash
-
再后来 WebGL 的出现让浏览器端可以实时渲染出 3D 场景
第一次在浏览器上看到可交互的 3D 模型，那种震撼是吓人的。
-
此刻 WebGPU 又要来取代 WebGL 了
尽管 WebGPU 目前还处于 草案阶段，估计正式版 v1.0 还要半年后才会发布。
WebGPU——下一代 Web 图形技术。
你会 WebGPU 吗，你就要开始写教程了？
我不会 WebGPU，我也是才开始学习，但是我个人的学习风格是边学习边写教程。
-
用教会别人的形式来学习，这种方式对我个人而言真的很有用。
我从 网页设计师 转行 Web 开发就全部是用这种方式走过来的。
-
若我的学习分享能够帮助同样的新手小白，能给我点个赞，这反向会激励我持续的学习。
每次看到 Github 上有人 starred 或 forked 我写的东西，真的很开心。
我的前端技术栈介绍：
-
前端 JS：React Hooks、TypeScript
如果你习惯使用 Vue，看本教程是完全没有问题的。
我强烈建议你一定要使用 TypeScript。
-
图形学：Three.js、Cesium.js、3D 图形化 基础知识
我对原生 WebGL 并不熟，也不会写 GLSL，我只是会 Three.js。
3D 图形化的一些基础知识我是会的，例如 点乘、叉乘、向量归一、矩阵转换、齐次坐标、球极坐标、管线渲染 等等。
我会一些基础的 Cesium.js，我不会 Babylon.js。
-
后端：Koa、MongoDB、Nginx、Docker、CentOS ...
我认为前端一定要懂点网络通信、Shell 命令，这对于理解前端开发非常有帮助。
我的学习和写作计划：
-
WebGPU 基础知识
-
WebGPU 常见类、属性和方法
-
Three.js 中 WebGPU 相关类的源码阅读
目前 Three.js 中的 WebGPU 相关类代码并未出现在其官方文档中。
代码位于：https://github.com/mrdoob/three.js/tree/dev/examples/jsm/renderers/webgpu
-
WGSL 基础学习
GLSL 是 WebGL 渲染器开发语言
WGSL 是 WebGPU 的渲染器开发语言
-
我会单独创建一个目录，用来存放 WebGPU 相关新闻或学习资料。
或许我会尝试翻译某些文章
本系列教程中，我打算开始添加配图。
我以前写的 React hooks、Three.js 等教程，几乎都是纯文字，没有配图。
学习 WebGPU 你需要提前具备的一些知识：
-
ES6 各种新的语法特性，尤其是 Promise、async/await
WebGPU 中大量的操作都是异步的，因此你一定要会 Promise
-
图形学：无论 WebGL 还是 WebGPU，图形学基础是一定要掌握的，否则你根本没办法去理解 3D 图形化开发中遇到的很多概念和用法。
对于前端人而言，图形学才是我们学习 3D 开发最大的难点。
目前有一个事实，那些原本做 3D 开发的人，例如 3D 建模 渲染、3D 游戏开发、U3D 的从业者他们转行做 Web 3D，对我们前端进行
降维打击，我们在他们面前真的就是 学渣、被秒杀。
如果精力可以，最好去学习一下 Rust，因为这个是大趋势，对于开发 WebGPU 帮助非常大。
我计划明年也学习一下 Rust。
特别强调：
我也是刚开始学习，若中间有理解不到位，讲错的地方，还请担待。
若能对我的错误指正，不胜感激。
本教程地址：https://github.com/puxiao/webgpu-tutorial
若发现我有写错的地方，欢迎提交 Issues
欢迎与我交流：
Github：https://github.com/puxiao
微信：78657141(同QQ)
教程同步：
本教程文章也会同步发布到我申请的个人微信公众号里，公众号名称就叫：WebGPU
目前还真的没有其他公众号专注于 WebGPU，所以这个名称我就申请到了。
除了写作，若还有精力，我会尝试将文章转成视频，发布在我的个人微信视频号里。
个人微信视频号名称也是：WebGPU
从侧面也反映出，目前前端搞 WebGPU 的人真的很少，弯道超车的机会来了，加油吧。
关于版权：
- 若你发现我引用了你的文章、图片、PPT 或视频截图、或者其他你认侵犯到你权利的地方，请通知我。
- 若你想转发我的文章，请先告诉我，我希望至少你能注明文章来源和作者。
前端同仁，加油，一起学习 WebGPU ！