V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
dtysky
V2EX  ›  分享创造

《WebGPU 实时光追美少女》系列教程

  •  5
     
  •   dtysky ·
    dtysky · 2021-10-08 11:31:07 +08:00 · 5420 次点击
    这是一个创建于 1124 天前的主题,其中的信息可能已经有所发展或是发生改变。

    0.png

    作为一个老二刺螈,我进入这个行业的最初动机可以追溯到十年前打通了《 Ever17 》的那个下午,这个动机就是——美少女。做一个美少女游戏,是我人生的悲愿,而为了完成这个愿望,我必须要从头开始,学习编程、图形学、编写渲染引擎、乃至实现游戏引擎。而在硬件高速发展的现在,实时光线追踪成为了可能,同时 Web 平台上的新一代图形 APIWebGPU提供了丰富的能力也可以让我们进行这样的尝试。

    所以为了渲染一个美少女,我一边学习一边实现,最终完成了这个项目和系列文章教程。本系列文章将会论述如何用 WebGPU 来实现一个实时路径追踪渲染器,从一个简单渲染器为开端层层深入,了解经典路径追踪渲染器的各个部分,以及 BRDF 模型在路径追踪中的实现。

    当然,最后因为综合性能较差,真实感的美少女并没有被渲染出来,只能渲染一个 LowPoly 的 Miku555

    项目

    项目的 Github 仓库为:dtysky/webgpu-renderer

    Demo 为:Demo,注意目前需要最新的Chrome Canary版本,并且打开特定flag才行,详见项目的readme

    文章

    1. 概览介绍:将会对整个项目涉及的知识做一个综述。
    2. WebGPU 基础与简单渲染器:通过自己实现的一个简单渲染器来论述 WebGPU 的能力。
    3. 路径追踪-场景数据组织:针对路径追踪,如何组织场景数据,涉及到 PBR 材质、glTF 、场景合并等。
    4. 路径追踪-管线组织与 GBuffer:针对路径追踪,如何组织渲染管线,同时论述 GBuffer 的生成。
    5. 路径追踪-BVH 与射线场景求交插值:如何构建 BVH,以及如何在 CS 中求交。
    6. 路径追踪-BRDF 与蒙特卡洛积分:论述如何在路径追踪中运用蒙特卡洛采样实现直接光照和间接光照,以及运用 BRDF 光照模型。
    7. 路径追踪-降噪与色调映射:如何对充满噪点的图像进行空间和时间的滤波,最后输出如何进行色调映射。
    8. 踩坑与调试心得:对于 WebGPU 这样一个实验性的 API (至少当时),我是如何进行调试的血泪史(主要是 CS 部分)。

    后记

    由于本人水平有限,文章难免会有纰漏,欢迎各位在评论区积极指正。

    当然即便是能做出来这些了,我还是做不出来我的美少女游戏...哎。

    15 条回复    2021-10-10 08:08:27 +08:00
    zirconium
        1
    zirconium  
       2021-10-08 11:31:57 +08:00
    thanks.
    yangheng4922
        2
    yangheng4922  
       2021-10-08 11:47:22 +08:00
    集显打开 1.6FPS 好卡😂😂😂
    dtysky
        3
    dtysky  
    OP
       2021-10-08 11:52:01 +08:00
    建议如果要看 DEMO,大家限制一下浏览器的分辨率。。。比如使用移动端开发模式( devtools ->toggle device toolbar ),开销还挺猛的😂
    milkleeeeee
        4
    milkleeeeee  
       2021-10-08 14:23:18 +08:00
    这个真的厉害了,先膜拜一下大佬
    Rrrrrr
        5
    Rrrrrr  
       2021-10-08 14:48:47 +08:00
    这个真的厉害了,先膜拜一下大佬
    cxsz
        6
    cxsz  
       2021-10-08 14:52:03 +08:00
    3070 都满载了....
    zeromake
        7
    zeromake  
       2021-10-08 17:51:38 +08:00 via Android
    上午刚刚在试 webgpu 效果发现 firefox 在一个动画 demo 会一直涨内存,关闭标签页也不会自动回收……,webgpu 还是属于 demo 级别,至少等 w3c 出了正式规范吧。
    7gugu
        8
    7gugu  
       2021-10-08 18:01:46 +08:00
    屌爆了,认真看看 dalao 的分享👀
    dtysky
        9
    dtysky  
    OP
       2021-10-08 18:41:09 +08:00
    @zeromake 内存回收这边是有点问题,到 chrome 目前应该处理得比较好了(大概是两个月前的更新修复的)。
    netnr
        10
    netnr  
       2021-10-08 18:48:06 +08:00 via Android
    标题党,只是看到有美少女才点进来的,上当了
    zeromake
        11
    zeromake  
       2021-10-08 18:50:42 +08:00
    @dtysky
    看来开源社区驱动还是干不过 google 驱动的 chrome 啊。
    44670
        12
    44670  
       2021-10-08 23:27:31 +08:00
    好耶
    invdan
        13
    invdan  
       2021-10-09 09:54:04 +08:00
    大佬,考虑新机会么? webgl 方向的游戏引擎开发
    dtysky
        14
    dtysky  
    OP
       2021-10-09 15:40:50 +08:00 via Android
    @invdan 不必了,对现在工作挺满意的
    lookas2001
        15
    lookas2001  
       2021-10-10 08:08:27 +08:00 via Android
    太厉害了😮
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1064 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:31 · PVG 03:31 · LAX 11:31 · JFK 14:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.