How to use vertex buffer objects in webgl to position particles

Question

Hello I am a bit new to 3d programming. I am trying to improve the efficiency of a particle system that I am simulating with liquid fun. Currently I am drawing the particle system this way:

 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();
     }
}

This basically draws each particle one at a time which is very slow. I have been doing some reading and I read about Position Buffer objects in webGL. How would I use one to draw these?

Webgl is a completely separate context from the 2d canvas context and they cannot work together. (you are using 2d canvas from context.drawImage). If you know absolutely nothing about webgl then it is difficult to suggest anything beyond go look at webgl tutorials or find a webgl library that does what you need. Maybe pixi.js? — WacławJasper, Jan 26 '16 at 23:22
Possibly a duplicate of http://stackoverflow.com/questions/15215968/efficient-particle-system-in-javascript-webgl — gman, Jan 27 '16 at 05:29
@WaclawJasper Hey I have been looking at webgl tutorials. I have seen them do things like what gman below is recommending. They all seem to be demonstrating computing particle positions based on time alone in shader or something like that. Others seem to be positioning the particles sequentially which is not what what I read would be ideal. I read that "primitives should not be created sequentially but all at once using position buffer objects." I'm trying to figure out how to do that. — xerotolerant, Jan 27 '16 at 12:03
@gman I read that post already. I am actually trying to figure out how to do what the answer recommends. Liquidfun produces a position buffer which I use to get the positions of the particles. I am trying to figure out how to write that buffer to a position buffer for webgl. Which I can use to draw the points "all at once" — xerotolerant, Jan 27 '16 at 12:09

score 0 · Answer 1 · edited May 23 '17 at 12:23

This is arguably too broad a question for Stack Overflow. WebGL is just a rasterization API which means there's an infinite number of ways to render and/or compute particles with it.

Some common ways

Compute particle positions in JavaScript, Render with POINTS in WebGL
Compute particle positions in JavaScript, Render with quads in WebGL (rendering quads lets you orient the particles)
Compute particle positions based on time alone in a shader, render POINTS.
Compute particle positions based on time alone in a shader, render quads
Compute particle positions in shaders with state by reading and writing state to a texture through a framebuffer

And hundreds of other variations.

Particle system using webgl

Efficient particle system in javascript? (WebGL)

How to use vertex buffer objects in webgl to position particles

1 Answers1