Javascript 如何在webgl中使用顶点缓冲区对象定位粒子

你好，我对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();
     }
}

for（var j=0；j

---

这基本上是一次画一个粒子，速度非常慢。我一直在读一些关于webGL中位置缓冲区对象的书。我如何使用一个来绘制这些呢？

对于堆栈溢出来说，这个问题可能太广泛了。这意味着有无数种方法可以使用它渲染和/或计算粒子

一些常见的方法

• 在JavaScript中计算粒子位置，在WebGL中使用

  点进行渲染
  

• 在JavaScript中计算粒子位置，在WebGL中使用四边形进行渲染（渲染四边形可以使粒子定向）

• 基于着色器中单独的时间计算粒子位置，渲染

  点

• 基于着色器中的时间计算粒子位置

• 通过帧缓冲区将状态读写到纹理，计算具有状态的着色器中的粒子位置

还有数百种其他变体

---

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