优化重叠矩形的绘制

我有很多矩形，有些与其他矩形重叠；每个矩形都有一个绝对 z 顺序和一个colour。 （每个“矩形”实际上是粒子效果、网格或纹理的轴对齐边界框，并且可能是半透明的。但只要您不尝试剔除其他矩形后面的矩形，就更容易抽象地思考彩色矩形，所以我将在问题描述中使用它:)

改变“颜色”的成本相当高；连续绘制两个蓝色矩形比绘制两个不同颜色的矩形要快得多。

绘制不在屏幕上的矩形的成本也相当高，应该避免。

如果两个矩形不重叠，则它们相对于彼此的绘制顺序并不重要。只有当它们重叠时，z 顺序才重要。

例如：

1（红色）和4（红色）可以画在一起。 2（蓝色）和 5（蓝色）也可以画在一起，3（绿色）和 7（绿色）也可以画在一起。但 8（红色）必须在 6（蓝色）之后抽出。因此，要么我们将所有三个红色绘制在一起，然后将蓝色绘制为两组，要么将所有蓝色绘制在一起，然后将红色绘制为两组。

并且某些矩形可能偶尔会移动。 （并非全部；一些矩形已知是静态的；其他矩形已知会移动。）

我将在 JavaScript/webGL 中绘制这个场景。

我怎样才能画出矩形合理的顺序以尽量减少颜色变化，如何权衡 JavaScript 剔除代码与让 GPU 剔除？

（仅仅计算出哪些矩形重叠以及哪些矩形可见是昂贵的。我有一个基本四叉树 https://stackoverflow.com/questions/13906902/spatial-index-for-lines这极大地加快了我的场景绘制速度（与仅发出整个场景的绘制操作相比）；现在的问题是如何最小化 OpenGL 状态变化并尽可能连接属性数组）

UPDATE我创建了一个非常简单的测试应用程序来说明问题并作为演示解决方案的基础：http://williame.github.com/opt_rects/ http://williame.github.com/opt_rects/

源代码位于 github 上，可以轻松分叉：https://github.com/williame/opt_rects https://github.com/williame/opt_rects

事实证明，很难制作一个具有足够状态更改的小测试应用程序来实际重现我在完整游戏中看到的问题。在某些时候，您必须认为状态更改可能非常昂贵。同样重要的是如何加速空间索引（演示中的四叉树）和整体方法。

您做出了非常错误的假设，即您在桌面浏览器上获得的性能将在某种程度上决定 iPhone 上的性能。你需要了解 iPhone 硬件实现基于图块的延迟渲染 http://en.wikipedia.org/wiki/PowerVR#Technology这意味着片段着色器无论如何都会在管道中很晚才使用。正如苹果自己所说（“不要浪费 CPU 时间对对象进行从前到后的排序”），对你的基元进行 Z 排序只会给你带来很少的性能提升。

但我的建议是：如果改变颜色很昂贵，只是不要改变颜色：将其作为顶点属性传递，并将行为合并到一个超级着色器中，这样您就可以在一批或几批中绘制所有内容，甚至无需排序。然后进行基准测试并确定适合您平台的最佳批量大小。