GUI プログラミング第 4 回演習 3DChemical ~ OpenGL(JOGL) による 3D 描画 : 水の化学式モデルを書いてみる ~ 104.45 実際は背景は黒くする <Eclipse を起動する > 1.eclipse.zip を D: ドライブにコピーし 右クリック ここに解凍 2.workspace を S: ドライブから D: ドライブにコピー 3.eclipse.exe を起動 4.workspace を D:workspace に設定 <ステップ> ステップ 1-1 O 原子となる球を1つ描画ステップ 1-2 水の化学式モデルを描画ステップ 2 マウスで回転できるようにするステップ 3 描画した立体の 2D 上の表示位置を取得し 元素名を 2D 描画する -1-
3D 描画 Step1-1 まず O 原子となる球を 1 つ描画する <WaterPanel.java の作成 > 1.Chemical プロジェクトをインポート 共有フォルダから Chemical.zip をコピーして workspace 内にはりつけ パッケージ エクスプローラで右クリック インポート 一般 既存のプロジェクトをワークスペースへ 次へ アーカイブ ファイルの参照から D:workspace Chemical.zip を選択して開く 完了 ボタンを押下 2. パッケージを作成 src フォルダを選択 右クリック 新規 パッケージパッケージ名 water 3.WaterPanel クラスを作成 GLJPanel を継承 (extends) GLEventListener, MouseListener, MouseMotionListener を実装 (implements) したクラス water パッケージを選択 右クリック 新規 クラス クラス名 WaterPanel スーパークラスの参照をクリック GLJPanel とうつと javax.media.opengl の GLJPanel が出てくるので それを選択して OK インターフェースの追加をクリック GLEventListener で出てくるクラスを選択して 追加 MouseListener で出てくるクラスを選択して 追加 MouseMotionListener で出てくるクラスを選択して 追加 OK 完了 ボタンを押下 4. ソースを編集 ( 次ページ以降を参照 ) 変数 コンストラクタ init メソッド reshape メソッド display メソッドの順に記述すると理解しやすい 5.WaterFrame.java の作成へ -2-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 WaterPanel.java package chemical.water; import java.awt.event.mouseevent; import java.awt.event.mouselistener; import java.awt.event.mousemotionlistener; import javax.media.opengl.gl; import javax.media.opengl.glautodrawable; import javax.media.opengl.gleventlistener; import javax.media.opengl.gljpanel; import javax.media.opengl.glu.glu; import com.sun.opengl.util.glut; public class WaterPanel extends GLJPanel implements GLEventListener, MouseListener, MouseMotionListener { private GL gl; // OpenGL の関数群をもつオブジェクトその1 private GLU glu; // OpenGL の関数群をもつオブジェクトその2 private GLUT glut; // OpenGL の関数群をもつオブジェクトその3 private int div = 20; // 球 円柱の分割数 // 軸と O-H のなす角 ( 水の O-H がなす角は 104.45 度 ) private float degree = (180-104.45f)/2.0f; /* 光 ---------------------------------------------------- // 光の位置 {x 座標, y 座標, z 座標, 光源までの距離 (0 は無限円 ) private float[] lposition = { -10.0f, 10.0f, 10.0f, 0.0f ; // 光の色 {R, G, B, アルファ ( 透明度 ) 数値は 0 から 1 まで private float[] lspecular = { 0.8f, 0.8f, 0.8f, 1.0f ; // 鏡面 private float[] ldiffuse = { 0.8f, 0.8f, 0.8f, 1.0f ; // 拡散 private float[] lambient = { 0.4f, 0.4f, 0.4f, 1.0f ; // 環境 /* 物体の反射率 ------------------------------------------- // {R, G, B, アルファ ( 透明度 ) 数値は 0 から 1 まで private float[] mspecular = { 0.3f, 0.3f, 0.3f, 1.0f ; // 鏡面 private float[] mdiffuse = { 0.2f, 0.2f, 0.2f, 1.0f ; // 拡散 // 鏡面係数 : きらめきの度合い (0~128) private float mshininess = 10.0f; /* 色の定義 ----------------------------------------------- // {R, G, B, アルファ ( 透明度 ) 数値は 0 から 1 まで private float[] blue = { 0.0f, 0.0f, 1.0f, 1.0f ; // 青 private float[] red = { 1.0f, 0.0f, 0.0f, 1.0f ; // 赤 private float[] green = {0.0f, 1.0f, 0.5f, 1.0f ; // 緑 * コンストラクタ public WaterPanel() { // MouseEvent を受け取れるようにする addmouselistener(this); // MouseMotionEvent を受け取れるようにする addmousemotionlistener(this); // 3D 描画できるようにリスナ登録 addgleventlistener(this); /* 3D 描画 *********************************************************** * GLEventListener のメソッド :3D 描画メソッド -3-
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 WaterPanel.java public void display(glautodrawable drawable) { // 背景色で塗りつぶし gl.glclear(gl.gl_color_buffer_bit GL.GL_DEPTH_BUFFER_BIT); // 現時点のマトリクス (Modelview 行列 ) を保存 必ず glpopmatrix() と対で使用する /* glpushmatrix と glpopmatrix() は 座標を回転したり平行移動したり * したものを する前の状態を覚えておくために使う * これを使わないと 回転などがどんどん重なっていってしまう // z 軸上 15 の位置から原点を見る, 上方向は y 軸 // glulookat( 視点の位置 x,y,z, 視点から見る座標 x,y,z, 上方向ベクトル x,y,z) glu.glulookat(0.0, 0.0, 15.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); // y 軸正方向に少しずらす ( 平行移動 ) gl.gltranslatef(0.0f, 0.4f, 0.0f); /* O 原子を原点に描画 ------------------------- // 色指定 環境光の反射率とは つまり物体の色になる gl.glmaterialfv(gl.gl_front, GL.GL_AMBIENT, red, 0); // 塗りつぶしの球を描画 // glutsolidsphere( 半径, Z 軸まわりの分割数, Z 軸に沿った分割数 ) glut.glutsolidsphere(0.3, div, div); // glpushmatrix() を呼ぶ前の行列の状態に戻す * GLEventListener のメソッド : 表示の切り替えが発生した場合に呼ばれる * 今回は特に記述することはない public void displaychanged(glautodrawable drawable, boolean modechanged, boolean devicechanged) { * GLEventListener のメソッド : 初期化時に呼ばれる public void init(glautodrawable drawable) { // OpenGL の関数群をもつオブジェクトを取得 gl = drawable.getgl(); glu = new GLU(); glut = new GLUT(); // 背景色を黒に設定 gl.glclearcolor(0.0f, 0.0f, 0.0f, 0.0f); // 影に隠れて見えないものは表示しない gl.glenable(gl.gl_depth_test); // 光を有効にする gl.glenable(gl.gl_lighting); gl.glenable(gl.gl_light0); // 光の反射の法線ベクトルを正規化 gl.glenable(gl.gl_normalize); // 光の位置を設定 /* 4 番目の数字はオフセット * JOGL は c++ のソースを JAVA に自動変換している * c++ では配列はポインタなので オフセットの概念がある * JAVA にポインタはないので引数が増やされているのだが * オフセットの数字は 0 でよい gl.gllightfv(gl.gl_light0, GL.GL_POSITION, lposition, 0); // 光の色を設定 gl.gllightfv(gl.gl_light0, GL.GL_SPECULAR, lspecular, 0); // 鏡面 gl.gllightfv(gl.gl_light0, GL.GL_DIFFUSE, ldiffuse, 0); // 拡散 -4-
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 WaterPanel.java gl.gllightfv(gl.gl_light0, GL.GL_AMBIENT, lambient, 0); // 環境 // 物体の反射率を設定 gl.glmaterialfv(gl.gl_front, GL.GL_SPECULAR, mspecular, 0); // 鏡面 gl.glmaterialfv(gl.gl_front, GL.GL_DIFFUSE, mdiffuse, 0); // 拡散 gl.glmaterialf(gl.gl_front, GL.GL_SHININESS, mshininess); // 鏡面係数 * GLEventListener のメソッド : 表示領域が変更されたときに呼ばれる public void reshape(glautodrawable drawable, int x, int y, int width, int height) { // ビューポート ( 描画領域 ) を設定 gl.glviewport(0, 0, width, height); // マトリクスとして Projection 行列を対象にする gl.glmatrixmode(gl.gl_projection); // マトリクスを単位行列で初期化 gl.glloadidentity(); // 視点の設定 ( 参考資料を参照 ) // gluperspactive( 視野角, 縦横比, near, far); glu.gluperspective(10.0, (double)width/(double)height, 1.0, 100.0); // マトリクスとして ModelView 行列を対象にする gl.glmatrixmode(gl.gl_modelview); /* MouseListener のメソッド ************************************************* public void mouseclicked(mouseevent e) { public void mouseentered(mouseevent e) { public void mouseexited(mouseevent e) { public void mousepressed(mouseevent e) { public void mousereleased(mouseevent e) { /* MouseMotionListener のメソッド ************************************************ public void mousedragged(mouseevent e) { -5-
193 194 195 196 197 198 199 WaterPanel.java public void mousemoved(mouseevent e) { <WaterFrame.java の作成 > 1. フレームを作成 chemical パッケージ選択 右クリック 新規 その他を選択 GUI Forms Swing JFrame を選んで 次へ Class Name は WaterFrame として 完了 2.Jigloo のメッセージが出てきたら OK 3.Look&Feel( プログラムの見た目 ) を設定フレームを選択 右クリック Set Look&Feel Windows を選択 4. レイアウトを設定フレームを選択 右クリック Set Layout BorderLayout を選択 5. フレームのサイズを大きめにするソースの方をみて initgui() の中の下の方にあるサイズ指定部分を編集 setsize(400,300); setsize(400,400); 6. フレームのプレビューに戻り パネルを South に追加上部の Containers 右から 5 番目の JPanel を選び フレームに貼り付ける名前は southpanel Constraints の中の direction に South を選択パネルの縦幅はボタンがひとつ入る位にしておく 7.WaterPanel を Center に追加フレームを選択 ( 中央をクリック ) 右クリック Add Add Custom Add custom class or layout を選択 WaterPanel と入力して OK 名前を centerpanel とし Constraints の中の direction が Center になっていることを確認して OK 8.southPanel にボタンを追加 Step2 以降で使うのもだが ここで追加しておく Components の一番左にある JButton を選んで southpanel に貼り付け名前 resetbutton テキスト 元に戻す 9. ボタンが押されたときに実行されるメソッドのひな型を作成 resetbutton を選択し Event Name のリスト中の ActionListner を開いて actionperformed を inline に設定する 10. 実行する 11. 描画を確認 -6-
3D 描画 Step1-2 水の化学式モデルを描画する < 円柱の描画 ポリゴンについて > OpenGL において例えば立方体を描画したい場合 glut.glutwirecube(2.0f); のように関数を 1 つ利用すれば描画できる このようにあらかじめ用意されている立体は 立方体 4 面体 8 面体 12 面体 20 面体 円錐 球 ドーナツ型 ティーポット である この中に円柱は含まれていないので ポリゴン で表現する ポリゴンとは 多角形のことで 複雑なモデルを構成するために使う CG では普通 3 角形と 4 角形を要素として組み合わせて物体を表現する どのような曲面も 小さいポリゴンに分割することで擬似的に曲面として描画できる ポリゴンでつくられた曲面の例 今回は 原子を結ぶ線を円柱で表現する この円柱は 円柱を縦に小さく分割するような四角形を連続描画することで疑似的に表現する ポリゴンを使った OpenGL の実際の描画は gl.glbegin( モード ) gl.glend() の構文で書く 主なモードは次の表のようになる モード 意味 GL.GL_POLYGON 凸多角形 ( 頂点を右回りで指定 ) GL.GL_LINE_STRIP 折れ線 ( 頂点を順次指定 ) GL.GL_TRIANGLE_STRIP 隣接した 3 角形 GL.GL_QUAD_STRIP 隣接した 4 角形 GL.GL_TRIANGLE_FAN 隣接した 3 角形 ( 扇形 ) gl.glbegin と gl.glend() の間で glvertex3f(x 1, y 1, z 1 ); を何度もよびだし 頂点を順に指定していく 各モードごとの頂点の指定順は次ページの表のとおり -7-
頂点指定の順番 GL_TRIANGLE_STRIP GL_QUAD_STRIP GL_TRIANGLE_FAN < 作成手順 > WaterPanel.java に必要部分を書きたす -8-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 package chemical.water; import java.awt.event.mouseevent; import java.awt.event.mouselistener; import java.awt.event.mousemotionlistener; import javax.media.opengl.gl; import javax.media.opengl.glautodrawable; import javax.media.opengl.gleventlistener; import javax.media.opengl.gljpanel; import javax.media.opengl.glu.glu; import com.sun.opengl.util.glut; public class WaterPanel extends GLJPanel implements GLEventListener, MouseListener, MouseMotionListener { private GL gl; // OpenGL の関数群をもつオブジェクトその1 private GLU glu; // OpenGL の関数群をもつオブジェクトその2 private GLUT glut; // OpenGL の関数群をもつオブジェクトその3 private int div = 20; // 球 円柱の分割数 // 軸と O-H のなす角 ( 水の O-H がなす角は 104.45 度 ) private float degree = (180-104.45f)/2.0f; /* 光 ---------------------------------------------------- // 光の位置 {x 座標, y 座標, z 座標, 光源までの距離 (0 は無限円 ) private float[] lposition = { -10.0f, 10.0f, 10.0f, 0.0f ; // 光の色 {R, G, B, アルファ ( 透明度 ) 数値は 0 から 1 まで private float[] lspecular = { 0.8f, 0.8f, 0.8f, 1.0f ; // 鏡面 private float[] ldiffuse = { 0.8f, 0.8f, 0.8f, 1.0f ; // 拡散 private float[] lambient = { 0.4f, 0.4f, 0.4f, 1.0f ; // 環境 /* 物体の反射率 ------------------------------------------- // {R, G, B, アルファ ( 透明度 ) 数値は 0 から 1 まで private float[] mspecular = { 0.3f, 0.3f, 0.3f, 1.0f ; // 鏡面 private float[] mdiffuse = { 0.2f, 0.2f, 0.2f, 1.0f ; // 拡散 // 鏡面係数 : きらめきの度合い (0~128) private float mshininess = 10.0f; /* 色の定義 ----------------------------------------------- // {R, G, B, アルファ ( 透明度 ) 数値は 0 から 1 まで private float[] blue = { 0.0f, 0.0f, 1.0f, 1.0f ; // 青 private float[] red = { 1.0f, 0.0f, 0.0f, 1.0f ; // 赤 private float[] green = {0.0f, 1.0f, 0.5f, 1.0f ; // 緑 * コンストラクタ public WaterPanel() { // MouseEvent を受け取れるようにする addmouselistener(this); // MouseMotionEvent を受け取れるようにする addmousemotionlistener(this); // 3D 描画できるようにリスナ登録 addgleventlistener(this); /* 3D 描画 *********************************************************** * x 軸周りに円柱を描画 -9-
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 * @param r 円柱の半径 * @param length 円柱の長さ * @param offset offset x offset+length に描かれる public void drawcylinder(float r, float length, float offset) { double t; // 要素として連続する四角形を使う gl.glbegin(gl.gl_quad_strip); for (int i=0; i<=div; i++) { // 角度を計算 ( ラジアン ) t = 2.0 * Math.PI * i / div; // 光の反射の法線ベクトル gl.glnormal3f(0, (float)math.cos(t), (float)math.sin(t)); // 頂点を設定 gl.glvertex3f(offset, (float)(r*math.cos(t)), (float)(r*math.sin(t))); gl.glvertex3f(offset+length, (float)(r*math.cos(t)), (float)(r*math.sin(t))); gl.glend(); * GLEventListener のメソッド :3D 描画メソッド public void display(glautodrawable drawable) { // 背景色で塗りつぶし gl.glclear(gl.gl_color_buffer_bit GL.GL_DEPTH_BUFFER_BIT); // 現時点のマトリクス (Modelview 行列 ) を保存 必ず glpopmatrix() と対で使用する /* glpushmatrix と glpopmatrix() は 座標を回転したり平行移動したり * したものを する前の状態を覚えておくために使う * これを使わないと 回転などがどんどん重なっていってしまう // z 軸上 15 の位置から原点を見る, 上方向は y 軸 // glulookat( 視点の位置 x,y,z, 視点から見る座標 x,y,z, 上方向ベクトル x,y,z) glu.glulookat(0.0, 0.0, 15.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); // y 軸正方向に少しずらす ( 平行移動 ) gl.gltranslatef(0.0f, 0.4f, 0.0f); /* 棒 1 を描画 (z 軸周りに-degree 度回転 )---------- // ModelView 行列保存 // 色指定 環境光の反射率とは つまり物体の色になる gl.glmaterialfv(gl.gl_front, GL.GL_AMBIENT, green, 0); // 座標軸を z 軸周りに-degree 度回転 // 2,3,4 番目の引数は回転軸を表す ( 順に x, y, z) gl.glrotatef(-degree, 0.0f, 0.0f, 1.0f); // 半径 0.07 の円柱を 0 x 1 に描画 drawcylinder(0.07f, 1.0f, 0.0f); // 行列を保存した時の状態に戻す /* 棒 2 を描画 (z 軸周りに degree 度回転 )---------- gl.glmaterialfv(gl.gl_front, GL.GL_AMBIENT, green, 0); gl.glrotatef(degree, 0.0f, 0.0f, 1.0f); drawcylinder(0.07f, 1.0f, -1.0f); // -1 x 0 /* O 原子を原点に描画 ------------------------- gl.glmaterialfv(gl.gl_front, GL.GL_AMBIENT, red, 0); // 塗りつぶしの球を描画 // glutsolidsphere( 半径, Z 軸まわりの分割数, Z 軸に沿った分割数 ) glut.glutsolidsphere(0.3, div, div); -10-
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 // H 原子 1 を描画 ----------------------------- gl.glmaterialfv(gl.gl_front, GL.GL_AMBIENT, blue, 0); gl.glrotatef(-degree, 0.0f, 0.0f, 1.0f); gl.gltranslatef(1.0f, 0.0f, 0.0f); // x 方向に 1 だけ平行移動 glut.glutsolidsphere(0.2, div, div); // H 原子 2 を描画 ----------------------------- gl.glmaterialfv(gl.gl_front, GL.GL_AMBIENT, blue, 0); gl.glrotatef(degree, 0.0f, 0.0f, 1.0f); gl.gltranslatef(-1.0f, 0.0f, 0.0f); // x 方向に-1 だけ平行移動 glut.glutsolidsphere(0.2, div, div); // glpushmatrix() を呼ぶ前の行列の状態に戻す ( 以下は変更ないので略 ) -11-