Lesson4 3Dに挑戦！
第1回 ZAM3Dを使った3Dオブジェクトの作成
3D表現はWPFの魅力を語る上で欠かせないもののひとつです。Lesson4ではExpression Blendと3Dモデリングツール「ZAM3D」の組み合わせて行う3Dコンテンツの作成について見ていきましょう。3Dで地球をモデリングし、その地球を自転、公転させるサンプルの作成を通じてBlendで3Dコンテンツを作成する楽しさを知ってください！
（解説：小川達樹）
 |
［プロフィール］ おがわ・たつき●株式会社セカンドファクトリー エクスペリエンスデザイナー。東海大学電子情報学部（現：情報通信学部）情報メディア学科在学中にUI、Webユーザビリティに興味を持ち、HTML/CSSを独学で勉強。そのスキルを武器に4年時にアルバイトとしてセカンドファクトリーに参加。大学卒業後、正社員として入社し、現在はエクスペリエンスデザイナーとしてユーザーがハッピーになるようなエクスペリエンスを日々探求している。 http://www.2ndfactory.com/ |
ZAM3Dでモデリングする
ZAM3Dの説明
3Dを利用したコンテンツを作成するには「カメラ」、「ライト」、「モデル」の3つの要素を含んだ3Dモデリングを行う必要があります。Blend単体でも3Dモデリングは行えますが、Blendは3Dモデリングに特化したツールではないので、ほかのモデリングツールからXAML経由でBlend内に3Dオブジェクトを取り込む方法が一般的です。今回は3Dオブジェクトの作成を「ZAM3D」という3Dモデリングツールで行いたいと思います。
ZAM3Dは、Swift3Dなどで知られるelectricrain社が開発した3Dモデリングツールです。WPFで3Dコンテンツを作成するために開発されたツールで、XAMLでの書き出しが標準で装備されており、ZAM3Dで作成した3DオブジェクトをXAMLとしてコンバートし、Blendに取り込むことができます。
このZAM3Dで書き出した3DオブジェクトをBlendに取り込み、アニメーションを加えると、下の動画のような3D天体アニメーションが制作できます。
【基本サンプル完成イメージ】
※再生している動画はサイトの制約上から、.swf形式で出力し再生させています。
ZAM3Dで球体を生成
まず、下記のサイトからZAM3Dをダウンロードし、インストールしましょう。ZAM3Dはパッケージ版での販売が予定されていますが、現段階（2007/10/01）ではフリー版をダウンロードできるようになっています。
では、インストールをし終えたら、早速ZAM3Dを使って簡単な3Dモデリングに挑戦しましょう。
まずサンプルで使用する地球の3Dオブジェクトを作成します。画面左上のタブ「Scene Editor」を選択し球体のアイコン「Create Sphere」をクリックします。すると、ビューエリアに球体が生成されます【図1】。
【図1】ボタンワンクリックで3Dの球体を生成できる
地球のテクスチャを貼り付ける
この球体を宇宙で最も美しい星、地球にしてみましょう。ZAM3Dのテクスチャギャラリーにはサンプルとして地球のテクスチャがついています。今回はこれを使って地球を作ります。
GalleryToolsのBitmapタブから地球のテクスチャをドラッグ＆ドロップで球体に張り付けましょう【図2】。地球の創造はこれで完了です【図3】。そのほか、ZAM3Dではライトの追加や位置変更、アニメーションなど多彩な機能が使えますが、今回はBlendでアニメーションを作成するため球体の生成だけにとどめます。
【図2】球体にドラッグ＆ドロップでテクスチャを貼り付ける
【図3】フロントビューエリアで地球を確認
ZAM3DからXAMLを書き出す
地球の3Dオブジェクトを作成し終わったら、この3DオブジェクトをExpression Blendに取り込むために、XAMLとして書き出しましょう。File＞Exportを選択し、Optionsの設定を【図4】のように変更したら、任意の場所に保存します。すると、3Dオブジェクトの3D情報が記述されたXAMLと3Dオブジェクトに張り付けられている地球の画像が保存されます。
【図4】XAML形式での保存
3DオブジェクトをBlendに取り込む
3Dのテクスチャ画像を取り込む
ZAM3Dから書き出したXAMLを取り込む前に、3Dオブジェクトを構成するファイルを先に取り込んでおく必要があります。ZAM3Dで書き出されたファイルは2つありました。XAMLファイルと地球テクスチャの画像ファイルです。まず、地球のテクスチャ画像をBlendのプロジェクトファイルとして取り込んでみましょう。
Blendを起動し新しいプロジェクトを作成してください【図5】。ファイルメニューから プロジェクト＞既存のアイテムの追加 を選択し、地球のテクスチャ画像「ファイル名ER_Raster___EarthMR2.png」を取り込みます【図6】。これで、プロジェクトフォルダに地球のテクスチャ画像が取り込まれました。
【図5】新規プロジェクト作成
【図6】既存アイテムの追加
3DXAMLをExpression Blendに取り込んでみる
テクスチャ画像の取り込みが完了したら、書き出された地球の3DXAMLをBlendに取り込んでみましょう。左のツール群最下部の資産ライブラリからViewport3Dを選択し、「LayoutRoot」Grid内に配置してください【図7】。
【図7】資産ライブラリからViewport3Dを選択
Viewport3Dはライブラリの奥にあって右上の「すべて表示」にチェックを入れなければ表示されません。見つからない場合は、資産ライブラリの検索窓で検索してください。
次にオブジェクトとタイムラインから、配置したViewport3Dを右クリックし、「XAMLの表示」を選択します。そうすると、XAMLビューが表示されますので、「」タグで囲われた領域を選択し、ZAM3Dで生成したXAMLの内容と差し替えてください【図8】。
【図8】Viewport3DのXAML表示
最後に、「ZAM3DViewport3D」を選択した状態でWidthとHeightをレイアウトプロパティで「Auto」に設定すれば、地球の3Dオブジェクトがウィンドウにフィットします。「Window」を選択し、ブラシプロパティでBackgroundを黒に変更【図9】すれば、宇宙に浮かぶ地球の完成です【図10】。
【図9】「Window」のBackgroundを黒に変更
F5を押してプロジェクトのテストを行ってみましょう。
【図10】Blendでの表示、3Dオブジェクトをウィンドウサイズにフィットさせ、宇宙に浮かぶ地球の完成
次回は、Blendに取り込んだ地球を、タイムラインを使ってアニメーションさせてみましょう。
次回につづく
