Question

你好我对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中阅读了有关位置缓冲区对象的内容。我如何使用它来绘制这些？

Answer 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)

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

1 个答案: