This case is designed to understand the overall implementation idea of the custom programming particle effect in OpenGL ES.

The overall effect of the case is as follows:

It can be seen from the renderings that the case has realized 4 particle effects. The following is the overall process of realization

As shown in the figure, it can be roughly divided into four parts

  • View Controller class: Implements particle effects
  • Particle class: Manages and draws particles
  • Utility class: Encapsulated shader utility class
  • Shaders: GLSL custom vertex and slice shaders

View Controller class

In this class, the particle object is created through the particle class CCPointParticleEffect, and four particle effects are implemented. Then the system calls the GLKView & GLKViewDelegate proxy method to draw and update

The variables and functions involved are shown in the figure

Particle class

This class manages and draws all particles. It is equivalent to the GLKBaseEffect class in GLKit and provides three methods

  • AddParticleAtPosition function: used to add particles, only one at a time. Create a particle object in the view controller.

  • PrepareToDraw function, there are the following steps to prepare

    • Load & use shader

    • Pass data in Uniform

    • To update particle data, you need to call the initialization/update data method in the tool class to copy the data from the CPU to the GPU

    • To prepare relevant data, it is necessary to call the prepareToDrawWithAttrib method encapsulated in the tool class, open the attribute channel, and set the data reading method

    • The execution flow chart of binding texture function is shown in the figure below

The flow of loadShader is as follows

  • drawFunction: used to draw particles, the bottom need to call the tool classdrawArrayWithModeMethod, using OpenGL ES array drawing method to draw

The variables and functions involved are implemented as follows

Tool Class This class encapsulates some operations of OpenGL ES into custom methods, increasing code reuse. It mainly encapsulates four methods

  • initWithAttribStrideFunction: initializes to create a VBO in OpenGL ES
  • reinitWithAttribStrideFunction: update data, used to update data passed into the shader if a VBO exists
  • prepareToDrawWithAttribFunction: Ready to draw, used to open the Attribute channel & set the way data is read
  • drawPreparedArraysWithModeFunction: draw, call OpenGL ES array drawing way graph drawing

The variables and functions involved are implemented as follows

Custom shaders Variable and man function operations in shaders are as follows

As can be seen from the above process, it is very tedious to implement particle effects by custom programming. In actual iOS development, this is not done. Generally, CAEmitterLayer, a special layer in Core Animation, is used to achieve particle effects. This is mainly because Apple has wrapped particle effects so well that they can be implemented with very little code.

For the complete code see Github-1212_OpengL ES custom programming to implement particle effects