１ 演習の目的と内容 コンピュータグラフィックス（以下，CG と書く）の技術は，デザイン分野，ビジュアリ ゼーション（可視化）分野，そして，エンタテイメント分野など幅広い分野に応用されて いる．CG 技術を利用するには，それを実現するソフトウェアが必要であるが，CG 関連の アプリケーションソフトウェアは，２次元・３次元を問わず様々なものが作成されている． CG に関する技術には大別して，「コンピュータ内に形状を表現する技術：モデリング （Modeling）」，および，「画像として形状を表現する技術：レンダリング（Rendering）」 の２つがある。一般の CG ソフトには各々特徴とするところはあるが、ほとんどの場合、 これらの２つの機能が実装されている。 本演習は，まず、モデリングをつかさどる部分（これを，モデラ(Modeler)と言う）の作 成を通してその構造を理解する。すなわち，いくつかの形状を表現するモデラを作成し、 形状をどのようにコンピュータの内部で表現するか理解する。次いで，表面の反射モデル による質感表示を稼動化し３D オブジェクトのレンダリング表示のメカニズムを理解する。 なお，本演習は，メディア演習ⅠまたはⅡでおこなった「ＣＧのための基本プログラミ ング演習」および「メディアプログラミング演習」を取得されていることを前提としてい る． ２ 方法の概要 本演習は，各自のノートPC 上の processing 環境で実施する．基本部分は配布する． なお本演習では，配布したプログラムを作り変えることで演習を進める．本演習書では， 手順や方法、作り変える位置や加える位置等を指定しながら解説する．プログラム作りに 自信のある人は，本書の指示と異なる方法にて進めてもよいが，途中で破綻を来した場合 は自己責任とする．また，毎回「チェックシート」を配布するので、当日記入し提出する． ３ 基本的な３D 形状の表示（演習１） ３．１ ３Ｄグラフィックスの扱い processing の３D モードにおける座標系は，図１に示す様に，ウインドウ左上が原 点，右方向が x 軸，下方向が y 軸，画面手前方向が z 軸である． 図１ ２D および３D の座標系 図２は，空間内の平面を描くプログラムの一部である．空間内の平面は，その頂点を 順に（表からみて反時計方向に）指定することにより描かれる．頂点列は beginShape( ) から endShape( )の間に指定する． beginShape の括弧内は，その点列をつなげてどのような形を形成するかを指定する． CG モデリングおよび演習―「演習」部分 2014 年度版
④ ② ① TRIANGLES は，３頂点を指定して３辺形を，QUADS は４点を指定し４辺形を形成する．他の指定方法 の説明は省略する． ３．２ ３Ｄ表示方法 プログラム cgm_simple_3D_shape は，この部 分を含み，表示全体のプログラムである． 文 size(800, 800, P3D); は扱う座標系が３ 次元であることを指定する． noFill(); および stroke(255);は，後に変更するが，図形を「塗り 潰しせず」，「輪郭を白」で描くことを指定する． 関数 draw()では，まず，投影法およびその範囲を 指定し，後に描画時の座標変換量を指定する．関数内最後の make3Dshape()関数の呼 び出しで実際の形状の描画を指定する．cgm_simple_3D_shape は，図２と同じであり， 空間中の４点を指定し，その４点を頂点とする平面を描く． 最後の関数 keyPressed()は，矢印キーにより回転角度を操作する関数であり，実際 の回転の指定は関数 draw()にある．また，結果画像を表示中に画像にカーソルを置き， 「s キー」を押すことにより，その画像がプログラムと同じフォルダーに格納される． ３．３ n 角錐の描画 xy 平面を底面（半径 1）とし高さ 1 の角錐の描画モデルを図３に示す．n 角錐は，周 りのｎ個の三辺形，および，底辺から成り立っている 図３．n角錐の各頂点の座標計算法 図３に示す様に，周りのi 番目の三辺形の三頂点①②③は，以下の通りとなる．
)
0
),
*
sin(
),
*
(cos(
dt
i
dt
i
，(cos(
dt
*
(
i
+
1
)),
sin(
dt
*
(
i
+
1
)),
0
)
，(
0
,
0
,
1
)
また，底辺はｎ辺形であるので，同様にｎ個の三辺形で表現すると，i 番目三辺形の頂 点①②④は，以下となる．
n
dt
=
2
π
)
0
),
*
sin(
),
*
(cos(
dt
i
dt
i
)
0
)),
1
(
*
sin(
)),
1
(
*
(cos(
dt
i
+
dt
i
+
)
1
,
0
,
0
(
X Z)
0
,
0
,
0
(
void make3Dshape() { // 空間内の平面 beginShape(QUADS); vertex( 1, 1, 0); vertex( 1, ‐1, 0); vertex(‐1, ‐1, 0); vertex(‐1, 1, 0); endShape(); } 図２ サンプルプログラム ③④ ② ①
)
0
),
*
sin(
),
*
(cos(
dt
i
dt
i
，(cos(
dt
*
(
i
+
1
)),
sin(
dt
*
(
i
+
1
)),
0
)
，(
0
,
0
,
0
)
図形描画の中心部を図４に示す．ここで，座標値 は配列で表現し，要素[0]には x の値を，要素[1] には y の値を，要素[2]には z の値を格納すること とする． 演習１－１ n 角錐（底面の半径１，高さ１）のワ イヤフレームを描く関数 drawCone() の虫食い版 が cgm_simple_3D_shape にある．これを完成させ なさい．関数 drawCone()中，変数 n が分割数（24 になっている），dti は前述のdt*i
を，dtip1 は同 様に dt*(i+1)を表す変数である．図３において， ①の座標値を求める部分は P1[0]=sin(dti); P1[1]=cos(dti); P1[2]=0; となる． 演習１－２ 関数 drawCone() を参考に，円柱を描く関数 drawCylinder()を完成さ せ，48 角柱を描きなさい（関数 drawCylinder()の雛形は，関数 drawCone()の後にあ る．考え方は図５参照）． 図５．n 角錐の各頂点番号 Pi[0,1,2] ＜－ i(1～4)番目の座標値 beginShape(TRIANGLES); vertex(P1[0],P1[1],P1[2]); vertex(P2[0],P2[1],P2[2]); vertex(P3[0],P3[1],P3[2]); endShape(); beginShape(TRIANGLES); vertex(P2[0],P2[1],P2[2]); vertex(P1[0],P1[1],P1[2]); vertex(P4[0],P4[1],P4[2]); endShape(); 図４ n 角錐の描画 X Z ③ ⑤ ⑥４ モデルとモデル表示関数の作成（演習２） ４．１ 概要 演習１での描画は，立体の頂点座標を計算しながら表示した．これでは，例えば，視点 変更などで，再描画のたびに頂点の全てを計算し直す必要がある．簡単な図形ならまだし も，複雑な図形の場合，計算のために多くの時間を必要とし描画速度も落ちる．そこで，「頂 点計算のプロセス」と「描画のプロセス」を分離することを考える．すなわち， （１）様々な立体が表現できる共通の「データ構造」を設計する（これをモデルという）， （２）このデータ構造体に，頂点データ等を計算し必要な値を格納する， （３）モデルに蓄えられた頂点等を参照しそれを描く， の３つ分ける． この（１），（３）は，一つ作成すればよく，表現する立体毎に（２）を作成すればよい ことになる．この状況を図示すると図６のようになる． 本章の演習では，基本面を３辺形としたポリゴンモデルの導入とモデルの表示部分をイン プリメントする． 図６．モデルとモデルデータの生成と形状表示 ４．２ ３辺形モデル －データ構造－ 三辺形モデルの各要素として，以下の図７の構造体を考える． 三辺形Tr[n] 第１点Tr[0] 第２点Tr[1] 第３点Tr[2] ｘ座標 Tr[0][0] ｙ座標 Tr[0][1] z 座標 Tr[0][２] ｘ座標 Tr[1][0] ｙ座標 Tr[1][1] z 座標 Tr[0][2] ｘ座標 Tr[2][0] ｙ座標 Tr[2][1] z 座標 Tr[0][2] 図７ ３辺形ポリゴンモデルの構造
４．３ モデル描画プログラム
先に，４．２節で示したモデルを表示する関数 draw_triangle を説明する．図８に示したプ ログラムが，その中心となる部分である．この関数では，n=1 で指定された面のみを表示す るように作られている．
void draw_triangle(float[][][] Tr, int num) { int n; n=1; // 以下は，n+1 番目の三辺形のみを描く beginShape(TRIANGLES); vertex(Tr[n][0][0],Tr[n][0][1], Tr[n][0][2]); vertex(Tr[n][1][0], Tr[n][1][1], Tr[n][1][2]); vertex(Tr[n][2][0],Tr[n][2][1], Tr[n][2][2]); endShape(); } 図８．関数draw_triangleの雛形 ４．４ モデルデータ作成関数のサンプル 底辺中心を原点とするＮ角錐の形状を，前述のモデルに格納する関数が一つ用意されて いる．
TrmPyramid(float [][][] tr, int num, float h, float r) //num: 角数, h：高さ, r：底面半径 ４．５ プログラム全体の概要
演習２で作成するプログラムの全体概形は図９となる．
/* 略 */
String file_name="save-11.jpg"; float[][][] Py; // Model
void setup() { /* 略 */ Py=new float[48][3][3]; // モデル領域の生成 TrmPyramid( Py, 24,1,1);// モデルの生成 } void draw() { /* 略 */ // 立体を描画 draw_triangle(Py,48); // モデルの描画 }
void draw_triangle(float [][][] Tr, int num) { /* 本体 */
void TrmPyramid(float[][][] tr, int num, float h, float r) { /* 本体： 提供する */ } // キー操作，立体回転(矢印)とフレーム画像格納(s) /* 略 */ 図９．演習２で完成するプログラムの概形 ４．６ 演習内容 これまでの，説明に基づき，下記３項目を行う． （演習２－１）モデルの理解 ４．１節の説明を理解し，配布した雛形 Tri_Model_Base と対応させる． （演習２－２）モデル描画プログラムの作成 ４．３節の説明に基づき雛形内の関数 draw_triangle を完成させる．４．３節で示した ように，この関数は，２番目の面のみ(n=1)を表示するように作られているので，「すべ ての面」を表示するように改良する．これらを用いて２４角錐を表示しなさい． （演習２－３）モデルデータ生成プログラムの作成 配布した void TrmPyramid(）および演習（１－２）を参考に，ｎ角柱のモデルデー タを生成する関数 void TrmCylinder(float [][][] tr, int num, float h, float r) を作成する．た だし，底面は，z＝０および z=ｈ（ｈはパラメータ（高さ）で指定）とする．それらを 用いて４０角柱（高さは１）を表示しなさい．底面および上面のデータ生成を忘れな いように．
４．７ レンダリング表示 前演習では，３次元の滑らかな形状として円柱と円錐の表面を三辺形で近似し，モデル データを生成し，各々をワイヤフレーム表示した．次いで，各々の３辺形を光環境と表面 属性とを考慮した「明るさ」をもつ色で塗り潰す．これにより立体のレンダリング表示を 行う． ＊ランバート反射 物体の表面がランバート反射するとは，その面に入射する光が散乱する状況を呼ぶ．こ の散乱では，表面の輝度は，視点位置に依らす，光線方向のみで定まる． コンピュータグラフィックスでは，ランバート反射は拡散反射のモデルとしてよく使わ れる．この反射は，面の正規化法線ベクトル N（次で説明する）と光の方向を表す正規化ベ クトルL の内積として次式で定義される． ID=L・N （１） ここで，ID は拡散反射光の輝度(表面の明るさ)である．上記式で，L・N＝|N||L|cos (α) で ある．N および L は「正規化ベクトル」であるので，|N|=|L|=1 である．αは 2 つのベク トル間の角度である．よって，法線ベクトルと光線ベクトルの方向が一致すると輝度は最 大（1），直交すると最小（0）となる． ＊面法線ベクトル 三辺形の各頂点を「表から見て反時計方向に」V0, V1 ,V2 と する．この時， D1=V1－V0, D2=V2－V1 と置くと N＝D1× D2 （２） として，法線ベクトルは定義される．ここで ×は外積である． 演習（３－１）法線ベクトルを求める関数の作成 三辺形 Tr[i]を与えて，その単位法線ベクトルを求める関数 void Nomal を完成させな さい． void Normal( float [ ] [ ]Tr, float[] N) { (1) D1x=Tr[1][0]‐Tr[0][0]; D1y=Tr[1][1]‐Tr[0][1]; D1z= Tr[1][2]‐Tr[0][2]； 同様に，D2x, D2y,D2z を求める． (2) N=D1×D2 を計算（外積として法線ベクトルを求める） (3) N=N／｜N|を計算（正規化する） } 図１２ 関数 void Nomal の雛形 図１１ 法線ベクトル 内積と外積
a＝（a1,a2,a3）， b＝（b1,b2,b3）
としたとき， 内積：a・b= a1b1 + a2b2 + a3b3
演習（３－２）レンダリング表示の関数の作成 演習２－２で作成した関数 draw_triangle を基に，各三辺形をレンダリング表示する関数 rend_triangle を作成する． ランバートモデルでのレンダリングには，光の方向の単位ベクトルが必要である．そこで， ① プログラムの先頭部分に float[] Light={‐1,0,‐0.2}; として，光線ベクトルを定義する．単位ベクトル化はプログラムで行う． このために，関数 setup()内に，以下を加える． ② float l=sqrt(Light[0]*Light[0]+Light[1]*Light[1]+Light[2]*Light[2]); Light[0]/=l; Light[1]/=l; Light[2]/=l; １行目は，光源ベクトルの大きさをもとめ，２行目の各文で正規化している． 関数 rend_triangle()の構造は以下の通りとなる．以下は，２番目の面のみレンダリング する． void rend_triangle(float[][][] Tr, int num) { int n; float[] NV; float br; NV=new float[3]; n=1; // n=1 の時は，以下の通り Normal(Tr[n],NV); // n 番目の法線ベクトルを求める br= ．．． // ランバートモデルで，反射量を求める fill(br, br, br); // 面を塗り潰す色（明るさ）を設定する beginShape(TRIANGLES); vertex(Tr[n][0][0], Tr[n][0][1], Tr[n][0][2]); vertex(Tr[n][1][0], Tr[n][1][1], Tr[n][1][2]); vertex(Tr[n][2][0], Tr[n][2][1], Tr[n][2][2]); endShape(); // ここまで． } } 図１３ 関数 void rend_triangle の雛形
関数 rend_triangle を完成させ，さらに，関数 draw の中の関数 draw_triangle（．．．) を rend_triangle(．．．)に変更し，40 角柱をレンダリング表示しなさい．
４．８ 色付け表示 演習（３－２）までにおいて，立体を３辺形モデルで表現し，そのモデルの表示が可能 となった． 前演習では，void rend_triangle()の中で Normal(Tr[n],NV); // n 番目の法線ベクトルを求める br= ．．． // ランバートモデルで，反射量を求める fill(br, br, br); // 面を塗り潰す色（明るさ）を設定する のように，法線ベクトルから明るさを求め，グレースケールで塗り潰した． ここで，物体の各々の色の反射係数 col[3] を導入する．したがって，入射光を白とし その強さを br とすると，r,b,g それぞれの反射光は，col[0]*br, col[1]*br, col[2]*br となる．これを fill の各パラメータに指定すればよいことになる． 色付け表示を setcolor(1,0,0); 図１４：色付け rend_triangle(Py,100); のように，「色の指定」「描画」と行えるようにするために，全域変数 float[] col={1,1,1}; を用意し，また， void setcolor(float r, float g, float b) { 図１５：色設定 col[0]=r; col[1]=g; col[2]=b; } を用意すればよいことになる． 演習（３－３）色付け円錐 前述のプロセスを実現し，「赤い２４角錐」を描きなさい
４－９ 複数図形 いつか図形を同時に描くことを考える． 演習（３－４）複合図形の描画 void draw()の実際に描画する部分を以下の図１６としてみる // 立体を描画 scale(0.5,0.5,0.5); setcolor(1,0,0); rend_triangle(Py,100); //円錐１ setcolor(0,1,0); translate(2,0,0); rend_triangle(Py,100); //円錐２ setcolor(0,0,1); translate(‐4,0,0); rend_triangle(Py,100); //円錐３ 図１６ 複合図形の描画 上のメカニズムを理解し，円柱，円錐からなる「３次元オブジェクト」を作成しなさい．
５ 新しい形状生成と複数図形 ５．１ トーラスの生成 トーラスの形と大きさを示すには大円の半径である大半径
R
と、小円の半径である 小半径r
(R
>r
) の 2 つの値が必要である。小円とは回転体の断面の円、大円は小円 の中心がなす円のことである。パラメータt
,p
（0≦t
≦2π , 0≦p
≦2π）を使えば， P(t,p)=(x,y,z)とし， x=(R + r cos p) cos t y=(R + r cos p) sin t z=rsin p と表現される． ５．２ 球の生成 球は，パラメータ t , p （0≦t≦2π , －π/2≦p≦π/2）を使えば，P(t,p)=(x,y,z) とし， x=r cos p cos t y=r cos p sin t z=rsin p と表現される． ５．３ 演習内容 演習（４－１）トーラスのモデルデータ生成プログラムの作成配布した void TrmPyramid(）および演習（２－３）で作成した void TrmCylinder(）を参考に， 大円の分割数 num1, 小円の分割数 num2 とするトーラスのモデルデータを生成する関数 void TrmTorus(float [][][] tr, int num1, int num2, float R, float r) を作成しなさい．
５－１での説明の P(t,p)を利用すれば，P(t,p), P(t+dt,p),P(t,p+dp)の３点から なる三辺形および P(t,p+dp)
，
P(t+dt,p),(t+dt,p+dp)の３点からなる３辺形を求め ればよい．三辺形に数は，num1*num2*2 となる．また，dt=2π/num1, dp=2π/num2 である． 演習（４－２）トーラスの描画 大円半径1（分割数 20），小円半径 0.2(分割数 10)でトーラスを以下の２行で生成し， Ps=new float[400][3][3]; TrmTorus(Ps,20,10,1,0.2); ４－９節での複合図形の方法を応用し，指定された図形を生成しなさい． 演習（４－３）球のモデルデータ生成プログラムの作成 これまでのモデルデータ生成関数を参考に，球のモデルデータを生成する関数void TrmSphere(float [][][] tr, int num, float r) を作成しなさい．ただし，分割数は緯度方向お よび経度方向ともに同じとし，num とする
５－１－２での説明の P(t,p)を利用すれば，P(t,p), P(t+d,p+d)
，
P(t,p+d)の３点 からなる三辺形および P(t,p)，
P(t+d,p), P(t+d,p+d)の３点からなる３辺形を求め ればよい．ただし，両極を含む場合の三辺形は，注意が必要である．北極の場合は， P(t,π
/2), P(t,π
/2‐d)，
P(t+d,π
/2‐d)となり，南極の場合は，P(t,‐π
/2+d),P(t,‐
