sfc design theory 2012 6/6

Design Theory

村松充政策・メディア研究科　後期博士課程3年目X-Design Program 山中デザイン研究室

第８回　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)描画における最小単位はピクセルどのピクセルを何色で塗るかを計算する


コンピューターの描画データ形式(2D)

■ ラスタグラフィックス

グラフィックを数式や座標、パラメーターで表現全て数式で表現されているため、拡大／縮小しても滑らかに表示出来る。イラスト等　→滑らかな線、パラメトリックな描画が可能

■ ベクタグラフィックス

グラフィックを点の集まりとして表現それぞれの点をどの色で塗るかの情報を持つ。写真等。　→ブラーや色補正などの操作に適する


コンピューターの描画データ形式(3D)

■ ポリゴンデータ

2Dのベクタグラフィックと同様、3Dオブジェクトの曲線、曲面を数式で表現点、線、面、面のトリム/連結、位相の状態等をデータとして保持

■ CADデータ(パラメトリックな形状データ)

3次元のオブジェクトを、小さな面の集まりで表現拡大するとそれぞれの面が大きくなるため荒くなる。主に、点群、面を構成する点の組み合わせ、法線ベクトルなどをデータとして保持。


コンピューターの描画データ形式(3D)CADデータ(左)ポリゴンデータ(右)


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


STEP 1

3D CG Programming

四角を描画する

http://www.openprocessing.org/sketch/63437




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


STEP 2

3D CG Programming

四角を回転させる





STEP 3

3D CG Programming

面に色を付ける

Wireframe Surface


STEP 3

3D CG Programming


回転している事がわかりやすくなるよう面の表と裏で違う色で描画してみる

if文を使って「表が表示されている」ときと「裏が表示されている」ときで塗りの色を変える


STEP 3

3D CG Programming


「表が表示されている」か「裏が表示されている」か？面の法線ベクトルを求めることで判断する

面に対して垂直面の表の方向を表すベクトル


STEP 3

3D CG Programming


法線ベクトル

四辺形の1点から隣り合う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(θ)


STEP 3

3D CG Programming


Top View

法線ベクトル Vn

Top View

法線ベクトル VnX+

Z+ Z+

Vn.Z>0裏面が描画される

Vn.Z<0表面が描画される


STEP 3

3D CG Programming






3D CG Programming

Top ViewOn Screen

Screen

現在の描画方法　ー平行投影ー→実際の見え方とは異なるため立体感が無い


3D CG Programming

透視投影-Perspective Projection- で描画

STEP 4 パースを付けた描画

透視投影平行投影


3D CG Programming


Top ViewOn Screen

Screen


3D CG Programming


Top View

Screen


3D CG Programming


Top View

Screen

(x,y,z)

(pX,pY,sZ)(z = sZ)

(0,0,0)


3D CG Programming


Top View

θ

Screen

tan(θ) = x/z = pX/sZ

pX = sZ * x / z

(x,y,z)

(pX,pY,sZ)(z = sZ)

(0,0,0)


3D CG Programming


Right View

θ

Screen

(x,y,z)

(pX,pY,sZ)

(z = sZ)(0,0,0)

tan(θ) = y/z = pY/sZ

pY = sZ * y / z


3D CG Programming






3D CG Programming

STEP 5 移動を伴う回転

Top View

L/2

(0,0,z)


3D CG Programming


Top ViewtV = (L/2 * sin(θ),0,L/2 * cos(θ))

P0’ = P0 + tV

P1’ = P1 + tV

θ(0,0,z)

tVP1

P0

P1’


3D CG Programming






3D CG Programming

STEP 6 2面の描画P0

P1

P2

P3

P4

P5


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


3D CG Programming

STEP 6 2面の描画





3D CG Programming

STEP 7 陰影をつける


3D CG Programming


明るいグレー、暗いグレー、中間の３色で塗り分けてください。

A

B

C


3D CG Programming


A

B

C

何故？

Rendering Process

Diffuse Color 拡散反射光のシミュレーション

私たちが感じる物体の色は、物体に反射した光赤い物体 →白い光から青と緑の成分を吸収し、赤成分のみ反射

拡散反射光ー文字どおり物体表面で拡散反射(乱反射)した光

Rendering Process


物体に当たった光が、表面の細かい凹凸によって反射され、全方向に反射

全方向に反射するため、視点によって見え方が変わらない

Rendering Process


平行光

Rendering Process


A

B

Rendering Process


1 1

Xθ

X

Rendering Process


Diffuse = 1 / X * L

X * cos(θ) = 1

X = 1 / cos(θ)

Diffuse = L * cos(θ)

1

Xθ

※Lは、基準となる光の強さ

Rendering Process


cos(θ) = (-LV)・nV

1

X

nVLV

θθ

^ ^

-LV = - LV / |LV|^

nV = nV / |nV|^

光線の逆ベクトルと法線ベクトルの単位ベクトル同士の内積で求められる


3D CG Programming






3D CG Programming

STEP 8 点光源による拡散反射

LV LV

平行光源の光線ベクトル点光源の光線ベクトル


3D CG Programming


点pにおける点光源の光線ベクトルLVは

点光源の光線ベクトル

LV

LP

p

LV = p - LP


3D CG Programming


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


Rendering Process


nV

LV

rV

反射光と視線ベクトルから色を計算

eV

Speculler Color

Speculler = SL * (rV・(-eV) * cos(Φ))

Φ

n

SLは係数、nは反射の鋭さを表す


3D CG Programming

STEP 9 拡散反射、鏡面反射のシミュレーション(平行光源)





3D CG Programming

STEP 10 拡散反射、鏡面反射のシミュレーション(点光源)




sfc design theory 2012 6/6

Documents

computer graphics basicdisplay

computer graphics basic2d

computer graphics basic3dcad

yb ya

xb xa

xb vavb

zb za

zb vavb