webgl 基础渲染demo_游戏引擎中的延迟渲染

全球图形学领域教育的领先者、自研引擎的倡导者、底层技术研究领域的技术公开者，东汉书院在致力于使得更多人群具备内核级竞争力的道路上，将带给小伙伴们更多的公开技术教学和视频，感谢一路以来有你的支持。我们正在用实际行动来帮助小伙伴们构建一套成体系的图形学知识架构，你在我们这里获得的不止于那些毫无意义的代码，我们这里更多的是代码背后的故事，以及精准、透彻的理解。我们不会扔给人们一本书或者给个思路让人们去自学，我们是亲自来设计出好的课程，让人们明白到底背后还有哪些细节。

简介

在3D图形学中，延迟渲染是在1988被一个叫做Michael Deering的人提出来的一种屏幕空间下着色的渲染技术。顾名思义，它之所以被称为延迟渲染，就是因为在第一个渲染pass中，无论是vertex shader还是fragment shader都不会进行任何着色的操作，着色这一步被延迟到第二个渲染通道中执行了。在延迟渲染中，第一个渲染通道中，只有那些在着色的时候会被使用到的数据会被传进去，然后第一个通道输出的数据会有位置、法线以及那些需要被渲染的表面的材质信息，在我们的演示教程中，对应的就是ColorBuffer。延迟渲染第一个渲染通道的输出数据会被输出到图片中，这些图片被成为Geometry Buffer，也就是着色的时候需要的几何数据都在这些buffer里面，又被简称为“G-Buffer”，这里的G指的是Geometry的缩写。这里我们需要使用到RTT技术（Render To Texture技术）。在延迟渲染的第二帧，我们的fragment shader会根据输入的G-Buffer的数据以及额外的光线信息，去计算出每一个像素点上的直接光照和间接光照，并对屏幕空间下的每个像素进行着色。在我们讨论延迟渲染的时候，你可能还会对下面这些技术感兴趣。但由于这些不属于架构级的东西，我们不会放在引擎课程里面为同学们讲解，关于GI、PBS以及RT，我们会在渲染专题课程中，为同学们系统的讲解这些知识点。

Michael_Deering​en.wikipedia.org Screen_space_ambient_occlusion​en.wikipedia.org

优点

延迟渲染的最大优点莫过于让每一次光照计算都变成有效计算，因为延迟渲染的第一个通道会提取整张画面中能被看见的所有像素的几何信息，第二个通道进行着色的时候，所有的光照计算都是有效的，意思就是说，第二个通道中你所有的光照计算都是可以被用户的眼睛看见的。如果采用Forward渲染方式的话，很有可能你花费很大力气渲染出来的某一个表面被别的物体遮挡住了，而不能出现在最终的画面中，这样就带来了计算资源的浪费。

缺点

延迟渲染最主要的毛病在于它无法在它的算法中去处理好半透明物体的渲染问题。在硬件资源允许的条件下，我们可以使用Depth Peeling算法来在延迟渲染的框架下实现渲染顺序无关的半透明物体渲染。但这样做了之后会带来额外的性能上的损耗以及内存上的开销。通常情况下我们在支持OpenGL3以及以上版本的设备上来实现这样的算法会获得比较快的速度。当我们在延迟渲染中加入了渲染顺序无关的透明物体渲染技术了之后，在实现其他的算法方面，它跟Forward渲染的性能是不相上下的。

另一个延迟渲染比较大的毛病就是，当我们使用了很多材质的时候，我们可能需要丰富的存储空间去存储G-Buffer中的数据，这样一方面带来的是存储开销，另一方面是在运行的时候带来了数据带宽方面的压力。

最后，由于我们延迟渲染的框架下分离了光照和几何数据信息，所以硬件级别的AA变得不再可能，但对于AA的处理也并不是完全没有办法，我们可以自己使用Post Rendering的方式去实现自己的AA，比如基于边缘检测技术的FXAA技术、MLAA技术、SRAA技术以及DLAA技术，我们当然也可以自己去实现MSAA。另外Temprol AA看起来也是一个很不错的解决方案。

Edge_detection​en.wikipedia.org Anti-aliasing​en.wikipedia.org Fast_Approximate_Anti-Aliasing​en.wikipedia.org MorphoLogical_AntiAliasing​en.wikipedia.org SRAA​research.nvidia.com http://and.intercon.ru/releases/talks/dlaagdc2011/slides/​and.intercon.ru Anti-Aliasing From a Different Perspective (GDC 2011 Extended Slides)​and.intercon.ru DLAA​and.intercon.ru Temporal_Anti-Aliasing​en.wikipedia.org

相关优化-Tiled Rendering

我们之前说到了延迟渲染属于屏幕空间下的渲染解决方案，于是乎在参与第二通道渲染的灯光有一些可能是不需要的，我们在第二通道开始之前，可以对灯泡进行分类，然后在需要被渲染的屏幕切块中给它输入对应的灯光，不需要的地方就不给它输入光源，这样能达到加速第二通道渲染的目的。

相关优化-Clustered Rendering

在Tiled渲染的基础上，我们再思考有没有更精确的方法能够对灯光进行剪裁的呢？这时候，我们就想到了Clustered的方式。只不过Clustered的方式在3D空间中对灯光机型剪裁，于是乎，我们实际上可以把这套技术与Forward渲染进行结合。

优化参考

疯狂的程序员：灯光剔除技术​zhuanlan.zhihu.com

所有的演示同学们可以参考引擎课程中的视频内容，至于同学们希望做出怎样的引擎，同学们可以自己结合自己的项目，来分析一下使用怎样的技术对你来说是最合适的。

我们核心关注和讨论的领域是引擎的底层技术以及商业化方面的信息，可能并不适合初级入门的同学。另外官方维护两个公众号，第一个公众号是关于我们企业自身产品的信息与动态的公众号，如果对我们自身信息与动态感兴趣的同学，可以关注图形之心。

除此之外，我们为了更频繁的发布一些咨询与文章，我们维护的第二个公众号是“内核观察”，内核观察提供的主要是一些与我们无关的咨询与文章。

只言片语，无法描绘出整套图形学领域的方方面面，只有成体系的知识结构，才能够充分理解和掌握一门科学，这是艺术。我们已经为你准备好各式各样的内容了，东汉书院，等你来玩。