Redstagram: Messing around with GLSL postfx

[greaserpirate]

(Scroll down for screenshots)


I found out that the post-processing effects are stored in the file "data/config/glsl.cfg", so I decided to mess with them. I found that after a while I could sort of decypher the simpler shaders such as gbr and bw, so I made a shader that does very primitive color enhancement, and I went through a bunch of maps taking pictures. I was able to make a color filter that makes most maks look a lot like Battlefield 3 (or at least like Metro for darker maps), and I also made a custom filter that you can easily change the parameters of.

Here's the code: (copy into data/config/glsl.cfg; if new shaders don't work it doesn't effect anything but I'd still back it up on principle)

{l Code}: {l Select All Code}

//Messing around
lazyshader 4 "battlefield"     [ @fsvs } ] [ @fsps gl_FragColor = vec4((sample.x - 0.05) * 1.6, (sample.y - 0.02) * 1.3, sample.z * 1.1, sample.w); } ]

//for primitive color curves; 'vec4 params' is a vector with 3 parameters, each standing for how much the shadows are darkened for each color, plus one for how much colors are multipled to conpensate for darkened shadows (i.e. /setpostfx colorfilter 0.05 0 0 20 will darken red shadows and make bright reds even brighter, 0 0.5 0 20 will do the same for green, etc.)

lazyshader 4 "colorfilter"     [ @fsvs } ] [
    uniform vec4 params;
    @fsps gl_FragColor = vec4((sample.x - params.x) * (1 + params.x * params.w), (sample.y - params.y) * (1 + params.y * params.w), (sample.z - params.z) * (1 + params.z * params.w), sample.w); } ]

How to use:

For the battlefield shader, simply type "/setpostfx battlefield".
(It works with other postfx shaders too, so you can type /bloom 0.3 and /addpostfx battlefield or /setpostfx battlefield and /addpostfx rotoscope, etc.)
The custom color filter has 4 parameters.

The first 3 darken the shadows of each of the primary colors (Red, Green, Blue), and typically they work best if one of the colors is left at 0 and the others are set from 0.02 to 0.05.

The 4th parameter controls how much brightness is multiplied to compensate; for example, /setpostfx colorfilter 0.05 0 0 20 will darken red shadows and make bright reds even brighter, 0 0.5 0 20 will do the same for green, etc. The 4th parameter works best in the 10 to 25 range.



Here are some screenshots I took:

This one was using /setpostfx colorfilter 0.05 0.04 0 20 (or something like that)

Using "/setpostfx battlefield"

Using "/setpostfx battlefield"

/setpostfx battlefield again

This one's pretty extreme, I think it was /setpostfx colorfilter 0.08 0.06 0 15

In the long run, it would be awesome if there was some sort of auto-color-enhancer (and/or auto-bloom) that could tell if what you were seeing was dark or bright and adjust bloom and/or color accordingly. I'm guessing making something like that would be a lot harder than what I've done, but maybe someone experienced might want to try?

[ballist1c]

THIS IS AWESOME

excuse me while I go screw around with this and get back to you

[Jamestonjes]

Wow I didnt expect such a difference

[Unnamed]

I tried out creating some shaders. Well, it's not much usefull I think. Maybe I'll try something more serious later.
Here's the first one:

{l Code}: {l Select All Code}

unnamedshader1 = [
    lazyshader 4 $arg1 [
        @fsvs
            gl_TexCoord[1].xy = gl_MultiTexCoord0.xy + vec2(@(if $arg2 -1.5 0.0), @(if $arg3 -1.5 0.0));
            gl_TexCoord[2].xy = gl_MultiTexCoord0.xy + vec2(@(if $arg2  1.5 0.0), @(if $arg3  1.5 0.0));
        }
    ] [
        #extension GL_ARB_texture_rectangle : enable
        uniform sampler2DRect tex0;
        uniform vec4 params;
        void main(void)
        {
      vec4 sample = texture2DRect(tex0, gl_TexCoord[0].xy);
      float t = max(sample.r, sample.b);
           gl_FragColor = 0.25*t*(vec4(sample.r*sample.r, params.w*sample.g*sample.r*sample.b, sample.b*sample.b, sample.w) + texture2DRect(tex0, gl_TexCoord[1].xy) + params.z*texture2DRect(tex0, gl_TexCoord[2].xy));
        }
    ]
]
unnamedshader1 uns1 1 0 20 2.5


The other things I tried are even more useless.

And here is a funny one:

{l Code}: {l Select All Code}

lazyshader 4 "pulseinv" [ @fsvs } ] [ uniform vec4 millis; uniform vec2 params; @fsps
   float t = abs(fract(millis.x * params.x)*2.0 - 1.0);
   gl_FragColor = t * (1.0 - sample) + (1.0 - t) * sample; } ]


The first parameter is the frequency in Hz. It wil invert.

edit:
The first parameter has to be <1

{l Code}: {l Select All Code}

lazyshader 4 "rainbow" [ @fsvs } ] [ uniform vec4 millis; uniform vec2 params; @fsps
   gl_FragColor = vec4(sample.r * abs(fract(millis.x * params.x)*2.0 - 1.0), sample.g * abs(fract((millis.x + 333) * params.x)*2.0 - 1.0), sample.b * abs(fract((millis.x + 666) * params.x)*2.0 - 1.0), sample.w); } ]

{l Code}: {l Select All Code}

lazyshader 4 "pulsecolor" [ @fsvs } ] [ uniform vec4 millis; uniform vec4 params; @fsps
   gl_FragColor = vec4(sample.r * abs(fract(millis.x * params.r)*2.0 - 1.0), sample.g * abs(fract(millis.x * params.g)*2.0 - 1.0), sample.b * abs(fract(millis.x * params.b)*2.0 - 1.0), sample.w); } ]

[greaserpirate]

That's some pretty advanced coding, and I can tell you know GLSL pretty well. Would you be able to make a shader that tells you the average brightness of the frame before bloom is added? I've always wanted to have an auto-bloom function that adjusts the level of bloom so it's never too bright but just bright enough, but I don't really know my way around the shader language enough for that.

also, I made some new shaders for a subtle cartoon effect, which fits better with RE's arcade-like theme and brings out the colors that the map creators decided to use.

First off is a cheap, clean bloom-like shader ("expo") which brightens the highlights a little bit and doesn't affect framerates:

{l Code}: {l Select All Code}

lazyshader 4 "expo"     [ @fsvs } ] [
    uniform vec3 params;
    @fsps gl_FragColor = vec4(sample.x + (sample.x * sample.x * params.x), sample.y + (sample.y * sample.y * params.y), sample.z + (sample.z * sample.z * params.z), sample.w); } ]

Then, the most important part, I made a shader that saturates colors ("saturate"). The effect is really noticeable and makes everything seem more bright and alive.

{l Code}: {l Select All Code}

//after testing I chose 1.65 and 0.65; /addpostfx doesn't like params
lazyshader 4 "saturate"     [ @fsvs } ] [
    @fsps gl_FragColor = vec4((sample.x * 1.65) - ((sample.x + sample.y + sample.z) * 0.3 * 0.65), (sample.y * 1.65) - ((sample.x + sample.y + sample.z) * 0.3 * 0.65), (sample.z * 1.65) - ((sample.x + sample.y + sample.z) * 0.3 * 0.65), sample.w); } ]

(There might be an easier way to saturate the colors, but I couldn't find it. If anyone knows how, that would be great.)

Then I modified the 'sobel' shader to make subtle dark edges ("mildcartoon"). They're not too noticeable in the maps themselves, but they outline players and projectiles, especially ones in the distance, and they give everything a cartoony feel.

{l Code}: {l Select All Code}

lazyshader 4 "mildcartoon" [ @fsvs @setup4corners } ] [
    @fsps
    @sample4corners

        vec4 t = s00 + s20 - s02 - s22;
        vec4 u = s00 + s02 - s20 - s22;
   float desat = t.x*t.x + t.y*t.y + t.z*t.z + 0.2 * (u.x*u.x + u.y*u.y + u.z*u.z);
        gl_FragColor = sample - 0.25 * vec4(desat, desat, desat, t.w*t.w);
    }
]

You can get some good-looking results by typing "/setpostfx expo 1 1 1", "/addpostfx saturate", and "/addpostfx mildcartoon".

Here are some screenshots:

Ghost with the three filters

from the map "myst" on Quadropolis

from the map "oa1", also on Quadropolis

[Unnamed]

That's some pretty advanced coding, and I can tell you know GLSL pretty well.

Well, I don't know much about it. I only know what these things I used in the codes do after some tests.

Would you be able to make a shader that tells you the average brightness of the frame before bloom is added? I've always wanted to have an auto-bloom function that adjusts the level of bloom so it's never too bright but just bright enough, but I don't really know my way around the shader language enough for that.

I also thought about how to get the average brightness. I only know how to get the brigtness of a single point. A loop could be used to get the brightness of many single points, but this script would be executed for every pixel, right? Maybe there's a better way.
The next problem is that the average brightness is different for every frame and the level of bloom would 'jump' between different values.



These shaders look interesting

[tempris]

Actually if you set it to delay its transition between bloom values you might just bramble to pull it off. Maybe have it execute every second and then do a blood fade into the new value over 1000 Milliseconds. But executing for each pixel may overload the CPU. If not then its worth a try.

[cdxbow]

Love to see people playing with custom GLSL shaders. I tried to do a scan/sensor effect with GLSL postfx, but other than wasting a couple of days it never really worked, so I ended up using the b&w preset with a touch of zoom. It's OK, but I always thought something better could be done, so if you come across anything that could be suitable as a IR or low light scan please post it.

[Unnamed]

I made a shader to fade the screen b&w:

{l Code}: {l Select All Code}

lazyshader 4 "pulsebw" [ @fsvs } ] [ uniform vec4 millis; uniform vec2 params; @fsps
   float t = abs(fract(millis.x * params.x)*2.0 - 1.0);
   gl_FragColor = t * vec4(dot(sample.xyz, vec3(0.333))) + (1.0 - t) * sample; } ]

The parameter is the frequency.

Then I created one to add moving stripes wich are b&w. The first param is the frequency and the second one 1 / wave length. The second parameter should be somethinh around 0.002

{l Code}: {l Select All Code}

lazyshader 4 "stripes" [ @fsvs } ] [ uniform vec4 millis; uniform vec2 params; @fsps
   float t = abs(fract(millis.x * params.x + gl_TexCoord[0].y * params.y)*2.0 - 1.0);
   gl_FragColor = t * vec4(dot(sample.xyz, vec3(0.333))) + (1.0 - t) * sample; } ]

cdxbow can you specify what you mean with scan/sensor effect?

[Dratz-_C]

Hi Folks,
I am keenly interested in a better glare filter, and, should if come to fruition, would love to see it replace the current one. The reason behind this interest is that coloured or paletted palindexed particle latices used to make staggered, diagonal walkways and the like are impossible with glare subtle, soft or intense. These particles morph over a short time from distinct shapes into a big bright hole in one's view. A map that extensively uses this type of particle work is my only progressing one, "Quaternion." Here are a couple of pictures, one with glare off, the second with it on intense.
Pictures in 1080p are in my orignal post.
Obviously, while tempting, I cannot expect everyone to simply turn off glare in the graphical user interface because my map functions and looks fine to me without it enabled. Thus, I remembered this thread and thought I would post in it about my experience. I will probably have to learn how to approach writing shaders myself to work on my glare problem. However, should my ability not be sufficient, you should know that another person is facing this type of challenge. I am considering attempting to modify the contrast instead of only brightening the bright. Normally glare would just brighten the bright, it's just that this selectively increased brightness alone can be problematic with particles.
Cheers

[qreeves]

You shouldn't be using that many particles to begin with, maxparticledistance is variable.

[Dratz-_C]

Thanks for your solution. I'm making some manual progress on it. The pictures include yellow because it is the brightest colour. This change seems to be the best compromise between still visible lines during glare off and a practical amount of glare with it on. I have a question for you. Has anyone ever asked about diagonally directed particles?

particle_glare_solution_00.jpg

particle_glare_solution_01.jpg

Cheers

[qreeves]

I had a chance to look at your map, this is being caused by "skybgglare" being set to 1 in your map. Brighter colours are always going to oversaturate like that with glare.

[Dratz-_C]

I will see whether I can put this advice into practice in the next few minutes. I was really stumped--thank you Quin. [Edit: Some pictures with "skybgglare 0" in effect are in a post in my map thread. They look much better.]
Cheers