Cesium中实现多光源

Allen.l

已于 2023-11-01 15:55:16 修改

阅读量2.7k

点赞数 1

文章标签：算法 web 3d 图形渲染

于 2023-02-04 18:04:53 首次发布

本文链接：https://blog.csdn.net/weixin_43481439/article/details/128884065

版权

在讲实现多光源之前，先了解两种不同的渲染方式：前向渲染和延迟渲染。

前向渲染

前向渲染是现在最基础，也是最多引擎使用的标准。前向渲染的流程是给定一个几何体，引擎对其进行从顶点到像素着色器的一系列计算，然后输出到最终的图像缓冲区。场景中有多个几何体时，引擎就是对其挨个进行渲染，完成一个再继续下一个。
在这里插入图片描述

前向渲染有一个问题就是无效渲染太多，比如场景中有四个物体，互相之间存在叠压关系，按照前向渲染的流程，先前渲染了一个物体之后，它的一部分被后一个渲染的物体挡住了，那么被挡住的这部分就是做了无效的计算，毕竟我们在屏幕上是看不到这部分的。

另一个问题在于难以支持过多的光源，对于每个需要逐像素计算的光源，渲染一个几何体的时候需要逐个做一次光照计算。如果有一个场景，其中有 10 个几何体需要进行渲染，有四个光源对整个场景产生影响，那么渲染整个场景需要进行 40 次光照计算。而且其中还有很多的计算被挡住了。

如果需要在场景中使用多个着色模型，甚至是每个几何体都使用不同的着色模型和渲染技术，前向渲染是可以很好的支持的。

另外，因为前向渲染这种逐个渲染的特点，它非常适合渲染半透明物体。

延迟渲染是一种有别于前向渲染的渲染方式，可以支持大量的实时光照，所以现在的大型电脑游戏基本都已经是延迟渲染了。

延迟渲染就是一种解决大量光照渲染的方案，其本质是在对三角面进行光栅化的阶段，先不进行任何光照计算。直到三角面光栅化完成，留下能看到的所有像素，再对这些可见的像素进行光照计算。

延迟渲染的做法是：

第一个 pass：几何处理
1. 首先将场景渲染一次，获取待渲染对象的各种几何信息，并将这些几何信息存储到名为 G-buffer 的缓冲区中，这些缓冲区用来在后面进行更复杂的光照计算
2. G-buffer 也同样会根据深度测试的结果进行更新，因此当场景渲染完成时, G-buffer 中剩余的信息就是相机能看到的像素的几何信息，也就意味着，接下来的光照计算，仅需对 G-buffer 中的片元进行即可。
第二个 pass：光照处理
1. 遍历 G-buffer，从 G-buffer 中获取光照计算所需的信息（位置、颜色、法线等）
2. 执行光照计算

在这里插入图片描述

不同的引擎对于 G-Buffer 的处理也是不一样的。对于一个针对 PBR 渲染的引擎来说，至少会有深度、模板、颜色、法线、世界位置、金属、粗糙、高光这些信息，而对于一个简单的渲染引擎来说，仅仅需要有颜色、法线、世界位置即可。

当场景中所有物体的几何信息都写入 G-Buffer 之后，光照计算就和场景中有多少物体，多少三角形没有关系了。

光照计算将只对可见的像素进行，不会有无效的计算。

对于半透明无能为力，所有半透明的物体都需要等待不透明物体以延迟渲染完成之后，在用前向渲染的方式渲染半透明物体。

不适用于场景中存在多种着色模型的情况。

Cesium 中实现多光源多采用前向渲染的方式，也就是在渲染之前，将光源的信息传入着色器，然后在光栅化阶段进行相应的光照计算。但是由于会进行很多无效的计算(甚至无效计算会多过有效计算)，所以这种方式通常无法放置太多的光源。

所以这里打算用延迟渲染的方式做。

在 Cesium 中想要完全按照延迟渲染的方式去实现还是有难度的，但是我们可以通过后处理的方式去仿照延迟渲染来实现。

在后处理阶段，可以拿到场景最终的深度图，而利用深度图我们就可以计算出当前像素的坐标位置和法线。

对于光源的其他信息，则可以通过 Uniform 的方式传入，最后在着色器中对多个光源进行遍历计算即可。

由于后处理中无法获取模型的金属、粗糙、高光等信息，所以暂时不能实现 PBR 着色。
WebGL 中对于传入片元着色器的纹理数量有限制(16 张)，因此在开启“光源阴影”时，放置过多的光源会触发 WebGL 的报错。而关闭“光源阴影”时，由于不需要光源的深度图，所以对于放置的光源个数没有限制。当然也有解决办法，就是对光源进行分批绘制(创建多个光照后处理，使得每个后处理中使用的纹理数小于限制值)。