网络英语;缓冲区还是 uniform4fv?
WebGL; Buffer or uniform4fv?
我目前正在学习 WebGL,并且正在渲染一个包含大量相同立方体但翻译不同的场景。
关于绘制这些,我相信我有 2 个选择;
缓冲单个立方体,使用 uniform4fv 进行转换并为每个立方体重新发送它(到顶点着色器)。
缓冲我所有的立方体(用翻译硬编码的顶点)。
我的问题是在哪些情况下哪个选项更可取?
- 我认为第一个选项更可取,但这取决于开销或更新统一变量。
首先要看你渲染的对象是动态的还是静态的
对于静态几何,方法 2 会更有效。
对于动态几何,视情况而定。权衡是在使用方法 1 的状态更改开销与计算 CPU 上的新顶点的成本 + 使用方法 2 将这些顶点每帧上传到 GPU 之间。很难量化状态更改的确切成本, 但是,可以肯定的是,更大的对象需要更长的时间来计算和更新到 GPU。
根据经验,方法 2 更适用于 "smallish" 个对象,例如精灵、盒子等,而方法 1 更适用于 "complex" 个具有数千个以上顶点的对象。确切量化为 "smallish" 或 "complex" 的内容可能取决于 gpu 和驱动程序,您必须根据个人情况进行测试。
只要有可能,drawElements
几乎总是优先于 drawArrays
。
正如 WaclawJasper 所说,有很多权衡取舍。
在 WebGL 中做事的一般方法是每个对象一次绘制调用(您的第一种方法)。
另一种方法是使用实例化绘图using ANGLE_instanced_arrays
。在那种方法中,您的翻译将存储在缓冲区中。您将为每个实例仅更新缓冲区一个翻译(相对于第二种方法中每个顶点一个)。该方法假定所有实例都相同。
如果您的几何形状碰巧是混合的(立方体 + 球体 + 金字塔),另一种方法是将您的方向数据放入纹理中。通过为每个顶点提供一个 instanceId,您可以使用它来计算该实例数据在纹理中的位置。在这种情况下,您将像前一种方法一样为每个实例更新一个方向。只是您要更新纹理而不是缓冲区。如果硬件支持从浮点纹理 (OES_texture_float
) 读取,AFAICT 大多数硬件在这一点上都支持,则此方法非常简单。
作为在纹理中存储方向的示例 three.js 可选地在纹理中存储骨骼矩阵以进行蒙皮网格渲染以绕过有限数量的制服。
请注意,使用纹理您还可以将顶点数据放入纹理中。然后缓冲区将只包含顶点索引。
我目前正在学习 WebGL,并且正在渲染一个包含大量相同立方体但翻译不同的场景。
关于绘制这些,我相信我有 2 个选择;
缓冲单个立方体,使用 uniform4fv 进行转换并为每个立方体重新发送它(到顶点着色器)。
缓冲我所有的立方体(用翻译硬编码的顶点)。
我的问题是在哪些情况下哪个选项更可取? - 我认为第一个选项更可取,但这取决于开销或更新统一变量。
首先要看你渲染的对象是动态的还是静态的
对于静态几何,方法 2 会更有效。
对于动态几何,视情况而定。权衡是在使用方法 1 的状态更改开销与计算 CPU 上的新顶点的成本 + 使用方法 2 将这些顶点每帧上传到 GPU 之间。很难量化状态更改的确切成本, 但是,可以肯定的是,更大的对象需要更长的时间来计算和更新到 GPU。
根据经验,方法 2 更适用于 "smallish" 个对象,例如精灵、盒子等,而方法 1 更适用于 "complex" 个具有数千个以上顶点的对象。确切量化为 "smallish" 或 "complex" 的内容可能取决于 gpu 和驱动程序,您必须根据个人情况进行测试。
只要有可能,drawElements
几乎总是优先于 drawArrays
。
正如 WaclawJasper 所说,有很多权衡取舍。
在 WebGL 中做事的一般方法是每个对象一次绘制调用(您的第一种方法)。
另一种方法是使用实例化绘图using ANGLE_instanced_arrays
。在那种方法中,您的翻译将存储在缓冲区中。您将为每个实例仅更新缓冲区一个翻译(相对于第二种方法中每个顶点一个)。该方法假定所有实例都相同。
如果您的几何形状碰巧是混合的(立方体 + 球体 + 金字塔),另一种方法是将您的方向数据放入纹理中。通过为每个顶点提供一个 instanceId,您可以使用它来计算该实例数据在纹理中的位置。在这种情况下,您将像前一种方法一样为每个实例更新一个方向。只是您要更新纹理而不是缓冲区。如果硬件支持从浮点纹理 (OES_texture_float
) 读取,AFAICT 大多数硬件在这一点上都支持,则此方法非常简单。
作为在纹理中存储方向的示例 three.js 可选地在纹理中存储骨骼矩阵以进行蒙皮网格渲染以绕过有限数量的制服。
请注意,使用纹理您还可以将顶点数据放入纹理中。然后缓冲区将只包含顶点索引。