コンピューターグラフィックスＳ

Size: px

Start display at page:

Download "コンピューターグラフィックスＳ"

せせらちゅうか
6 years ago
Views:

プログラムを修正して以下の修正を行うウィンドウのタイトルに自分の学生番号が表示されるようにする三角形の色を青から黄に変更する 3.

1 前回の演習の復習今日の内容コンピューターグラフィックス S 第 7 回演習 (2): ポリゴンモデルの描画システム創成情報工学科尾下真樹前回の復習ポリゴンの描画方法 ( 復習 ) 基本オブジェクトの描画ポリゴンモデルの描画演習課題サンプルプログラム前回の演習の復習 opengl_sample.c 地面と枚の青い三角形が表示されるマウスの右ボタンドラッグで視点を上下に回転前回の演習課題. コンパイル実行できることを確認する 2. プログラムを修正して以下の修正を行うウィンドウのタイトルに自分の学生番号が表示されるようにする三角形の色を青から黄に変更する 3. 修正が終わったら Moodle からプログラムを提出演習資料 (3 種類 )( 確認 ) 演習資料 (OpenGL 演習 ) この資料に従ってプログラムを拡張していく次回以降の分の説明は逐次追加するコンパイル方法の説明資料コンパイル方法の詳しい説明 CL 端末や自宅での方法も一応説明 OpenGL 関数簡易リファレンス OpenGL の関数を簡単に説明した資料

initenvironment() 関数 displa() 関数 reshape() 関数 mouse() 関数 motion() 関数 idle() 関数 main() 関数ユーザプログラム初期化処理描画ウィンドウサイズ変更マウス処理アニメーション処理終了処理 GLUT glutmainloop() 入力待ち処理 // // ウィンドウ再描画時に呼ばれるコールバック関数 //

2 サンプルプログラムの構成 OpenGL の関数グローバル変数の定義コールバック関数 displa() reshape() mouse() motion() idle() initenvironment() main() opengl_sample.c gl~ で始まる関数 OpenGL の標準関数 glu~で始まる関数 OpenGL Utilit Librar の関数 OpenGLの関数を内部で呼んだり引数を変換したりすることで使いやすくした補助関数 glut~で始まる関数 GLUT(OpenGL Utilit Toolkit) の関数正式にはOpenGL 標準ではないサンプルプログラムの構成描画関数の流れ main() 関数 initenvironment() 関数 displa() 関数 reshape() 関数 mouse() 関数 motion() 関数 idle() 関数 main() 関数ユーザプログラム初期化処理描画ウィンドウサイズ変更マウス処理アニメーション処理終了処理 GLUT glutmainloop() 入力待ち処理 // // ウィンドウ再描画時に呼ばれるコールバック関数 // void displa( void ) // 画面をクリア ( ピクセルデータとZバッファの両方をクリア ) // 変換行列を設定 ( ワールド座標系カメラ座標系 ) // 光源位置を設定 ( モデルビュー行列の変更にあわせて再設定 ) // 地面を描画 // 変換行列を設定 ( 物体のモデル座標系カメラ座標系 ) // 物体 ( 枚のポリゴン ) を描画 // バックバッファに描画した画面をフロントバッファに表示今回の演習前回のプログラムの描画処理を枚のポリゴンの代わりにポリゴンモデルを描画するように変更変換行列については基本的に変更しない ( 詳しくは後日の講義で勉強してから ) 5 camera_pitch (0,,0) 前回の復習 2

3 頂点座標レンダリングパイプライン各頂点ごとに処理座標変換スクリーン座標レンダリングパイプライン各ポリゴンごとに処理ラスタライズ描画入力されたデータを流れ作業 ( パイプライン ) で処理し順次画面に描画 3 次元空間のポリゴンのデータ ( 頂点データの配列 ) を入力いくつかの処理を経て画面上に描画される座標変換処理の流れ頂点座標スクリーン座標 ( 法線色テクスチャ座標 ) 各頂点ごとに処理座標変換各ポリゴンごとに処理ラスタライズラスタライズ描画教科書基礎知識図 2-2 レンダリング Z バッファ法によるレンダリング基本的には OpenGL が自動的に Z バッファ法を用いたレンダリングを行うので自分のプログラムでは特別な処理は必要ない最初に Z テストを有効にするように設定する必要がある void initenvironment( void ) // Zテストを有効にする glenable( GL_DEPTH_TEST ); ポリゴンの描画 glbegin() ~ glend() 関数を使用 glbegin( 図形の種類 ); この間に図形を構成する頂点データを指定頂点データの指定では一つの関数で図形を構成する頂点の座標色法線などの情報の一つを指定図形の種類 ( 各種の点線面が指定可能 ) GL_POINTS( 点 ) GL_LINES( 線分 ) GL_TRIANGLES( 三角面 ) GL_QUADS( 四角面 ) GL_POLYGON( ポリゴン ) 他頂点データの指定 glcolor3f( r, g, b ) これ以降の頂点の色を設定 glnormal3f( n, n, n ) これ以降の頂点の法線を設定 glverte3f(,, ) 頂点座標を指定色法線は最後に指定したものが使用されるポリゴンの描画の例 () 枚の三角形を描画各頂点の頂点座標法線色を指定して描画ポリゴンを基準とする座標系 ( モデル座標系 ) で頂点位置法線を指定 glbegin( GL_TRIANGLES ); glcolor3f( 0.0, 0.0,.0 ); glnormal3f( 0.0, 0.0,.0 ); glverte3f(-.0,.0, 0.0 ); glverte3f( 0.0,-.0, 0.0 ); glverte3f(.0, 0.5, 0.0 ); (-,,0) (,0.5,0) (0,-,0) GL_TRIANGLES が指定されているので 3つの頂点をもとに枚の三角面を描画 (6つの頂点が指定されたら 2 枚描画 ) 3

ポリゴンの向き頂点の順番によりポリゴンの向きを決定表から見て反時計回りの順序で頂点を与える視点と反対の向きでなら描画しない ( 背面除去 ) 頂点の順序を間違えると描画されないので注意基本オブジェクトの描画 3 2 2 表 3 裏基本オブジェクトの描画 GLUT には基本的なポリゴンモデルを描画する関数が用意されている立方体球円すい 6 面体円環体ティーポット等

4 ポリゴンの向き頂点の順番によりポリゴンの向きを決定表から見て反時計回りの順序で頂点を与える視点と反対の向きでなら描画しない ( 背面除去 ) 頂点の順序を間違えると描画されないので注意基本オブジェクトの描画表 3 裏基本オブジェクトの描画 GLUT には基本的なポリゴンモデルを描画する関数が用意されている立方体球円すい 6 面体円環体ティーポット等あらかじめ用意されたポリゴンモデルを描画例 : glutwirecube(), glutsolidcube() それぞれワイヤーフレームとポリゴンモデルで立方体を描画する関数立方体の描画 glutsolidcube(sie) を使って立方体を描画 void displa( void ) // 変換行列を設定 ( 物体のモデル座標系カメラ座標系 ) //( 物体が (0.0,.0, 0.0) の位置にあり静止しているとする ) gltranslatef( 0.0,.0, 0.0 ); /* ポリゴンの描画はコメントアウト */ // 立方体を描画 glutsolidcube(.5f ); 球の描画 glutsolidsphere( radius, slices, stacks ) 球をポリゴンモデルで近似して描画どれだけ細かいポリゴンで近似するかを引数 slices, stacks で指定可能引数の値を変えてポリゴンモデルの変化を確認 void displa( void ) // 球を描画 glutsolidsphere(.0, 8, 8 ); 球の描画 glutsolidsphere( radius, slices, stacks ) 球をポリゴンモデルで近似して描画どれだけ細かいポリゴンで近似するかを引数 slices, stacks で指定可能引数の値を変えてポリゴンモデルの変化を確認 void displa( void ) // 球を描画 glutsolidsphere(.0, 6, 8, 86 ); ); 4

5 四角すいの描画ポリゴンモデルの描画四角すいを構成する頂点と三角面頂点座標面の頂点面の法線三角面 V3 V4 V0 (0.0, 0.8, 0.0) V2 V (.0, -0.8,.0) 法線 V0, V3, V 0.0, 0.53, 0.85 V0, V2, V4 0.0, 0.53, V0, V, V2 0.85, 0.53, 0.0 V0, V4, V3-0.85, 0.53, 0.0 V, V3, V2 0.0, -.0, 0.0 V4, V2, V3 0.0, -.0, 0.0 三面図面の法線の計算方法ポリゴンの 2 辺の外積から計算できる V N N=(V3 - V) ( V2 - V) V0 V4 V2 長さがになるよう正規化 V3(V4) V(V2) V3 V0 V V2 V3 断面で考えればもっと簡単に法線は求まる.8 N 平面は省略.0 いくつかの描画方法があるプログラムからOpenGLに頂点データを与える方法としていろいろなやり方がある形状データの表現方法の違い頂点データのみを使う方法と頂点データ+ 面インデックスデータを使う方法がある後者の方がデータをコンパクトにできる OpenGL へのデータの渡し方の違い OpenGL の頂点配列の機能を使うことでより高速に描画できる方法 : glverte() 関数に直接頂点座標を記述 5

6 方法 : glverte() 関数に直接頂点座標を記述方法最も基本的な描画方法サンプルプログラムと同様の描画方法 glverte() 関数の引数に直接頂点座標を記述ポリゴン数各ポリゴンの頂点数の数だけ glverte() 関数を呼び出す四角すいの描画 () 四角すいを描画する新たな関数を追加 void renderpramid() glbegin( GL_TRIANGLES ); // +Z 方向の面 glnormal3f( 0.0, 0.53, 0.85 ); glverte3f( 0.0,.0, 0.0 ); glverte3f(-.0,-0.8,.0 ); glverte3f(.0,-0.8,.0 ); 以下残りの 7 枚分のデータを記述四角すいの描画 (2) 描画関数から四角すいの描画関数を呼び出し修正の場所を間違えないように注意 renderpramid() 関数では色は指定されていないので呼び出す前に色を設定している void displa( void ) // 角すいの描画 renderpramid(); 方法 : glverte() 関数に直接頂点座標を記述方法 2 頂点データの配列を使用配列を使う方法頂点データを配列として定義しておく glverte() 関数の引数として配列データを順番に与える利点モデルデータが配列になってるので扱いやすい 6

7 頂点データの配列を使用 () 配列データの定義 // 全頂点数 const int num_full_vertices = 8; // 全頂点の頂点座標 static float pramid_full_vertices[][ 3 ] = 0.0,.0, 0.0, -.0,-0.8,.0,.0,-0.8,.0, -.0,-0.8,-.0,.0,-0.8,-.0, -.0,-0.8,.0 ; // 全頂点の法線ベクトル static float pramid_full_normals[][ 3 ] = 0.00, 0.53, 0.85, 0.00, 0.53, 0.85, 0.00, 0.53, 0.85, 0.00,-.00, 0.00, 0.00,-.00, 0.00, 0.00,-.00, 0.00 ; 各頂点ごとに繰り返し頂点データの配列を使用 (2) 各頂点の配列データを呼び出す void renderpramid2() int i; glbegin( GL_TRIANGLES ); for ( i=0; i<num_full_vertices; i++ ) glnormal3f( pramid_full_normals[i][0], pramid_full_normals[i][], pramid_full_normals[i][2] ); glverte3f( pramid_full_vertices[i][0], pramid_full_vertices[i][], pramid_full_vertices[i][2] ); 法線頂点を指定 (i 番目の頂点のデータを指定 ) 頂点データの配列を使用 (3) 描画関数から描画関数を呼び出し新しく追加した方の関数を使って描画するように修正実行結果の画像は変化しないことを確認 void displa( void ) // 角すいの描画 // renderpramid(); renderpramid2(); 方法 : glverte() 関数に直接頂点座標を記述ここまでの方法の問題点別の問題点ある頂点を複数のポリゴンが共有している時各ポリゴンごとに同じ頂点のデータを何度も記述する必要がある例 : 四角すいの頂点数は 5 個だがこれまでの方法では三角面数 6 3 個 =8 個の頂点を記述する必要がある OpenGL は与えられた全ての頂点に座標変換などの処理を適用するので同じモデルを描画する時でもなるべく頂点数が少ない方が高速方法 3 三角面インデックスを使用頂点とポリゴンの情報を別々の配列に格納頂点データの数を最小限にできる描画関数では配列のデータを順に参照しながら描画必要な配列 ( サンプルプログラムの例 ) 頂点座標 (,,) 頂点数三角面を構成する頂点番号 (v0,v,v2) 三角面数三角面の法線 (,,) 三角面数 7

8 三角面インデックス頂点データの配列と三角面インデックスの配列に分けて管理する面面 2 面 3 面 4 面 5 面 6 面面 2 面 3 面 4 面 5 面 6 頂点データ ( 座標, 法線, 色など ) 頂点の重複がある三角面インデックス何番目の頂点データを使うかという情報頂点の重複がなくなる頂点データ ( 座標, 法線, 色など ) 配列を使った四角すいの描画 () 配列データの定義 const int num_pramid_vertices = 5; // 頂点数 const int num_pramid_triangles = 6; // 三角面数 // 角すいの頂点座標の配列 float pramid_vertices[ num_pramid_vertices ][ 3 ] = 0.0,.0, 0.0,.0,-0.8,.0,.0,-0.8,-.0, ; // 三角面インデックス ( 各三角面を構成する頂点の頂点番号 ) の配列 int pramid_tri_inde[ num_pramid_triangles ][ 3 ] = 0,3,, 0,2,4, 0,,2, 0,4,3,,3,2, 4,2,3 ; // 三角面の法線ベクトルの配列 ( 三角面を構成する頂点座標から計算 ) float pramid_tri_normals[ num_pramid_triangles ][ 3 ] = 0.00, 0.53, 0.85, // +Z 方向の面各三角面ごとに繰り返し三角面の各頂点ごとに繰り返し配列を使った四角すいの描画 (2) 配列データを参照しながら三角面を描画 void renderpramid3() int i, j, v_no; 面の法線を指定 glbegin( GL_TRIANGLES ); (i 番目の面の for ( i=0; i<num_pramid_triangles; i++ ) データを指定 ) glnormal3f( pramid_tri_normals[i][0], [i][], [i][2] ); for ( j=0; j<3; j++ ) v_no = pramid_tri_inde[ i ][ j ]; glverte3f( pramid_vertices[ v_no ][0], [ v_no ][], 頂点番号を取得 (i 番目の面の j 番目の頂点が何番目の頂点を使うかを取得 ) 頂点座標を指定 (v_no 番目の頂点のデータを指定 ) 配列を使った四角すいの描画 (3) 描画関数から描画関数を呼び出し新しく追加した方の関数を使って描画するように修正実行結果の画像は変化しないことを確認 void displa( void ) // 角すいの描画 // renderpramid3(); 方法 : glverte() 関数に直接頂点座標を記述頂点配列を使った描画方法頂点配列配列データを一度に全部 OpenGL に渡して描画を行う機能頂点ごとに OpenGL の関数を呼び出して個別にデータを渡す必要がなくなる渡すデータの量は同じでも余分なオーバーヘッドを省けるため処理を高速化できるモバイル端末用の OpenGL ES ではこの頂点配列を使った描画しかできない (glverte() は使えない ) 詳細は本日の演習では省略 8

9 直方体の描画別のポリゴンモデルの描画別のポリゴンモデル ( 直方体 ) の描画枚は空欄にしているので各自適切な頂点番号を考えて追加する (-0.8, 2.0, -0.4) V7 V3 V V5 V6 V2(0.8, 2.0, 0.4) V4 V0(0.8, 0.0, 0.4) 四角面法線 V2, V3, V, V0 0.0, 0.0,.0 V7, V6, V4, V5 0.0, 0.0, -.0 V2, V0, V4, V6.0, 0.0, 0.0 V3, V7, V5, V -.0, 0.0, 0.0 V3, V2,? V6, V7 0.0,?.0, 0.0 V0, V, V5, V4 0.0, -.0, 0.0 三面図配列を使った直方体の描画 () V3(V7) 2 V2(V6) V5(V7) V4(V6) 描画方法方法 3 を使用法線や色の情報は面ごとに指定三角面の代わりに四角面を使用する 0.8 V(V5) 0 V0(V4) 0.4 V(V3) 0.4 V0(V2) 平面は省略 ( 確認 ) 方法 : glverte() 関数に直接頂点座標を記述配列を使った直方体の描画 (2) 配列データの定義四角面を使うので各面の頂点数が4 個になる const int num_cube_vertices = 8; // 頂点数 const int num_cube_quads = 6; // 四角面数 // 頂点座標の配列 float cube_vertices[ num_cube_vertices ][ 3 ] = 0.8, 0.0, 0.4, // 0-0.8, 2.0,-0.4, // 7 ; // 四角面インデックス ( 各四角面を構成する頂点の頂点番号 ) の配列 int cube_inde[ num_cube_quads ][ 4 ] = 2,3,,0, 7,6,4,5, 2,0,4,6, 3,7,5,,?,??,?,?, 0,,5,4 ; 9

配列を使った直方体の描画 (3) 配列データの定義 ( 続き ) 今回は各面の色も指定する // 四角面の法線ベクトルの配列 ( 四角面を構成する頂点座標から計算 ) float cube_normals[ num_cube_quads ][ 3 ] = 0.00, 0.00,.00, 0.00, 0.00,-.00, 0.00,-.00, 0.00 ; // 四角面のカラーの配列 float cube_colors[ num_cube_quads ][ 3 ] = 0.

10 配列を使った直方体の描画 (3) 配列データの定義 ( 続き ) 今回は各面の色も指定する // 四角面の法線ベクトルの配列 ( 四角面を構成する頂点座標から計算 ) float cube_normals[ num_cube_quads ][ 3 ] = 0.00, 0.00,.00, 0.00, 0.00,-.00, 0.00,-.00, 0.00 ; // 四角面のカラーの配列 float cube_colors[ num_cube_quads ][ 3 ] = 0.00,.00, 0.00,.00, 0.00,.00,.00,.00, 0.00 ; 配列を使った直方体の描画 (4) 配列データを参照しながら四角面を描画 void rendercube() int i, j, v_no; glbegin( GL_QUADS ); for ( i=0; i<num_cube_quads; i++ ) glnormal3f( cube_normals[i][0], [i][], [i][2] ); glcolor3f( cube_colors[i][0], [i][], [i][2] ); for ( j=0; j<4; j++ ) v_no = cube_inde[ i ][ j ]; glverte3f( cube_vertices[v_no][0], [v_no][], [v_no][2] ); 配列を使った直方体の描画 (5) 描画関数から直方体の描画関数を呼び出し色の指定は不要演習課題 void displa( void ) // 直方体を描画 rendercube(); ポリゴンモデルの描画ここまでのポリゴンモデルをまとめて描画変換行列を利用して 3つのポリゴンモデルを同時に描画変換行列については後日学習するので今回はサンプルプログラムをそのまま使用しておく右のスクリーンショットと同じ画面になるようにプログラムの空欄を埋める前回の演習課題のプログラムをもとに変更を加えるポリゴンモデルの描画ここまでのポリゴンモデルをまとめて描画変換行列を利用して 3 つのポリゴンモデルを同時に描画 void displa( void ) /* // 変換行列を設定 ( 物体のモデル座標系カメラ座標系 ) //( 物体が (0.0,.0, 0.0) の位置にあり静止しているとする ) gltranslatef( 0.0,.0, 0.0 ); */ これまでのポリゴンの描画はコメントアウト 0

11 // 球を描画 glpushmatri(); gltranslatef(.5,.0, -.0 );????????? glpopmatri(); // 角すいの描画 glpushmatri(); gltranslatef( -.5,.0, -.0 ); glcolor3f(???,????,??? ); renderpramid3(); glpopmatri(); // 直方体の描画 glpushmatri(); gltranslatef( 0.0, 0.0,.0 ); rendercube(); glpopmatri(); 演習課題の提出前回と同じく Moodle からプログラムを提出ファイル名は前回同様学生番号.c とする間違えて前回のファイルを提出しないように注意する講義時間中に提出できなかった人は 6 月日 ( 月 ) 8:00 までに提出演習問題と同様成績に加える未完成のプログラムが提出されていれば減点今回の演習課題ができていないと次回以降の演習もできないため必ず演習を行っておくこと文字化けについての注意まとめ日本語の文字化けが生じることがあるプログラムのコメント中の日本語の文字化け Moodle に提出したプログラムをダウンロードして編集 Windows でファイルを編集文字コードの異なる他のソフトからコピー & ペーストなどのことを行うと生じる可能性がある文字化けした状態で保存すると復元は不可能文字化けのないプログラムを提出すること万一文字化けが生じたら途中で保存したファイルや最初のファイルまで戻ってやり直す前回の復習前回の演習の復習ポリゴンの描画方法基本オブジェクトの描画ポリゴンモデルの描画演習課題座標変換次回予告ワールド座標系 ( モデル座標系 ) で表された頂点座標をスクリーン座標系での頂点座標に変換する演習問題プログラム演習を始める前に Moodle の演習問題に回答すること本講義時間中しか回答できない回答は講義終了後に表示されるワールド座標系カメラ座標系スクリーン座標系

コンピューターグラフィックスＳ

コンピューターグラフィックスＳ今日の内容コンピューターグラフィックス S 第 8 回 () システム創成情報工学科尾下真樹 28 年度 Q2 前回の復習演習 (2): ポリゴンモデルの描画変換行列の概要座標系視野変換射影変換のまとめ教科書 ( 参考書 ) コンピュータグラフィックス CG-ATS 協会編集出版 2 章ビジュアル情報処理 -CG 画像処理入門 - CG-ATS 協会編集出版章 (-2~-3