0

您好，我对 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 中的位置缓冲区对象的信息。我将如何使用一个来绘制这些？

4

1 回答 1

0

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

一些常见的方法

  • 在 JavaScript 中计算粒子位置，POINTS在 WebGL中渲染

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

  • 在着色器中仅根据时间计算粒子位置，渲染POINTS。

  • 在着色器中仅根据时间计算粒子位置，渲染四边形

  • 通过帧缓冲区读取和写入纹理的状态来计算着色器中的粒子位置

以及数百种其他变体。

使用 webgl 的粒子系统

javascript中的高效粒子系统？(WebGL)

于 2016-01-27T05:38:42.613 回答