Shaders [SOLVED] Making only pixels around an object coloured

E

Elson Ng

Guest
Hi all, I have been trying to recreate the following illustration but I only managed to get the grayscale to work.

Here is what i am trying to achieve:

First - my background and objects in game are turned into grayscale by a shader in real time
Second - only pixels around my player are coloured




This is the grayscale shader i am using:
Code:
//
// Simple passthrough fragment shader
//
varying vec2 v_vTexcoord;
varying vec4 v_vColour;

const vec3 weight = vec3(0.2215, 0.7154, 0.0721);

void main()
{
    vec4 irgba=texture2D(gm_BaseTexture,v_vTexcoord);
    float luminance=dot(irgba.rgb, weight);
    gl_FragColor=vec4(luminance,luminance,luminance,irgba.a);
}

This is what i have at the moment:

I have passed all the objects other than the player through the grayscale shader and I also have
a lighting effect in a circle around my player.



How would I be able to achieve the second part? Any help would be greatly appreciated !! Thanks a lot in advance
 
Last edited by a moderator:
Hey this can be done pretty easily with a small modification to your code.

First of all "Pos" is just "in_position.xy" passed from the vertex shader.

"circle" is a vec3 uniform, first two components are the location of the "player" relative to the surface (measured in surface pixels), and the third component is the radius (measured in surface pixels) of the circle within which color should be shown. As long as you get youre circle components right, it should work. You might have to do a little math to convert the player's x/y position into relative position on the surface (that may be as simple as player pos - view pos).

Code:
varying vec2 v_vTexcoord;
varying vec2 Pos;
const vec3 weight = vec3(0.2215, 0.7154, 0.0721);
uniform vec3 circle;
void main()
{
    float outside_circle = float(length(Pos - circle.xy) > circle.z);
    vec4 irgba = texture2D(gm_BaseTexture,v_vTexcoord);
    float luminance = dot(irgba.rgb, weight);
    gl_FragColor = mix(irgba,vec4(luminance,luminance,luminance,irgba.a),outside_circle);
}
See picture below which demonstrates the code shown above. Though you can't see it in the screenshot, my mouse cursor is in the middle of that colored circle, and I am using the mouse position to locate the circle.

EDIT: changed name of "inside_circle" to "outside_circle" to be logical.
 

Attachments

Last edited:
E

Elson Ng

Guest
Thanks a lot!! Here's the result for those who are interested

 
Top