CG モデリングおよび演習 演習 部分 2014 年度版 1 演習の目的と内容コンピュータグラフィックス ( 以下,CG と書く ) の技術は, デザイン分野, ビジュアリゼーション ( 可視化 ) 分野, そして, エンタテイメント分野など幅広い分野に応用されている.CG 技術を利用するには, それを実現するソフトウェアが必要であるが,CG 関連のアプリケーションソフトウェアは,2 次元 3 次元を問わず様々なものが作成されている. CG に関する技術には大別して, コンピュータ内に形状を表現する技術: モデリング (Modeling), および, 画像として形状を表現する技術: レンダリング (Rendering) の2つがある 一般の CG ソフトには各々特徴とするところはあるが ほとんどの場合 これらの2つの機能が実装されている 本演習は, まず モデリングをつかさどる部分 ( これを, モデラ (Modeler) と言う ) の作成を通してその構造を理解する すなわち, いくつかの形状を表現するモデラを作成し 形状をどのようにコンピュータの内部で表現するか理解する 次いで, 表面の反射モデルによる質感表示を稼動化し3D オブジェクトのレンダリング表示のメカニズムを理解する なお, 本演習は, メディア演習 ⅠまたはⅡでおこなった CGのための基本プログラミング演習 および メディアプログラミング演習 を取得されていることを前提としている. 2 方法の概要本演習は, 各自のノート PC 上の processing 環境で実施する. 基本部分は配布する. なお本演習では, 配布したプログラムを作り変えることで演習を進める. 本演習書では, 手順や方法 作り変える位置や加える位置等を指定しながら解説する. プログラム作りに自信のある人は, 本書の指示と異なる方法にて進めてもよいが, 途中で破綻を来した場合は自己責任とする. また, 毎回 チェックシート を配布するので 当日記入し提出する. 3 基本的な 3D 形状の表示 ( 演習 1) 3.1 3D グラフィックスの扱い processing の 3D モードにおける座標系は, 図 1 に示す様に, ウインドウ左上が原点, 右方向が x 軸, 下方向が y 軸, 画面手前方向が z 軸である. 図 1 2D および 3D の座標系 図 2 は, 空間内の平面を描くプログラムの一部である. 空間内の平面は, その頂点を順に ( 表からみて反時計方向に ) 指定することにより描かれる. 頂点列は beginshape( ) から endshape( ) の間に指定する. beginshape の括弧内は, その点列をつなげてどのような形を形成するかを指定する. - 1 -
TRIANGLES は,3 頂点を指定して 3 辺形を,QUADS は 4 点を指定し 4 辺形を形成する. 他の指定方法の説明は省略する. void make3dshape() { // 空間内の平面 beginshape(quads); vertex( 1, 1, 0); 3.2 3D 表示方法 vertex( 1, 1, 0); プログラム cgm_simple_3d_shape は, この部 vertex( 1, 1, 0); 分を含み, 表示全体のプログラムである. vertex( 1, 1, 0); 文 size(800, 800, P3D); は扱う座標系が3 endshape(); 次元であることを指定する. nofill(); および stroke(255); は, 後に変更するが, 図形を 塗り潰しせず, 輪郭を白 で描くことを指定する. 図 2 サンプルプログラム関数 draw() では, まず, 投影法およびその範囲を指定し, 後に描画時の座標変換量を指定する. 関数内最後の make3dshape() 関数の呼び出しで実際の形状の描画を指定する.cgm_simple_3D_shape は, 図 2と同じであり, 空間中の4 点を指定し, その4 点を頂点とする平面を描く. 最後の関数 keypressed() は, 矢印キーにより回転角度を操作する関数であり, 実際の回転の指定は関数 draw() にある. また, 結果画像を表示中に画像にカーソルを置き, s キー を押すことにより, その画像がプログラムと同じフォルダーに格納される. 3.3 n 角錐の描画 xy 平面を底面 ( 半径 1) とし高さ 1 の角錐の描画モデルを図 3 に示す.n 角錐は, 周りの n 個の三辺形, および, 底辺から成り立っている (cos( dt *( i + 1)),sin( dt *( i + 1)),0) Z 3 (0,0,1) (cos( dt * i),sin( dt * i),0) (0,0,0) 2 4 1 2π dt = n X 図 3.n 角錐の各頂点の座標計算法 図 3 に示す様に, 周りの i 番目の三辺形の三頂点 123 は, 以下の通りとなる. (cos( dt * i),sin( dt * i),0), (cos( dt *( i + 1)),sin( dt *( i + 1)),0), ( 0,0,1 ) また, 底辺は n 辺形であるので, 同様に n 個の三辺形で表現すると,i 番目三辺形の頂点 124 は, 以下となる. - 2 -
(cos( dt * i),sin( dt * i),0), (cos( dt *( i + 1)),sin( dt *( i + 1)),0), ( 0,0,0) 図形描画の中心部を図 4 に示す. ここで, 座標値は配列で表現し, 要素 [0] には x の値を, 要素 [1] には y の値を, 要素 [2] には z の値を格納することとする. 演習 1-1 n 角錐 ( 底面の半径 1, 高さ1) のワイヤフレームを描く関数 drawcone() の虫食い版が cgm_simple_3d_shape にある. これを完成させなさい. 関数 drawcone() 中, 変数 n が分割数 (24 になっている ),dti は前述の dt*i を,dtip1 は同様に dt*(i+1) を表す変数である. 図 3において, 1の座標値を求める部分は P1[0]=sin(dti); P1[1]=cos(dti); P1[2]=0; となる. 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(); 図 4 n 角錐の描画 演習 1-2 関数 drawcone() を参考に, 円柱を描く関数 drawcylinder() を完成させ,48 角柱を描きなさい ( 関数 drawcylinder() の雛形は, 関数 drawcone() の後にある. 考え方は図 5 参照 ). 4 Z 3 5 2 6 1 X 図 5.n 角錐の各頂点番号 - 3 -
4 モデルとモデル表示関数の作成 ( 演習 2) 4.1 概要演習 1での描画は, 立体の頂点座標を計算しながら表示した. これでは, 例えば, 視点変更などで, 再描画のたびに頂点の全てを計算し直す必要がある. 簡単な図形ならまだしも, 複雑な図形の場合, 計算のために多くの時間を必要とし描画速度も落ちる. そこで, 頂点計算のプロセス と 描画のプロセス を分離することを考える. すなわち, (1) 様々な立体が表現できる共通の データ構造 を設計する ( これをモデルという ), (2) このデータ構造体に, 頂点データ等を計算し必要な値を格納する, (3) モデルに蓄えられた頂点等を参照しそれを描く, の3つ分ける. この (1),(3) は, 一つ作成すればよく, 表現する立体毎に (2) を作成すればよいことになる. この状況を図示すると図 6のようになる. 本章の演習では, 基本面を3 辺形としたポリゴンモデルの導入とモデルの表示部分をインプリメントする. 図 6. モデルとモデルデータの生成と形状表示 4.2 3 辺形モデル - データ構造 - 三辺形モデルの各要素として, 以下の図 7 の構造体を考える. 三辺形 Tr[n] 第 1 点 Tr[0] 第 2 点 Tr[1] 第 3 点 Tr[2] x 座標 y 座標 z 座標 x 座標 y 座標 z 座標 x 座標 y 座標 z 座標 Tr[0][0] Tr[0][1] Tr[0][2] Tr[1][0] Tr[1][1] Tr[0][2] Tr[2][0] Tr[2][1] Tr[0][2] 図 7 3 辺形ポリゴンモデルの構造 - 4 -
4.3 モデル描画プログラム先に,4.2 節で示したモデルを表示する関数 draw_triangle を説明する. 図 8に示したプログラムが, その中心となる部分である. この関数では,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(); 図 8. 関数 draw_triangleの雛形 4.4 モデルデータ作成関数のサンプル底辺中心を原点とするN 角錐の形状を, 前述のモデルに格納する関数が一つ用意されている. TrmPyramid(float [][][] tr, int num, float h, float r) //num: 角数, h: 高さ, r: 底面半径 4.5 プログラム全体の概要 演習 2 で作成するプログラムの全体概形は図 9 となる. /* 略 */ 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) { /* 本体 */ - 5 -
void TrmPyramid(float[][][] tr, int num, float h, float r) { /* 本体 : 提供する */ // キー操作, 立体回転 ( 矢印 ) とフレーム画像格納 (s) /* 略 */ 図 9. 演習 2 で完成するプログラムの概形 4.6 演習内容これまでの, 説明に基づき, 下記 3 項目を行う. ( 演習 2-1) モデルの理解 4.1 節の説明を理解し, 配布した雛形 Tri_Model_Base と対応させる. ( 演習 2-2) モデル描画プログラムの作成 4.3 節の説明に基づき雛形内の関数 draw_triangle を完成させる.4.3 節で示したように, この関数は,2 番目の面のみ (n=1) を表示するように作られているので, すべての面 を表示するように改良する. これらを用いて24 角錐を表示しなさい. ( 演習 2-3) モデルデータ生成プログラムの作成配布した void TrmPyramid() および演習 (1-2) を参考に,n 角柱のモデルデータを生成する関数 void TrmCylinder(float [][][] tr, int num, float h, float r) を作成する. ただし, 底面は,z=0および z=h(hはパラメータ ( 高さ ) で指定 ) とする. それらを用いて40 角柱 ( 高さは1) を表示しなさい. 底面および上面のデータ生成を忘れないように. - 6 -
4.7 レンダリング表示前演習では,3 次元の滑らかな形状として円柱と円錐の表面を三辺形で近似し, モデルデータを生成し, 各々をワイヤフレーム表示した. 次いで, 各々の3 辺形を光環境と表面属性とを考慮した 明るさ をもつ色で塗り潰す. これにより立体のレンダリング表示を行う. * ランバート反射物体の表面がランバート反射するとは, その面に入射する光が散乱する状況を呼ぶ. この散乱では, 表面の輝度は, 視点位置に依らす, 光線方向のみで定まる. コンピュータグラフィックスでは, ランバート反射は拡散反射のモデルとしてよく使われる. この反射は, 面の正規化法線ベクトル N( 次で説明する ) と光の方向を表す正規化ベクトル L の内積として次式で定義される. ID=L N (1) ここで,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 (2) として, 法線ベクトルは定義される. ここで は外積である. 内積と外積 a=(a1,a2,a3), b=(b1,b2,b3) としたとき, 内積 :a b= a1b1 + a2b2 + a3b3 外積 :a b=(a2b3 - a3b2, a3b1 - a1b3, a1b2 - a2b1) 図 11 法線ベクトル 演習 (3-1) 法線ベクトルを求める関数の作成 三辺形 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 を計算 ( 正規化する ) 図 12 関数 void Nomal の雛形 - 7 -
演習 (3-2) レンダリング表示の関数の作成演習 2-2で作成した関数 draw_triangle を基に, 各三辺形をレンダリング表示する関数 rend_triangle を作成する. ランバートモデルでのレンダリングには, 光の方向の単位ベクトルが必要である. そこで, 1 プログラムの先頭部分に float[] Light={ 1,0, 0.2; として, 光線ベクトルを定義する. 単位ベクトル化はプログラムで行う. このために, 関数 setup() 内に, 以下を加える. 2 float l=sqrt(light[0]*light[0]+light[1]*light[1]+light[2]*light[2]); Light[0]/=l; Light[1]/=l; Light[2]/=l; 1 行目は, 光源ベクトルの大きさをもとめ,2 行目の各文で正規化している. 関数 rend_triangle() の構造は以下の通りとなる. 以下は,2 番目の面のみレンダリングする. 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(); // ここまで. 図 13 関数 void rend_triangle の雛形 関数 rend_triangle を完成させ, さらに, 関数 draw の中の関数 draw_triangle(...) を rend_triangle(...) に変更し,40 角柱をレンダリング表示しなさい. また,60 角錐をレンダリング表示しなさい. - 8 -
4.8 色付け表示演習 (3-2) までにおいて, 立体を3 辺形モデルで表現し, そのモデルの表示が可能となった. 前演習では,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); 図 14: 色付け のように, 色の指定 描画 と行えるようにするために, 全域変数 float[] col={1,1,1; を用意し, また, void setcolor(float r, float g, float b) { 図 15: 色設定 col[0]=r; col[1]=g; col[2]=b; を用意すればよいことになる. 演習 (3-3) 色付け円錐前述のプロセスを実現し, 赤い24 角錐 を描きなさい - 9 -
4-9 複数図形 いつか図形を同時に描くことを考える. 演習 (3-4) 複合図形の描画 void draw() の実際に描画する部分を以下の図 16 としてみる // 立体を描画 scale(0.5,0.5,0.5); setcolor(1,0,0); rend_triangle(py,100); // 円錐 1 setcolor(0,1,0); translate(2,0,0); rend_triangle(py,100); // 円錐 2 setcolor(0,0,1); translate( 4,0,0); rend_triangle(py,100); // 円錐 3 図 16 複合図形の描画 上のメカニズムを理解し, 円柱, 円錐からなる 3 次元オブジェクト を作成しなさい. - 10 -
5 新しい形状生成と複数図形 5.1 トーラスの生成 トーラスの形と大きさを示すには大円の半径である大半径 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 と表現される. 5.2 球の生成球は, パラメータ 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 と表現される. 5.3 演習内容 演習 (4-1) トーラスのモデルデータ生成プログラムの作成 配布した void TrmPyramid() および演習 (2-3) で作成した void TrmCylinder() を参考に, 大円の分割数 num1, 小円の分割数 num2 とするトーラスのモデルデータを生成する関数 void TrmTorus(float [][][] tr, int num1, int num2, float R, float r) を作成しなさい. 5-1 での説明の P(t,p) を利用すれば,P(t,p), P(t+dt,p),P(t,p+dp) の 3 点からなる三辺形および P(t,p+dp),P(t+dt,p),(t+dt,p+dp) の 3 点からなる 3 辺形を求めればよい. 三辺形に数は,num1*num2*2 となる. また,dt=2π/num1, dp=2π/num2 である. 演習 (4-2) トーラスの描画大円半径 1( 分割数 20), 小円半径 0.2( 分割数 10) でトーラスを以下の 2 行で生成し, Ps=new float[400][3][3]; TrmTorus(Ps,20,10,1,0.2); 4-9 節での複合図形の方法を応用し, 指定された図形を生成しなさい. 演習 (4-3) 球のモデルデータ生成プログラムの作成 これまでのモデルデータ生成関数を参考に, 球のモデルデータを生成する関数 void TrmSphere(float [][][] tr, int num, float r) を作成しなさい. ただし, 分割数は緯度方向および経度方向ともに同じとし,num とする 5-1-2での説明の P(t,p) を利用すれば,P(t,p), P(t+d,p+d),P(t,p+d) の3 点からなる三辺形および P(t,p),P(t+d,p), P(t+d,p+d) の3 点からなる3 辺形を求めればよい. ただし, 両極を含む場合の三辺形は, 注意が必要である. 北極の場合は, P(t,π/2), P(t,π/2 d),p(t+d,π/2 d) となり, 南極の場合は,P(t, π/2+d), - 11 -
P(t, π/2),p(t+d,π/2+d) となる. よって, 三辺形の数は,num*(num-2)*2+2*num となる. 演習 (4-4) 球の描画 4-9 での複合図形の方法を応用し, 並んだ 3 球 の図形を生成しなさい. 位置, 大きさは任意とする. 演習 (4-5) 複合自由三次元形状のモデリングとその描画これまでの基本形状 ( 角柱, 角錐, トーラス, 球 ) をおのおの 3 つ以上用いた任意の形状を作成し描画しなさい. 視点および光源を変えて, 見栄えする画像を数点レポートしなさい. - 12 -