Jump to content
  • Advertisement
Sign in to follow this  
Tiresias

"greying" a texture

This topic is 2996 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello
how could i grey a texture ?
i.e: i am creating a 2d texture, which is a png for ex.
I want to change the texture ti make it look "all greyed" like if it was "disabled" (basically those texture are buttons and sometimes they would have to be in the disabled state.

Share this post


Link to post
Share on other sites
Advertisement
If you want to use it for GUI, it's not simply "greying" the image. usually disabled buttons have a separate texture.
For example, what happens, if your button is grayscale itself? Just like almost every buttons in Windows. You can't "grey" it, it will be the same after greying the grey colours. Have separate textures for disabled items (separate means they should be in the same atlas)

Share this post


Link to post
Share on other sites
Colorblind people aren't going to like it.

Grayscale is OK, but make sure to reduce constrast too. Otherwise, somebody who's colorblind may not be able to notice the difference at all.

Share this post


Link to post
Share on other sites
Quote:
Original post by Sik_the_hedgehog
Colorblind people aren't going to like it.

Grayscale is OK, but make sure to reduce constrast too. Otherwise, somebody who's colorblind may not be able to notice the difference at all.


Most colorblind people (the vast majority) can tell the difference between colored and grayscale images perfectly well.

EDIT: In other words, design like this is worth considering since as many as 10% of all men are colorblind, but it's not the kind of colorblind would hamper discrimination between colored/not-colored, so here I'd say it's a non-issue.

Share this post


Link to post
Share on other sites
the easiest/best method is to have 2 textures for each image (one color + one greyscale)

u could also do this in a shader

if ( color )
gl_FragColor.xyz = color;
else
gl_FragColor.xyz = vec3( color.x * 0.3 + color.y * 0.59 + color.z * 0.11 );

Share this post


Link to post
Share on other sites
You probably need the texture in rgb format, but you can convert it to hsl, replace the saturation channel with all black, and then revert to rgb. You can probably simplify that algorithm (maybe that's what zedz's algorithm is), and maybe that doesn't yield the gray you want, but that will work.

You might want to test it on a few of your icons in your image editor of choice before you implement it.

Share this post


Link to post
Share on other sites
Quote:
Original post by Shinkage
Most colorblind people (the vast majority) can tell the difference between colored and grayscale images perfectly well.

Not all of them, and it's easy to work around, really =P And I find reduced contrast better for disabled stuff anyways (despite I'm the exact opposite of colorblind), because then the enabled stuff (with more contrast) tends to take more attention from the eye.

Share this post


Link to post
Share on other sites
OT, regarding color blindness:

I was curious and found those tools:

* http://live.gnome.org/GAP/ColorBlind
* https://addons.mozilla.org/de/firefox/addon/5614/
edit2:
* https://addons.mozilla.org/en-US/firefox/addon/5001/
* http://www.colblindor.com/2008/12/23/15-tools-color-blindness/
-> http://colororacle.cartography.ch/

edit1: It would be interesting if such stuff and similar would be available through some color profiles in the Operating System.

edit3: Okay, I seriously recommend colororacle, it comes without installation and is for Linux, Mac, Windows :)

Share this post


Link to post
Share on other sites
You don't need a separate texture if all you really want to implement is a greyed version of the texture, maybe with reduced contrast.

You could, like zedz indicated, calculate the luminance for each pixel with the common formula: y = 0.30* r + 0.59 * g + 0.11 * b and modifiy it to reduce the contrast as well.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

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

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!