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
<Viewport3D x:Name="ZAM3DViewport3D">
</Viewport3D>
Viewbox
<Viewbox x:Name="ZAM3DViewbox">
<Viewport3D x:Name="ZAM3DViewport3D">
</Viewport3D>
</Viewbox>
Canvas
<Canvas x:Name="ZAM3DCanvas">
<Viewport3D x:Name="ZAM3DViewport3D">
</Viewport3D>
</Canvas>
ZAM3Dから Visual Studio へ
エクスポートの種類
リソース
3D Scene Tree が、どうなって
いるのか見やすくなる。その分、
サイズが大きくなる
インライン
リソースがインラインで記述さ
れるため、見にくい。サイズは
小さめ。
コントロールテンプレート
複数の同じ3D シーンを実装す
る場合には、コントロールテン
プレートを利用すると良い。
アニメーション
Animation 機能
時間軸でアニメーションを実行可能
Storyboard 対応
XAML の Storyboard を自動生成してくれる
第27回CODESEEK勉強会
Viewport3D
3つの要素
カメラ
カメラから見た3Dシーンをスクリーンに投影します。
２種類のカメラ
正投影カメラ(OrthographicCamera)
ZAM3Dでは対応していない
遠近投影カメラ(Perspective Camera)
光源
光がないと何も見えません
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万円前後
六角大王 / フリー版
左右対称しか作れないなどの制限あり
データフォーマットがネック
DXF
3DS
LWO
Obj
X
Shd
Msq
6kt
AutoCAD
✔
✔
✔
✔
✔
-
-
-
3ds max
✔
✔
✔
✔
✔
-
-
-
Lightwave
✔
✔
✔
✔
✔
-
-
-
3DS
✔
✔
✔
✔
✔
-
-
-
Shade
✔
✔
✔
✔
-
✔
-
-
Blender
✔
✔
✔
✔
✔
-
-
-
メタセコイヤ
✔
✔
✔
✔
-
-
✔
✔
六角大王 S
✔
✔
✔
✔
✔
-
ZAM 3Dがインポート可能
✔
Expression Blend がインポート可能
※ マテリアルが正しくインポートできない場合がある
どんなソフトが必要か？
ZAM 3D
モデリング
Visual Studio
DXF
$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;
}
カメラの近くが消えてしまう?
<Viewport3D.Camera>
<PerspectiveCamera x:Name="LeftOR62"
FarPlaneDistance="1210“
LookDirection="1,0,0"
UpDirection="0,1,0”
NearPlaneDistance="750"
Position="-979.827,63.8866,-129.936"
FieldOfView="39.5978" />
</Viewport3D.Camera>
NearPlaneDistance、FarPlaneDistance でどこまで描画するかを規定しているので、この
値を調整する
第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 にマウスで触った時のハンドらを追加
<Viewport3D x:Name="ZAM3DViewport3D"
MouseLeftButtonDown=“MyHitTest” <<< これを追加
ClipToBounds="true" Width="400" Height="300">
<Viewport3D.Resources>
…..
実装部分
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 より確認してください。

Download Report