Narumium

Blog

Picel Art (ドット絵)

座標を一定範囲に分けて、範囲ごとに同じ画素を表示するようにします。

floor(切り捨て)を使ってドットの個数分の領域に分けて、+.5/NUM_BLOCK で領域中心の画素値を取るようにします。

補足

ピクセルの座標(gl_FragCoord)と解像度(resolution / 自前で準備)を使って次のようにも書けます。

uv0-1なのでfloorを使いましたが、ある範囲の領域で同じ点を刺したいときにはmodを使う方が自然に書けると思います。

画像サイズの比率が分かれば分割サイズを変えてどんな比率でも正方形のドットにできます。

precision highp float;
uniform sampler2D t;
uniform vec2 resolution;

#define NUM_BLOCK_L 32.
#define NUM_BLOCK_R 32.
void main(){
	vec2 p=resolution;
	p=vec2(
		gl_FragCoord.x-mod(gl_FragCoord.x,p.x/NUM_BLOCK_L)+p.x*.5/NUM_BLOCK_L,
		gl_FragCoord.y-mod(gl_FragCoord.y,p.y/NUM_BLOCK_R)+p.y*.5/NUM_BLOCK_R
	);
	gl_FragColor=texture2D(t,p/resolution);
}

関連ブログ