calendar

S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>

categories

archives

PV3D2.0(Beta)のCamera3D

0
    Beta版になってFreeCamera3DとFrustumCamera3DがCamera3Dに統合されたようです。
    カメラは3種類タイプがあって、BasicViewでもコンストラクタ引数で指定できます。

    CameraType.DEBUG
    //デバッグ用カメラ beta版から追加された。
    カメラステータスが左上に表示されるのと、キーボードでカメラを動かしたりできる。
    camera = new DebugCamera3D(viewport);

    CameraType.TARGET
    //指定した一点を常に向いているカメラ。 alpha版のCamera3Dみたい
    camera = new Camera3D(60);
    camera.target = DisplayObject3D.ZERO;

    CameraType.FREE
    //フリーカメラ。alpha版のFreeCamera3Dみたい
    camera = new Camera3D(60);

    で、FrustumCamera3Dは?というと、Camera3Dのコンストラクタの引数でパラメータを指定すれば同じような挙動を制御できます。
    (BasicViewでは指定するところがないのでできないかも)

    var fov:Number=60;
    var near:Number=10;
    var far:Number=5000;
    var useCulling:Boolean = true;
    camera = new Camera3D(fov, near, far, useCulling);

    ポイントは4つ目のuseCullingをtrueにしないと、fov,near,farの設定が生きないところ。

    useCullingの簡単なデモ

    デモはこちら ソースはこちら

    遠くのCubeがカリングされているのが分かります。

    ちなみに、
    ・カメラ固定してオブジェクトを移動
    ・カメラ移動してオブジェクトを固定
    をstatsViewで比較してみたところ、前者の方が速いみたいです。

    それから以下2点は注意。

    camera.zoomは設定値が1/10になっている。
    旧(alpha版):camera.zoom = 5; は
    新(beta版) :camera.zoom = 50; にする

    ∈舵厳蓮扮手・左手)の設定が追加にされた。
    import Papervision3D;して
    Papervision3D.useRIGHTHANDED (Boolean)で設定可能。

    PV3D:ShadedMaterialでテクスチャ+シェード

    0
      ShadedMaterialを使って、テクスチャを張った面にシェードを付けるデモです。以前のエントリでテクスチャ+シェードは出来ないと書いていたんですが、別件調べてたら普通に出来る事が分かったので今更ながら紹介します。無知って怖いですねw

      FlatShader
      GouraudShader
      CellShader


      デモはこちら ソースはこちら

      コードはこんな感じで
      var sdr = new FlatShader(light);
      var mat = new ShadedMaterial( new BitmapAssetMaterial("texture"), sdr);
      var obj = new Sphere(mat);
      scene.addChild(obj);

      ShadedMaterialに元画像のマテリアルと、シェーダー(〜Shaderってやつ)を渡せばよい。シェーダーはFlatShaderのところをGouraudedShaderとかにいろいろ変えることでデモのようになります。



      でShaderの中で面白いなと思ったのがPhongShader。表面に軽い凹凸デコボコを付けられます。

      PhongShader

      デモはこちら ソースはこちら

      左が凹凸設定していないPhongShader、右が凹凸設定したPhongShaderです。
      PhongShaderのインスタンス化する際に渡す引数で、凹凸を表現するためのマッピング画像(バンプマップ・bumpmap)を指定します。バンプマップは白黒の画像で、そのピクセルデータが凹凸の度合を示しています。

      var bumpMapBitmap = new Bitmap(new bumpearthmap(0, 0)); //bumparthmapがバンプマップのリンケージ
      var sdr = new PhongShader( light, 0xffffff, 0x333333, 0, bumpMapBitmap.bitmapData );
      var mat = new ShadedMaterial( new BitmapAssetMaterial( "earthmap" ), sdr); //earthmapは元画像のリンケージ名
      var obj = new Sphere(mat);
      scene.addChild(obj);

      デモみたいにテクスチャ画像と凹凸がそのまま対応しているような場合は、バンプマップ画像は、元のテクスチャ画像をPhotoShopかなんかで白黒にしてコントラストを調整すればできあがり。

      元画像(テクスチャ画像)


      調整後画像(バンプマップ)






      PV3D:Beta版の機能をいろいろ調べてみた(その2)

      0
        前回に引き続きPV3D2.0Betaで触ってみた機能についてまとめてみたいと思います。
        (内容に誤りがある可能性があります、注意)

        BitmapFireEffect

        デモはこちら ソースはこちら
        Fireという名前の通り、DisplayObject3Dに炎がメラメラと燃えるようなEffectを付ける為のクラス。標準ではパラメータで炎の色を赤か青で選べるけど、オブジェクトの色によって炎の色も変わる模様。

        ブレンド・ブラーとうまく組み合わせれば、もっとリアルにできるんだろうけどなあ・・・

        ↓↓↓該当部分のコード抜粋↓↓↓
        var bfx:BitmapEffectLayer = new BitmapEffectLayer(viewport);
        var f:BitmapFireEffect = new BitmapFireEffect();
        f.fadeRate = 0.1; //色変化割合(小さい数字程細かく変化)
        f.flameSpread = 1; //?
        f.flameHeight = 0.5; //高さ
        f.distortion = 1; //ゆらぎ
        f.distortionScale = 1; //ゆらぎの波高さ
        f.smoke = 1; //黒い部分の度合
        f.blueFlame = true; //赤or青
        bfx.addEffect(f);

        viewport.containerSprite.addLayer(bfx);

        var s = new Sphere(new ColorMaterial(0xffffff));
        scene.addChild(s);
        bfx.addDisplayObject3D(s);

        コードとしては、BitmapEffectLayer(変数bfx)にaddEffectして、そのbfxをviewportとオブジェクトに適用する。



        BitmapPixelEffect

        デモはこちら ソースはこちら
        モザイクをかけるようにして、ピクセル値を粗く変化させるクラス。粗くするとその分パフォーマンスあがるのかと思ったら、普通に処理の分だけ重くなったw ラスタに適用するとまた違う結果が出るのかもしれませんが。

        ↓↓↓該当部分のコード↓↓↓
        var mat = new FlatShadeMaterial(light, 0xdddddd, 0x555555);
        var obj = new Sphere(mat);
        scene.addChild(obj);

        var bfx:BitmapEffectLayer = new BitmapEffectLayer(viewport);
        bfx.clearBeforeRender = true; //残像が残る為の回避
        var bpe:BitmapPixelateEffect = new BitmapPixelateEffect(0); //度合を指定
        bfx.addEffect(bpe); //モザイク
        viewport.containerSprite.addLayer(bfx);
        bfx.addDisplayObject3D(obj);

        基本的に使い方はBitmapFireMaterialと一緒。




        createViewportLayer

        デモはこちら ソースはこちら
        デモとしては地味ですが・・・この機能は結構多様することになりそう。
        オブジェクトにBlur、Alpha、BlendModeを設定する様にするためのメソッド。

        コードはこんな感じで
        var vpl:ViewportLayer = obj.createViewportLayer(viewport, true);
        vpl.filters = [new BlurFilter(8, 8, 4)];
        vpl.alpha = 0.5;
        vpl.blendMode = BlendMode.ADD;


        ちなみにuseOwnContainerをtrueにすれば、下記のように直接オブジェクトにエフェクト効果をかけることもできます。


        obj.useOwnContainer = true; //trueにすることでfilterやalphaの使用が可能
        obj.alpha = 0.5;
        obj.filters = [new BlurFilter(8, 8, 4)];
        obj.blendMode = BlendMode.ADD;


        デモのstatsViewで確認したところ、useOwnContainerよりもcreateViewportLayerの方が軽いっぽいので、とりあえずはこっち使ってみようかなと。

        PV3D:Beta版の機能をいろいろ調べてみた

        0
          PV3D2.0がBetaになったということで、気になった機能をいろいろ調べた結果をまとめてみました。(内容的に間違っている部分あると思います、お気を付けくださいw)

          ParticleField

          デモはこちら ソースはこちら
          まとめてParticle(粒々)を追加できるParticleFieldは、粒の大きさを引数で指定できるようになりました。

          ↓↓↓コード↓↓↓

          var mf:ParticleMaterial = new ParticleMaterial(0xFFFFFF, 1);
          var pf:ParticleField = new ParticleField(mf, 1000, 5, 1000, 1000, 1000);
          //マテリアル、Particleの数、Particle一粒の大きさ、空間幅、空間高さ、空間奥行を指定
          scene.addChild(pf);



          SimpleLevelOfDetail

          デモはこちら ソースはこちら
          カメラからの距離によってポリゴン数を変化させる。(近くは細かく、遠くは粗く)
          上の画像では左が遠く右が近いのですが、線の数が違うのがわかります。

          ↓↓↓コード↓↓↓
          var objects:Array = new Array();
          var wMat:WireframeMaterial = new WireframeMaterial();
          for(var i:int=8;i<24;i++){
            objects.unshift(new Sphere(wMat, 100, i, i-2));
          }

          var distances:Array = null;
          distances = [1000, 1500, 1600, 3000];

          simple = new SimpleLevelOfDetail(objects, 0, 2000, distances);
          scene.addChild(simple);

          object配列に距離毎のDisplayObject3Dを代入、distances配列にどの距離で切り替えるかを代入、それぞれをSimpleLevelOfDetailへ引数として渡す。
          で、ENTER_FRAMEとかでsimple.updateLoD();ってやると距離に応じたオブジェクトが表示されます。デモみたいなPrimitiveじゃなくて複雑なColladaモデルとかで効果を発揮しそう。



          FogFilter

          デモはこちら ソースはこちら
          カメラからの距離に応じて、Fog(霧)をかける。

          ↓↓↓コード↓↓↓
          var fmt:FogMaterial = new FogMaterial(0xcc0000);
          renderer.filter = new FogFilter(fmt, 20, 1000, 10000);
          //マテリアル、深度度合の数, 最少深度、最大深度を指定

          上のSimpleLevelOfDetailと組み合わせて使うとよさげ。



          BitmapEffectLayer

          デモはこちら ソースはこちら
          今回自分的に一番感動したのがこれ。

          ↓↓↓コードはこんな感じ↓↓↓
          var bfx:BitmapEffectLayer = new BitmapEffectLayer(viewport, stage.stageWidth, stage.stageHeight, true, 0, BitmapClearMode.CLEAR_PRE);
          bfx.addEffect(new BitmapLayerEffect( new BlurFilter(3,3,1))); //ぼやける
          bfx.addEffect(new BitmapColorEffect(0.99, 0.98, 0.98, 0.98)); //黄色・赤っぽくなる
          bfx.drawCommand = new BitmapDrawCommand(null, new ColorTransform(1, 0.2, 0.1, 0.45), BlendMode.ADD);
          bfx.drawLayer.blendMode = BlendMode.OVERLAY;
          viewport.containerSprite.addLayer(bfx);

          var mat1 = new WireframeMaterial(0xffffff,100,0);
          var cube1 = new Cube(new MaterialsList({all:mat1}),150, 150, 150, 1, 1, 1, 0, 0);
          scene.addChild(cube1);
          bfx.addDisplayObject3D(cube1);

          viewportにエフェクトの内容を設定して、表示オブジェクトと紐付けることで実現できると。自分もFilterってコードではあまり書いたことないんで、要勉強ですね。

          あとやってて思ったこと幾つか。
          ・camera.zoom 設定値が1/10になったっぽい。
          ・Papervision3D.useRIGHTHANDED(true/false)というプロパティが追加されたけど、これ切り替えると左右が入れ替わって上下は逆さのまま・・・よくわからんw

          PV3D:Particleで空間に点を打つ

          0
            前回のエントリで、3D空間に線を引くことを覚えたので、じゃあ点を打つ方法もあるだろうと思ってちょっと調べたら、普通にありました。

            で、作ってみたデモ↓↓↓

            デモはこちら

            空間に打つ点の事を「Particle(粒子という意味)」と呼ぶらしい。
            デモでもわかるとおり、点といっても近くに来ると、正方形である事がわかります。じゃあPlaneと同じジャン?と思いきや、Planeは回転(rotation)があるのに対し、Particleは回転という概念が無く、プロパティは座標(x,y,z)とサイズだけです。どんな座標にいても常に正面を向いているPlaneみたいな感じ?です。

            つまりデモの様な動きをPlaneでやろうとすると、常にこっちを向いているように回転角度を自分で計算しなくてはいけないので大変です。(今まで知らなかった自分はまあ苦労してた訳ですが)

            あとデモ作ってみて思ったのは、ものすごく軽いということ。3D周りは常にパフォーマンスで苦しんでいるだけに、これは使わない手はないです。

            で、肝心の使い方。
            下記がParticle関連のインポート

            import org.papervision3d.materials.special.ParticleMaterial;
            import org.papervision3d.objects.special.ParticleField;
            import org.papervision3d.core.geom.renderables.Particle;
            import org.papervision3d.core.geom.Particles;

            オブジェクトの配置方法は主に以下の2通り。
            ^貪世困頂舵犬鮖慊蠅靴毒枌屬靴討い方法

            var pcs:Particles = new Particles(); //パーティクルを追加するコンテナ
            scene.addChild(pcs);

            var mp:ParticleMaterial = new ParticleMaterial(0xFF0000, 1); //パーティクルの色
            var pc:Particle = new Particle(mp, 10, 0, 0, 0); // 一粒、マテリアル、サイズ、x座標、y座標、z座標を引数で指定
            pcs.addParticle(pc);


            範囲と数を指定して、ランダムに一気にドバッと追加する方法

            var mf:ParticleMaterial = new ParticleMaterial(0xFFFFFF, 1); //色
            var pf:ParticleField = new ParticleField(mf, 3000, 10000, 10000, 10000); //パーティクルのコンテナ マテリアル、数、空間幅、空間高さ、空間奥行を指定
            scene.addChild(pf);


            2008/9/3 追記:Papervision3D Alpha 2.0 を使っています。 現時点での最新版であるPapervision3D Beta 2.0では、デモの通り動作しないようなので注意してください。


            PV3Dでテクスチャの歪みを減らす方法

            0
              PV3Dにおいてテクスチャ画像が歪んでしまう場合の補正方法として、セグメント(平面の分割数(ポリゴン数))を増やすという手法がありますが、この手法はパフォーマンスの影響がでる為、ゲームなどのケースではあまり適用したくありません。そこで、セグメントを増やさずにテクスチャの歪みを無くす方法として「カメラを遠くして、ズームを大きくする」というやり方があります。

              以下はカメラが被写体に近くてズームが小さい場合。
              テクスチャが崩れ、被写体も変形している。

              デモはこちら
              _camera.z = -300;
              _camera.zoom = 2;

              ■カメラが被写体に近い場合の利点
              カメラから被写体までの距離で大きさがずいぶん変わるため、奥〜手前の移動をダイナミックな感じにできる。

              ■カメラが被写体に近い場合の難点
              テクスチャが崩れやすい。モノによっては、被写体の形自体が歪んでしまう。(度のキツイ眼鏡で見たような歪み、いわゆる「3D酔い」状態)
              被写体の中心(?)がカメラの座標よりも後ろに来ると、被写体が消えてしまう(一部見えている部分があっても)

              以下はカメラが被写体から遠くてズームを大きくした場合。
              テクスチャが崩れてない、被写体も変形してない。

              デモはこちら
              _camera.z = -4000;
              _camera.zoom = 20;

              ■カメラが被写体から遠い場合の利点
              テクスチャが崩れにくい。空間自体も歪みがない分、把握しやすい。
              3D酔いがない。

              ■カメラが被写体から遠い場合の難点
              奥〜手前の大きさの変化が小さくなるため、動きによる迫力は出しずらい。

              ※上記検証はBasicView(Camera3D)のものです。

              ScaleX,Y,Zを変化させて3Dオブジェクトを伸縮させる

              0
                今更ながら気付いたのですが、ScaleX,ScaleY,ScaleZを変化させる事で3Dオブジェクトのスケールを変化させる事ができるようです。


                デモはこちら


                世の中、FlashPlayer10betaやらGoogleMapForFlashやらFIVe3Dやらやらと色々賑わっている様ですね。ちょっと自分が覚えられるペース超えてますんで、ここはしばらく静観しつつ地味にGWのネタなんかを中心に書いていこうかと思っております(需要あんのか・・・?w)

                PV3D(GreatWhite)でGoogleSketchUpのKMZファイルを直接読み込む

                0
                  引き続き、外部3Dモデル取り込みネタです。
                  今回は3DギャラリーにアップされているGoogleSketchUpの3Dモデルを取り込んでみました。


                  デモはこちら ※若干重いです。
                  ソースはこちら

                  手順としては以下の通りです。
                  ・GoogleSketchUpで3Dモデリングを作成する。(または3Dギャラリーからダウンロードしたファイルを開く)
                  ・[File]-[Export]-[3D Model...]を選択し、[Google Earth 4 *.kmz]形式でファイル保存する。
                  ・Flash側(GreatWhite)で、kmzファイルを読み込む

                  今回のポイントとしては、ソースや手順から分かるように、GreatWhiteから直接kmzファイルを指定して読み込む点です。以前はkmzを解凍して中のdaeやテクスチャを読み込んでいましたが、GreatWhiteからはその必要がなくなりました。

                  GoogleSketchUpの3Dモデルを利用できる利点は、何といってもネットで公開されているモデリングの数の多さにあります。3Dギャラリーでは世界中からアップされたモデルが豊富にあり、且つダウンロードできます。

                  また、GoogleSketchUpはフリーソフトですし、個人的には使い勝手も非常によく感じるので好きです。ただ難点として、Flash側では圧縮ファイルからのデータ読み込みの為か、動作が重いです。

                  ※自分で検証した結果に基づいて記述していますが、誤った内容が含まれている可能性がある点ご了承ください。
                  ※ダウンロードした3Dモデルの所有権や著作権等の権利についてはご自分で確認の上ご利用ください。
                  ※GoogleScketchUpはバージョン6を使用して検証しました。バージョン5でも同様の手順で出来ますが、kmzファイルのサイズが大きくなり、更に重くなるので、あまりお勧めしません。

                  公開されている3DモデルをPV3D(GreatWhite)に取り込む

                  0
                    もとがしさんのHPで公開されているメタセコの3DモデルがあまりにもカッコイイのでGreatWhiteに取り込んでみました。


                    デモはこちら
                    ソースはこちら

                    取り込む手順は技術検証:Collada形式の3Dモデルを読み込むと同様です。
                    テクスチャってパフォーマンス重くなるのかと思ったけど、この程度ならさほど影響ないみたいです。あとモーションは関節毎に個別に取り込んでFlash側でTweenerすればいいのかなと。

                    3Dモデリングはなかなか手間のかかる作業ですので、フリーで公開されているものを取り込んで使うのもありかな、と思っています。

                    ※ダウンロードした3Dモデルの所有権や著作権等の権利についてはご自分で確認の上ご利用ください。

                    技術検証:Collada形式の3Dモデルを読み込む

                    0
                      3DモデルをFlash(PV3D)で読み込んで表示させてみました。


                      デモはこちら
                      ソースはこちら(下の注意事項をお読みください。)

                      今回の手順で使うソフトは以下の2つです。
                      Metasequoia(通称メタセコ):3Dモデルを作るソフト
                      Vixar Motion:3Dモデルをモーションさせるソフト(今回の手順ではファイル形式変換の為に使う)

                      3Dモデリングソフトは非常に高価なものが多いのですが、今回使う2つのソフトは非常に優れたソフトであるにもかかわらず、とてもリーズナブルな値段設定になってます。尚、今回行った手順は、どちらのソフトも機能限定のお試し版(無料)で行うことができます。

                      で、手順としては、
                      1.メタセコで3Dモデルの原形を作り保存する。(拡張子mpo)
                      2.mpoファイルを、Vixarで開き、そのままdaeファイルとして保存する。
                      3.Flash(PV3D)で読み込み、表示させる。

                      Flash(PV3D)で読み込める3Dモデルの1つは、Collada version1.4.1というフォーマット(ファイル拡張子dae)のXMLなのですが、自分が調べた範囲では、無償で入手できる3Dモデリングツールで、PV3Dが認識できるdaeを出力するソフトは見つける事ができませんでした(2008/1/16現在)。よってVixarMotionはモーションを作るソフトなのですが、今回はモーションを作る為ではなくメタセコの3DモデルをCollada形式に変換させる為に使用してみました。

                      各ソフトの使い方やColladaの読込み方法は他サイトが充実してるので説明しませんが、注意点としては
                      ・PV3Dはテクスチャ(面に張り付ける画像)が必須らしいので、メタセコでモデリングする時点で必ずテクスチャを貼る。
                      ・Vixarで出力する際の設定の「UV座標」のチェックを付ける。
                      ・Vixarで出力するdaeファイルの中に、テクスチャ画像のパスが書いてあるが、これがC:¥〜となっているので、アップする際は相対URLに変更する。
                      ・daeファイル及びテクスチャ画像を外部ファイル読み込みする際はサンドボックスに注意する。

                      といった辺りです。

                      ※PV3DはバージョンBeta RC1.1 (18.06.07)について書かれています。
                      ※ソースのプログラムを動作させる際は、ご自分でtexture.pngを用意して同じフォルダに配置してください。
                      ※本プログラムを使用した場合、または使用できなかった等のいかなる損害も、制作者は、その責を負いません。ご自身の責任においてご使用ください。


                      | 1/2PAGES | >>