You can indeed make pixelation into hexagonal pixels. By 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; }

I 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.

So you must experiment yourself and choose such concrete implementation which fits your current needs. I just showed main principle here.

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.