OpenGL 编程/粒子系统
外观
这是一个正在进行的工作
粒子系统是一种处理大量对象(数千到数百万)的优化方法。
天真的方法是独立地绘制每个对象(就像我们在大多数其他教程中所做的那样),但是绘制数千个对象意味着每帧准备和调用 DrawArray/DrawElements 数千次,每次都意味着一个 OpenGL 往返,这显然效率低下。
相反,目标是一次绘制大量类似的对象。
我们确定了两种主要的渲染粒子系统的方法
- 在 CPU 上操作属性并在 GPU 上渲染它们
- 在启动时,上传单个 VBO 的点(带有 GL_POINTS 的快速精灵),或一组在单个 VBO+EBO 中的所有 3D 对象。
- 在每帧中,在 CPU 上操作它们,上传属性的 VBO。
- 在每帧中,使用单个 DrawArray/DrawElements 调用绘制它们(所有对象使用相同的着色器)。
- 全 GPU 粒子系统,使用
tex1 = fragment_shader(tex2, tex3, ...)
模式计算- 在启动时,将所有粒子的初始属性存储在纹理中(一个纹素 = 一个粒子的属性)。
- 在启动时,上传一个巨大的静态 GL_POINTS 数组(每个纹素一个)。
- 在每帧中,渲染一个四边形到相同大小的新结果纹理,组合片段着色器中的初始属性并存储下一个粒子状态(例如:它的下一个位置)。可以使用多个着色器计算多个属性。可以交换纹理以将旧状态更新为新状态。
- 在每帧中,绘制静态的点数组:在顶点着色器中,在结果纹理(s)中查找粒子属性(例如位置)。
- 无需每帧上传!
- 对于非增量变换的特殊中间情况(制服而不是属性,例如线性运动):如果您在顶点着色器中以程序方式计算位置(没有属性操作),则为全 GPU。
- three.js 文档 - 粒子系统: three.js 实现了一个基于 GL_POINTS 的粒子系统
- 一个彻底现代的粒子系统: 描述了最先进的技术,并设计了一个 GPU 侧粒子系统
- WebGL 粒子: 实现上述 GPU 侧粒子系统的 WebGL 实验,管理 260,000 个粒子