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

How to use vertex buffer objects in webgl to position particles

本文关键字：对象 缓冲区 定位 粒子 顶点 webgl      更新时间：2023-09-26

你好，我对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中的位置缓冲区对象。我该如何用一个来画这些？

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

一些常见的方法

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

    • 在

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

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

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

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

以及数百种其他变体。

使用webgl的粒子系统

JavaScript中的高效粒子系统？（网络GL）

相关文章：