Dzisiaj chciałbym napisać trochę na temat PostProcessingu i PreProcessingu, czym się różnią te obydwa tematy:

  • PreProcessingu – oznacza generowanie danych przed generacja właściwej grafiki
  • PostProcessing –  oznacza operacje przeprowadzone po wygenerowaniu właściwej grafiki

W przypadku shaderów możemy te dwa elementy wykorzystać do upiększenia lub modyfikacji generowanego obrazu:

  • PreProcessing – do generowania pikselizacji przeliczanych punktów, generowania paternów, zniekształceń obrazu (przemieszczenie pikseli w pionie lub poziomie), efekt lustra itd.
  • PostProcessing – zmiana kolorystyki obrazu, dodania efektów bazujących na kolorze (sepia, efekty mory, lini monitora CTR, nakładanie gradientów, itd)

Poniżej przedstawiam kilka modyfikacji tego samego obrazu:

PreProcessing

Pierwsza główna modyfikacja polega na, modyfikacji sposobu przeliczania pozycji na:

    vec2 fragCoord=gl_FragCoord.xy;

//---------------------------------------------
// PreProcessing
//---------------------------------------------
//
// Pixelize
//
vec2 div = vec2(resolution.x * 1.0 / resolution.y, 1.0);
fragCoord=floor(fragCoord/div)*div;

vec2 pos=(fragCoord.xy * 2.0 - resolution.xy) / resolution.y;
vec2 uv=fragCoord.xy/resolution.xy;

 

Pikselizacja

   
//
// Pixelize
//
vec2 div = vec2(resolution.x * 1.0 / resolution.y, 1.0);
fragCoord=floor(fragCoord/div)*div;

 

 

Dot Pattern

    
//
// Dot Mask
//
float dot = sin(gl_FragCoord.x) + cos(gl_FragCoord.y);
if (dot<0.1){
        gl_FragColor=vec4(0.0, 0.0, 0.0, 1.0);
        return;
}

 

 

PostProcessing

CTR Monitor Linie

    
//
// Monitor Line
//
outColor *= 0.8 + 0.2 * sin(10.0 * time + uv.y * 1000.0);
outColor *= 0.95 + 0.05 * sin(70.0 * time) * sin(123.0 * time);

 

Square border

    
//
// Square border
//
outColor *= 0.0 + 1.0 * 16.* uv.x * uv.y * (1.0 - uv.x) * (1.0 - uv.y);

 

Vignette

    
//
// Vignette 
//
float lenght=length(pos);
outColor *= 1.0 - pow(lenght * 0.7, 20.0);

 

Color correction

    
//
// Color correction
//
float gamma=1.5;
float brightness=1.0;
float saturation=0.0;
outColor=pow(outColor,vec3(gamma))*brightness;
outColor=mix(vec3(length(outColor)),outColor,saturation);

 

Posterize

    
//
// Posterize
//
float grayscale = dot(vec3(0.222, 0.707, 0.071), outColor);
outColor=grayscale * vec3(0.5, 0.4, 1.0);