TECHNOLOGY 2013.04.09

Away3D 4.0.9 Gold で Collada(.dae) を読み込む

  • ActionScript

Flashを使った3Dコンテンツを実務レベルまで落とし込むための役割や必要なスキルなどの説明と、Blenderで作成したモデリングデータとテクスチャ( テクスチャ情報と座標(UV) 情報)の取り込みを行った際の手順、ハマリポイントをご紹介いたします。

Dコンテンツを実務レベルまで持ってくには

主な役割り

3Dモデラー
モデリングする。
テクスチャを貼る。
アニメーションを作る。
ボーンを作る。
Flash
モデリングデータを取り込んで表示する
アニメーションをコントロール
ボーンを動かす
エフェクトをかける

中間作業の役割りを明確化する

主な役割り

3Dモデラー
Flashで扱いやすいデータ作成(Flasherとすり合わせ )
Flashと相性のいいBlender形式にする(無料なのでFlasherも扱える、比較的Flashとの相性がいい)
Flash
Blenderを使えるようにする(互換性のある機能、ない機能の区別。エラーが出たら調べる)
Flashで扱える形式で書き出す(うまく取り込めなかったらモデリングデータをチェック)

中間作業

モデリングデータ

書き出し作業

Flashで表示
この分業フローならうまくいくのではないかと予想
Blender はこれです。
http://www.blender.org/

Flasher的にまずはAway3DとBlenderを知るとこから

  1. とりあえずAwayの基本機能を把握
  2. Blenderで適当なモデルデータを作成
  3. 取り込んでみる(失敗したら「2」に戻るトライアンドエラー)

Away3Dの基本的な機能

View3D
表示するやつ
Camera3D
3D空間のカメラ
Scene3D
3D空間
Loader3D
Colladaファイルを読み込む

//viewを作成
var view:View3D = new View3D();
var camera:Camera3D = view.camera;  //View3Dを生成すると勝手に入ってる
var scene:Camera3D = view.scene;  //View3Dを生成すると勝手に入ってる
scene.addChild( object3D );  //3Dオブジェクトをシーンに追加
view.render();  // これで描画。主にEnterFrameの中で叩く

View3Dだけ作って、中に表示したいものを放り込めばあとは Away3Dまかせ

で、本題のColladaの読み込み部分
Loader3Dを使う。

//Collada ファイルを読み込む。
loader.load(new URLRequest('test.dae'), null, null, new DAEParser());
//Collada データを読み込む。swf にデータを組み込んでデータで読み込んだり。
loader.loadData(myData, null, null, new DAEParser());

第二引数は Collada が埋め込みの場合にテクスチャの読み込みを制御するために使うらしい。
第三引数はよくわからない。とりあえず先に進もう。
第四引数で指定したパーサークラスで読み込んだデータを変換する。
他の形式の場合はソレ用のパーサーを使う。
なんか自動で全部の形式をパーサーを作って、いいかんじにやってくれる機能があるけど 多分自分で指定したほうが無難。

読み込んだ Collada を表示するにはLoader3DObjectContainer3Dのサブクラスなので、シーンにそのまま放り込める。

scene.addChild(loader3d);

表示してみる

互換性がないものは表示できない
Collada 形式は互換性を重視した形式なんだけど

  • モデリングしたデータ全ての情報が格納されるわけじゃない。
  • 何の情報がCollada に付加されるのかよくわからない。
  • Colladaに含んだ情報でもAway3Dで互換性があるかわからない

ここがハマりポイント。
調べてもあまり情報がない。(あっても英語)
マジ謎。
ここでトライアンドエラーの繰り返し

何を取り込みたいのか優先順位を決めて調べる。

  • まずモデリングデータを取り込みたい。(頂点、面情報)
  • テクスチャを使いたい(テクスチャ情報と座標(UV)情報)

今回はここまで必須にする。

  • マテリアル情報を付けたい(光の反射具合とか)
  • アニメーションごと取り込みたい(キーフレーム情報)
  • ボーンを取り込みたい(関節情報、Flash上で動かす)

ここは次回に回そう。

Blenderを起動

起動すると立方体が出てくる。
モデリングはモデラーさんの職域なので、立方体にマテリアルを設定して書きだすかたちで検証していく。
ちなみに起動して出てきた立方体はマテリアル情報がないので、Colladaで書きだしても空のデータになる。

テクスチャを作成

  1. EditModeで(Ctrl+右クリック)でワイヤーの辺の部分を選択する。
  2. UVマップの切り口みたいなのを意識して選択する。
  3. ショートカット(Ctrl+E)でメニューをだしてMark Seamをクリック
  4. ショートカット(U)でUnwrapをクリック
  5. (この時点でTexture Paintで塗り塗りできるようになる)
  6. UV/Image Editerを別窓で表示
  7. UV/Image EditerのImageからテクスチャを保存する。

※テクスチャは 2048×2048 にしとく。
( 半端な数値はテクスチャとして扱えない )

テクスチャを貼り付ける

  1. 右クリックでCubeを選択
  2. マテリアルを作成
  3. テクスチャを設定

表示してみる

Flashで読み込んでみる

※BlenderとAway3Dの座標はYとZが逆。

Colladaの中身を覗くと

<library_images>
 <image id="cubetest" name="cubetest">
 <init_from>/X:/flashproject/away3d/001/bin/model/cube.png</init_from>
 </image>
</library_images>

こんなノードを発見。
ここでテクスチャの画像が指定されている。
もちろん絶対パスは他の環境では動かなくなってしまうので相対パスに直します。
Away3DのLoader3Dはこのテクスチャも読み込んでくれます。
テクスチャがない場合はストリームエラーになる。

何を取り込みたいのか優先順位を決めて調べる。

  • まずモデリングデータを取り込みたい。(頂点、面情報)
  • テクスチャを使いたい(テクスチャ情報と座標(UV)情報)
上記の要件はとりあえずクリア
  • マテリアル情報を付けたい(光の反射具合とか)
  • アニメーションごと取り込みたい(キーフレーム情報)
  • ボーンを取り込みたい(関節情報、Flash上で動かす)

次はこっち。

とりあえずここまでで最重要項目はオッケー。