C# Programming

WPFZAM 3Dを使って 3D XAMLを作る

開発環境: Visual Studio 2008

1.目的

.NET Framework 3.0 では、Windows Presentation Foundation (WPF) が導入され、より自由度の高い表現が可能になりました。しかし、3D オブジェクトを組み込もうとすると、Visual Studio やExpression WebやExpression Blendは、3D XAMLオブジェクト自体の作成機能を持っておらず、どこからか3D オブジェクトをインポートする必要があります。

かといって、AutoCAD のような本格的な3Dアプリケーションだと数十万円という値段になってしまい、遊びには高すぎて手が出ません。

簡単に 3D XAML を作成する支援ソフトとして、ZAM3Dというソフトがあります。このソフトにより、簡単な3D XAMLを作成することができます。しかし、日本語での情報はあまりないので、簡単な使い方を紹介します。

2.参考書

(1) ZAM 3D - 3D XAML Tool

3.ZAM 3Dを使って 3D XAMLを作ろう

3.1 ZAM 3Dとは?

ZAM 3Dとは、electricrain 社 が開発中の3D XAML を作成するためのツールです。

どんなことができるかというと、これを見てもらうといいかもしれません。これは、ZAM3Dだけを使って作ったもので、なれると10分ぐらいで作ることができます。

注意: これを見るためには、Windows XPの場合、.NET Framework 3.0以降をインストールする必要があります。VISTAは.NET Framework 3.0が標準で組み込まれていますので、追加インストールする必要はありません。

3.2 ZAM 3Dを手に入れよう

ZAM 3Dは、electricrain 社ZAM 3D - 3D XAML Toolページからテクニカルプレビュー版をダウンロードすることができます。商品化された場合でも、$200以下での販売をしたいということで、だいぶお手軽な値段を狙っているようです。

ベータ版とは言え、ソフトの安定度は、かなり高いようです。あまりさわっていませんが、クラッシュやハングは一度も起きていません。ただ、いくつか不具合や改善が必要な点も残っていますが、全般的になかなか良くできています。

注意: CTP 版は、2007/9/30でライセンスがエクスパイアしたということで、起動できなくなっています。2007/10/4時点で、最新のトライアルバージョンは V1.0 CTP Build 135 です。

3.3 ZAM 3Dの使い方

残念ながら、ZAM 3Dの日本語に関する情報はほとんどありません。初めて使う方は、ちょっとしたヒントがないと、とまどうかもしれません。

ZAM 3D - 3D XAML Toolページに、トレーニングビデオがアップされており、英語ですがこれを見ると大体の使い方がわかります。一度見ておくと、よいでしょう。

また、ZAM 3Dに Web Assistant というタブがあります。ここにヘルプがありますので、わからない時に参考にするとよいでしょう。

3.4 ZAM 3Dの構成

ZAM 3Dを起動すると、次のようなメイン画面が立ち上がります。

ここでメニューの直下に5つのタブがあります。一番大事なのが Scene Editor タブで、ほとんどのオブジェクトの操作がこのタブで行えます。一方、Extrusion Editor タブ、Lathe Editor タブ、Advanced Moder タブは特殊なオブジェクトを作成を行うタブで、ここでオブジェクトを作成すると、自動的にScene Editor タブに3D オブジェクトが生成されます。

Scene Editor タブ・・・オブジェクトの移動、回転、マテリアルの色、テクスチャの設定、カメラ、ライトの設定、アニメーションの設定などの設定を行うメイン画面です。

ZAM 3D

Extrusion Editor タブ・・・主に2次元の図形を押しだして(Extrusion)、3次元に変換する場合に使用します。

ZAM 3D

Lathe Editor タブ・・・Lathe とは、陶芸用ろくろという意味で、これからわかるように、ビンやグラスのようなある軸の周りに回転させて3次元オブジェクトを作成する場合に使用します。

ZAM 3D

Advanced Modeler タブ・・・メッシュでの押し出し、切り取り、結合などのより高度なモデリングを行う場合に使用します。

ZAM 3D

Web Assistant タブ・・・オフラインヘルプ、オンライヘルプ、electrain社へのHPへアクセスできる。オフラインヘルプを読むと、結構いろいろな技が書かれていますので、活用されるとよいでしょう。

3.5 基本的なオブジェクトの操作

基本的なオブジェクトの操作は、Scene Editor タブで行います。この Scene Editor タブでは、オブジェクトの移動、回転、マテリアルの色、テクスチャの設定、カメラ、ライトの設定、アニメーションの設定などの設定を行うことができます。

タブの下にあり、三角錐のアイコンをダブルクリックすると、次のようにオブジェクトが追加されます。

Scene Editor

オブジェクトの回転

左下にあるつぎのペインを使用します。このペインのいちばん左にあるアイコンで、回転方向を選択し、円の中をマウスでドラッグするとオブジェクトが回転します。このペインの球は、オブジェクトを動かすためのトラックボールを意味しています。いちばん左の小さなアイコンは上から、円の水平方向での回転、円の縦方向の回転、円の中心に対しての回転です。

Rotate

回転や移動を元に戻す

オブジェクトを移動したり、回転したり、カメラを移動してしまったけれども、一番最初の状態に戻したい時に、右側のアイコンをクリックします。上から、場所のリセット、Pivot位置のリセット、回転のリセット、カメラ位置のリセットです。

オブジェクトの中心点(Pivot)の変更

ピボットとは、オブジェクトの中心(赤、緑、青の原点)のことで、回転や移動はこの点に対して実行されます。このピボット位置を変更することができます。そのためには、いちばん左のリストボックスでPositionを選択し、Pivot Only ボタンを押します。これにより、オブジェクトの中心(赤、緑、青の原点)をマウスでドラッグすることにより、移動することができます。また、数値を直接入力することもできます。

中心点の移動

マテリアルの変更

オブジェクトのマテリアルの変更には、右下にある マテリアルギャラリーを選択します。タブを切り替えることにより、いろいろな種類のマテリアルが表示されますので、マテリアルをオブジェクトにマウスでドラッグアンドドロップすると、次のように簡単にオブジェクトにマテリアルを設定することができます。

Texture

オブジェクトの大きさの変更

オブジェクトの大きさを変更するには、ツールバーの Scaling ボタンZAM 3D Scene Editorを押した状態で、オブジェクトの上でマウスをドラッグします。

オブジェクトの大きさの変更の方法にはスケーリングとサイジングの2種類あります。オブジェクトの大きさを知る必要がある場合には、サイジングを使うことになりますが、サイジングはアニメーションで正しく扱うことができません。このためスケーリングを使用することが推奨されています。なお、サイジングを行うためには、オブジェクトを選択した状態で、左のペインより、Sizing の値を変更します。

ZAM 3D Scene Editor

グルーピング

さて、ここまで来ると、複数のオブジェクトを組み合わせてなにかを作りたくなりますが、たとえば車と車輪を別々に作成した場合、車を一体としてアニメーションを行う必要が出てきます。このために、複数のオブジェクトをグルーピングすることができます。

グルーピングには、複数のオブジェクトを選択し、メニュー→[Arrange]→[Group / Ungroup] を選ぶ方法と、右上のペインのオブジェクトツリーで、オブジェクトをドラッグアンドドロップでグループ化、グループ解除を行うことができます。

ZAM 3D Scene

注意: Combining と Breaking Apartは、Group/Ungroup とは考え方が違いますので注意してください。Groupでは、オブジェクトが疎結合されているだけです。

基本図形を変形して細長い球や長方形を作る

ここまでで、球、正方形、円柱などの基本図形をあつかえるようになりましたが、細長い球や長方形を作るには Scaling を使用します。下図のように、オブジェクトを選択した状態で Scaling を変更することにより、細長い球や長方形などの基本プリミティブを変形することができます。

ZAM 3D - Scene Editor

3.6 光を当てる

物体には光が当たらないと見えません。ZAM 3D では、デフォルトで Point Light が2つ自動的にアタッチされています。下中央ペインが Lighting Toolbar という画面です。丸い球はトラックボールとして働きます。このトラックボールを動かすことにより、光の当てる方向を変えることができます。光源はZAM 3D Scene Editorが Point Lightで、ZAM 3D Scene Editorが Spot Lightです。この2つの光源を削除すると、物体は光が当たらないため、真黒になってしまいます。

ZAM 3D Scene Editor

光の種類を変える

光の種類を変えるには、右下で懐中電灯のアイコンをクリックすることにより、Lighting Gallery が表示され、いろいろな種類の光を選択することができます。設定方法は、下図のアイコンを ViewPort (オブジェクトが表示されているペイン)にドラッグアンドドロップするだけです。

ZAM 3D Scene Editor

たとえば、Disco! という光を選ぶと、つぎのようになります。

ZAM 3D Scene Editor

このように、Disco! は複数の Point Light で構成されていることが分かります。各Point Light の詳細は、左上ペインのプロパティペインで確認、修正することができます。

ZAM 3D Scene Editor

 

3.7 2次元から3次元の物体を作る

2次元から3次元の物体を作るには、Extrusion Editor タブを使用します。星のアイコンをクリックしてみてください。次のような、2次元の星が描かれます。この状態で、Scene Editor タブに移動してみてください。

ZAM 3D Extrusion Editor

2次元の星を押し出した(Extrusion) 3Dオブジェクトが生成されています。(この例では、生成された図形に青のマテリアルを適用しています。)

また、正5角形、正6角形、正12角形などの正多角形を作成する際には、ZAM 3D Extrusion Editorのボタンを使用することにより、容易に正多角形を作成できます。これの機能は時計を作る場合など、意外と重宝します。

ZAM 3D Extrusion Editor

ここで、Animation Timeline Toolbar がありますが、この設定をおこなうことで、Lathe でもアニメーションを作ることができます。ただ、試してみましたが、ZAM3D上では問題ないのですが、XAMLにExportするとうまく動きません。原因は未調査です。

ZAM 3D Extrusion Editor

3.8 ビンやグラスを描く

ビンやグラスのようなある軸を中心に回転させたような図形を描くには、Lathe Edit タブを使用します。 Lathe とは、陶芸用ろくろという意味です。

ZAM 3D

ペンで、直線や曲線を描くことができますので、緑の線を中心線とした図形を描いて、Scene Editor タブを開いてみてください。次のように緑の中心線に沿って回転させた図形が生成されます。
(この例では、生成された図形にTransparent Magentaのマテリアルを適用しています。)

ZAM 3D

ここで、Animation Timeline Toolbar がありますが、この設定をおこなうことで、Lathe でもアニメーションを作ることができます。ただ、試してみましたが、ZAM3D上では問題ないのですが、XAMLにExportするとうまく動きません。原因は未調査です。

ZAM 3D Lathe Editor

3.9 マテリアルや光源をカスタマイズする

[Scene Editor タブ]→メインメニュー→[Setup]を選択すると、Gallery Setupダイアログが表示され、オリジナルのアニメーション、マテリアル、j環境、光源、モデルを作成、登録することができます。これで、使い回しができるものを登録しておくと便利です。

ZAM 3D Scene Editor

ZAM 3D Scene Editor

 

3.10  自分で作ったテクスチャを貼り付ける

自分で作成したテクスチャを貼り付けるには、 まずオブジェクトを作成し、それに貼り付ける画像を用意します。

Texture Mapping

次に、Scene Editor タブ→メニュー→[Setup]→[Materials] を選びます。すると、次のような Gallery Setup が開きます。そこで、[Materials]タブを開き、Category で [Bitmap]を選び、[Add Materials]ボタンを押します。

ZAM 3D Scene Editor

すると、次のような[Edit material] ダイアログが開きます。そこで、[Color]ボックスの[Pattern] ドロップダウンリストでBitmap Image を選びます。するとファイル選択ダイアログが開くので、先ほど作成したファイルを選択します。[Generate Preview]ボタンで確認しながら、[Brightness]や、[Texture]ボックスの[Pattern] を調整し、適切な名前を付けて[OK]を押します。

ZAM 3D

これで、次のような Bitmap が作成されます。この Material Gallery でマウスの右ボタンを押しても、同じメニューに飛ぶことができます。

ZAM 3D

ここまでくれば、あとはオブジェクトにこのアイコンをドラッグアンドドロップすれば、次のようにマッピングを行うことができます。

ZAM 3D

3.11 既定のアニメーションの設定

アニメーションは、標準でいくつかのパターンが用意されています。右下のペインで、Show Animationsのボタンを押すと、既に用意されている回転アニメーションが表示されますので、好きなものを選択し、オブジェクトの上にドラッグアンドドロップします。

ZAM 3D Scene Editor

すると、次のようにアニメーションペインに自動的に設定が反映されますので、プレイボタンを押してみてください。連続回転をさせるためには、連続回転用のボタンZAM 3D Scene Editor を押します。

ZAM 3D Scene

3.12 アニメーションの作成

自分でアニメーションを作成するには、ツールバーのZAM 3D Scene Editorを押します。すると、ZAM 3D Scene Editorのように、アニメーションが有効になります。そして、下図のようにアニメーションツールバーが有効になります。

ZAM 3D Scene Editor

そこで、アニメーションツールバーの赤いカレントフレームインジケーターを動かし、その時のオブジェクトの形やカメラなどを変更します。あとは、そのフレームとフレームの間は自動的に補間してくれます。

下図の例は、ピラミッドを10秒かけてひっくり返す例です。

ZAM 3D Scene Editor

ZAM 3D Scene Editor

3.13 前から見たり、横から見たり、上から見たりするには?

前から見たり、横から見たり、上から見たりするには、カメラを切り替えます。カメラは、Perspective / Front/ Back/ Top/ Bottom/ Left/ Right の7つがあります。

これを切り替えるには、ZAM 3D のボタンを押します。すると次のようなドロップダウンメニューが表示されますので、見たいカメラを指定します。

ZAM 3D Scene Editor

カメラの設定は、左上のペインの [Camera] をクリックして、Camera のプロパティを表示します。ここで、レンズの距離を変更することができます。レンズの距離を短くすると広角、長くすると望遠になります。

ZAM 3D Scene Editor

Camera のパンは、ALTキーを押したまま、Viewport 画面の任意の場所をドラッグします。

Camera のズームは、ALTキーを押したまま、Viewport 画面の任意の場所をマウスの右ボタンでドラッグします。

Perspective の場合には、次のように左下のペインに回転用のウィンドウが表示され、トラックボールを回転することにより、カメラを回転することができます。

ZAM 3D Scene Editor

Viewport画面からはみ出した物体を見たり、特定のオブジェクトを見たい場合には、ZAM 3D ボタンを押して、Reset View/ Frame All/ Frame All Objects/ Frame Selection から適切なものを選択します。

  • Reset View ビューをリセットします。

  • Frame All 光源、カメラも含めてすべてをカメラに収まるようにします。

  • Frame All Objects オブジェクトのみをカメラに収まるようにします。

  • Frame Selection 選択したオブジェクトだけをカメラに収まるようにします。

ZAM 3D Scene Editor

3.14 カメラの設定

カメラには、Standard カメラ、Perspective カメラ、Scene カメラがあります。

Standard カメラは、XYZ軸の6つ(Front/ Back/ Top/ Bottom/ Left/ Right)のカメラがあり、カメラの動きがない場合に適しています。

Perspective カメラは、Standardカメラとターゲットカメラのハイブリッドで、どの方向にも向けることができます。

Scene カメラは、Freeカメラと、ターゲットカメラの2種類があります。これらのカメラは、Scene Editorタブの[Edit]メニューから作成することができます。

ZAM 3D Scene Editor

作成したカメラは、Viewport のドロップダウンメニューに次のように追加され、選択できるようになります。

ZAM 3D Scene Editor

下の図は、それぞれTargetカメラ、Freeカメラから見たオブジェクトになります。

ZAM 3D

Target カメラは、常にターゲットにカメラが向くようになっています。このときのパン、ズームは、ALTを押しながらマウスの左ボタンでパン、

Freeカメラは、マウスでドラッグすることにより、自由に方向と位置を設定することができます。パン、ズーム、回転は Standard カメラと同様の操作になります。

ZAM 3D Scene Editor

カメラは、複数作成することができます。カメラを選択して、Export することにより、そのカメラの視点での XAMLを作成することができます。

3.15 XAML の生成

このように作成した 3D オブジェクトや、3D アニメーションをXAML に変換するには、メインメニュー→[File]→[Export]を選択します。すると次のような Export Options ダイアログが表示されますので、適切な出力形式を選択し、OKを押すだけで、ファイルもしくはクリップボードにXAMLが生成されます。 テクスチャマッピングなどのリソースファイルもエクスポートしてくれます。

ZAM 3D Scene Editor

ファイルのこのように作成したXAMLをExpression Blendに組み込むには、リソースファイルをプロジェクトにコピーし、生成されたXAMLをコピーアンドペーストで Windows1.xamlに貼り付けます。

ZAM 3D

そのままビルドすると、このように簡単に 3D オブジェクトを組み込むことができます。

なお、Importでは、Encapsulated PostScript (EPS) や Adobe Illustrator (AI)やDXFファイルなどからインポートすることができます。

4. まとめ

ZAM3Dの紹介ビデオ(英語)の中で、もともと3Dモデリングのツールではなく、2Dのデザイナーが気軽に3Dのデザインができるというコンセプトで開発しているということです。

このため、プロの3Dデザイナーにとっては物足りないと思いますが、XAML&3D初心者にとっては、よくできていると思います。