[Muxtape]Autechre - Weissensee Against Im Glück / Neu! - Weissensee

Tags:

久々に更新。どちらもテクノというよりは生音に近いので電子音苦手な人も聴けると思う。

»»» borealkiss.muxtape.com

Flash Player 10は現時点でGPUをサポートしていない

Tags:

追記 2008/12/01

この記事は2008年5月現在のものです。今どうなのか全然しりません!!!
************************

開発者ブログを読むかぎり現段階でサポートしていない(Pixel Bender Toolkitはサポートしている)。理由は動作確認の問題とかPlayerサイズをでかくしたくないとか色々書いてある。詳細はリンク先を読んでみてください。とりあえずwmode=”gpu”と書くだけ無駄なことがわかった。

You heard right, software run time. Pixel Bender kernels do not run using any GPU functionality whatsoever in Flash Player 10.

Take a breath. :-)
kaourantin.net: Adobe Pixel Bender in Flash Player 10 Beta

[FlashPlayer10] Pixel Bender FilterのFLASHへの導入

Tags:

  1. あると便利なのでPixel Bender Toolkitをダウンロード。専用のpbkファイルがあれば実際のエフェクトの動作を手元で確認できる(もちろん元ソースも見れる)。
  2. Pixel Bender Exchangeより好みのフィルターをダウンロード。ここではTwirl Filterを使って説明(twirl.pbk)
  3. Pixel Bender ToolkitのFile > Open Pixel Bender Kernel Filter > twirl.pbkを選択
  4. File > Load Image > 好みの画像選択
  5. これで準備完了。あとはRunボタンを押せば画像にフィルターエフェクトが入り、フィルターのプロパティをスライダーを使ってリアルタイムに変更して見ることができる。twirlフィルターの場合、center(x,y)でエフェクトの中心位置、radiusでエフェクト範囲、twirlAngleでエフェクトの度合いを決定していることがわかると思う。
  6. File > Export Pixel Bender Byte Code Filter for FlashでFLASH読み込み用にパブリッシュ > twirl.pbj作成(すでにpbjファイルを同包したものもあるしpbjファイルしか配布していないものもある)

Flashに読み込ませるのは画像の扱いなんかと同じ。外部ファイルとして読み込ませる場合は以下の通り。例ではフィルターをかけるBitmapクラスは空なので適宜画像等を読み込ませてください。

import flash.display.Shader;
import flash.display.Bitmap;
import flash.events.Event;
import flash.filters.ShaderFilter;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.load(new URLRequest("twirl.pbj"));
loader.addEventListener(Event.COMPLETE,onComplete);

function onComplete(e:Event):void{
    var img:Bitmap = new Bitmap();
    var shader:Shader = new Shader(e.target.data);
    var filter:ShaderFilter = new ShaderFilter(shader);
    img.filters = [filter];
    addChild(img);
}

swfファイルに埋め込む場合は以下の通り。バイナリーデータとして埋め込むのでMime-typeの設定が必要(ここでもBitmapクラスは空)。

[Embed(source="twirl.pbj", mimeType="application/octet-stream")]
private var PbjObject:Class;

var img:Bitmap = new Bitmap();
var shader:Shader = new Shader(new PbjObject());
var filter:ShaderFilter = new ShaderFilter(shader);
img.filters = [filter];

この時点でフィルターのプロパティについては何も設定していないのでエフェクトは表示されない。先ほどのtwirl.pbkのソースをPixel Bender Toolkitで見てみるとcenter, radius, twirlAngleについて以下のように記述されていることがわかる。

parameter float2 center
    <
        minValue:float2(0.0, 0.0);
        maxValue:float2(2048.0, 2048.0);
        defaultValue:float2(256.0, 256.0);
    >;

parameter float radius
    <
        minValue:float(0.1);
        maxValue:float(2048.0);
        defaultValue:float(10.0);
    >;

parameter float twirlAngle
    <
        minValue:float(0.0);
        maxValue:float(360.0);
        defaultValue:float(90.0);
    >;

これらのプロパティへのアクセスは、例えばcenterのminValue, maxValue, defaultValueの場合はこんなかんじ。

//shader.data.center.minValueでもok
trace(shader.data["center"]["minValue"]);//0,0
trace(shader.data["center"]["maxValue"]);//2048,2048
trace(shader.data["center"]["defaultValue"]);//256,256

centerに値を入れたい場合はこんなかんじ。

//shader.data.center.valueでもok
shader.data["center"]["value"] = [125,125];
trace(shader.data["center"]["value"]);//125,125

shader.data["center"]["value"] = shader.data["center"]["defaultValue"];
trace(shader.data["center"]["value"]);//256,256

以下の例ではcenter=(125,125), radius=80, twirlAngle=100のエフェクトが画像に加えられる。

//shaderにはtwirl.pbj、imgには画像が格納済み
shader.data["center"]["value"] = [125,125];
shader.data["radius"]["value"] = [80];
shader.data["twirlAngle"]["value"] = [100];
filter= new ShaderFilter(shader);
img.filters = [filter];

完全なソースの例を見たい場合は以下のsourceを参照してください。
[FlashPlayer10]Twitter twirls
[FlashPlayer10]Twitter twirls

Flash Player 10 API ドキュメンテーション

Tags:

出たっぽい(英語)。ダウンロードはこちら

Thanks for informing, The Flash Blog!!

[FlashPlayer10]A minimal template for using Pixel Bender Filters

Tags:

フィルターデータはAdobe - Pixel Bender Filtersを利用(Crystallize.pbj)。ギャラリーには他にも面白そうなものがいくつかあったので遊べそう。ところでadobeで配布されている個人制作フィルターなんだけど、何でフィルタープロパティに関して説明がないんだろう。今回はフィルターデータの内部をfor文で走査してプロパティを見つけた。他に便利な方法がないようであれば次回にでも書きます。あと、よく見たらビキニじゃなかった。

[関連リンク]
The Back Button » Working with Shaders/Filters in Flash 10
The Flash Blog » Loading Pixel Bender Filters in Flash 10
AstroのShaderFilter
AIF Toolkitメモ

[FlashPlayer10]Bikini de Mosaic
[FlashPlayer10]Bikini de Mosaic (要Flash Plaeyer 10)

ソース。たぶんPixel Bender Filterを利用するのに必要な最小限の内容しかないのでテンプレートみたいに使えると思う(もちろんフィルターのプロパティは変わる)。スライダーに関しては本質的ではないので割愛してます。

package {
    /*
    * Requires Flex SDK 3.0.1 or later to be compiled.
    */
    import flash.display.Bitmap;
    import flash.display.Shader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.filters.ShaderFilter;

    [SWF(width="550",height="400",backgroundColor="0×0",frameRate="24")]

    public class PixelBender03 extends Sprite{

        [Embed(source="data/250.jpg")]
        private var TestImage:Class;

        //Set mime-type as "binary", 
        //because the pbj object is in the binary form.
        [Embed(source="data/Crystallize.pbj",
                mimeType="application/octet-stream")]
        private var PbjObject:Class;

        private var img:Bitmap;
        private var shader:Shader;
        private var filter:ShaderFilter;
        private var slider:SimpleSlider;

        public function PixelBender03(){
            //Photo
            img = new TestImage();
            img.x = stage.stageWidth/2 - img.width/2;
            img.y = stage.stageHeight/2 - img.height/2;
            addChild(img);

            //Pixel Bender filter
            shader = new Shader(new PbjObject());
            filter= new ShaderFilter(shader);
            var minValue:Number = shader.data.size["minValue"];
            var maxValue:Number = shader.data.size["maxValue"];
            var defaultValue:Number = shader.data.size["defaultValue"];
            shader.data.size.value = [defaultValue];
            img.filters = [filter];

            //Slider has a value between the 1st (min) and 2nd-argument (max), 
            //and the default value is defined by the 3rd-argument.
            slider = new SimpleSlider(minValue,maxValue,defaultValue);
            slider.x = 100;
            slider.y = stage.stageHeight/2 - slider.height/2;
            addChild(slider);
            slider.addEventListener(Event.CHANGE,onChange);
        }

        private function onChange(e:Event):void{
            shader.data.size["value"] = [slider.value];
            img.filters = [filter];
        }
    }
}

← Previous PageNext Page →