OpenGL ES Particle System Tutorial: Part 2/3

Correcting the Rendering Cycle

Wait - "nearly completed"? Although it feels like you're all done, there's one small bug in your app. Did you spot it?

It's a subtle bug, but try the following exercise to see if you can detect what's going on:

• Build and run your app again.
• Tap on multiple points on the screen.
• Look closely at the resulting explosions. Notice anything strange?

Every time you tap the screen and cause a new explosion, the particles of the previous explosions switch position. In fact, all of the attributes of the old explosions will change to the attributes of the latest explosion. The difference in elapsed lifetimes is what makes this bug hard to notice, because the size of the explosions change over time, but it’s definitely a noticeable effect.

In Part 1 of this tutorial series, you took some OpenGL ES 2.0 shortcuts because you were only rendering a single object. Now that you have multiple emitters, you need to pay closer attention to the rendering cycle.

Open EmitterObject.m and locate your particle VBO. As you can see, the buffer only gets bound during the emitter initialization. This means that whenever a new emitter object is created, all particles will be rendered from the last VBO to be created.

Inside EmitterObject.m, add a new instance variable to your implementation just below the declaration for _time:

GLuint      _particleBuffer;

Stay with EmitterObject.m, locate the spot where you initialize your other instance variables in initWithTexture:at, and add the following line:

_particleBuffer = 0;

Still in EmitterObject.m, replace the following lines in loadParticleSystem:

GLuint particleBuffer = 0;
glGenBuffers(1, &particleBuffer);
glBindBuffer(GL_ARRAY_BUFFER, particleBuffer);

with:

glGenBuffers(1, &_particleBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _particleBuffer);

Finally, switch buffers on every render by adding the following line to the beginning of renderWithProjection in EmitterObject.m:

// Switch Buffers
glBindBuffer(GL_ARRAY_BUFFER, _particleBuffer);

Build and run your app and tap away! Notice that your new explosions don’t affect the previous ones any more, as shown below:

You've done a great job completing this part of the tutorial. You've definitely blown this one out of the water — pun most definitely intended! :]

Where To Go From Here?

You can find the completed project with all of the code and resources from this tutorial on GitHub. Keep an eye on the repository for any updates!

You should now have a good knowledge of the inner workings of generic particle systems, albeit in their most basic form. You should also be able to expand this particular implementation to include more properties and behaviors at both particle and emitter levels.

You have built complex shaders and can pass data to them with ease. You can also abstract rendering cycles and manage multiple graphics objects. All in all, you’ve come really far in the first two parts of this tutorial!

Feel free to play around with the project here to create some of your own cool effects. For example, try changing the look of the particle system or changing the path the particles take.

In Part 3 of this series, you will use your newly developed skills to integrate some particle effects into a simple 2D game.

If you have any questions, comments or suggestions, please feel free to join the conversation below!