3D 描画 Step1-1 まず O 原子となる球を 1 つ描画する <WaterPanel.java の作成 > 1.Chemical プロジェクトをインポート共有フォルダから Chemical.zip をコピーして workspace 内にはりつけパッケージエクスプローラで右クリックイン

Size: px

Start display at page:

Download "3D 描画 Step1-1 まず O 原子となる球を 1 つ描画する <WaterPanel.java の作成 > 1.Chemical プロジェクトをインポート共有フォルダから Chemical.zip をコピーして workspace 内にはりつけパッケージエクスプローラで右クリックイン"

きみとししまむね
6 years ago
Views:

GUI プログラミング第 4 回演習 3DChemical ~ OpenGL(JOGL) による 3D 描画 : 水の化学式モデルを書いてみる ~ 104.45 実際は背景は黒くする <Eclipse を起動する > 1.eclipse.zip を D: ドライブにコピーし右クリックここに解凍 2.

1 GUI プログラミング第 4 回演習 3DChemical ~ OpenGL(JOGL) による 3D 描画 : 水の化学式モデルを書いてみる ~ 実際は背景は黒くする <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-

2 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-

3 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 がなす角は度 ) private float degree = ( f)/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-

4 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-

5 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-

6 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-

7 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-

8 頂点指定の順番 GL_TRIANGLE_STRIP GL_QUAD_STRIP GL_TRIANGLE_FAN < 作成手順 > WaterPanel.java に必要部分を書きたす -8-

9 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 がなす角は度 ) private float degree = ( f)/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-

10 r 円柱の半径 length 円柱の長さ 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-

11 // 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-

このような回転や平行移動による座標変換の情報は ModelView 行列が持っている ModelView 行列は gl.glpushmatrix() でいったん保存しておき回転や平行移動を重ねて描画した後 gl.glpopmatrix() で保存した状態に戻すことができるワールド座標系とウィ

このような回転や平行移動による座標変換の情報は ModelView 行列が持っている ModelView 行列は gl.glpushmatrix() でいったん保存しておき回転や平行移動を重ねて描画した後 gl.glpopmatrix() で保存した状態に戻すことができるワールド座標系とウィ 3D 描画 Step3 元素名を 2D 描画する OpenGL には文字描画の概念がないこと元素名は回転してほしくないことの 2 点の理由から元素名は 2D 描画するそのために原子の 3 次元空間の座標から文字を描画するウィンドウ上の座標を求める < 座標変換について > 座標変換についてまとまった詳しい解説は OpenGL による 3D 描画の基礎知識の 3 ページ以降に記述してあるので

3D 描画 Step1-1 まず O 原子となる球を 1 つ描画する <WaterPanel.java の作成 > 1.Chemical プロジェクトをインポート 共有フォルダから Chemical.zip をコピーして workspace 内にはりつけ パッケージ エクスプローラで右クリック イン

3D 描画 Step1-1 まず O 原子となる球を 1 つ描画する <WaterPanel.java の作成 > 1.Chemical プロジェクトをインポート共有フォルダから Chemical.zip をコピーして workspace 内にはりつけパッケージエクスプローラで右クリックイン