Skip to content

puxiao/webgpu-tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

78 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

webgpu-tutorial

从今天 2021年12月22日 开始学习和探索 WebGPU。


本系列教程对应的示例代码仓库:https://github.com/puxiao/react-webgpu-samples


我新创建的另外一个仓库,专门用来讲解 WebGPU 的着色器语言 WGSL

仓库地址:https://github.com/puxiao/wgsl-tutorial


wechat.jpg


为什么要学习WebGPU?

  • 十几年前 Flash 的出现颠覆了网页表现形式

  • 后来 HTML5 的出现又逐渐取代了 Flash

  • 再后来 WebGL 的出现让浏览器端可以实时渲染出 3D 场景

    第一次在浏览器上看到可交互的 3D 模型,那种震撼是吓人的。

  • 此刻 WebGPU 又要来取代 WebGL 了

    尽管 WebGPU 目前还处于 草案阶段,估计正式版 v1.0 还要半年后才会发布。

WebGPU——下一代 Web 图形技术。


你会 WebGPU 吗,你就要开始写教程了?

我不会 WebGPU,我也是才开始学习,但是我个人的学习风格是边学习边写教程。

  1. 用教会别人的形式来学习,这种方式对我个人而言真的很有用。

    我从 网页设计师 转行 Web 开发就全部是用这种方式走过来的。

  2. 若我的学习分享能够帮助同样的新手小白,能给我点个赞,这反向会激励我持续的学习。

    每次看到 Github 上有人 starred 或 forked 我写的东西,真的很开心。


我的前端技术栈介绍:

  1. 前端 JS:React Hooks、TypeScript

    如果你习惯使用 Vue,看本教程是完全没有问题的。

    我强烈建议你一定要使用 TypeScript。

  2. 图形学:Three.js、Cesium.js、3D 图形化 基础知识

    我对原生 WebGL 并不熟,也不会写 GLSL,我只是会 Three.js。

    3D 图形化的一些基础知识我是会的,例如 点乘、叉乘、向量归一、矩阵转换、齐次坐标、球极坐标、管线渲染 等等。

    我会一些基础的 Cesium.js,我不会 Babylon.js。

  3. 后端:Koa、MongoDB、Nginx、Docker、CentOS ...

    我认为前端一定要懂点网络通信、Shell 命令,这对于理解前端开发非常有帮助。


我的学习和写作计划:

  1. WebGPU 基础知识

  2. WebGPU 常见类、属性和方法

  3. Three.js 中 WebGPU 相关类的源码阅读

    目前 Three.js 中的 WebGPU 相关类代码并未出现在其官方文档中。

    代码位于:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/renderers/webgpu

  4. WGSL 基础学习

    GLSL 是 WebGL 渲染器开发语言

    WGSL 是 WebGPU 的渲染器开发语言

  5. 我会单独创建一个目录,用来存放 WebGPU 相关新闻或学习资料。

    或许我会尝试翻译某些文章


本系列教程中,我打算开始添加配图。

我以前写的 React hooks、Three.js 等教程,几乎都是纯文字,没有配图。


学习 WebGPU 你需要提前具备的一些知识:

  1. ES6 各种新的语法特性,尤其是 Promise、async/await

    WebGPU 中大量的操作都是异步的,因此你一定要会 Promise

  2. 图形学:无论 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

邮箱:[email protected]

微信:78657141(同QQ)


教程同步:

本教程文章也会同步发布到我申请的个人微信公众号里,公众号名称就叫:WebGPU

目前还真的没有其他公众号专注于 WebGPU,所以这个名称我就申请到了。


除了写作,若还有精力,我会尝试将文章转成视频,发布在我的个人微信视频号里。

个人微信视频号名称也是:WebGPU

从侧面也反映出,目前前端搞 WebGPU 的人真的很少,弯道超车的机会来了,加油吧。


关于版权:

  1. 若你发现我引用了你的文章、图片、PPT 或视频截图、或者其他你认侵犯到你权利的地方,请通知我。
  2. 若你想转发我的文章,请先告诉我,我希望至少你能注明文章来源和作者。

前端同仁,加油,一起学习 WebGPU !

About

WebGPU 系列教程,学习和探索 WebGPU 世界。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published