这是一个创建于 1143 天前的主题，其中的信息可能已经有所发展或是发生改变。
作为一个老二刺螈，我进入这个行业的最初动机可以追溯到十年前打通了《 Ever17 》的那个下午，这个动机就是——美少女。做一个美少女游戏，是我人生的悲愿，而为了完成这个愿望，我必须要从头开始，学习编程、图形学、编写渲染引擎、乃至实现游戏引擎。而在硬件高速发展的现在，实时光线追踪成为了可能，同时 Web 平台上的新一代图形 APIWebGPU提供了丰富的能力也可以让我们进行这样的尝试。
所以为了渲染一个美少女，我一边学习一边实现，最终完成了这个项目和系列文章教程。本系列文章将会论述如何用 WebGPU 来实现一个实时路径追踪渲染器，从一个简单渲染器为开端层层深入，了解经典路径追踪渲染器的各个部分，以及 BRDF 模型在路径追踪中的实现。
当然，最后因为综合性能较差，真实感的美少女并没有被渲染出来，只能渲染一个 LowPoly 的 Miku555
项目
项目的 Github 仓库为：dtysky/webgpu-renderer。
Demo 为：Demo，注意目前需要最新的Chrome Canary版本，并且打开特定flag才行，详见项目的readme。
文章
- 概览介绍：将会对整个项目涉及的知识做一个综述。
- WebGPU 基础与简单渲染器：通过自己实现的一个简单渲染器来论述 WebGPU 的能力。
- 路径追踪-场景数据组织：针对路径追踪，如何组织场景数据，涉及到 PBR 材质、glTF 、场景合并等。
- 路径追踪-管线组织与 GBuffer：针对路径追踪，如何组织渲染管线，同时论述 GBuffer 的生成。
- 路径追踪-BVH 与射线场景求交插值：如何构建 BVH，以及如何在 CS 中求交。
- 路径追踪-BRDF 与蒙特卡洛积分：论述如何在路径追踪中运用蒙特卡洛采样实现直接光照和间接光照，以及运用 BRDF 光照模型。
- 路径追踪-降噪与色调映射：如何对充满噪点的图像进行空间和时间的滤波，最后输出如何进行色调映射。
- 踩坑与调试心得：对于 WebGPU 这样一个实验性的 API （至少当时），我是如何进行调试的血泪史（主要是 CS 部分）。
后记
由于本人水平有限，文章难免会有纰漏，欢迎各位在评论区积极指正。
当然即便是能做出来这些了，我还是做不出来我的美少女游戏...哎。
 |
1
zirconium 2021-10-08 11:31:57 +08:00
thanks.
|
 |
2
yangheng4922 2021-10-08 11:47:22 +08:00
集显打开 1.6FPS 好卡😂😂😂
|
 |
3
dtysky OP 建议如果要看 DEMO，大家限制一下浏览器的分辨率。。。比如使用移动端开发模式（ devtools ->toggle device toolbar ），开销还挺猛的😂
|
 |
4
milkleeeeee 2021-10-08 14:23:18 +08:00
这个真的厉害了，先膜拜一下大佬
|
 |
5
Rrrrrr 2021-10-08 14:48:47 +08:00
这个真的厉害了，先膜拜一下大佬
|
 |
6
cxsz 2021-10-08 14:52:03 +08:00
3070 都满载了....
|
 |
7
zeromake 2021-10-08 17:51:38 +08:00 via Android
上午刚刚在试 webgpu 效果发现 firefox 在一个动画 demo 会一直涨内存，关闭标签页也不会自动回收……，webgpu 还是属于 demo 级别，至少等 w3c 出了正式规范吧。
|
 |
8
7gugu 2021-10-08 18:01:46 +08:00
屌爆了，认真看看 dalao 的分享👀
|
 |
10
netnr 2021-10-08 18:48:06 +08:00 via Android
标题党，只是看到有美少女才点进来的，上当了
|
 |
12
44670 2021-10-08 23:27:31 +08:00
好耶
|
 |
13
invdan 2021-10-09 09:54:04 +08:00
大佬，考虑新机会么？ webgl 方向的游戏引擎开发
|
 |
15
lookas2001 2021-10-10 08:08:27 +08:00 via Android
太厉害了😮
|
Select Language