クレジット：
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫
ライセンス：
利用者は、本講義資料を、教育的な目的に限ってページ単位で利用することができます。特に記載のない限り、本講義資料はページ単位でクリエイティブ・コモンズ 表示-非営利-改変禁止 ライセンスの下に提供されています。
http://creativecommons.org/licenses/by-nc-nd/4.0/
本講義資料内には、東京大学が第三者より許諾を得て利用している画像等や、各種ライセンスによって提供されている画像等が含まれています。個々の画像等を本講義資料から切り離して利用することはできません。個々の画像等の利用については、それぞれの権利者の定めるところに従ってください。

対話的形状モデリング五十嵐 健夫
東京大学

情報理工学系研究科教授

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

研究分野
User Interface
コンピュータを使いやすくする
Computer Graphics
視覚的な表現を豊かにする

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

計算機による形状表現

CG
著作権等の都合により、ここに挿入されていた画像を削除しました。
モンスターズ・インク（ディズニー/ピクサー）

Movie, Game, TV,Web, Sci., Med.…

CAD
著作権等の都合により、ここに挿入されていた画像を削除しました。
CADによるエンジン図

Car, Product,
Building, Clothing …

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

形状モデリング

コンピュータで形状データを作成・編集する。
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

BackgroundContent Creatoin by End-users
TIME
Person of the Year: You |Dec. 25, 2006
http://content.time.com/time/covers/0,16641,20061
225,00.html

Neil Gershenfeld,
Fab: The Coming
Revolution on Your
Desktop--from Personal
Computers to Personal
Fabrication, Basic Books,2007.

Chris Anderson,
Makers: The New
Industrial Revolution,
Crown Business, 2014.

Hod Lipson, MelbaKurman,Fabricated: The New
World of 3D Printing,Wiley, 2013.

Consumer generated contents, Prosumer,
Personal fabrication, Maker movement,
20160623
3rdIndustrial Revolution
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Existing Online Platforms
You Tube, shapeways
ニコニコ動画, etc.

Upload, share, and view / print
Design is still difficult !
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Research Goal
“Help people design things by themselves”
Graphics (3D, animation)
Physical objects (clothing, furniture)

Focusing on “interaction” (automation)
20160623

UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Goal
Dedicated construction by experts
for later presentation

Instant construction by novices
for live communication
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Goal
Farewell to Mass Production and Consumption“Design Your Own Artifacts by Yourself”

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

概要1) ２次元グラフィクス
2) ３次元グラフィクス
3) 形状変形・アニメーション
4) CAD（ファブリケーション）

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

2D Drawings and Animations• Diagram Beautification• Shape Manipulation• Dynamic Illustrations

Sketch-based Dynamic Illustration of Fluid Systems“ ACMTransactions on Graphics, Volume 30, Issue 6, Proceedings ofSIGGRAPH Asia 2011, 12-15 Dec, 2011.

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Problem

How do you draw this?
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Demopegasus
20160623UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm
1.
2.

Beautification
Prediction

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

1. Beautification Algorithm
Segment coordinates

Constraint Inference
Multiple equations

Constraint Solver
Multiple candidates

Candidate Evaluation
Primary candidate
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Constraint Solver
Alignment
Connection
Perpendicularity
Verticality..

Find valid combination of constraints.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

2. Prediction Algorithm

Existing segments

New segment

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

2. Prediction Algorithm

Match

Match

Existing segments

New segment

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

2. Prediction Algorithm
Copy
Copy

Existing segments

New segment

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

2. Prediction Algorithm
Flip
Flip
Existing segments

New segment

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

マウスや指で絵を動かすシステム

Takeo Igarashi, Tomer Moscovich, John F. Hughes
The University of Tokyo / Brown University

20160623

UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

やりたいこと
両手でぬいぐるみをいじるようにコンピュータの中の絵を動かしたい。

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-NDいままでのアニメーションの作り方

絵を一枚ずつすべて手で描く

とっても大変！

20160623

UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

rigid

Space-Warp
Deform space, not object.
Different from reality…

Physics (mass-spring model)
Slow to converge…
Unstable, need tuning…
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm

Rest shapeHandles

OutputMinimize shape distortion, satisfying constraints.
Closed-from solution, not iterative.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Input:coordinates ofhandles (q)Output: coordinates ofmesh vertices (u)Minimize: distortion of triangles

original

deformed

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Two-Step Algorithm

Step 1Fitting

Step 2

Step 1: Obtain intermediate result by using E1, allowing scaling.
Fitting: Fit correct-sized individual triangle to the result.
Step 2: Stitch fitted triangles by using E2.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

2D Drawings and Animations• Diagram Beautification• Pen-and-ink Textures• Shape Manipulation• Dynamic Illustrations

20160623

Sketch-based Dynamic Illustration of Fluid Systems“ ACM
Transactions on Graphics, Volume 30, Issue 6, Proceedings ofSIGGRAPH Asia 2011, 12-15 Dec, 2011.

UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

SIGGRAPH Asia 2011

Sketch-based Dynamic Illustrationof Fluid Systems
B. Zhu, M. Iwata, R. Haraguchi, T. Ashihara,N. Umetani, T. Igarashi, K. Nakazawa

Sketch-based Dynamic Illustration of Fluid Systems“ ACM Transactions on Graphics, Volume 30, Issue 6,
Proceedings of SIGGRAPH Asia 2011, 12-15 Dec, 2011. , Figure 1

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

空気や液体の流れを描くのは大変.

計算機が自動的に計算して提示.

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

fluid

Videofluid
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Hybrid Fluid Simulation
Global network

Local region

Hydraulics

Hydrodynamics

Node Inflow

Pipe Flow
Node Pressure

Details withinregions

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Global network

Node Inflow

Pipe flow

Hydraulics

Pipe flow

Pipe pressure drop

Pipe pressure drop Node pressure

Solve a global linear system.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Local region

Velocity

Pressure

Hydrodynamics(Navier-Stokes Equation)

Solve this on grid cells inside each region.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

3D Modeling• Suggestive Interface• Sketch-based Modeling

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

UIST 01

Chateau: a suggestive
interface for 3D modeling
Takeo Igarashi, John F. Hughes

User interface using hints and suggestions
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Motivation

So many commands in nested menus!
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

DemoChateau
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Implementation
Examiner
Generator

Scene

Suggestion engines

Suggestions

Each engine observes the scene and generates asuggestion when the scene matches its input pattern.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Future Work
Other applications (e.g. PowerPoint)

SuggestRoughly aligned

Align left

Align center

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

手書きスケッチによる３次元モデリング
Ｔｅｄｄｙ

SIGGRAPH 99
Impact paper

Takeo Igarashi
Satoshi Matsuoka
Hidehiko Tanaka
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

３次元モデリングは難しい！

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

ペンでのスケッチは簡単

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

teddyコミュニケーションへの応用
１）医学分野への応用
胃袋、歯、心臓などを３次元で表現

２）地形学習20160623

五十嵐 健夫ほか「地形学習における手書き３次元モデリングの利用」
第109回情報処理学会 ヒューマンインタフェース・ 第52回音声言語情報処理共催研究会
2004年7月, pp.73-77.
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm

1. Find axes
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm

1. Find axes

2. Elevate axes

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm

1. Find axes
2. Elevate axes
3. Wrap polygon and axes
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Creation-Finding axes-

Input 2D polygon
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Creation-Finding axes-

Constrained Delaunay Triangulation
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Creation-Finding axes-

Chordal axis (connecting mid-points)[Prasad 1997]
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Creation

Before trimming-Finding axes-

After trimming

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Creation-TrimmingStop!

Starting from each terminal,
search for the first significant edge.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Creation

Before trimming-Finding axes-

After trimming

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Creation-Wrapping-

Lift the axes, and generate 3D faces along the spine.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

ProductsPlayStation2
著作権等の都合により、ここに挿入されていた画像を削除しました。
ラクガキ王国(2002年発売・Sony)

著作権等の都合により、ここに挿入されていた画像を削除しました。
ラクガキ王国（2002年発売・Sony）

Package SoftwareforPCs
20160623

Nintendo GameCube
著作権等の都合により、ここに挿入されていた画像を削除しました。
カイジュウの島(2004年発売・セガ)

著作権等の都合により、ここに挿入されていた画像を削除しました。
マジカルスケッチ

著作権等の都合により、ここに挿入されていた画像を削除しました。
カイジュウの島(2004年発売・セガ)

著作権等の都合により、ここに挿入されていた画像を削除しました。
マジカルスケッチ

UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

SIGGRAPH 2007

FiberMesh: Designing Freeform
Surfaces with 3D Curves"FiberMesh: Designing Freeform Surfaces with 3D Curves", ACM Transactions on Computer Graphics, ACM SIGGRAPH 2007, San Diego, USA, 2007
http://www-ui.is.s.u-tokyo.ac.jp/~takeo/papers/fibermesh.pdf, Figure 1Nealen, Igarashi, Sorkine, Alexa
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Designing with “Curves”
Original sketch stays and works as a handle.

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Demofibermesh
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Results

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-NDAlgorithm
1. Curve Deformation

Handle position -> Curve geometry

2. Surface Optimization

Curve geometry -> Surface Geometry

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Computer-aided Design• Plush Toys
• Beadworks• Musical Instruments• Garments• Gliders

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Computer-aided Design

Designer

ComputerProducts

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Traditional Approach
Modeling and simulation are separated.

Design(Modeling)

Test(Simulation)

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Our Approach
Integrate real-time physics into modeling.

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Our Approach

Automatically generate 3D model and cloth
pattern for a sketch.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Videoplushie.mp4
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Physical Simulation & Shape Adjustment

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

SIGGRAPH 2012

インタラクティブなビーズデザイン
Y. Igarashi and T. Igarashi•ジェスチャー操作でビーズモデルをデザインする•ワイヤーの通し方を自動で計算する
20160623•制作手順を分かりやすく表示する
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

demobeadyProblem to Address Beadwork is the art of connecting beads together bywires.

著作権等の都合により、ここに挿入されていた画像を削除しました。
ビーズデザインプログラム図

3D

The design and construction of 3D beadwork are very
difficult !
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Our Approach Interactive Design and Construction

 Wire path planning algorithm

20160623UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Demo

20160623

demo beady

UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Examples

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Computing Wire Path

• An edge corresponds to a bead
• A wire path is given as an Eulerian Circuit
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Computing Wire Path

unstable (dangling) beads

Face strip

Final wire path

• Arbitrary Euler cycle is not stable• Make an Euler cycle along a face strip• Face strip is given as a Hamilton path
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Stripification Results

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

NIME 2010

Designing Custom-made Metallophonewith Concurrent Eigenanalysis
N. Umetani, K. Takayama, J. Mitani, T. Igarashi

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Motivation
How to design an original musical instrument?

It is very difficult to find a shape that produce
appropriate sound (tone).
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Our approach
Design system with continuous tone prediction.
Edit shape

Audio feedback♪
The user edits the shape, and the system provides audio feedback.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Videodelfem.mp4
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

SIGGRAPH 2011

Sensitive Couture for Interactive
Garment Editing and Modeling
N. Umetani, D. Kaufman, T. Igarashi, E.Grinspun

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Motivation
How to design a new garment?

?

It is not easy to predict the result of draping
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Videocloth20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm
3D cloth shape(output)

2D cloth pattern(input)R(residual,)

0

3D cloth shape

R=0

2D cloth pattern
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Our approach
Design system with continuous draping simulation.

User’s edit

Concurrent
simulation result

The user edits the 2D pattern, and the system shows simulation result.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm
3D cloth shape(output)

2D cloth pattern(input)R(residual,)

0

3D cloth shape

R=0

2D cloth pattern
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm
R is non-linear and slow to compute.
So, we use linear approximation around the current state.
3D cloth shape

linear approximation(Sensitivity Analysis)

R=0

2D cloth pattern
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Algorithm
Single linear approximation is not enough.
We cache multiple linear approximations and blend them.
3D cloth shape

2D cloth pattern
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

SIGGRAPH 2014

翼理論に基づく紙飛行機デザイン
with N. Umetani, S. Ryan, Y. Koyama•紙飛行機をデザインすると自動的に飛ぶように20160623調整する。
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

video

Motivation
How to design a paper airplane (glider)?
著作権等の都合により、ここに挿入されていた画像を削除しました。
模型グライダー各種

It is not easy to design a glider that flies well.
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Our approachContinuous simulation.
+Automatic optimization.

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Data-driven Approach
Accurate, analytic simulation is difficult.
We use many measured “data”.

20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Videopteromys
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

Future Vision

Design Everything !
Furniture, Clothing, Car, House…
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND

おわり
デモソフトやビデオなどは以下で配布しています
http:// www-ui.is.s.u-tokyo.ac.jp/~takeo
http://www.jst.go.jp/erato/igarashi/
20160623
UTokyo Online Education 学術俯瞰講義 2016 五十嵐健夫 CC BY-NC-ND