如何在webgl中使用顶点缓冲对象来定位粒子答案

【问题标题】：How to use vertex buffer objects in webgl to position particles如何在webgl中使用顶点缓冲对象来定位粒子
【发布时间】：2016-01-26 19:04:53
【问题描述】：

您好，我对 3D 编程有点陌生。我正在尝试提高我用液体乐趣模拟的粒子系统的效率。目前我正在以这种方式绘制粒子系统：

 for (var j = 0; j < maxParticleSystems; j++) {
     var currentParticleSystem = world.particleSystems[j];

     var particles = currentParticleSystem.GetPositionBuffer();

     var maxParticles = particles.length;

     for (var k = 0; k < maxParticles; k += 2) {
         context.drawImage(particleImage, (particles[k] * mToPx) + offsetX, (particles[k + 1] * mToPx) + offsetY);
         context.fill();
     }
}

这基本上是一次绘制一个粒子，非常慢。我一直在阅读并阅读了有关 webGL 中的位置缓冲区对象的信息。我将如何使用一个来绘制这些？

【问题讨论】：

Webgl 是与 2d 画布上下文完全分离的上下文，它们不能一起工作。（您正在使用来自 context.drawImage 的 2d 画布）。如果您对 webgl 完全一无所知，那么除了查看 webgl 教程或找到满足您需要的 webgl 库之外，很难提出任何建议。也许是 pixi.js？
可能是stackoverflow.com/questions/15215968/…的副本
@WaclawJasper 嘿，我一直在看 webgl 教程。我见过他们做的事情就像下面的 gman 推荐的那样。他们似乎都在演示仅在着色器中基于时间计算粒子位置或类似的东西。其他人似乎是按顺序定位粒子，这不是我读到的理想。我读到“不应按顺序创建基元，而应使用位置缓冲区对象一次性创建。”我正在尝试弄清楚如何做到这一点。
@gman 我已经读过那篇文章了。我实际上是想弄清楚如何按照答案的建议去做。 Liquidfun 生成一个位置缓冲区，我用它来获取粒子的位置。我试图弄清楚如何将该缓冲区写入 webgl 的位置缓冲区。我可以用它来“一次”绘制点

标签： javascript performance opengl-es webgl liquidfun

【解决方案1】：

这对于 Stack Overflow 来说可能是一个过于宽泛的问题。 WebGL is just a rasterization API 这意味着有无数种方法可以用它来渲染和/或计算粒子。

一些常用的方法

在 JavaScript 中计算粒子位置，在 WebGL 中使用 POINTS 渲染
在 JavaScript 中计算粒子位置，在 WebGL 中使用四边形进行渲染（渲染四边形可让您定向粒子）
在着色器中仅根据时间计算粒子位置，渲染POINTS。
在着色器中仅根据时间计算粒子位置，render quads
通过帧缓冲区读取和写入状态到纹理，计算着色器中粒子的位置

还有数百种其他变体。

Particle system using webgl

Efficient particle system in javascript? (WebGL)

【讨论】：