【B1】Delphi/C++テクニカルセッション「誰でも始められるカンタンFireMonkey 3D 入門」
慶應義塾大学 大学院理工学研究科 藤代研究室
研究生 中山雅紀本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

02

はじめに本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

目次
1. 自己紹介
2. FireMonkey とは？
3. 地球儀アプリ
4. 座標変換とは？
5. ロボットダンスアプリ
6. FireMonkey ショーケース

3

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

14

自己紹介

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

自己紹介．

身分• 慶應義塾大学 藤代研究室
慶應義塾大学– 研究生• コンピュータ･グラフィックスの研究• 和洋女子大学 山本研究室– 講師（共同研究）• アパレルＣＡＤの授業

和洋女子大学• 日蓮宗 安国院– 住職• 心の平穏の探求？
5

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

安国院

自己紹介．

専門• 球面上の信号処理• 写実的なレンダリング• 立体視映像• ３Ｄアパレルデザイン• ３Ｄプリンタ② 人体形状分析アプリケーション① 3D スキャナ

人体 3D モデル

断面輪郭データ

前面

④ 縫製

6

⑤ スカート着装

スカートパターン
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
③ スカート原型プラグイン

自己紹介．

趣味• ＣＧアート（）制作– フラクタル幾何学– すべて Delphi 製

7

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

自己紹介．

連絡• 個人– サイト： http://www.luxidea.net– メール： contact@luxidea.net– ｆ ｂ： http://www.facebook.com/luxidea• 慶應義塾大学 藤代研究室– サイト： http://www.fj.ics.keio.ac.jp– メール： nakayama@fj.ics.keio.ac.jp

• 安国院

8

– サイト： http://ankokuin.or.jp– メール： contact@ankokuin.or.jp

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

2
9FireMonkeyとは？

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

FireMonkeyとは？．

意義• 2D/3D グラフィックス･フレームワーク– 主にＧＵＩの表示• マルチプラットフォーム– OS固有APIからの脱却• CG と GUI の融合

10

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

FireMonkeyとは？．

シーングラフ• 両者ともツリー構造で表現できる
TFrom

床机

コップ

皿赤リンゴ

11TGroupBox

椅子

人間青リンゴ

TLabelTPanelTViewport3DTSphere

TButtonTCube

ＣＧにおけるオブジェクトの関係
ＵＩにおけるコンポーネントの関係
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

FireMonkeyとは？．

実装構造
床• ツリー構造

木材– 複数の親を持たない• 座標変換はオブジェクトと統合• マテリアルはツリーに上70cm含まれない– 下流には適応されない• インスタンスは専用のノードで

前40cm
陶器

机

皿

右10cm

人間

左10cm

リンゴ
赤12

椅子

上40cm

上70cm

コップ

ガラス

後40cm

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

肌(インスタンス)緑FireMonkeyとは？．

クラス構造
TCameraポリゴンモデルを作るならここ

TDummyTCube
TLightTControl3D

TPlaneTStrokeCube
TDisk
TGrid3D
TMesh

TFmxObject

TShape3D

TCustomMesh
TSphereTColorMaterialSourceTCylinder
TMaterialSource

TTextureMaterialSource
TRoundCube
TLightMaterialSource
TCone

13

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

314

地球儀アプリ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

プロジェクト作成．1• モバイルアプリでも手順は同様

15

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

プロジェクト作成．2• HD FireMonkey アプリ– 2D ベースのウィンドウ内に3DUI が浮かぶ窓を開ける
出典「FireMonkeyファーストインプレッション」• 3D FireMonkey アプリ– 3D ベースのウィンドウ内に2DUI を載せた板が浮かぶ

16

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

表示窓の設置TViewport3D

Color := TAlphaColorRec.Black17

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

地面の設置

TGrid3D

Width := 100
Height := 100
Depth := 100

RotationAngle.X := ‑9018

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

球体の設置

ハンドルをドラッグして回転
Width := 5
Height := 5
Depth := 5TSphereドラッグして移動

19

材質が未適用本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

ライトの設置LightType:=
ltDirectional（平行）ltPoint（点）ltSpot（スポット）

TLightRotationAngle.X := ‑4520

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

材質の適用

TLightMaterialSource

Sphere1.MaterialSource := LightMaterialSource1
21

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

テクスチャの指定

環境光：Ambient
拡散色：Diffuse
光沢色：Specular

Texture := TBitmap
22

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

反射特性の指定

テクスチャは拡散色

光沢の品質は分割数に依存
出典「FireMonkeyファーストインプレッション」

23

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

地球の回転1000 ms / 16 ms = 62.5 fps

24

OnTimer イベントでSphere1.RotationAngle.X を更新

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

実行．1
フォームデザイナ通りの表示

25本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

TDummy

カメラの設置．1

TDummy は描画されないパーツ

TCamera を 2 つのTDummy で入れ子にする

TCameraCamera1.Position.Z := ‑1026

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

カメラの設置．2

TCamera を TViewport3D に関連付ける
Viewport3D1.Camera := Camera1

27

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

カメラの設置．3

フォームデザイナのデフォルトカメラを使わない

Viewport3D1.UsingDesignCamera := False
28

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

実行．2
Camera1 からの視点

29

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

マウスによる回転．1
̲MouseON :Boolean;̲MousePos :TPoint3D;

Dummy1 で 横回転
Dummy2 で 縦回転
OnMouseDown
OnMouseMove
OnMouseUp30

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

実行．3

マウスが地面に当たると止まる？

31

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

マウスによる回転．2

Sphere1 がマウスイベントを補足し続けるように
Sphere1.AutoCapture := True

32

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

マウスによる回転．3

Grid3D1.HitTest := False

Grid3D1 がマウスイベントを補足しないように
33

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

エフェクトの適用 …orz

• 画像が変形しても当たり判定は変わらない
画像が変形しても当たり判定は変わらない

Effect系パーツを適用したいパーツの直下へ挿入

34

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

参考文献• 第21回 エンバカデロ・デベロッパーキャンプ
http://www.embarcadero.com/jp/developer‑camp‑japan/archive• 【T4】「FireMonkeyファーストインプレッション」• htdeko さんのチャンネル @ YouTube
https://www.youtube.com/htdeko• 「FireMonkey 〜 Subdivisions と鏡面反射 〜」• 「FireMonkey 〜 Subdivisions とは何ぞや？ 〜」• 「FireMonkey [3D Shapes] Demo」• 「FireMonkey で PMD モデルを読み込んでみる」• 「FireMonkey TLayer3D デモ」• 「FireMonkey で作る地球儀 〜 多分、4 分以内に 〜」35

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

436

座標変換とは？

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

座標変換とは？．

座標系
Z• 反転した右手座標系– Ｘ： 親指– Ｙ： 人差し指
– Ｚ： 中指

X
右手 座標系

左手 座標系

YY

FireMonkeyYZXX
Z

37
Direct3D

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

OpenGL

座標変換とは？．

大域と局所• ローカル座標

ワールド– オブジェクト座標

球体立方体相対• グローバル座標– ワールド座標– 絶対座標• 相対座標– TControl3D
が保持
38

ローカル
ローカル

絶対絶対グローバル

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

座標変換とは？．

同時座標系• 座標変換は行列（４×４）の演算で表現できる– System.Types.TMatrix3D により管理– 基底ベクトルを並べたもの
𝑋𝑋𝑋𝑋𝑌𝑌
𝐴𝐴𝑋𝑋 𝐴𝐴𝑌𝑌 𝐴𝐴𝑍𝑍 1 × 𝑋𝑋𝑍𝑍𝑋𝑋𝑃𝑃𝑋𝑋= 𝐵𝐵𝑋𝑋 𝐵𝐵𝑌𝑌 𝐵𝐵𝑍𝑍 1𝑋𝑋𝑌𝑌
𝑌𝑌𝑌𝑌
𝑍𝑍𝑌𝑌
𝑃𝑃𝑌𝑌

𝑋𝑋𝑍𝑍
𝑌𝑌𝑍𝑍
𝑍𝑍𝑍𝑍
𝑃𝑃𝑍𝑍

000
1

System.Types.TVector3D

Z

YX

親：基準P子
基準変換

変換
前行列

39

変換
後
行列 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

親基準変換

座標変換とは？．

TControl3D.LocalMatrix• 親に対する相対変換行列を保持
interface
type
HControl3D = class helper for TControl3D
protected
function GetLocalMatrix :TMatrix3D;
procedure SetLocalMatrix( const LocalMatrix_:TMatrix3D ); virtual;publicproperty LocalMatrix :TMatrix3D read GetLocalMatrix write SetLocalMatrix;
end;
implementation
function HControl3D.GetLocalMatrix :TMatrix3D;
Begin
Result := FLocalMatrix;end;

クラスヘルパで書込可能に改造

procedure HControl3D.SetLocalMatrix( const LocalMatrix_:TMatrix3D );begin
FLocalMatrix := LocalMatrix_; RecalcAbsolute; Repaint;
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
40end;

座標変換とは？．

行列系関数• System.Types.TMatrix3D– 行列生成
• CreateScaling( const AScale:TPoint3D ) :TMatrix3D;• CreateTranslation( const ATranslation:TPoint3D ) :TMatrix3D;• CreateRotationX( const AAngle:Single ) :TMatrix3D;• CreateRotationY( const AAngle:Single ) :TMatrix3D;• CreateRotationZ( const AAngle:Single ) :TMatrix3D;• CreateRotation( const AAxis:TPoint3D; const AAngle:Single ) :TMatrix3D;– 任意軸の回転– 行列演算• Multiply( const APoint1,APoint2:TMatrix3D ) :TMatrix3D;– 行列×行列• Multiply( const APoint:TPoint3D; const AMatrix:TMatrix3D ) :TPoint3D;– 3次元座標×行列• Multiply( const AVector:TVector3D; const AMatrix:TMatrix3D ) :TVector3D;– 同時座標系ベクトル×行列41

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

座標変換とは？．

位置( 5, 0, 0 )で初期化

ローカル座標系でＸ軸回転

ワールド座標系でＹ軸回転

42

回転角はラジアンで指定
System.Math.DegToRad
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

地球儀アプリ．

43

完成形？

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

544

ロボットダンスアプリ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ロボットダンスアプリ．

モーションキャプチャ• 人間の動きを骨格の動きとして取得すること
– 光学式
– 磁気式
– 機械式
– 画像式
– 3D式
出典：FORUM845

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ロボットダンスアプリ．

ＢＶＨ形式• Biovision社が提唱したデータフォーマット形式
ROOT：唯一の始点ノード
CHANNELS：
移動と回転を定義

End：
終端ノード

フレーム数

46

HIERARCHY
ROOT root_name
回転(度)：オイラー角
移動{OFFSET 0 0 0
CHANNELS 6 Xposition Yposition Zposition Xrotation Yrotation Zrotation
JOINT joint1{
JOINT：関節ノード
OFFSET 0 10 0
CHANNELS 3 Xrotation Yrotation Zrotation
End Site{
OFFSET 0 10 0
OFFSET：}
関節間の相対位置}}
フレーム時間（秒）MOTION
Frames: 100
Frame Time: 0.033
1フレーム目0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 02フレーム目本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ロボットダンスアプリ．

カーネギーメロン大学

http://mocap.cs.cmu.edu/
MotionBuilder-friendly version

47

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ロボットダンスアプリ．

Perfumehttp://perfume‑global.com/project.html

BVH

48

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ロボットダンスアプリ．

試作品• 関節に TCube を配置しただけ
第26回デベロッパー･キャンプ49

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ロボットダンスアプリ．
③：Ｙ×Ｅ＝Ｚ軸

点を繋ぐ姿勢
P1①：２点を繋ぐ＝Ｙ軸
function GapFit( const P0_,P1_:TPoint3D ) :TMatrix3D;
varAX, AY ,AZ, AP, E :TPoint3D;begin
AY := ( P1_ - P0_ ).Normalize;
Normalize：正規化
AP := ( P1_ + P0_ ) / 2;

②：任意Ｅ

P0

④：Ｙ×Ｚ＝Ｘ軸

with AY do
begincase MinI( Abs( X ), Abs( Y ) ,Abs( Z ) ) of
1: E := TPoint3D.Create( 1, 0, 0 );2: E := TPoint3D.Create( 0, 1, 0 );3: E := TPoint3D.Create( 0, 0, 1 );end;

AZ := CrossProduct( E ).Normalize;
function MinI( const A_,B_,C_:Single ) :Integer;
begin
AX := CrossProduct( AZ );if A_ <= B_ thenend;
begin
if A_ <= C_ then Result := 1
CrossProduct：外積with Result doelse Result := 3;
begin
end
m11 := AX.X; m12 := AX.Y; m13 := AX.Z;
else
m21 := AY.X; m22 := AY.Y; m23 := AY.Z;
begin
m31 := AZ.X; m32 := AZ.Y; m33 := AZ.Z;
if B_ <= C_ then Result := 2
m41 := AP.X; m42 := AP.Y; m43 := AP.Z;
else Result := 3;
end;
end;
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
end;
50end;

m14 := 0;m24 := 0;m34 := 0;m44 := 1;

ロボットダンスアプリ．

51

完成

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

652

FireMonkey
ショーケース

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

53

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

おわり

54

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。