WebGPU实时光追美少女
世界Create
作为一个老二刺螈,我进入这个行业的最初动机可以追溯到十年前打通了《Ever17》的那个下午,这个动机就是——美少女。做一个美少女游戏,是我人生的悲愿,而为了完成这个愿望,我必须要从头开始,学习编程、图形学、编写渲染引擎、乃至实现游戏引擎。而在硬件高速发展的现在,实时光线追踪成为了可能,同时Web平台上的新一代图形APIWebGPU提供了丰富的能力也可以让我们进行这样的尝试。
【WebGPU实时光追美少女】踩坑与调试心得
世界Skill
在前面的七篇文章中,我从概论开始,论述了简单WebGPU渲染引擎的实现,并实现了一个支持BVH加速结构和BRDF光照模型的实时路径追踪渲染器。但由于WebGPU的API的实验性,目前相关标准仍然可能不断变更,而由于配套于WebGPU的调试工具还不存在,所以在不重编Chromium的情况下只能想一些朴素的方法来调试,这里就记录了一些调试心得。
【WebGPU实时光追美少女】降噪与色调映射
世界Skill
在上一篇文章BRDF与蒙特卡洛积分的最后,我们最终得到了一个充满了噪点的输出,接下来要考虑的就是如何降噪(Denoise),这个分为时间和空间两部分。并且由于整个光照计算都是在高动态范围(HDR)计算的,最后还要做一次色调映射(Tone Mapping)来将其转换到有限的低动态范围(LDR),便于显示器显示。
【WebGPU实时光追美少女】BRDF与蒙特卡洛积分
世界Skill
在上一篇文章BVH与射线场景求交插值中,我论述了如何对场景进行划分、如何求得射线和场景中三角形的交点、如何判断射线和某点之间是否有遮挡、射线是否与光源相交,以及如何得到插值后的顶点和材质属性。有了这些数据,便可以进行最终的光照计算,这里会涉及到BRDF模型、直接光照、间接光照、蒙特卡洛积分、重要性采样、随机数生成等等的概念和实现。
【WebGPU实时光追美少女】管线组织与GBuffer
世界Skill
上一篇文章场景数据组织与合并,我们讨论了要使用的材质、以及如何组织好场景数据,并对场景数据进行了合并。现在我们可以认为有了一个很大的Geometry
,其中存储着整个场景所有的图元信息,还有合并好的Uniform
、Texture
,以便在渲染过程中查找到物体上某一点对应的材质数据。那么下一步,就是如何利用这些数据进行渲染了。
【WebGPU实时光追美少女】场景数据组织与合并
世界Skill
本文将在上一篇文章WebGPU基础与简单渲染器的基础上,论述针对路径追踪,应当如何组织场景数据,这涉及到PBR材质定义、glTF资源的导出和加载、场景的构建、以及最重要的场景合并等内容。
【WebGPU实时光追美少女】WebGPU基础与简单渲染器
世界Skill
在本文中,笔者将论述如何用WebGPU来实现一个简单的渲染器,并且目前只支持静态物体渲染,没有动画物理等等组件,这个渲染器的架构脱胎于笔者过去研究和实现过的几个渲染引擎,以求尽量简单,而非大而全,所以实现中可能有粗糙之处,但作为如何使用WebGPU的例子而言是绝对足够的。
【WebGPU实时光追美少女】概览介绍
世界Skill
本系列文章将会论述如何用WebGPU来实现一个实时路径追踪渲染器,从一个简单渲染器为开端层层深入,了解经典路径追踪渲染器的各个部分,以及BRDF模型在路径追踪中的实现。
SEIN.JS - 渐进式Web3D解决方案
世界Create
我在支付宝工作两年的技能集大成作。
记一次向WebAssembly的移植:gl-matrix
世界Skill
由于某些工作上的原因,以及个人兴趣,配合之前用Rust+WASM写软件渲染器的踩坑,端午花了三天将gl-matrix移植到了WASM(但因为各种奇奇怪怪的事情一直没时间发文)。此移植包含gl-matrix的所有功能,同时具备完整的单元测试。库本身以Rust + wasm-bindgen + wasm-pack + webpack4的形式开发,使用TS + Karma + Mocha来写单元测试(当然前两年还能扯一扯“优雅”啥的,现在这些都常识了也没啥说的)。在使用方面,我提供了两种使用模式,来应对不同的场合。同时还使用了很多Trick来在不破坏工程性的同时优化性能,某种意义上可以当做Rust来写WASM的工程的模板。
«
0
»