ボクセルで３Ｄモデリング〜ブロックを積むだけの簡単なお仕事〜
第35回 エンバカデロ・デベロッパーキャンプ

慶應義塾大学 大学院工学研究科 藤代研究室
リサーチフェロー 中山 雅紀

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

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

アジェンダ .はじめに§ ３Ｄモデルの作り方• FireMonkey の場合• OpenGL の場合§ モデリングの方法論• 陽関数でモデリング• 陰関数でモデリング• ブロックでモデリング• ボリュームでモデリング§ 断層写真の立体化§ ポリゴンをボクセルへ変換§ テトラヘドライゼーション© en.wikipedia.org/wiki/3D_modeling
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3§自己紹介§ 怪しい人じゃないよ。

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

専門 .自己紹介§ 大学• 慶應義塾大学 藤代研究室• リサーチフェロー• 和洋女子大学 山本研究室

慶應義塾大学

和洋女子大学② 人体形状分析アプリケーション① 3D スキャナ

人体 3D モデル

断面輪郭データ• 共同研究員§ 研究• 球面上の信号処理• フォトリアルＣＧ• 立体視映像• ３Ｄアパレル設計• ３Ｄプリンタ• ボリュームモデリング

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

前面

④ 縫製

⑤ スカート着装

スカートパターン③ スカート原型プラグイン

5趣味 .自己紹介§ アルゴリズムで生成されるメディアアート制作• 中学生時代からフラクタルに心酔• 絶滅危惧種のステレオグラム作家

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

6

本業 .自己紹介§ 玉泉山 安国院

• 千葉県市川市• 住職

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

7

連絡先 .自己紹介§ 是非お友達になって下さい！

藤代研究室
facebook.com/fujishiro.lab
twitter.com/fujishirolab

facebook.com/luxidea

中山のポートフォリオ

facebook.com/luxophia
twitter.com/luxidea
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

twitter.com/luxophia
8コミュニティ .自己紹介§ ＣＧ技術を学問的に探究するコミュニティ（Delphiに限らない）

facebook.com/academia.graphics

twitter.com/AxGRAPH§ ＣＧ技術の Delphi による実装を探究するコミュニティ

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

twitter.com/delphi_cg
9§３Ｄコンポーネントの作り方© ht-deko.com/AppMethod/summary/fmx_3d.html

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

ＧＰＵに描かせる方法§ 点･線･三角しか描けない• 頂点• 位置座標（３Ｄ）• 法線：面の垂直ベクトル（３Ｄ）• テクスチャ座標（２Ｄ）• 面© 床井研究室• ３つの頂点への参照
0,0

法線
連続面

面面

面
座標

不連続面

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

0,1

0,00,1

0.5,0

1,0

1,1

1,01,111§FireMonkey の場合

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

コンポーネント .FireMonkey§ ＧＰＵを活用したリアルタイムな３ＤＵＩを提供可能• Windows：Direct3D• macOS，iOS, Android：OpenGL

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

13

３Ｄクラス .FireMonkey§ TControl3D が大元↓
§ TShape3D↓§ TCustomMesh

TCameraTControl3D

TlightTCube

TProxyObject

TPlaneTDummyTModel3D

TMesh

TGrid3D

TShape3D

TDisk

TCustomMesh

TSphereTFmxObject
TStrokeCube

TColorMaterialSource

TCylinder

TRoundCube
TRectangle3D

TMaterialSource

TTextureMaterialSource

TCone
TEllipse3D

TLightMaterialSource

TExtrudedShape3D
TText3D

モデルを作るならここ！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

TPath3D

14

転送バッファ .FireMonkey§ TShape3D = class( TControl3D )• property MaterialSource :TMaterialSource• マテリアルコンポーネントへの参照§ TCustomMesh = class( TShape3D )• property Data :TMeshData• ポリゴンデータを保持する§ TMeshData = class( TPersistent )• property VertexBuffer :TVertexBuffer• 頂点配列• property IndexBuffer :TIndexBuffer• 面配列

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

15

頂点バッファ .FireMonkey§ TVertexBuffer = class( TPersistent )• property Length :Integer• 頂点数• property Vertices[ AIndex:Integer ] :TPoint3D• 頂点の位置座標• property Normals[ AIndex:Integer ] :TPoint3D• 頂点の法線ベクトル• property TexCoord0[ AIndex:Integer ] :TPointF• 頂点のテクスチャ座標本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

16

面バッファ .FireMonkey§ TIndexBuffer = class( TPersistent )• property Length ：Integer• 面数×３ ：ポリゴン• 線数×２ ：ワイヤーフレーム• 点数×１ ：ポイントクラウド• property Indices[ AIndex:Integer ] :Integer••••

N番目のポリゴンの属する頂点のインデックス番号
Indices[ 3×N＋0 ] = 頂点①
Indices[ 3×N＋1 ] = 頂点②Indices[ 3×N＋2 ] = 頂点③

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

17

実装 .FireMonkey
with Data do
begin
with VertexBuffer do
begin
Length := 7{頂点数};
Vertices [ 0 ] := TPoint3D.Create( *, *, * ){位置座標};
Normals [ 0 ] := TPoint3D.Create( *, *, * ){法線ベクトル};
TexCoord0[ 0 ] := TPointF .Create( *, *){テクスチャ座標};〜Vertices [ 6 ] := TPoint3D.Create( *, *, * );Normals [ 6 ] := TPoint3D.Create( *, *, * );TexCoord0[ 6 ] := TPointF .Create( *, *);end;
with IndexBuffer do
begin
Length := 3{頂点数/ポリゴン} * 3{ポリゴン数};
Indices[ 3*0+0 ] := 6;
Indices[ 3*0+1 ] := 1;
Indices[ 3*0+2 ] := 0;
Indices[ 3*1+0 ] := 6;
Indices[ 3*1+1 ] := 5;
Indices[ 3*1+2 ] := 1;
Indices[ 3*2+0 ] := 4;
Indices[ 3*2+1 ] := 3;
Indices[ 3*2+2 ] := 2;
end;
end;

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

不連続面
面面

面

分解
(5)

(6)

(4)

<1>
<0>
(1)
(0)

<2>
(2)
(3)
18

デモ .FireMonkey§ Direct3D（HLSL）を使用

github.com/LUXOPHIA/MyModelgithub.com/LUXOPHIA/MyMaterial

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

github.com/LUXOPHIA/MyAsset19§OpenGL の場合

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

OpenGL とは？ .OpenGL§ リアルタイム２Ｄ/３ＤＣＧ用ＡＰＩ• GPU：Graphics Processing Unit を活用• コンシューマ向けグラフィックボード• クリエイター向けグラフィックボード§ Khronos Group が策定• www.khronos.org§ クロスプラットフォーム• Windows, macOS, Android, iOS, Linux…

§ C-API ベース• ラッパー作りが容易• Windows• gl.h → Winapi.OpenGL.pas• glext.h → Winapi.OpenGLext.pas

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

21

中山ライブラリ .OpenGL§ FMX と VCL の両方に対応§ OpenGL のスペックを完全に引き出せる
github.com/LUXOPHIA/OpenGLgithub.com/LUXOPHIA/OpenGL_VCL

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

22

実績 .中山ライブラリ.OpenGL§ ３Ｄプリンタ制御ソフトの（表示部分の）開発に携わらせて頂きました！

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

23

転送バッファ .OpenGL§ シェーダへ各種バッファをバインド

Use.Imagers

7 6 5 4 3 2 1 0TGLProgra
TGLShaderV012567.Framers

7

uniform mat4 Mov;in vec4 Pos;in vec4 Col;6534.Verters
TGLVerterUse

0 1 2 3 4 5 6 74
3

uniform sampler2D Tex;
uniform mat4 Mov;2Use

0 1 2 3 4 5 6 7

1out vec4 Fra;

0TGLVarray0 1 2 3 4 5 6 7TGLShaderFUse.Unifors
0 1 2 3 4 5 6 7

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

TGLUnifor
24§モデリングの方法論

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

© www.3d-meier.de/tut3/Seite0.html

陽関数 . モデリング§ 陽関数表現：x,y,z = f(u,v)• パラメトリック曲面• パラメータに従って表面座標が一意に決まる。
• 計算コスト：低§ 設計自由度の向上• 陽関数のツギハギ• ベジエ曲面• Ｂスプライン曲面• ＮＵＲＢＳ曲面© en.wikipedia.org/wiki/Bézier_surface
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

26

UtahTeapot .陽関数.モデリング§ ベジェ曲面を実装
github.com/LUXOPHIA/UtahTeapot本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

電子情報通信学会100年史

27

Utah Teapot ＠ 電子情報通信学会100年史

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

youtu.be/CRvwtUCjRto
28

森羅万象を数式で表そうとする賢者○○○○関数本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

29

陰関数 . モデリング§ 陰関数表現：f( x, y, z ) = 0• 等値面（Isosurface）が表面• 表面座標は方程式を解くまで分からない• 計算コスト：大§ 設計自由度の向上© www.bathsheba.com• 陰関数をツギハギ• メタボール© en.wikipedia.org/wiki/Metaballs
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

© Level-of-detail visualizationof clustered graph layouts30

陽関数 vs 陰関数 . モデリング𝑟𝑟

𝑥𝑥 2 + 𝑦𝑦 2 +𝑧𝑧 2 −𝑟𝑟 2 = 0
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

31

© paulbourke.net/geometry/polygonise

レンダリング .陰関数.モデリング§ ポリゴン化• 等値面にポリゴンを貼る• 離散化曲面§ ポイントクラウド化• 等値面上に点群を発生させる© Surface splatting• Splatting 法• 離散化曲面§ レイトレーシング• 光線と陰関数の交点を求める• 連続曲面© Tiffany C. Inglis

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

32

交差判定 .レンダリング.陰関数.モデリング§ 陰関数と視線との交点は複数• ニュートン法は収束する解を選べない• 始点に最も近い解を探すのが難しい§ 始点から少しずつ伸ばして探索④⑤
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

③②

①33

github.com/LUXOPHIA/ImplicitRender

Real-Time Implicit Rendering @ Delphi
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ブロック .モデリング§ ３Ｄのドット絵§ ゲーム「Minecraft」で有名§ ボクセルが二値を保持§ Undo が容易© voxelart.blogspot.jp/2014/04/que-es-voxel-y-el-voxel-art.html
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

© Super Mario Mash-Up Pack @ Mojang
35

実装 .ブロック.モデリングgithub.com/LUXOPHIA/BlockBuilder§ ３次元配列内に存在フラグを立てて形状を定義§ フラグの境界にポリゴンを貼る§ 法線は False の方を向く
FalseTrue
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

36

ボクセル配列 .ブロック.モデリング§ ボクセル値は Boolean

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

37

ポン･デ･リング関数

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

38

ボリューム .モデリング§ ３次元画像§ 医療用３ＤＣＴなどで有名§ ボクセルが実数値を保持§ 離散化陰関数© www.physicscentral.com/explore/action/scans.cfm
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

© en.wikipedia.org/wiki/Volume_rendering
39

レイトレーシング .ボリューム.モデリング§ 3D-DDA：3Ｄ Discontinuous Deformation Analysis

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

40

github.com/LUXOPHIA/VolumeRender

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

Real-Time Volume Rendering @ Delphi

実装 .ボリューム .モデリングgithub.com/LUXOPHIA/MarchingCubes§ ３次元配列内に存在率を指定して形状を定義§ ボクセルが実数値を保持§ 等値面にポリゴンを貼る• マーチングキューブ法© www.cs.carleton.edu/cs_comps/0405/shape/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

42

マーチングキューブ法 .ボリューム.モデリング§ ボクセルの角の８頂点は等値面の中か外かのどちらかに属する§ ８頂点の内外の組合わせは 256通り ある§ ポリゴン構造としては 15種類 に分けられる

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

© Marching Cubes Animation https://youtu.be/B_xk71YopsA
43

ポリゴンテーブル .マーチングキューブ法.ボリューム.モデリング§ 最大５枚 / ボクセル

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

▼LUX.Marcubes.pas

44github.com/LUXOPHIA/MarchingCubes

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

ボクセル配列 .ボリューム .モデリング§ ボクセル値は Single

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

46

ボクセルの標本点はどこ？
§ ピクセル• 体中心§ ボクセル（Bric）• 体中心§ 格子点（Grid）• ボクセルの角

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

47

github.com/LUXOPHIA/MarchingCubes_GPU

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

ポリゴンテーブル .マーチングキューブ法.ボリューム.モデリング§ GLSL 言語は多次元配列や動的配列に未対応▼LUX.GPU.OpenGL.Shaper.Preset.TMarcubes.Faces_G.glsl

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

49

§断層写真の立体化

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

DICOM .断層写真§ 医用画像ファイル形式

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

51

画像 .DICOM.断層写真§ 画像の読込みにも成功

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

52

３ＤＣＴサンプル .断層写真§ The Stanford volume data archive• graphics.stanford.edu/data/voldata§ Visualization Group Data sets @ TU Wien
• www.cg.tuwien.ac.at/research/vis/datasets§ Sample Data Sets @ IDAV
• graphics.cs.ucdavis.edu/~okreylos/PhDStudies/Spring2000/ECS277
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

53

github.com/LUXOPHIA/IsoVolumeViewer

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

github.com/LUXOPHIA/IsoVolumeViewer

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

© viscomp.alexandra.dk/?p=3836§ポリゴンをボクセルへ変換

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

Voxelization§ ポリゴンモデルをボクセルへ分解する処理© An exact general remeshing scheme applied to physically conservative voxelization
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

57

衝突判定 .Voxelization§ ポリゴン（三角）とボクセル（直方体）の衝突判定が必要© blogs.nvidia.com/blog/2014/09/19/maxwell-and-dx12-delivered
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

© shikihuiku.wordpress.com/2012/08/02/gpu上でのvoxel構築手法
58

アルゴリズム① .衝突判定.Voxelization§ PEF : Projected Edge Function

ＡＡＢＢが衝突＆辺法線に沿って最も前方の頂点が辺の内側に入る• 三軸方向へ射影して２Ｄ処理で判定• 三角面の法線方向の衝突判定と併用

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

59

アルゴリズム② .衝突判定.Voxelization§ SAT：Separating Axis Theorem• 分離超平面定理を利用する• 凸体のみ対応• １３方向を調べればいい© Improvements of the Voxmap-PointShell Algorithm- Fast Generation of Haptic Data-Structures
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

60

アルゴリズム比較 .衝突判定.Voxelization

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

61

VoxMan .Voxelization§ 人体のスキャンモデルをボリュームデータへ変換

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

62

github.com/LUXOPHIA/Collisioner

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

§テトラヘドライゼーション

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

Tetrahedralization§ 等値面内部を四面体格子に変換する処理© sites.google.com/site/introduction2cgal/manyuaru/37-3d-triangulations
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

65

TetraMan .Tetrahedralization§ 人体を四面体メッシュ化

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

66

CGI2017 .TetraMan.Tetrahedralization§ 慶應義塾大学主催の学会を飾る

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

67

Asian Digital Modeling Contest 2017 .TetraMan.Tetrahedralization§ 作品「Duality」を出展。

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

68

３Ｄプリント .ADMC2017§ 最優秀賞を頂きました

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

69

THANKS!
www.embarcadero.com/jp
第35回 エンバカデロ・デベロッパーキャンプ

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