Postprocessing (Son İşlem)

Yalnızca birkaç son işlem efektiyle Breakout oyununun görsellerini tamamen canlandırabilsek harika olmaz mıydı? Bulanık bir sallama efekti, sahnenin tüm renklerini ters çevirme, çılgın vertex hareketleri ve daha fazlasını OpenGL'in framebuffer'ları sayesinde görece kolayca gerçekleştirebiliriz.

Bu bölüm, framebuffer'lar ve anti-aliasing bölümlerindeki kavramları yoğun şekilde kullanır.

Framebuffer'lar bölümünde, yalnızca tek bir doku kullanarak son işlem efektleri elde etmeyi göstermiştik. Breakout'ta benzer bir şey yapacağız: renk eki olarak çok örneklemeli (multisampled) bir renderbuffer nesnesi eklenmiş bir framebuffer nesnesi oluşturacağız. Oyunun tüm render kodu bu çok örneklemeli framebuffer'a render edilir; ardından içerik, renk tamponu olarak bir doku ekine sahip farklı bir framebuffer'a aktarılır (blit). Bu doku, sıfır veya daha fazla son işlem efekti uygulanmış tam ekran 2D quad'a render edeceğimiz oyunun kenar yumuşatmalı görüntüsünü içerir.

Özetlemek gerekirse render adımları şunlar:

1. Çok örneklemeli framebuffer'a bağlan.

2. Oyunu normal şekilde render et.

3. Çok örneklemeli framebuffer'ı, doku ekine sahip normal framebuffer'a aktar (blit).

4. Framebuffer'ı çöz (varsayılan framebuffer kullan).

5. Normal framebuffer'dan renk tamponu dokusunu son işlem shader'ında kullan.

6. Ekran boyutunda quad'ı son işlem shader'ının çıktısı olarak render et.

---

Efektler

Postprocessing shader'ı üç tür efekt destekliyor: shake, confuse ve chaos.

• shake: Sahneyi küçük bir bulanıklıkla hafifçe sallar.

• confuse: Sahnenin renklerini, aynı zamanda x ve y eksenini de ters çevirir.

• chaos: İlginç görseller oluşturmak için kenar tespit çekirdeğini kullanır ve ilginç bir kaotik efekt için dokulu görüntüyü dairesel şekilde hareket ettirir.

Son işlem efektleri

---

Vertex Shader

2D quad üzerinde çalışan vertex shader:

#version 330 core
layout (location = 0) in vec4 vertex; // <vec2 position, vec2 texCoords>

out vec2 TexCoords;

uniform bool  chaos;
uniform bool  confuse;
uniform bool  shake;
uniform float time;

void main()
{
    gl_Position = vec4(vertex.xy, 0.0f, 1.0f); 
    vec2 texture = vertex.zw;
    if (chaos)
    {
        float strength = 0.3;
        vec2 pos = vec2(texture.x + sin(time) * strength, texture.y + cos(time) * strength);        
        TexCoords = pos;
    }
    else if (confuse)
    {
        TexCoords = vec2(1.0 - texture.x, 1.0 - texture.y);
    }
    else
    {
        TexCoords = texture;
    }
    if (shake)
    {
        float strength = 0.01;
        gl_Position.x += cos(time * 10) * strength;        
        gl_Position.y += cos(time * 15) * strength;        
    }
}

Hangi uniform true olarak ayarlandığına bağlı olarak vertex shader farklı yollar izler. chaos veya confuse true ise sahneyi hareket ettirmek için doku koordinatlarını değiştirir (ya doku koordinatlarını dairesel şekilde öteleme ya da tersine çevirme). Doku sarma yöntemini GL_REPEAT olarak ayarladığımızdan chaos efekti sahnenin quad'ın çeşitli parçalarında tekrar etmesine yol açar. shake true ise vertex konumlarını ekran sallanıyormuş gibi küçük miktarlarda hareket ettirir. chaos ve confuse'un aynı anda true olmaması gerektiğini, shake'in ise diğer efektlerin herhangi biriyle birlikte çalışabildiğini not edin.

---

Fragment Shader

#version 330 core
in  vec2  TexCoords;
out vec4  color;
  
uniform sampler2D scene;
uniform vec2      offsets[9];
uniform int       edge_kernel[9];
uniform float     blur_kernel[9];

uniform bool chaos;
uniform bool confuse;
uniform bool shake;

void main()
{
    color = vec4(0.0f);
    vec3 sample[9];
    // konvolüsyon matrisi kullanılıyorsa doku offsetlerinden örnekle
    if(chaos || shake)
        for(int i = 0; i < 9; i++)
            sample[i] = vec3(texture(scene, TexCoords.st + offsets[i]));

    // efektleri işle
    if (chaos)
    {           
        for(int i = 0; i < 9; i++)
            color += vec4(sample[i] * edge_kernel[i], 0.0f);
        color.a = 1.0f;
    }
    else if (confuse)
    {
        color = vec4(1.0 - texture(scene, TexCoords).rgb, 1.0);
    }
    else if (shake)
    {
        for(int i = 0; i < 9; i++)
            color += vec4(sample[i] * blur_kernel[i], 0.0f);
        color.a = 1.0f;
    }
    else
    {
        color = texture(scene, TexCoords);
    }
}

Bu shader, framebuffer'lar bölümündeki fragment shader'ı üzerine inşa edilir ve aktif efekt türüne göre çeşitli son işlem efektleri uygular. Bu kez offset matrisi ve konvolüsyon çekirdekleri, OpenGL kodundan ayarladığımız uniform olarak tanımlanmıştır; avantajı bunları her fragment shader çalışmasında yeniden hesaplamak yerine yalnızca bir kez ayarlamamız. Örneğin offsets matrisi şu şekilde yapılandırılır:

float offset = 1.0f / 300.0f;
float offsets[9][2] = {
    { -offset,  offset  },  // sol-üst
    {  0.0f,    offset  },  // merkez-üst
    {  offset,  offset  },  // sağ-üst
    { -offset,  0.0f    },  // sol-merkez
    {  0.0f,    0.0f    },  // merkez-merkez
    {  offset,  0.0f    },  // sağ-merkez
    { -offset, -offset  },  // sol-alt
    {  0.0f,   -offset  },  // merkez-alt
    {  offset, -offset  }   // sağ-alt    
};
glUniform2fv(glGetUniformLocation(shader.ID, "offsets"), 9, (float*)offsets);

---

PostProcessor Sınıfı

(Çok örneklemeli) framebuffer'ları yönetmeyle ilgili tüm kavramlar daha önceki bölümlerde kapsamlı şekilde ele alındığından burada ayrıntılara girmeyeceğiz. Aşağıda başlatmayı, framebuffer'lara yazma/okumayı ve ekran quad'ını render etmeyi yöneten bir PostProcessor sınıfının kodu bulunuyor:

• PostProcessor: başlık, kod

Burada dikkat çeken kısım BeginRender ve EndRender fonksiyonları. Tüm oyun sahnesini framebuffer'a render etmemiz gerektiğinden, sahnenin render kodunun öncesi ve sonrasına uygun şekilde BeginRender() ve EndRender() çağırabiliriz. Sınıf, arka planda framebuffer işlemlerini halleder. Örneğin PostProcessor sınıfının oyunun Render fonksiyonunda kullanımı şöyledir:

PostProcessor *Effects;
  
void Game::Render()
{
    if (this->State == GAME_ACTIVE)
    {
        Effects->BeginRender();
            // arka planı çiz
            // seviyeyi çiz
            // oyuncuyu çiz
            // partikülleri çiz	
            // topu çiz
        Effects->EndRender();
        Effects->Render(glfwGetTime());
    }
}

İstediğimiz yerde son işlem sınıfının gerekli efekt özelliğini true olarak ayarlayabiliriz ve efekt hemen aktif hale gelir.

---

Shake It (Sallama)

Bu efektlerin (pratik) bir gösterimi olarak, topun sert bir beton bloğa çarptığındaki görsel etkiyi taklit edeceğiz. Sağlam bir çarpışma gerçekleştiğinde kısa bir süre için sallama efektini etkinleştirerek çarpışmanın daha güçlü bir etki bırakmış gibi görünmesini sağlayacağız.

Sallama efektini yalnızca kısa bir süre için etkinleştirmek istiyoruz. Bunu, sallama efektinin aktif kalması gereken süreyi yöneten ShakeTime adlı bir değişken oluşturarak gerçekleştirebiliriz. Sağlam bir çarpışma gerçekleştiğinde bu değişkeni belirli bir süreye sıfırlıyoruz:

float ShakeTime = 0.0f;  

void Game::DoCollisions()
{
    for (GameObject &box : this->Levels[this->Level].Bricks)
    {
        if (!box.Destroyed)
        {
            Collision collision = CheckCollision(*Ball, box);
            if (std::get<0>(collision)) // çarpışma gerçekleştiyse
            {
                // solid değilse bloğu yık
                if (!box.IsSolid)
                    box.Destroyed = true;
                else
                {   // blok solid ise sallama efektini etkinleştir
                    ShakeTime = 0.05f;
                    Effects->Shake = true;
                }
                [...]
            }
        }    
    }
    [...]
}

Ardından oyunun Update fonksiyonunda ShakeTime değişkenini 0.0'a ulaşana kadar azaltıyoruz; ardından sallama efektini devre dışı bırakıyoruz:

void Game::Update(float dt)
{
    [...]
    if (ShakeTime > 0.0f)
    {
        ShakeTime -= dt;
        if (ShakeTime <= 0.0f)
            Effects->Shake = false;
    }
}

Böylece her sağlam bloğa çarptığımızda ekran kısa süreliğine sallanmaya ve bulanmaya başlar; oyuncuya topun katı bir nesneyle çarpıştığına dair görsel geri bildirim verir.

Sallama efekti

Güncellenmiş oyun sınıfı kaynak kodunu buradan bulabilirsiniz.

Sonraki power-up'lar bölümünde diğer iki son işlem efektini de işe yarar biçimde kullanacağız.