Turn a colour bitmap greyscale at runtime

totebo · May 2016

Title says it all. Is this possible?

pie · May 2016

@totebo you can do it with shaders:
open normal map example and change the last lines of ps.glsl in:

 
	//gl_FragColor = g_Color * vec4(color0 * diff + color1 * spec, 1); this is the original last line, just to give you a reference
 
	// Convert to grayscale using NTSC conversion weights
    float gray = dot(color0.rgb, vec3(0.299, 0.587, 0.114));
 
    gl_FragColor = vec4(gray, gray, gray,1);

Unfortunately my knowledge is quite limited, and there are a lot of unneeded lines remaining in the shader file (things used for normal mapping) but this could give you a start...

ar2rsawseen · May 2016

Wow @pie impressive, I think you are more advanced in shaders than me now, I have not played with them yet

hgy29 · May 2016

Yes, you can do this with shaders. If used with Bitmap sprite, vertex shader would be:

attribute highp vec3 vVertex;
attribute mediump vec2 vTexCoord;
uniform highp mat4 vMatrix;
varying mediump vec2 fTexCoord;
 
void main() {
  vec4 vertex = vec4(vVertex,1.0);
  gl_Position = vMatrix*vertex;
  fTexCoord=vTexCoord;
}

And fragment shader:

uniform lowp vec4 fColor;
uniform lowp sampler2D fTexture;
varying mediump vec2 fTexCoord;
 
void main() {
 lowp vec4 frag=fColor*texture2D(fTexture, fTexCoord);
 if (frag.a==0.0) discard;
 float gray = dot(frag.rgb, vec3(0.299, 0.587, 0.114));
 gl_FragColor = vec4(gray, gray, gray,frag.a);
}

Init code in lua:

local shader=Shader.new("vShader","fShader",0,
{
{name="vMatrix",type=Shader.CMATRIX,sys=Shader.SYS_WVP,vertex=true},
{name="fColor",type=Shader.CFLOAT4,sys=Shader.SYS_COLOR,vertex=false},
{name="fTexture",type=Shader.CTEXTURE,vertex=false},
},
{
{name="vVertex",type=Shader.DFLOAT,mult=3,slot=0,offset=0},
{name="vColor",type=Shader.DUBYTE,mult=4,slot=1,offset=0},
{name="vTexCoord",type=Shader.DFLOAT,mult=2,slot=2,offset=0},
});

pie · May 2016

Thanks @ar2sawseen I am sure that you can do much better than me if you play with shaders half of the time I spent learning the basics..

totebo · May 2016

Fantastic, thanks so much guys!

indrajith · May 2016

just want to know that is there any Shader 101 guide?

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Turn a colour bitmap greyscale at runtime

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Turn a colour bitmap greyscale at runtime

Comments