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);
Możliwość komentowania jest wyłączona.