WebGL渲染引擎优化方向——渲染帧率的优化

创作时间:

作者:

@小白创作中心

WebGL渲染引擎优化方向——渲染帧率的优化

引用

CSDN

https://blog.csdn.net/Mapmost/article/details/139080191

WebGL是一种强大的图形渲染技术，可以在浏览器中快速渲染复杂的3D场景。但是，由于WebGL的高性能和高质量要求，如果不注意性能优化，它可能会消耗大量的CPU和GPU资源，导致应用程序性能下降。本文将重点介绍WebGL渲染引擎中渲染帧率的优化方法，包括剔除（Culling）、实例化（Instancing）和多细节层次（LOD）三个方面。

前言

性能优化是一个比较大的话题，会涉及多个技术点。对于大场景来说，一般优化可以分为以下几个大的方向：

加载性能的优化
渲染帧率的优化
内存管理的优化

今天我们讨论的就是第二个方向：渲染帧率的优化，渲染帧率的优化可以从以下方面入手。

剔除 Culling

视锥体剔除

视锥体剔除通过判断物体与相机的距离（距离剔除）或者是否在相机的视锥体内（视锥体剔除）来对物体进行剔除。如图所示，红色的物体不在视口范围内，因此在加载渲染的时候，可以认为的剔除这些不显示的物体，从而保证渲染帧率。

背面剔除

假设你正在一个场景中观察一个不透明的球体，大约一半的球体是看不见的。从这个观察得出的结论是，不可见的东西不需要被渲染，因为它对最终图像没有贡献。因此，球体的背面不需要处理，这就是背面剔除的思想。这种类型的剔除也可以一次对整个物体组进行，因此被称为集群背面剔除。

遮挡剔除

遮挡剔除首先使用一个简单的depth-only的pass将深度写入到z-buffer中，然后使用物体的包围盒传入到GPU进行遮挡测试，如果测试发现所有像素都被遮挡，说明这个物体是被遮挡的物体，否则的话认为是可见的。包括OpenGL和Directx在内的图形API都提供了这种遮挡剔除。由于从GPU回读数据到CPU通常很慢，因此通常会将得到的数据放在下一帧中作为剔除数据来使用，这样遮挡剔除其实是延迟一帧生效的。不过一般来说，延迟一帧的剔除对实际的渲染影响并不大。

实例化 Intance

实例化是一种只调用一次渲染函数却能绘制出很多物体的技术，它节省渲染物体时从CPU到GPU的通信时间，而且只需做一次即可。要使用实例化渲染，我们必须将glDrawArrays和glDrawElements各自改为glDrawArraysInstanced和glDrawElementsInstanced。这些用于实例化的函数版本需要设置一个额外的参数，叫做实例数量(Instance Count)，它设置我们打算渲染实例的数量。这样我们就只需要把所有需要的数据发送给GPU一次就行了，然后告诉GPU它该如何使用一个函数来绘制所有这些实例。

就其本身而言，这个函数用处不大。渲染同一个物体一千次对我们来说没用，因为每个渲染出的物体不仅相同而且还在同一个位置；我们只能看到一个物体！出于这个原因GLSL在着色器中嵌入了另一个内建变量，叫做gl_InstanceID。

在通过实例化绘制时，gl_InstanceID的初值是0，它在每个实例渲染时都会增加1。如果我们渲染43个实例，那么在顶点着色器gl_InstanceID的值最后就是42。每个实例都拥有唯一的值意味着我们可以索引到一个位置数组，并将每个实例摆放在世界空间的不同的位置上。

我们调用一个实例化渲染函数，在标准化设备坐标中绘制一百个2D四边形来看看实例化绘制的效果是怎样的。通过对一个储存着100个偏移量向量的索引，我们为每个实例四边形添加一个偏移量。最后，窗口被排列精美的四边形网格填满：

多细节层次 LOD

多细节层次 —— 在显示网格时，根据摄像机距离物体的距离，来使用更多或者更少的几何体来对其进行显示。每一个级别都和一个几何体相关联，且在渲染时，可以根据给定的距离，来在这些级别对应的几何体之间进行切换。通常情况下，你会创建多个几何体，比如说三个，一个距离很远（低细节），一个距离适中（中等细节），还有一个距离非常近（高质量）。