绘制大量四边形时应选用Uniform还是顶点属性？2D UI批量矩形渲染咨询

你想到的把原逐矩形uniform参数改成顶点传参的方向完全正确，这也是OpenGL实现单drawcall批量渲染同类型图元的标准路径，而且有更省显存的成熟优化方案。

为什么必须替换原uniform传参逻辑 #

• 单次glDrawArrays调用过程中，所有uniform都是全局唯一值，根本没法在同一个绘制调用里给不同矩形传递独立的颜色、边框宽度这类差异化参数，这是单drawcall架构下的天然限制。
• 你当前实现的性能瓶颈本质是双重CPU端开销：一是逐矩形触发drawcall的提交成本，二是逐次切换VAO/VBO、uniform状态的驱动开销，单VAO+单drawcall的架构可以完全消除这部分损耗。

矩形级共享参数的传递方案 #

针对“同一矩形内所有顶点取值完全一致”的参数（填充状态、颜色、边框宽度、反色标记等），可以按实现复杂度和性能需求选两种方案：

1. 零门槛最简实现
   直接把这些矩形级参数打包进每个矩形对应的6个顶点（2个三角形共6个顶点）的顶点属性中，所有矩形的顶点数据连续存入同一个VBO，绑定到全局唯一的VAO下，一次glDrawArrays就能完成所有矩形的渲染。
   • 优势：不需要碰实例化相关的API，实现逻辑和你现有的顶点渲染逻辑完全兼容，没有额外的学习成本
   • 劣势：显存存在冗余——同一份矩形参数会在6个顶点里重复存储，当矩形数量达到万级以上时会产生不必要的显存带宽消耗
2. 工业级最优实现（实例化属性）
   这是所有成熟2D UI渲染框架都会采用的方案，利用glVertexAttribDivisor的属性步长特性，把顶点属性分成两类：
   • 普通顶点级属性：比如矩形的形状顶点坐标，步长设为0，即每绘制一个顶点就更新一次该属性。你甚至可以直接用一套固定的标准化单位矩形顶点（6个组成两个三角形的坐标）作为所有矩形的形状来源，在顶点着色器里根据每个矩形的位置、宽高做坐标变换，完全不需要为每个矩形存储独立的顶点位置数据。
   • 实例级属性：也就是你原来的所有逐矩形uniform参数（矩形位置/宽高、颜色、边框宽度、填充/反色状态），步长设为1，即每绘制一个实例（对应一个矩形）才更新一次该属性。
   • 优势：显存零冗余，每个矩形只需要存一份实例参数，不需要在6个顶点里重复复制，万级以上矩形渲染时的显存带宽占用会低一个数量级
   • 最终触发绘制只需要一次glDrawArraysInstanced调用，不需要循环遍历所有矩形。

原反色绘制逻辑的适配 #

原来逐矩形配置glBlendFunc实现反色的方式，在单drawcall架构下会失效——硬件blend状态是全局的，单次drawcall只能绑定一种blend配置，这里给两个可落地的适配思路：

• 优先方案：把反色标记作为实例属性传入片段着色器，直接在着色器内计算最终输出颜色，比如反色开启时直接通过vec4(1.0) - 源颜色的逻辑计算输出，完全绕开硬件blend的状态切换，让反色矩形和普通矩形在同一个drawcall里完成渲染。
• 备选方案：把blend状态一致的矩形做批次拆分，同一种blend配置的矩形合并为一个drawcall，虽然会拆分少量drawcall，但性能依然远好于原来逐矩形单drawcall的模式。

落地注意事项 #

• 尽量把小尺寸的离散参数（布尔类型的填充/反色标记、小的数值参数）打包进同一个向量属性里，减少占用的顶点属性槽位（OpenGL最低要求支持16个属性槽位，这套矩形渲染逻辑通常只需要3-4个槽位就完全够用）
• 整个渲染流程只需要保留一套全局VAO配置，所有顶点、实例属性的绑定都在这个VAO下完成，驱动会自动做状态缓存，减少不必要的状态切换开销。

内容的提问来源于stack exchange，提问作者b20000