Pixelation Shader?

EricCarr

Hi, in one of my games I would like to be able to toggle "old school" mode which would simulate large pixels. So I would like to, essentially, pixelate the entire screen/stage with pixels of specific size.

I thought a shader might be a good way to go about this so I tried messing with the blur samples, but alas, shaders are still a bit over my head.

Simple example of what I mean:

https://www.photofunny.net/efectos/grandes/pixelate_images.jpg

Any ideas on how to best accomplish this?

Thanks,
Eric

hgy29

Hi @EricCarr,
Similarly to the blur effect you would need to render your scene to a rendertarget, then render this rendertarget to screen with a shader.

The shader would align texture coordinates to a grid and sample the texture at that point.

keszegh

in the blur example change fShader.glsl to the following:

uniform lowp vec4 fColor; uniform lowp sampler2D fTexture; uniform int fRad; uniform mediump vec4 fTexelSizeH; uniform mediump vec4 fTexelSizeW; varying mediump vec2 fTexCoord;   void main() { lowp vec4 frag=vec4(0,0,0,0); mediump vec2 tc=fTexCoord-mod(fTexCoord,(fRad+1)/100.0); frag=texture2D(fTexture, tc); if (frag.a==0.0) discard; gl_FragColor = frag; }

keszegh

this may give you an idea about how to do it. the only important line is
mediump vec2 tc=fTexCoord-mod(fTexCoord,(fRad+1)/100.0);
which rounds the coordinate depending on fRad and then
frag=texture2D(fTexture, tc);
returns the color at that rounded value.

SinisterSoft

Or just draw your entire scene to a render target that has smoothing turned off. Then have that be the only thing drawn to the stage - and scale it up. No need for a shader.

A shader could be used to make it look like an old crt screen when scaled up maybe.

SinisterSoft

An advantage of doing it this way is that you will have less draw 'writes' - so you could actually get a lot more happening in the game, faster...

EricCarr

Thank you everyone for the tips! I now have some experimenting to do. :-)