LearnOpenGL

Particles.html (12960B)

---

     <h1 id="content-title">Particles</h1>
 <h1 id="content-url" style='display:none;'>In-Practice/2D-Game/Particles</h1>
 <p>
   A <def>particle</def>, as seen from OpenGL's perspective, is a tiny 2D quad that is always facing the camera (billboarding) and (usually) contains a texture with large parts of the sprite being transparent. A particle by itself is effectively just a sprite as we've been using extensively so far. However, when you put together hundreds or even thousands of these particles together you can create amazing effects.
 </p>
 
 <p>
   When working with particles, there is usually an object called a <def>particle emitter</def> or <def>particle generator</def> that, from its location, continuously <def>spawns</def> new particles  that decay over time. If such a particle emitter would for example spawn tiny particles with a smoke-like texture, color them less bright the larger the distance from the emitter, and give them a glowy appearance, you'd get a fire-like effect:
 </p>
 
 <img src="/img/in-practice/breakout/particles_example.jpg" alt="Example of particles as a fire"/>
   
 <p>
   A single particle often has a life variable that slowly decays once it's spawned. Once its life is less than a certain threshold (usually <code>0</code>), we <def>kill</def> the particle so it can be replaced with a new particle when the next particle spawns. A particle emitter controls all its spawned particles and changes their behavior based on their attributes. A particle generally has the following attributes:
 </p>
   
 <pre><code>
 struct Particle {
     glm::vec2 Position, Velocity;
     glm::vec4 Color;
     float     Life;
   
     Particle() 
       : Position(0.0f), Velocity(0.0f), Color(1.0f), Life(0.0f) { }
 };    
 </code></pre>
   
 <p>
   Looking at the fire example, the particle emitter probably spawns each particle with a position close to the emitter and with an upwards velocity. It seems to have 3 different regions, so it probably gives some particles a higher velocity than others. We can also see that the higher the <code>y</code> position of the particle, the less <em>yellow</em> or <em>bright</em> its color becomes. After the particles have reached a certain height, their life is depleted and the particles are killed; never reaching the stars.
 </p>
   
 <p>
   You can imagine that with systems like these we can create interesting effects like fire, smoke, fog, magic effects, gunfire residue etc. In Breakout, we're going to add a simple particle generator that follows the ball to make it all look just a bit more interesting. It'll look something like this:
 </p>
   
 <div class="video paused" onclick="ClickVideo(this)">
   <video width="600" height="450" loop>
     <source src="/video/in-practice/breakout/particles.mp4" type="video/mp4" />
     <img src="/img/in-practice/breakout/particles.png" class="clean"/>
   </video>
 </div>
   
 <p>
   Here, the particle generator spawns each particle at the ball's position, gives it a velocity equal to a fraction of the ball's velocity, and changes the color of the particle based on how long it lived. 
 </p>
   
 <p>
   For rendering the particles we'll be using a different set of shaders:
 </p>
   
 <pre><code>
 #version 330 core
 layout (location = 0) in vec4 vertex; // &lt;vec2 position, vec2 texCoords&gt;
 
 out vec2 TexCoords;
 out vec4 ParticleColor;
 
 uniform mat4 projection;
 uniform vec2 offset;
 uniform vec4 color;
 
 void main()
 {
     float scale = 10.0f;
     TexCoords = vertex.zw;
     ParticleColor = color;
     gl_Position = projection * vec4((vertex.xy * scale) + offset, 0.0, 1.0);
 }
 </code></pre>
 
 <p>
   And the fragment shader:
 </p>
   
 <pre><code>
 #version 330 core
 in vec2 TexCoords;
 in vec4 ParticleColor;
 out vec4 color;
 
 uniform sampler2D sprite;
 
 void main()
 {
     color = (texture(sprite, TexCoords) * ParticleColor);
 }  
 </code></pre>
 
 <p>
   We take the standard position and texture attributes per particle and also accept an <var>offset</var> and a <var>color</var> uniform for changing the outcome per particle. Note that in the vertex shader we scale the particle quad by <code>10.0f</code>; you can also set the scale as a uniform and control this individually per particle.
 </p>
   
 <p>
   First, we need a list of particles that we instantiate with default <fun>Particle</fun> structs:
 </p>
   
 <pre><code>
 unsigned int nr_particles = 500;
 std::vector&lt;Particle&gt; particles;
   
 for (unsigned int i = 0; i &lt; nr_particles; ++i)
     particles.push_back(Particle());
 </code></pre>
   
 <p>
   Then in each frame, we spawn several new particles with starting values. For each particle that is (still) alive we also update their values:
 </p>
   
 <pre><code>
 unsigned int nr_new_particles = 2;
 // add new particles
 for (unsigned int i = 0; i &lt; nr_new_particles; ++i)
 {
     int unusedParticle = FirstUnusedParticle();
     RespawnParticle(particles[unusedParticle], object, offset);
 }
 // update all particles
 for (unsigned int i = 0; i &lt; nr_particles; ++i)
 {
     Particle &p = particles[i];
     p.Life -= dt; // reduce life
     if (p.Life &gt; 0.0f)
     {	// particle is alive, thus update
         p.Position -= p.Velocity * dt;
         p.Color.a -= dt * 2.5f;
     }
 }  
 </code></pre>
   
 <p>
   The first loop may look a little daunting. As particles die over time we want to spawn <var>nr_new_particles</var> particles each frame, but since we don't want to infinitely keep spawning new particles (we'll quickly run out of memory this way) we only spawn up to a max of <var>nr_particles</var>. If were to push all new particles to the end of the list we'll quickly get a list filled with thousands of particles. This isn't really efficient considering only a small portion of that list has particles that are alive.
 </p>
   
 <p>
   What we want is to find the first particle that is dead (life &lt; <code>0.0f</code>) and update  that particle as a new respawned particle.
 </p>
 
 <p>
   The function <fun>FirstUnusedParticle</fun> tries to find the first particle that is dead and returns its index to the caller.    
   </p>
 
 <pre><code>
 unsigned int lastUsedParticle = 0;
 unsigned int FirstUnusedParticle()
 {
     // search from last used particle, this will usually return almost instantly
     for (unsigned int i = lastUsedParticle; i &lt; nr_particles; ++i) {
         if (particles[i].Life &lt;= 0.0f){
             lastUsedParticle = i;
             return i;
         }
     }
     // otherwise, do a linear search
     for (unsigned int i = 0; i &lt; lastUsedParticle; ++i) {
         if (particles[i].Life &lt;= 0.0f){
             lastUsedParticle = i;
             return i;
         }
     }
     // override first particle if all others are alive
     lastUsedParticle = 0;
     return 0;
 }  
 </code></pre>
   
 <p>
   The function stores the index of the last dead particle it found. Since the next dead particle will most likely be right after the last particle index, we first search from this stored index. If we found no dead particles this way, we simply do a slower linear search. If no particles are dead, it will return index <code>0</code> which results in the first particle being overwritten. Note that if it reaches this last case, it means your particles are alive for too long; you'd need to spawn less particles per frame and/or reserve a larger number of particles.
 </p>
   
 <p>
   Then, once the first dead particle in the list is found, we update its values by calling <fun>RespawnParticle</fun> that takes the particle, a <fun>GameObject</fun>, and an offset vector:
 </p>
   
 <pre><code>
 void RespawnParticle(Particle &particle, GameObject &object, glm::vec2 offset)
 {
     float random = ((rand() % 100) - 50) / 10.0f;
     float rColor = 0.5f + ((rand() % 100) / 100.0f);
     particle.Position = object.Position + random + offset;
     particle.Color = glm::vec4(rColor, rColor, rColor, 1.0f);
     particle.Life = 1.0f;
     particle.Velocity = object.Velocity * 0.1f;
 }  
 </code></pre>
   
 <p>
   This function simply resets the particle's life to <code>1.0f</code>, randomly gives it a brightness (via the color vector) starting from <code>0.5</code>, and assigns a (slightly random) position and velocity based on the game object's data.
 </p>
   
 <p>
   The second particle loop within the update function loops over all particles and for each particle reduces their life by the delta time variable; this way, each particle's life corresponds to exactly the second(s) it's allowed to live multiplied by some scalar. Then we check if the particle is alive and if so, update its position and color attributes. We also slowly reduce the alpha component of each particle so it looks like they're slowly disappearing over time. 
 </p>
   
 <p>
   Then what's left to do is render the particles:
 </p>
   
 <pre><code>
 <function id='70'>glBlendFunc</function>(GL_SRC_ALPHA, GL_ONE);
 particleShader.Use();
 for (Particle particle : particles)
 {
     if (particle.Life &gt; 0.0f)
     {
         particleShader.SetVector2f("offset", particle.Position);
         particleShader.SetVector4f("color", particle.Color);
         particleTexture.Bind();
         <function id='27'>glBindVertexArray</function>(particleVAO);
         <function id='1'>glDrawArrays</function>(GL_TRIANGLES, 0, 6);
         <function id='27'>glBindVertexArray</function>(0);
     } 
 } 
 <function id='70'>glBlendFunc</function>(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 </code></pre>
   
 <p>
   Here, for each particle, we set their offset and color uniform values, bind the texture, and render the 2D quad. What's interesting to note here are the two calls to <fun><function id='70'>glBlendFunc</function></fun>. When rendering the particles, instead of the default destination blend mode of <code>GL_ONE_MINUS_SRC_ALPHA</code>, we use the <code>GL_ONE</code> (additive) blend mode that gives the particles a very neat <def>glow effect</def> when stacked onto each other. This is also likely the blend mode used when rendering the fire at the top of the chapter, since the fire is more 'glowy' at the center where most of the particles are. 
 </p>
   
 <p>
   Because we (like most other parts of the Breakout chapters) like to keep things organized, we create another class called <fun>ParticleGenerator</fun> that hosts all the functionality we just described. You can find the source code below:
 </p>
   
 <ul>
   <li><a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/particle_generator.h" target="_blank">header</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/particle_generator.cpp" target="_blank">code</a></li>
 </ul>
   
 <p>
   Within the game code, we create a particle generator and initialize it with <a href="/img/in-practice/breakout/textures/particle.png" target="_blank">this</a> texture.
 </p>
   
 <pre><code>
 ParticleGenerator   *Particles; 
 
 void Game::Init()
 {
     [...]
     ResourceManager::LoadShader("shaders/particle.vs", "shaders/particle.frag", nullptr, "particle");
     [...]
     ResourceManager::LoadTexture("textures/particle.png", true, "particle"); 
     [...]
     Particles = new ParticleGenerator(
         ResourceManager::GetShader("particle"), 
         ResourceManager::GetTexture("particle"), 
         500
     );
 }
 </code></pre>
   
 <p>
   Then we change the game class's <fun>Update</fun> function by adding an update statement for the particle generator:
 </p>
   
 <pre><code>
 void Game::Update(float dt)
 {
     [...]
     // update particles
     Particles-&gt;Update(dt, *Ball, 2, glm::vec2(Ball-&gt;Radius / 2.0f));
     [...]
 }
 </code></pre>
   
 <p>
   Each of the particles will use the game object properties from the ball object, spawn 2 particles each frame, and their positions will be offset towards the center of the ball. Last up is rendering the particles:
 </p>
   
 <pre><code>
 void Game::Render()
 {
     if (this-&gt;State == GAME_ACTIVE)
     {
         [...]
         // draw player
         Player-&gt;Draw(*Renderer);
         // draw particles	
         Particles-&gt;Draw();
         // draw ball
         Ball-&gt;Draw(*Renderer);
     }
 }  
 </code></pre>
   
 <p>
   Note that we render the particles before we render the ball. This way, the particles end up rendered in front of all other objects, but behind the ball. You can find the updated game class code <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/progress/6.game.cpp" target="_blank">here</a>.
 </p>
     
 <p>
   If you'd now compile and run your application you should see a trail of particles following the ball, just like at the beginning of the chapter, giving the game a more modern look. The system can also easily be extended to host more advanced effects, so feel free to experiment with the particle generation and see if you can come up with your own creative effects.
 </p>       
 
     </div>
     
     <div id="hover">
         HI
     </div>
    <!-- 728x90/320x50 sticky footer -->
 <div id="waldo-tag-6196"></div>
 
    <div id="disqus_thread"></div>
 
     
 
 
 </div> <!-- container div -->
 
 
 </div> <!-- super container div -->
 </body>
 </html>