Transcript uchukamen.com
第
27
回
CODESEEK
勉強会
第
27
回
CODESEEK
勉強会
ZAM 3D で簡単3D XAML プログラミング
自己紹介 WPF と XAML の概要 Expression Blend ZAM3D とは ZAM3D と Visual Studio の連携 XAML の基礎 Viewport3D アニメーションと Storyboard WPF の 3D 能力 3Dデータのインポート 回してみよう ベクトルの外積とクオータニオン 触ってみよう Hit Test おまけ 初音ミクは電気羊の夢を見るか
今日帰るときには・・・
ZAM3Dの概要 XAML の Viewport3D の概要 XAML 3D ができること、できないこと XAML 3D のスタートポイント XAML 3D プログラミングは簡単？難しい？
第
27
回
CODESEEK
勉強会
なんで、そんなことしているの？
2000 ごろは、Java/Unix 系でした Microsoft は嫌いだったので、2000-2002 ぐらいまで、Java/Unix 系でWeb Server を立てて、HPを作っていた。 日曜管理者なので、カーネルのメインテナンスに疲れ果てた。 少し金を払ってもいいから、楽にサーバーを運用したかったので、Windows 系に 乗り換えた。 Windows 系の開発をしたことがなかったので Visual Studio 2002 C# Beta が出たので、触ってみた。 すげー！！ コミュニティ いろいろな素晴らしい人と出会える。 面白い！理屈はいらないでしょ。
MVPを受賞したきっかけは？
2002年に Visual Studio 2002 Beta が出た Beta はタダだったので、使ってみた。 .NET/C# のすごさに触発された。 わからないことがいろいろあるが、C#/.NET 関連の日本語 HP がほとんどなかっ た。 せっかく調べたのに、忘れてしまうともったいなので、少しづつまとめて、宇宙仮 面の C# プログラミングというページを作成していた。 すこしづつ C# ユーザーが増え、掲示板にも書きこまれるようになった。 .NET/C# Group を開始 どなたかが、MVPに推薦してくれたらしい。 最初、マルチ商法みたいで怖かったから、テキトーにあしらった。 Microsoft KK から直接説明があった。怪しいと思いつつ、とりあえず何かくれるら しいので、もらうことにする。 2003/10 MVP for Visual Developer C# 受賞
第
27
回
CODESEEK
勉強会
簡単に振り返る WPF ～ Windows Presentation Foundation Vistaのために新しく開発されたグラフィックスサブシステム 特徴：ベクトルグラフィックス、3Dグラフィックス、2D/3D/ビデオの統合 .NET Framework・マネージド API ユーザーインターフェースを作成するためのAPI 高度な3Dゲームには向かない XAML eXtensible Application Markup Language。 WPFのためのXMLベースのマークアップ言語。
Silverlight との関係 Silverlightとは Web 上で次世代のメディア エクスペリエンスとリッチ インタラクティブ ア プリケーション (RIA) を実現する、クロスブラウザ、クロスプラットフォーム の .NET ベース プラグインです。 Silverlight はこれまで、WPF/ E (E はEverywhere) と呼ばれていました。 WPF と Silverlightの関係 相互補完的なプラットフォームです。どちらもプレゼンテーション記述言 語である XAML をベースとしています。 WPF : Windows Vista の新時代を切り拓く統合型のプログラミング モデルを提供し、 ユーザー インターフェイス、3D、メディア、ドキュメントなどを組み合わせたスマート ク ライアント向けのユーザー エクスペリエンスを実現します。 Silverlight： クロスブラウザ、クロスプラットフォームのプラグインであり、一貫性のある WPF 機能のサブセットと AJAX による柔軟なプログラミング機能を活用することで、 Web 上で次世代のメディア エクスペリエンスや RIA を実現します。
第
27
回
CODESEEK
勉強会
機能概要 次世代のデザインツール 次世代のメディア エクスペリエンスとリッチ インタラクティブ アプリケー ション (RIA) を実現する開発環境。 創造性が生きるツール ビデオ、ベクトルアート、高品質テキスト、アニメーション、ピクセルイメー ジ、３Dコンテンツなどのデザイン要素を、高度なコントロールやコンテナ を含む多機能のツールボックスを使用して組み合わせ、映画のシーンの ような魅力的なユーザー インターフェイスを作成できます。 効果的なコラボレーション デザイナー： Blend、開発者： Visual Studio でコラボレーション開発を可 能にする。 3D モデリング機能はなし 3D オブジェクトの配置は可能だが、モデリング機能はない。このため、3Dを扱うためには、 別のツールが必要となる。
第
27
回
CODESEEK
勉強会
ZAM 3Dとは？ Electric Rain, Inc. Swift.3Dなどの Flash作成用ソフトなど ZAM3D Vista アプリケーション開発のための 3D XAML Tool 簡単な UI、わかりやすい操作 XAML、ストーリボードをサポート VS 2005 対応のプロジェクトを自動生成 オンライン購入 $249.00 日本語版は対応予定。現在英語版のみ。
モデリングが主体 Scene Editor オブジェクト、光源、カメラなどの操作を 行うメイン画面。 Extrusion Editor 平面形状を押し出して、立体を作るた めの画面。 Lathe Editor Z軸回転によるモデリング Advanced Modeler 点・線・面を指定したモデリング
画面の構成 Scene/Extrusion/Lathe /Advanced 切り替え ツールバー オブジェクト、カメラ、光 源など オブジェクト ツリー プロパティ ウィンドウ マテリアル、 アニメーショ ン、サンプ ルオブジェ クト、ライト など 物体の回転 光源の回転
第
27
回
CODESEEK
勉強会
ZAM3Dから Visual Studio へ コントロールの種類 Viewport3D Viewbox Canvas エクスポートの種類 クリップボード ファイル Visual Studio 2005 Project
コントロールの種類 Viewport3D
ZAM3Dから Visual Studio へ エクスポートの種類 リソース 3D Scene Tree が、どうなっている のか見やすくなる。その分、サイズ が大きくなる インライン リソースがインラインで記述される ため、見にくい。サイズは小さめ。 コントロール テンプレート 複数の同じ3D シーンを実装する場 合には、コントロールテンプレート を利用すると良い。
アニメーション Animation 機能 時間軸でアニメーションを実行可能 Storyboard 対応 XAML の Storyboard を自動生成してくれる
第
27
回
CODESEEK
勉強会
Viewport3D 3つの要素 カメラ カメラから見た3Dシーンをスクリーンに投影します。 ２種類のカメラ 正投影カメラ(OrthographicCamera) 遠近投影カメラ(Perspective Camera) ZAM3Dでは対応していない 光源 光がないと何も見えません 4種類のライト AmbientLight (環境光) DirectionalLight (平行光源・・・太陽光線) PointLight (点光源・・・ランプ) SpotLight (スポットライト) オブジェクト MeshGeometry3D
XAML の構成
リソース カメラ 光源 1,2,3 モデル 3D
第
27
回
CODESEEK
勉強会
ストーリーボード WPF のアニメーション機能 WPF のアニメーションは、コントロールの位置や、色などのプロパティを時 間的に変化させることにより、アニメーションを実現する。 ストーリーボード ローカルアニメーション： Animation クラスを使って、コードで実装する方法 クロックアニメーション ZAM3D のアニメーション機能 １つのストーリーボードのみ OnLoaded のみ Expression Blend のアニメーション機能 複数のストーリーボード 各種イベントでトリガーをかけられる。
Storyboard の構成
リソース ストーリーボー ドの定義 トリガーを設定 OnLoaded で 起動
Storyboard の構成
リソース ストーリーボード 1 の定義 ストーリーボード 2 の定義 トリガーを設定 ボタンの定義
第
27
回
CODESEEK
勉強会
3Dで比べると
Full 3DCG 用途： 映画など 性能： 専用レンダリングエンジン 表現： 高精細 あまりいい図ではないが、 縦軸に表現力、横軸に汎用性 DirectX 用途： 専用 性能： リアルタイム 表現： 高 WPF 用途： Vista 性能： リアルタイム 表現： 中 Silverlight 用途： Web 性能： クロスプラットフォーム 表現： 3D 不可。将来的には Silverlight も 3D対応するだろう。
WPF 3Dではできないこと
スキニング 人体のような滑らかな関節を持つ変形 環境マッピング 自動車のボディにまわりの景色が映りこみ 影 WPFでは、ステンシルバッファやシェーダを搭載していない 頂点単位・ピクセル単位の処理 WPFからシェーダーを制御できない アニメ調のレンダリング（トゥーンレンダリング） トゥーンレンダリング用シェーダーが必要 その他 詳細は、高橋 忍 (著), 川西 裕幸 (著) XAML プログラミング参照
WPF 3Dではできないこと
トゥーン レンダリング ※ ガラスへの映り こみ モーション ブラー 川西さんの Blog に WPF でスキニング、影の実装例あり スキニング 影
第
27
回
CODESEEK
勉強会
3D CG の流れ
• • シーンレイア ウト • • • • • • • •
有名な3D CG ソフト
Maya, 3d max / Autodesk 社 統合型 3Dモデリング、アニメーション、レンダリング 高性能レンダリングエンジン mental ray 搭載 高価（数十万円～百数十万円） LightWave / NewTek 社 モデリングからアニメーションまで制作できる統合型の3DCGソフト mental ray は非搭載だが、プロの使用にも耐える 14.7万円（通常版） Shade / イーフロンティア 統合型の3DCGソフト mental ray は非搭載だが、プロの使用にも耐える 0.9万円（Basic）- 10.5万円 (Standard)
有名な3D CG フリー/シェアウェア
Blender / Blender Foundation 統合型の3DCGソフト 3Dモデルの作成、レンダリング、アニメーション機能も備える GPL オープンソース Metasequoia 3DCGやCAD、ゲーム制作などに用いる立体形状データを作成するた めのポリゴンベースのモデラー シェアウェア 六角大王 Super / 株式会社 終作 モデラーに特化している 0.9万円前後 六角大王 / フリー版 左右対称しか作れないなどの制限あり
データフォーマットがネック
AutoCAD 3ds max Lightwave 3DS Shade Blender メタセコイヤ 六角大王 S
DXF
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
3DS
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
LWO
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
Obj
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
X
✔ ✔ ✔ ✔ ✔ ✔
Shd
✔ -
Msq
✔
6kt
✔ ✔ ZAM 3D がインポート可能 Expression Blend がインポート可能 ※ マテリアルが正しくインポートできない 場合がある
どんなソフトが必要か？
モデリング ZAM 3D DXF Visual Studio $250 Expression Blend Obj ～６万円
第
27
回
CODESEEK
勉強会
トラックボールを追加するだけ
1. Trackball.cs を追加する ※ http://msdn.microsoft.com/en-us/library/ms771572.aspx
2. Form_Loaded イベントハンドラを追加 3. 次のコードを実装 Trackball.Trackball _trackball = null; } { private void Window_Loaded(object sender, RoutedEventArgs e) // setup trackball for moving the model around _trackball = new Trackball.Trackball(); _trackball.Attach(this); _trackball.Slaves.Add(this.ZAM3DViewport3D); _trackball.Enabled = true;
カメラの近くが消えてしまう?
第
27
回
CODESEEK
勉強会
どうやって計算しているの？
Trackball.cs の回転実行部分はたったの２行！ 1. カメラ視線ベクトルと、マウスの移動量の外積を求める 2. 外積のクオータニオンと、オブジェクトのクオータニオンの積で、 カメラの回転を行う Vector3D mouse = new Vector3D(delta.X, -delta.Y, 0); Vector3D axis = Vector3D.CrossProduct(mouse, new Vector3D(0, 0, 1)); double len = axis.Length; if (len < 0.00001 || _scaling) _rotationDelta = new Quaternion(new Vector3D(0, 0, 1), 0); else _rotationDelta = new Quaternion(axis, len); q = _rotationDelta * _rotation;
外積でマウスドラッグ時の回転軸が求まる
回転軸 マウスドラッグ 視線ベクトル
クオータニオン
クオータニオン ４元数、超複素数、3次元ベクトルと回転 任意の軸周りの回転を簡単に合成できる クオータニオンの積 Res = L*RクオータニオンLの軸に対して、クオータニオンR のベクトルをクオータニオンLの回転角度だけ回転。実際は、 もう少し複雑。
外積でマウスドラッグ時の回転軸が求まる
回転軸 マウスドラッグ 回転軸： L カメラの方向： R カメラの回転後： Res
外積、クオータニオンは押さえておきたい
• • • • クオータニオンだけで、 １冊本が書けてしまうぐ らい難しいらしい。 でも、3Dをやるなら避け ては通れない。 たまには、数学を勉強し てみるのも良いかも。 意外に、ネットでの参考 書がない。 http://www-sens.sys.es.osaka-u.ac.jp/users/kanaya/Documents/VCQ/kanaya-handai-quaternion.pdf
第
27
回
CODESEEK
勉強会
Hit Test
Viewport3D にマウスで触った時のハンドらを追加
実装部分
using System.Windows.Media; using System.Windows.Media.Media3D; } { private void MyHitTest(object sender, System.Windows.Input.MouseButtonEventArgs e) Point mouseposition = e.GetPosition(ZAM3DViewport3D); PointHitTestParameters pointparams = new PointHitTestParameters(mouseposition); VisualTreeHelper.HitTest(ZAM3DViewport3D, null, HTResult, pointparams); } { public HitTestResultBehavior HTResult(System.Windows.Media.HitTestResult rawresult) { if (rawresult != null) RayMeshGeometry3DHitTestResult rayMeshResult = (RayMeshGeometry3DHitTestResult)rawresult; GeometryModel3D hitModel = rayMeshResult.ModelHit as GeometryModel3D; if (hitModel.Equals(this.BoxOR12GR13)) MessageBox.Show(" 箱 "); else if (hitModel.Equals(this.SphereOR9GR10)) MessageBox.Show(" 球 "); } return HitTestResultBehavior.Continue;
第
27
回
CODESEEK
勉強会
初音ミクは電気羊の夢を見るか？
有名なものは、キオ式ミク。遊ぶだけならフリー その他いろいろなモデルがアップされている。 Msq, DXF, Obj, LWO, 6kt が多い。 キオ式ミクは、XAML データが巨大 10MB-30MB Visual Studio がXAML の修正があるたびに描画しな おすため、ある程度以上サイズが大きくなると遅くなる。 TIPS: データは極力軽くする。
初音ミクは電気羊の夢を見るか？
やり残していること スキニング： 関節が悲しすぎる モーフィング: しゃべらせる リップシンク: VSQ ファイルとの同期 ここまでやるなら DirectX か？ WPF での 3D の可能性は？？ WPF だと中途半端？？ WPF でやることの意義は？？
初音ミクは電気羊の夢を見るか？
最近 C# MVP がやばい えムナウさん 青柳 臣一 さん ブログ（総合） http://shinichiaoyagi.blog25.fc2.com/ http://www.nicovideo.jp/watch/sm2962874 Blenderでここまで作りこむのは神業 シアトルで皆さん、結構濃いことが判明 みんな、知っているじゃん ニコニコ動画への食い付きの良さ 歌ってみた人までいた
初音ミクは電気羊の夢を見るか？
それでも、初音ミクは歌い続ける・・・
宇宙仮面の
C# Programming http://uchukamen.com/
宇宙仮面の
C#
研究室
Live Space http://uchukamen.spaces.live.com/ XAML
プログラミング ～
高橋 忍 ( 著 ), 川西 裕幸 WPF
アプリケーションの概要と開発
( 著 ) HONDA CRX
の
3D
モデリングデータ
http://www.honda.co.jp/WebPlamo/
初音ミクの
3D
モデリングデータ
http://kiomodel3.sblo.jp/
※ 3D モデリングデータの使用条件は上記 URL より確認してください。