S
SoulTie
Guest
GM Version: GM Studio
Target Platform: Windows
Download: see text / code below
Summary: Creating a Grayscale effect with Shaders
Tutorial:
Hi! I wanted to post a short Tutorial on how to write a grayscale shader in GLSL.
I am not the best teacher, so basic knowledge of shaders is assumed. There are other tutorials on this subject,
but I haven't found one on the GMC. Here goes...
Understanding luminance is important when converting an image to grayscale. This is because grayscale conversion is accomplished by replacing a pixel's color with its luminance value. So what is luminance?
According to google it is the intensity of light emitted from a surface per unit area in a given direction.
So basically, luminance is the overall brightness of a color, without reference to the color's hue.
The weighted vector that we will use for calculating luminance is:
You may notice that this is green. This is because
(according to Wikipedia) green light contributes the most to the intensity perceived by humans, and blue light the least.
In Gm:Studio, finding a pixel's color can be done like so:
Computing the luminance value is achieved by taking the dot product of the color vector with the weighted vector like this:
The only step that is left is to output the luminance value:
If you want to retain the image's original alpha value, then you can store the value in a float:
Then the final output would be:
Boom. Grayscale shader!
TL;DR
Target Platform: Windows
Download: see text / code below
Summary: Creating a Grayscale effect with Shaders
Tutorial:
Hi! I wanted to post a short Tutorial on how to write a grayscale shader in GLSL.
I am not the best teacher, so basic knowledge of shaders is assumed. There are other tutorials on this subject,
but I haven't found one on the GMC. Here goes...
Understanding luminance is important when converting an image to grayscale. This is because grayscale conversion is accomplished by replacing a pixel's color with its luminance value. So what is luminance?
According to google it is the intensity of light emitted from a surface per unit area in a given direction.
So basically, luminance is the overall brightness of a color, without reference to the color's hue.
The weighted vector that we will use for calculating luminance is:
Code:
const vec3 weight = vec3(0.2125,0.7154,0.0721);
(according to Wikipedia) green light contributes the most to the intensity perceived by humans, and blue light the least.
In Gm:Studio, finding a pixel's color can be done like so:
Code:
vec3 colors = texture2D(gm_BaseTexture,vTc).rgb; //Where vTc is the varying texture coordinates.
Code:
float luminance = dot(colors,weight);
Code:
gl_FragColor=vec4(luminance,luminance,luminance,1.);
Code:
float alpha=texture2D(gm_BaseTexture,vTc).a;
Code:
gl_FragColor=vec4(luminance,luminance,luminance,alpha);
TL;DR
attribute vec3 in_Position;
attribute vec2 in_TextureCoord;
varying vec2 vTc;
void main()
{
gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION]*vec4(in_Position.xyz,1.);
vTc=in_TextureCoord;
}
attribute vec2 in_TextureCoord;
varying vec2 vTc;
void main()
{
gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION]*vec4(in_Position.xyz,1.);
vTc=in_TextureCoord;
}
varying vec2 vTc;
void main()
{
const vec3 ww=vec3(0.2125,0.7154,0.0721);
vec3 irgb=texture2D(gm_BaseTexture,vTc).rgb;
float alpha=texture2D(gm_BaseTexture,vTc).a;
float luminance=dot(irgb,ww);
gl_FragColor=vec4(luminance,luminance,luminance,alpha);
}
void main()
{
const vec3 ww=vec3(0.2125,0.7154,0.0721);
vec3 irgb=texture2D(gm_BaseTexture,vTc).rgb;
float alpha=texture2D(gm_BaseTexture,vTc).a;
float luminance=dot(irgb,ww);
gl_FragColor=vec4(luminance,luminance,luminance,alpha);
}
Last edited by a moderator: