DigiTechLog Dot Com » 3Dエンジン http://digitechlog.com Adobe AIR、Flex、Flash、Java Tue, 08 Nov 2011 12:46:29 +0000 http://wordpress.org/?v=2.8 ja hourly 1 WOW-Engine: オープンソースのActionScript3用3D物理エンジンライブラリ http://digitechlog.com/2010/01/25/wow-engine-free-as3-open-source-physics-engine.html http://digitechlog.com/2010/01/25/wow-engine-free-as3-open-source-physics-engine.html#comments Mon, 25 Jan 2010 14:48:17 +0000 admin http://digitechlog.com/2010/01/25/wow-engine-free-as3-open-source-physics-engine.html WOW-Engineとは、3D空間上で物理演算するフレームワークである。座標計算とか、衝突計算とか、そういうことだけをWOWEngineはやってくれる。

3Dオブジェクトの描画はしてくれないので、3D空間に壁をつくるとか、球体を表示するとか、「表示をする」ならば、Papervision3Dとか、Sandyとかと組み合わせて作成必要だ。あくまでオブジェクトの位置関係を計算するだけだ。

WOWEngineを使う手順は以下の通り

  • WOWEngineを入手する
  • WOWEngineを初期化する
  • 物体を追加する
  • 物体を動かす
  • WOWEngineで計算する
  • 表示に反映する。

ad92c135a786cbe48fa2267d48527fbf

サンプルいろいろ（最近、アクセスできない場合は頻繁だよう、変わりにゴーグルコードサイトにアクセスできる）

Wow-Engineの導入と解説に関してはhttp://d.hatena.ne.jp/o_healer/20080315/1205573581に参考できる。

WOWEngineを初期化する

ここからは実際にWOWEngineを使う話。まずは、3D物理計算を行ってくれるエンジンである、「WOWEngine」のインスタンスを作成・初期化する必要がある。
以下のような感じで、クラスのメンバとして定義する。

  1. private var wow:WOWEngine;
  2. private var wowFloor:WBoundArea;
  3. private var wowMiku:WSphere;
  4. private var wowRin:WSphere;

このようにして宣言したWOWEngine関連のメンバを、次のように初期化する

  1. wow = new WOWEngine();
  2. wow.collisionResponseMode = wow.SELECTIVE;
  3. wow.addMasslessForce(new WVector(0, 0, 0));//常にかかり続ける力
  4. wow.damping = 1;
  5. wowFloor = new WBoundArea(FLOOR_WIDTH , FLOOR_HEIGHT , FLOOR_DEPTH);
  6. wowFloor.setPosition(0, FLOOR_HEIGHT / 2, 0);//位置
  7. wowFloor.elasticity = 1;//弾性
  8. wowFloor.friction = 0.050;//摩擦
  9. wow.setBoundArea(wowFloor);

物体を追加する

物理計算を行ってくれるWOWEngine自体の初期化が完了したら、そこに物体を加えていく。今回はミクとリンの2物体を追加すればよい。初期化時の

  1. private var wowMiku:WSphere;
  2. private var wowRin:WSphere;

を使う。以下は、かぐぁみねリンが床面に降り立つ→WOWEngineの物体定義の処理を行っている部分。

  1. Tweener.addTween(rin , { y:0 , time:4 , onComplete:function():void {
  2.         wowRin = new WSphere(rin.x , rin.y , rin.z , 60 , false , 43 , 0.65);
  3.         wow.addParticle(wowRin);
  4. }
  5. } );

物体を動かす

  1. private function wowMoveModel(target: displayObject3D , wowTarget:WSphere , point:Number3D):void {
  2. var dx:Number =0;
  3. var dz:Number = 0;
  4. var rad:Number = 0;
  5. if (target && wowTarget &&  point) {
  6.         dx = target.x – point.x;    //(1)
  7.         dz= target.z – point.z;    //(1)
  8.         rad = Math.atan2(dx , dz) * 180 / Math.PI;    //(2)
  9. target.rotationY = rad;    //(2)
  10.         wowTarget.velocity = new WVector(-1 * dx / 4 , 0 , -1 * dz / 4);//(3)
  11. }
  12. }

チュートリアル

関連エントリ

グーグルコード

Related Posts

]]> http://digitechlog.com/2010/01/25/wow-engine-free-as3-open-source-physics-engine.html/feed 0 Sandy 3D: オープンソースのFlash用3D描画エンジン http://digitechlog.com/2010/01/25/sandy-flash-3d-engine-available-in-as2-as3-and-haxe.html http://digitechlog.com/2010/01/25/sandy-flash-3d-engine-available-in-as2-as3-and-haxe.html#comments Sun, 24 Jan 2010 15:56:13 +0000 admin http://digitechlog.com/2010/01/25/sandy-flash-3d-engine-available-in-as2-as3-and-haxe.html

ActionScript Libraryリストにも収集している「Sandy 3D」は、オープンソースのFlash Player上で3Dの描画を行うことを可能とするエンジン。オブジェクトやカメラを管理するための高度な機能を提供している一方で、豊富なチュートリアルやFAQも用意されており、簡単かつ直感的に3Dを用いたアプリケーションの開発を行うことが可能だとしている。作成されたアプリケーションは、 Flash Player 7以上での再生が可能となっている。

最近リリースされた新バージョンでは、APIがより単純かつ強力になったほか、「錐台」を扱えるようになった。また、Tweenerをはじめとする大部分のトゥイーンライブラリとの互換性も確保された。そのほかにも多数の機能が追加されている。

Sandy-Flash-3D-engine-available-in-AS2-AS3-and-haXe

ページ中の3D猫のサンプルを見ていただけると、どこまで3Dできるかが分かるかとおもう。

Sandyでは多彩なデモが用意されている。特に風景も含めて3D化されているものは圧巻だ。マウスで動かしたり、弾を発射できる（発射しても特に意味はない）。

Sandy-Flash-3D-engine-available-in-AS2-AS3-and-haXe-demo

将来的にPCの性能が向上し、モデリング技術も向上すればFlashだけで3D化されたゲームを楽しむ事さえできそうだ。

Sandyグーグルコードサイト：

http://code.google.com/p/sandy/

公式サイト：

http://www.flashsandy.org/

Related Posts

]]> http://digitechlog.com/2010/01/25/sandy-flash-3d-engine-available-in-as2-as3-and-haxe.html/feed 0 Papervision3D: Flashで動作する3Dエンジン http://digitechlog.com/2009/05/30/papervision3d-is-an-open-source-3d-engine-for-the-flash-platform.html http://digitechlog.com/2009/05/30/papervision3d-is-an-open-source-3d-engine-for-the-flash-platform.html#comments Sat, 30 May 2009 08:32:18 +0000 admin http://digitechlog.com/2009/05/30/papervision3d-is-an-open-source-3d-engine-for-the-flash-platform.html Papervision3Dとは、MITライセンスのオープンソースで提供予定となっていて、Flashで動作可能な3Dエンジンです。Flash 8 Image APIに最適化されており、非常にスムーズかつなめらかに動作するのが特徴があり、Flash9から利用可能になったフルスクリーンモードにも対応しており、 360度のパノラマとか、ぐりんぐりん動きまくる3D空間とか、非常に多彩な表現がActionScriptで可能になります。

「Away3D: ActionScript3で提供されるFlashの3D描画エンジン」を含めて同じような３Dエンジンはいくつかあります。

以下の様で簡単で使えます。

１）、SVNから最新版を取得するため、SVNクライアントをインストールします。Windowsユーザだったらtortoiseというものはよくつかわれていますので、次のURLでダウンロードできます。空のフォルダを用意して、右クリックして「SVN checkout」を選びます。

２）、次のURLhttp://papervision3d.googlecode.com/svn/trunk/をダイアログボックスに入力してOKボタンをクリックします。

３）、ダウンロード終了した上でPapervision3Dのセットアップを行います。

４）、Flash CS3を開き、Edit>Preferences>Actionscriptで「Actionscript 3.0 settings」ボタンをクリックします。

５）、「class path」を選んで、プラグインサインアップ

６）、ダウンロードしたPapervision3Dフォルダに「as3/trunk/src」を選ぶ

７）、「OK」をクリックするもしくは既存のFlashファイルを選んで、属性パネルをクリックする

８）、サンプルページから任意サンプルを選択して、「document class」というボックスにExampleTransformationRotateを入力する(no ".as" extension)

９）、そのドキュメントをPapervision3Dフォルダ以外のフォルダに保存する

１０）、「Actionscript file」の新しいファイルを作成して、「ExampleTransformationRotate.as」として保存する

１１）、Flashファイルに戻って、pencilにクリック、そのパネルのプロパティオプションに「document class」があるはず、そこまで先ほど新規作成した.asファイルを選ぶ

１２）、次のソースコードをAsctionScriptファイルにコピーして保存する

１３）、そこまで動かせるはずです。

  1. package
  2. {
  3. import flash.display.Sprite;
  4. import flash.events.Event;
  5.  
  6. import org.papervision3d.cameras.Camera3D;
  7. import org.papervision3d.objects.Plane;
  8. import org.papervision3d.materials.ColorMaterial;
  9. import org.papervision3d.scenes.MovieScene3D;
  10.  
  11. [SWF(width='400',height='400',backgroundColor='0x000000',frameRate='30')]
  12.  
  13. public class ExampleTransformationRotate extends Sprite
  14. {
  15. private var container: Sprite;
  16. private var scene: MovieScene3D;
  17. private var camera: Camera3D;
  18. private var plane:Plane;
  19.  
  20. public function ExampleTransformationRotate()
  21. {
  22. container = new Sprite;
  23. container.x = 200;
  24. container.y = 200;
  25. addChild( container );
  26.  
  27. scene = new MovieScene3D( container );
  28.  
  29. camera = new Camera3D();
  30. camera.z = -500;
  31. camera.zoom = 5;
  32.  
  33. // create red material
  34. var material:ColorMaterial = new ColorMaterial();
  35. material.doubleSided = true;
  36. material.fillColor = 0xFF0000;
  37. material.fillAlpha = 1.0;
  38.  
  39. // create a plane
  40. plane = new Plane( material, 128, 128, 1, 1 );
  41.  
  42. // register plane
  43. scene.addChild( plane );
  44.  
  45. stage.addEventListener( Event.ENTER_FRAME, onEnterFrame );
  46.  
  47. }
  48.  
  49. private function onEnterFrame( event: Event ): void
  50. {
  51.  
  52. // rotate the plane
  53. plane.rotationX += 4.35;
  54. plane.rotationY += 6.55;
  55. plane.rotationZ += 0.55;
  56.  
  57. // render the scene
  58. scene.renderCamera( camera );
  59.  
  60. }
  61. }
  62. }

以下は英原文です。ある程度で参考してください。 ^^)

    1. Download and install a SVN client. On this case, tortoise for windows ( http://tortoisesvn.tigris.org/ ) . Then create an empty folder, right click on it and choose “SVN checkout”
    2. Paste this address on the URL box and press OK
    3. http://papervision3d.googlecode.com/svn/trunk/
    4. Finish download. Now it’s time to set up Papervision3D.
    5. Open Flash CS3 and click Edit>Preferences>Actionscript and click the button “Actionscript 3.0 settings”
    6. On the box named “class path”, click the plus sign and then the (sniper like) target icon
    7. Navigate to the folder you downloaded Papervision3D files and then to as3/trunk/src
    8. Click OK and open a new or existing Flash file. Be sure there is nothing selected and click the property panel
    9. In this example we will be building a simple plane rotating, but feel free to choose other examples from the examples page. On the box named “document class” write “ExampleTransformationRotate” (no quotes, no “.as” extension)
    10. Save the document somewhere you can find, but outside any of the Papervision3D folders.
    11. reate a new file, choose “Actionscript file” instead of “Flash file”. Name it ExampleTransformationRotate.as (note the extension .as ) and save it on the same folder as your Flash file.
    12. Go back to the Flash file. Now clicking on the pencil, on the property panel beside “document class” should take you to the new .as file you just created.
    13. Paste this code on the Actionscript file, save it, and test the movie.
    14. It should be working! If not refer to the forums, if it does, try other examples and good luck.

Papervision3Dのデモ：

Papervision3D-Tutorials 

[関連リンク]

http://code.google.com/p/papervision3d/

公式サイト

Related Posts

]]> http://digitechlog.com/2009/05/30/papervision3d-is-an-open-source-3d-engine-for-the-flash-platform.html/feed 1