7jigen labs

Pixel Benderを勉強中なので今回はPixel Bender関係です。はまるとやばそうです。
Pixel Bender で 「Hello World」という文字をシェーダーで作るのはきっと大変です。でも四角や三角より円が簡単に描けるようなので今回は[ 誰でも描けるマル講座 ]でアリマス。パティパティ

まずParameterってのを用意してやります。デフォルトのシェーダーを作って、
output pixel4 dst;　って書いてあるところの次ぐらいの行に以下を追加しませう。

1
2
3
4
5
6
7
8
9
10
11
12
13

parameter float2 center
<
minValue: float2(0);
maxValue: float2(1000);
defaultValue:float2(100);
>;
 
parameter float radius
<
minValue: float(0);
maxValue: float(1000);
defaultValue:float(10);
>;

centerが円を表示する位置です。x,y 座標のセットなのでfloat2になります。
radiusは円の半径です。これは一個でいいので普通にfloatになります。

evaluatePixelってところがピクセルごとの処理内容になるようです。
evaluatePixelは、以下のようになります。

1
2
3
4
5
6
7

void
evaluatePixel()
{
dst = sampleNearest(src,outCoord());
if( distance( outCoord() , center ) < radius )
dst.r *= 2.5;
}

はい、これでシェーダーをRunさせてみると赤い円ができましたね！簡単です。
distance()っていうのは、その名のとおり距離を計算してくれる便利な関数で、
ここでは、center とoutCoord の距離を計算しています。outCoord ()とは現在計算されているピクセルの位置っぽいです。で見ての通り、その距離が、半径より小さい場合は、出力画像(dst)のr(赤)の値に2.5掛けてもっと赤くしてます。
( 2.5って数字は超いい加減なので妥当かどうか疑わしいです。)
この部分の処理をいろいろ変えてやるだけで、結構いろんな事ができちゃうので、円を描くってのもなかなかあなどれねーってことです。

富士山ライブカメラ(三ッ峠山頂カメラ)

↑のフィルターはマル描いて処理を適当に変えただけです。
evaluatePixelの中身は、それぞれ下のような感じです。
(どれもテケトーな処理です）

[Filter2]

1
2
3
4

float2 coord = outCoord();
if( distance( coord , center ) < radius)
coord *= distance( coord , center ) /radius;
dst = sampleNearest(src,coord);

[Filter3]

1
2
3
4
5

float2 coord = outCoord();
float a = distance( center , coord ) ;
if( a < radius )
cd = mix( coord , center , a/radius );
dst = sampleNearest( src , coord );

[Filter4]

1
2

dst = sampleNearest(src,outCoord());
dst.rgb *= radius / distance( outCoord() , center );

他にもlength() とか dot() とかでも簡単に円が描けちゃいますよ。lengthを使った場合は、

1

if( radius > length( center - outCoord() ) )

とすると全く同じようにマルが描けます。。。。。。。。

admin Flash, Flex, Pixel Bender