スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

Pixel Benderでレンズ

flash CS4にアップグレードしました。イロイロと新しい機能が増えてるみたいですね。
というワケで、以前DisplacementMapFilterを使って作ったレンズと似たようなモノを、今回はAdobe Pixel Bender Toolkitで作ったフィルタをflashで使用して作ってみました。






左側の画像の上でマウスカーソルを動かすと、レンズの中心座標がマウスカーソルの位置になります。
右側は元画像デス。

Pixel Bender toolkitで作成したレンズなフィルタを、画像(ムービークリップ)にフィルタとして設定しています。
Pixel Bender側のファイル(lens.pbk)はこんなカンジです。

<languageVersion : 1.0;>

kernel Lens
< namespace : "Your Namespace";
vendor : "Your Vendor";
version : 1;
description : "your description";
>
{
input image4 src;
output pixel4 dst;
// レンズの中心座標
parameter float2 center
<
minValue:float2(0.0);
maxValue:float2(1000.0);
defaultValue:float2(100.0);
>;
// レンズの直径
parameter float size
<
minValue:float(0.0);
maxValue:float(1000.0);
defaultValue:float(200.0);
>;
// レンズの曲率半径
parameter float radius
<
minValue:float(0.0);
maxValue:float(1000.0);
defaultValue:float(200.0);
>;
// レンズの焦点距離
parameter float f
<
minValue:float(1.0);
maxValue:float(100.0);
defaultValue:float(20.0);
>;
void
evaluatePixel()
{
// 対象となる座標を取得する
float2 pos = outCoord();
// レンズの中心からの距離を算出する
float dist = distance(pos, center);
// レンズ上の座標なら処理をおこなう。そうでなければそのまま出力する
if (dist < size / 2.0) {
// レンズの中心を原点とした座標を算出する
float2 dPos = pos - center;
// レンズによる位置ずれの長さを算出する
float r2 = radius * radius;
float l = sqrt(r2 - (dPos.x * dPos.x + dPos.y * dPos.y)) - sqrt(r2 - size * size / 4.0);
float d = l / (f + l);
float dx = -dPos.x * d;
float dy = -dPos.y * d;
pos = float2(pos.x + dx, pos.y + dy);
}
dst = sampleLinear(src, pos);
}
}
レンズの中心座標、直径、曲率半径、焦点距離をパラメータとして指定できるようにしています。
対象となる座標の色を、レンズでの屈折分ずれた座標にすることでレンズっぽくしています。
計算の方法そのものはDisplaymentMapFilterのときとほぼ同じデス。
ただし、今回は座標のずれる量を0x00から0xFFにおさめる必要はないので、値の調整はしていません。

で、これをPixel Bender ToolkitのFile-Export Filter for Flash Player...でlens.pbjファイルにしてflashで使用してます。

flashの方は、フレームアクションとしてスクリプトを記述しています。
// レンズの中心座標
var lensX:Number = image_mc.width / 2;
var lensY:Number = image_mc.height / 2;
// シェーダ
var shader:Shader;
// シェーダフィルタ
var shaderFilter:ShaderFilter;
// シェーダを組み込む
[Embed (source="lens.pbj", mimeType="application/octet-stream")]
var ShaderClass:Class;
shader = new Shader(new ShaderClass());
// 設定ボタンクリックイベント
setting_btn.addEventListener(MouseEvent.CLICK,
function (e:MouseEvent):void {
doSetupShader();
});
// シェーダの設定を変更する
function doSetupShader():void {
if (shader) {
// パラメータを設定する
shader.data.center.value = [lensX, lensY];
shader.data.size.value = [Number(size_txt.text)];
shader.data.radius.value = [Number(r_txt.text)];
shader.data.f.value = [Number(f_txt.text)];
// シェーダをフィルタとして設定する
if (!shaderFilter) {
shaderFilter = new ShaderFilter(shader);
}
image_mc.filters = [shaderFilter];
}
}
// フレームイベントハンドラ
addEventListener(Event.ENTER_FRAME, doEnterFrame);
function doEnterFrame(e:Event):void {
// マウスカーソルが画像上にあったらレンズの中心座標をマウスカーソル位置にあわせる
if (image_mc.hitTestPoint(mouseX, mouseY)) {
lensX = mouseX - image_mc.x;
lensY = mouseY - image_mc.y;
doSetupShader();
}
}
このサンプルではEmbedタグを使ってlens.pbjファイルを組み込んでいます。

doSetupShaderメソッドで、Pixel Benderにパラメータを設定しフィルタとして使用しています。
ShaderのインスタンスをShaderFilterのコンストラクタパラメータとしてShaderFilterのインスタンスを作り、それをimage_mcのfiltersプロパティにセットというカンジです。image_mcというのは左側の画像(ムービークリップシンボル)です。

スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2009.01.22 | | Comments(0) | Trackback(0) | Flash CS4

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。