[WebGL] 实例化绘制性能测试

实例化绘制（ Instanced Drawing ）是 OpenGL / WebGL 等图形 API 中常用的性能优化技术，它适用于同样的模型绘制次数非常多的场景，能够有效的降低显存占用和图形 API 接口调用的次数，达到性能提升的效果。以前我只知道怎么去实现、什么情况下适合用实例化绘制，但是性能好多少，影响性能的因素主要有哪些，并不是特别的清晰。最近我就这个话题做了几组测试，来加深自己对实例化绘制的理解。

使用实例化技术绘制大量模型

测试1：实例化绘制和非实例化绘制性能的对比

一个简单的立方体模型绘制10万次，实例化绘制非常流畅，几乎没有掉帧；非实例化绘制直接卡死

绘制方式	缩略图	场景中模型个数	帧率
实例化绘制		10万	60帧
非实例化绘制			1帧

测试1 - 实例化和非实例化性能对比

测试2：简单模型和复杂模型实例化绘制性能对比

复杂模型的三角网和纹理数据都比简单模型更复杂，绘制相同次数，帧率也低得多

模型缩略图	实例化个数	三角面片个数	纹理	帧率
	10万	12	无纹理	60帧（满帧）
		2856	一张 2048 * 2048 的png外挂纹理	7帧（卡成PPT）

测试2 - 实例化渲染性能受模型复杂程度影响

上述实验可以看出模型复杂程度对实例化渲染的性能影响是很大的，那么网格的复杂程度和纹理的复杂程度哪一个占主导地位呢？我接着做了如下两组测试。

测试3：三角网复杂程度对实例化性能的影响测试

保持纹理不变，将原始模型三角网按照不同程度简化，得到以下测试结果，可以看到三角网简化的程度越大，性能就越高，而且提升还挺明显。

缩略图	实例化个数	三角网简化率	帧率
	4万	原始数据	8帧
		顶点个数简化为原始的 70%	38帧
		顶点个数简化为原始的 50%	50帧
		顶点个数简化为原始的 30%	55帧

测试3 - 三角网复杂程度对实例化绘制性能的影响

 测试4：纹理尺寸对实例化绘制的影响测试

保持三角网不变，将原始模型的纹理尺寸按比例缩小，从测试结果看到纹理尺寸对实例化的性能并没有影响。

缩略图	实例化个数	纹理尺寸	帧率
	4万	原始数据 （1024 × 1024）	8帧
		512 × 512	8帧
		256 × 256	8帧
		128 × 128	8帧
		64 × 64	8帧

测试4 - 纹理尺寸对实例化绘制性能的影响

综上可知，在绘制数量非常多的相同模型时，实例化绘制在性能方面的优势非常明显；此外模型三角网的复杂程度对实例化绘制性能的影响起着决定性的作用。