Jump to content
  • Advertisement
cebugdev

OpenGL How to replace shade of color with a another color - GLSL/OGL

Recommended Posts

Hi all,

How can i replace the shade of color to another color, on my attached image (S1.png), the image is of the shade of blue, and i want to replace the entire color with a different color

in GLSL but icannot just straight set the values as the colors are of different shade of blue.

What i am trying to achieve is this, the image represents something like a glow in the game and the color changes based on a certain type. Example is the other image attached (image.png), where  the blue color was replaced by red (dont mind the whitish color as i will overlay a white color on top of it).

How can i do this in shader part, whats the math or the things i need to research for this?


image.png.acae943d0906cb7e29f0b0df08f98a83.png

S1.png

Share this post


Link to post
Share on other sites
Advertisement

If the only thing you are doing is replacing blue with red, all you need to do is to rewire the colors from your input color to your output color:

outputColor.r = inputColor.b
outputColor.g = inputColor.g
outputColor.b = inputColor.r

This should also take care of shades of blue and turn them to shades of red, as long as you only have shades of one color.

In general, if you start with an input color of (0,0,x), you need to put x in the right place in the output color. (x,0,0) for red, (x,x,0) for yellow and so on. 

Share this post


Link to post
Share on other sites

And in the general case... create a metric for "how close are these two colours" in your colour space of choice (usually HSV is used for visual colour-matching), and use that value per-fragment to subtract the present colour and add the replacement colour.

// GLSL Pseudocode, do not copy/paste; re-type it.

float distance_metric(float3 a, float3 b) {
  //TODO Re-interpret both as HSV (after this point, read "RGB" components as actually being "HSV" components instead).
  // Calculate the distance in H, S, V spaces, apply tuning constants to suit your "tolerance" parameters.
  float3 separation = (a - b).rgb * float3(rScale, gScale, bScale).rgb;
  // Combine those axis separations into a linear distance, e.g. using pythagorus to get a meaningful scalar.
  float dist = sqrt( separation.r * separation.r + separation.g * separation.g + separation.b * separation.b );
  return clamp(dist, 0, 1);
}

// In fragment shader...
uniform float3 old, new;
float match = 1.0 - distance_metric(fragment.rgb, old);
fragment.rgb -= match * old.rgb;
fragment.rgb += match * new.rgb;

 

Share this post


Link to post
Share on other sites
On 5/17/2019 at 12:25 AM, Wyrframe said:

And in the general case... create a metric for "how close are these two colours" in your colour space of choice (usually HSV is used for visual colour-matching), and use that value per-fragment to subtract the present colour and add the replacement colour.


// GLSL Pseudocode, do not copy/paste; re-type it.

float distance_metric(float3 a, float3 b) {
  //TODO Re-interpret both as HSV (after this point, read "RGB" components as actually being "HSV" components instead).
  // Calculate the distance in H, S, V spaces, apply tuning constants to suit your "tolerance" parameters.
  float3 separation = (a - b).rgb * float3(rScale, gScale, bScale).rgb;
  // Combine those axis separations into a linear distance, e.g. using pythagorus to get a meaningful scalar.
  float dist = sqrt( separation.r * separation.r + separation.g * separation.g + separation.b * separation.b );
  return clamp(dist, 0, 1);
}

// In fragment shader...
uniform float3 old, new;
float match = 1.0 - distance_metric(fragment.rgb, old);
fragment.rgb -= match * old.rgb;
fragment.rgb += match * new.rgb;

wow, learning something new everyday, thanks man!

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!