sfc design theory 2012 6/6
DESCRIPTION
慶應義塾大学SFC大学院授業「デザインセオリー」第8回の講義資料ですTRANSCRIPT
Design Theory
村松 充政策・メディア研究科 後期博士課程3年目X-Design Program 山中デザイン研究室
第8回 2012 6/6
Lecture Theme
CAXD -Computer Aided X-Design-
■3DCG基礎 ー3次元表現のための数学基礎■滑らかな形の科学 ー3D CAD による形状表現■自然、物理学と形■コンピューターによるX-Design ー動きのデザイン、シミュレーション ーアルゴリズムによる形状生成
Lecture 1
Drawing on the Left Side of the Brain
脳の左側で描け!
Lecture 1
Drawing on the Left Side of the Brain
脳の左側で描け!
コンピューターによる描画の基礎
Lecture 1
コンピューターによる描画コンピューターは本来計算して、その結果を出力する装置
3DCGを描くという事は、3次元空間をモデル化して、「どのように見えるか」を計算した結果をディスプレイに描画するということ
Lecture 1
3次元描画のプログラミングに挑戦
3D CG Programming by Proce55ing
普段、眼で見て感覚的に理解している世界を違った視点から考える事で理解する
Computer Graphics Basic
コンピューターの描画出力(Display)描画における最小単位はピクセルどのピクセルを何色で塗るかを計算する
Computer Graphics Basic
コンピューターの描画データ形式(2D)
■ ラスタグラフィックス
グラフィックを数式や座標、パラメーターで表現全て数式で表現されているため、拡大/縮小しても滑らかに表示出来る。イラスト等 →滑らかな線、パラメトリックな描画が可能
■ ベクタグラフィックス
グラフィックを点の集まりとして表現それぞれの点をどの色で塗るかの情報を持つ。写真等。 →ブラーや色補正などの操作に適する
Computer Graphics Basic
コンピューターの描画データ形式(3D)
■ ポリゴンデータ
2Dのベクタグラフィックと同様、3Dオブジェクトの曲線、曲面を数式で表現点、線、面、面の トリム/連結、位相の状態等をデータとして保持
■ CADデータ(パラメトリックな形状データ)
3次元のオブジェクトを、小さな面の集まりで表現拡大するとそれぞれの面が大きくなるため荒くなる。主に、点群、面を構成する点の組み合わせ、法線ベクトルなどをデータとして保持。
Computer Graphics Basic
コンピューターの描画データ形式(3D)CADデータ(左)ポリゴンデータ(右)
Computer Graphics Basic
STEP 1
3D CG Programming
四角を描画する
Front
Top
L
L = 400
L
P0 = (-L/2, -L/2, 0)P1 = (L/2, -L/2, 0)P2 = (L/2, L/2, 0)P3 = (-L/2, L/2, 0)
(0,0,0)
P1P0
P3 P2
Computer Graphics Basic
STEP 1
3D CG Programming
四角を描画する
http://www.openprocessing.org/sketch/63437
Computer Graphics Basic
STEP 2
3D CG Programming
四角を回転させる
Front
Top
L
θ
L
P0 = (-L/2 * cos(θ), -L/2,-L/2 * sin(θ))P1 = (L/2 * cos(θ), -L/2, L/2 * sin(θ))P2 = (L/2 * cos(θ), L/2, L/2 * sin(θ))P3 = (-L/2 * cos(θ), L/2, -L/2 * sin(θ))
P1P0
P3 P2
Computer Graphics Basic
STEP 2
3D CG Programming
四角を回転させる
http://www.openprocessing.org/sketch/63440
Computer Graphics Basic
STEP 3
3D CG Programming
面に色を付ける
Wireframe Surface
Computer Graphics Basic
STEP 3
3D CG Programming
面に色を付ける
回転している事がわかりやすくなるよう面の表と裏で違う色で描画してみる
if文を使って「表が表示されている」ときと「裏が表示されている」ときで塗りの色を変える
Computer Graphics Basic
STEP 3
3D CG Programming
面に色を付ける
「表が表示されている」か「裏が表示されている」か?面の法線ベクトルを求めることで判断する
面に対して垂直面の表の方向を表すベクトル
Computer Graphics Basic
STEP 3
3D CG Programming
面に色を付ける
法線ベクトル
四辺形の1点から隣り合う2点へ向かう2つのベクトルの「外積」を計算する事で求めることが出来る。
V1 × V2 = N_ _ _
Mathematics review
ベクトルの外積 [クロス積]Vector
2つのベクトル掛けあわせて、2つのベクトルがとおる面に垂直なベクトルを求める演算
※上記のように外積の結果がベクトルになるのは、 もとのベクトルが3次元の場合です。 2次元のベクトル同士の外積はスカラーになります
計算結果はベクトルになります(3次元の場合)
Mathematics review
ベクトルの外積 [クロス積]Vector
Va = (Xa, Ya, Za) , Vb = (Xb, Yb, Zb) のとき
Va×Vb = (Ya*Zb - Za*Yb, Za*Xb - Xa*Zb, Xa*Yb - Ya*Xb)
|Va×Vb| = |Va||Vb|sin(θ) θはVaとVbのなす角
Mathematics review
ベクトルの内積 [ドット積]Vector
2つのベクトル掛けあわせる計算計算結果はスカラーになる
Mathematics review
Vector
Va = (Xa, Ya, Za) , Vb = (Xb, Yb, Zb) のとき
Va・Vb = Xa*Xb + Ya*Yb + Za*Zb
Va・Vb = |Va||Vb|cos(θ) θはVaとVbのなす角
ベクトルの内積 [ドット積]
Va
Vbθ
Va*cos(θ)
Computer Graphics Basic
STEP 3
3D CG Programming
面に色を付ける
Top View
法線ベクトル Vn
Top View
法線ベクトル VnX+
Z+ Z+
Vn.Z>0裏面が描画される
Vn.Z<0表面が描画される
Computer Graphics Basic
STEP 3
3D CG Programming
面に色を付ける
http://www.openprocessing.org/sketch/63443
Computer Graphics Basic
3D CG Programming
Top ViewOn Screen
Screen
現在の描画方法 ー平行投影ー→実際の見え方とは異なるため立体感が無い
Computer Graphics Basic
3D CG Programming
透視投影-Perspective Projection- で描画
STEP 4 パースを付けた描画
透視投影平行投影
Computer Graphics Basic
3D CG Programming
STEP 4 パースを付けた描画
Top ViewOn Screen
Screen
Computer Graphics Basic
3D CG Programming
STEP 4 パースを付けた描画
Top View
Screen
Computer Graphics Basic
3D CG Programming
STEP 4 パースを付けた描画
Top View
Screen
(x,y,z)
(pX,pY,sZ)(z = sZ)
(0,0,0)
Computer Graphics Basic
3D CG Programming
STEP 4 パースを付けた描画
Top View
θ
Screen
tan(θ) = x/z = pX/sZ
pX = sZ * x / z
(x,y,z)
(pX,pY,sZ)(z = sZ)
(0,0,0)
Computer Graphics Basic
3D CG Programming
STEP 4 パースを付けた描画
Right View
θ
Screen
(x,y,z)
(pX,pY,sZ)
(z = sZ)(0,0,0)
tan(θ) = y/z = pY/sZ
pY = sZ * y / z
Computer Graphics Basic
3D CG Programming
STEP 4 パースを付けた描画
http://www.openprocessing.org/sketch/63455
Computer Graphics Basic
3D CG Programming
STEP 5 移動を伴う回転
Top View
L/2
(0,0,z)
Computer Graphics Basic
3D CG Programming
STEP 5 移動を伴う回転
Top ViewtV = (L/2 * sin(θ),0,L/2 * cos(θ))
P0’ = P0 + tV
P1’ = P1 + tV
θ(0,0,z)
tVP1
P0
P1’
Computer Graphics Basic
3D CG Programming
STEP 5 移動を伴う回転
http://www.openprocessing.org/sketch/63458
Computer Graphics Basic
3D CG Programming
STEP 6 2面の描画P0
P1
P2
P3
P4
P5
Computer Graphics Basic
3D CG Programming
STEP 6 2面の描画
Top View
X+
Z+ Z+
F1
F2F1
F2
F2.z < F1.zF2 を手前に描画する
(F2 を描く処理を後に実行 )
F1.z < F2.zF1 を手前に描画する
(F1 を描く処理を後に実行 )
Side View
Computer Graphics Basic
3D CG Programming
STEP 6 2面の描画
http://www.openprocessing.org/sketch/63488
Computer Graphics Basic
3D CG Programming
STEP 7 陰影をつける
Computer Graphics Basic
3D CG Programming
STEP 7 陰影をつける
明るいグレー、暗いグレー、中間の3色で塗り分けてください。
A
B
C
Computer Graphics Basic
3D CG Programming
STEP 7 陰影をつける
A
B
C
何故?
Rendering Process
Diffuse Color 拡散反射光のシミュレーション
私たちが感じる物体の色は、物体に反射した光赤い物体 →白い光から青と緑の成分を吸収し、赤成分のみ反射
拡散反射光ー文字どおり物体表面で拡散反射(乱反射)した光
Rendering Process
Diffuse Color 拡散反射光のシミュレーション
物体に当たった光が、表面の細かい凹凸によって反射され、全方向に反射
全方向に反射するため、視点によって見え方が変わらない
Rendering Process
Diffuse Color 拡散反射光のシミュレーション
平行光
Rendering Process
Diffuse Color 拡散反射光のシミュレーション
A
B
Rendering Process
Diffuse Color 拡散反射光のシミュレーション
1 1
Xθ
X
Rendering Process
Diffuse Color 拡散反射光のシミュレーション
Diffuse = 1 / X * L
X * cos(θ) = 1
X = 1 / cos(θ)
Diffuse = L * cos(θ)
1
Xθ
※Lは、基準となる光の強さ
Rendering Process
Diffuse Color 拡散反射光のシミュレーション
cos(θ) = (-LV)・nV
1
X
nVLV
θθ
^ ^
-LV = - LV / |LV|^
nV = nV / |nV|^
光線の逆ベクトルと法線ベクトルの単位ベクトル同士の内積で求められる
Computer Graphics Basic
3D CG Programming
STEP 7 陰影をつける
http://www.openprocessing.org/sketch/63491
Computer Graphics Basic
3D CG Programming
STEP 8 点光源による拡散反射
LV LV
平行光源の光線ベクトル 点光源の光線ベクトル
Computer Graphics Basic
3D CG Programming
STEP 8 点光源による拡散反射
点pにおける点光源の光線ベクトルLVは
点光源の光線ベクトル
LV
LP
p
LV = p - LP
Computer Graphics Basic
3D CG Programming
STEP 8 点光源による拡散反射
Processing を OpenGLモードで使用すると多角形の各点に色を指定し、その間をグラデーションで補間することが出来る beginShape(QUADS);
fill(color1); vertex(pp0.x,pp0.y); fill(color2); vertex(pp1.x,pp1.y); fill(color3); vertex(pp2.x,pp2.y); fill(color3); vertex(pp3.x,pp3.y); endShape();
Rendering Process
Ambient Color 環境光のシミュレーション
床や壁等に反射、乱反射した光が再度物体に反射する
Rendering Process
Specular Color 鏡面反射光のシミュレーション
物体に当たった光が、文字通り鏡面のように全反射する。視点を変えると鏡面反射光も変わる
多くの場合入射した光そのものの色
θ θ
θ
nV
LV
rV
|LV|*cos(θ)*nV
rV = LV + 2*|LV|*cos(θ)*nV
鏡面反射光の計算
Rendering Process
Specular Color 鏡面反射光のシミュレーション
Rendering Process
Specular Color 鏡面反射光のシミュレーション
nV
LV
rV
反射光と視線ベクトルから色を計算
eV
Speculler Color
Speculler = SL * (rV・(-eV) * cos(Φ))
Φ
n
SLは係数、nは反射の鋭さを表す
Computer Graphics Basic
3D CG Programming
STEP 9 拡散反射、鏡面反射のシミュレーション(平行光源)
http://www.openprocessing.org/sketch/63496
Computer Graphics Basic
3D CG Programming
STEP 10 拡散反射、鏡面反射のシミュレーション(点光源)
http://www.openprocessing.org/sketch/63497