uniform sampler2D tex;
void main()
{
float dx = 15.*(1./512.);
float dy = 10.*(1./512.);
vec2 coord = vec2(dx*floor(gl_TexCoord[0].x/dx),
dy*floor(gl_TexCoord[0].y/dy));
gl_FragColor = texture2D(tex, coord);
}
Smart
and pixelated version of it
Monday, June 14, 2010
Pixelation Pixel Shader
Pixelation is process when pixel at x,y is duplicated into x+dx,y+dy rectangle. Pixelation GLSL fragment code:
Smart
and pixelated version of it
Smart
and pixelated version of it
Subscribe to:
Post Comments (Atom)
Hi,
ReplyDeleteCan we achieve this pixelation in hexagonal pixels ? If yes , can you please guide me on how to achieve this.?
You can indeed make pixelation into hexagonal pixels.
DeleteBy using this article on hexagonal grids - one can write hexagonal pixelation GLSL fragment shader as:
_______________________________________________
#version 130
uniform sampler2D Texture0;
#define H 0.02
#define S ((3./2.) * H/sqrt(3.))
vec2 hexCoord(ivec2 hexIndex) {
int i = hexIndex.x;
int j = hexIndex.y;
vec2 r;
r.x = i * S;
r.y = j * H + (i%2) * H/2.;
return r;
}
ivec2 hexIndex(vec2 coord) {
ivec2 r;
float x = coord.x;
float y = coord.y;
int it = int(floor(x/S));
float yts = y - float(it%2) * H/2.;
int jt = int(floor((1./H) * yts));
float xt = x - it * S;
float yt = yts - jt * H;
int deltaj = (yt > H/2.)? 1:0;
float fcond = S * (2./3.) * abs(0.5 - yt/H);
if (xt > fcond) {
r.x = it;
r.y = jt;
}
else {
r.x = it - 1;
r.y = jt - (r.x%2) + deltaj;
}
return r;
}
void main(void)
{
vec2 xy = gl_TexCoord[0].xy;
ivec2 hexIx = hexIndex(xy);
vec2 hexXy = hexCoord(hexIx);
vec4 fcol = texture2D(Texture0, hexXy);
gl_FragColor = fcol;
}
____________________________________________
Good luck!
Hi,
ReplyDeleteThank you for the reply. I think i have achieved it.
Thank you.
Hi,
ReplyDeleteI tried the hexagonal pixelation from your code, I can see hexagons, but the sides of hexagons are not smooth, they look distorted. etc. Can you help me to sort it out?
Well, I can only guess. It may be because of "un-smooth" behavior of function hexIndex() which clusters pixels into hexagons. Possibly problem are with pixels which are on boundary between two hexagons, so problem arises in that case - to which hexagon we should attach pixel ? So we must somehow deal with this edge case. Another thing that can be that some hexagon edge lines is at 60 degrees between edge and horizontal and/or vertical and because in reality monitor has some aspect ratio (that is real texture texels are not really squares, but rectangles instead) - you may get such total effect. And other reasons may apply - such as small accuracy of GLSL functions , integer rounding errors, bugs in different video card manufacturer drivers and etc ... You can also try to implement line anti-aliasing effect with GLSL, because with anti-aliasing enabled hexagon edges may look nicer.
ReplyDeleteSo you must experiment yourself and choose such concrete implementation which fits your current needs. I just showed main principle here.
Good luck !
Hi,
ReplyDeleteThank you for the help. Appreciate it.