Pixel Benderの最近のブログ記事

大幅に遅れてしまいましたが、前回のソースコードを置いておきます。

横方向のブラー
縦方向のブラー

結局コメント等入っていないソースコードですが、ここで説明したいと思います。

ポイントはブラーフィルタをある部分に適用させれれば良い。の一点に尽きます。
ですから、適用範囲を振り分ける以外はこの記事のソースコード
を流用しています。

//ピクセルの参照
float2 pos = outCoord();
//楕円の範囲 注:centerpointは外部設定パラメータ
float2 ellipsepos = float2(float((pos.x + centerpoint[0]) / 2.0) , pos.y);
float dist = distance(centerpoint,ellipsepos);
//適用範囲のみにブラー
if (dist > radius){
    /*記事のサンプルソースコード*/
} else {
    dst = sampleNearest(src,pos);
}

この縦横ブラーをかけて一緒にこのTintフィルタをかけています。
実際中身を書き換えたフィルタを使用していますが、こっちの方が良く出来ていると思います。

このくらいさっさと公開しろよ!とお叱りを受けそうですね。
ちなみに結局コントラストフィルタは思うような効果にならず、このままにしておきます。
もっと細かい調整が出来るようにならねば。

いつの間にか3月も過ぎてしまいましたね。。。Progressionのカスタムシーンの事を書く予定がなかなか考えがまとまらないうちに他の事に手を出してしまったりしていましたので、その記事を書きます。
カスタムシーンのエントリー明日書けるといいな。。

さて今回手を出した事とはCBCNETのこの記事が発端です。
ミニチュア風景をPixelBenderで実現出来ないかと。

少し考えて、手元にあるものとサンプルで上がってるものを組み合わせれば出来そうだったのでやってしまいました。

今回は3つのフィルタを同時適用させています。
あるものをベタベタ切り貼りで作ったので中身は酷い状況なんですが。。。

それで作ったのが以下の物になります。



それで次の日に_simoさんの5ive.blogのこのエントリを読み、ぼかしが楕円である事を認識し、以下の様に変更しました。


この楕円ぼかしの問題は中心がずれて適用されてしまう事で、現在ペンディング中です。まだまだPixelBenderを使いこなせていないです。

今回のソースの大元ですが、
ぼかしの部分はこの記事に掲載されているソースの改造で、色味の変更はここに掲載されているフィルタのソース(確かTintだったと思います)の改造です。
今回学習したのはPixcelBenderでパラメータ変更可能なガウスブラーはかなり面倒だという事です。

なので最初から自分で作った訳では無いですが、少し考えればサクッと色々な効果が実現出来るので楽しいです。
ソースコード本体はダウンロード出来るようにしますが、少々整えてから公開しますので、今暫くお待ちください。

追伸:今Pixel Bender Exchange見てたらコントラストのフィルタを発見したので、もう少しいじるかも。。。

先日のエントリーでフレームを進めるとblendShaderのブレンドが効かなかった件ですが、なんとなんと!コメント欄にて解決方法をお教えいただきました。

感謝感謝です。おかげで胸のつっかえが取れました!

以下の様にどうやら一旦ブレンドモードをノーマルに戻してから再設定しなければならない様です。

~
addEventListener(Event.ENTER_FRAME,enterFrameHandler);            
~
private function enterFrameHandler(e:Event):void{
    _param++;
    if (_param > 10){
        _param = 0;
    }
    _fadeShader.data.intencity.value = [_param * 0.1];
    //一旦ブレンドモードをノーマルにする!!コレ重要!
    _container2.blendMode = BlendMode.NORMAL;
    _container2.blendShader = _fadeShader;
}

以下修正後の動作。動いてる!!よかった。。。。


本当にブログを書いていて良かったと思いました。
たまち様>解決法をお教えいただき本当にありがとうございました。


そこで新たな疑問が!何故ブレンドモードをノーマルに戻す必要があるのでしょうか???こういう仕様なんでしょうかね?

仕事の忙しいのは続いているのですが、合間を見てPixelBenderの勉強を今更ながらじわじわと始めています。
何故かと言うと、実は画像の処理がよくわかっておらず、PixelBenderのソースコードを見てこれならいけるんじゃなかろうかと。
また、先日行ったAdobeMaxでもFITCの人がPixelBender速いぜ!みたいな事を言っておられましたので、少しやってみようかなと。

まず、導入の仕方やチュートリアルは以下の記事を参考にしました。
Adobe Pixel Benderでのブレンド、フィルタおよび塗りの作成

この記事だけでも十分にわかりやすいのですが、
AdobeのウェブサイトにPixel Bender ExchangeというPixcelBenderファイルの公開サイトがあります。
(実は私の欲しかったものはここでまかなえてしまったのですが。。)

このファイルを見て、PixelBenderToolkitのヘルプを見て、という感じで進めていきました。ただ、実際にFlashで適用させるにはFlash10で書き出さなければならない。。。でもCS4持ってない。。ということでWonderflを利用させてもらっているのですが、思いっきりはまってしまいました。

まずShaderをフィルタとして使用する場合は何の問題も無くFlash側で使用出来ました。

思うような動作を実現できなかったのが、blendShaderにShaderを設定する場合です。
2つの画像を使用する場合はblendShaderでブレンドするという形になります。
やりたかったのは2つの画像のクロスフェードだったのですが、一番最初のフレームで最後に設定した後、フレームを進めてblendShaderにShaderを設定しても反映されませんでした。
(サンプルはコマンドになってますが、EnterFrameで散々いろいろやったあげくの悪あがきです)

ようするに以下のように書いた場合は

_fadeShader = new Shader(_pbloader.data);
_fadeShader.data.intencity.value = [0.3];
_container2.blendShader = _fadeShader;
//以下が適用される
_fadeShader.data.intencity.value = [0.5];
_container2.blendShader = _fadeShader;

後ろのintencityが0.5が適用されて、

~
_fadeShader.data.intencity.value = [0.5];
_container2.blendShader = _fadeShader;
addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
private function enterFrameHandler(e:Event):void{
    //こちらは反映されない
    _fadeShader.data.intencity.value = [0.3];
    _container2.blendShader = _fadeShader;
}
とした場合は最初に設定したintencityが0.5が適用されます。


ちなみに後者のPixcelBenderソースコード貼っておきます。


kernel CrossFade
<   namespace : "northprint";
    vendor : "";
    version : 1;
    description : "CrossFade";
>
{
    input image4 src;
    input image4 src2;
    output pixel4 dst;
    parameter float intencity
    <
        minValue:0.0;
        maxValue:1.0;
        defaultValue:0.5;
    >;  
    void
    evaluatePixel()
    {
        float4 frontPixcel = sampleNearest(src,outCoord());
        float4 backPixcel = sampleNearest(src2,outCoord());        
        dst = mix(frontPixcel,backPixcel,intencity);
    }
}

これだけで画像のミックスが出来ちゃう。
これが動的に変えられないのは悲しいです。(そもそもこういう事を意図されていないのかもしれませんが。。描画が更新されていないだけ???)
まだよく分かっていないながら使っているので、もう少しがんばってみようと思います。間違ってるよ!という場合は指摘いただけると泣いて喜びます。

このアーカイブについて

このページには、過去に書かれたブログ記事のうちPixel Benderカテゴリに属しているものが含まれています。

前のカテゴリはjsflです。

次のカテゴリはprogression3です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。