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

Size: px

Start display at page:

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

まれあほがり
6 years ago
Views:

3D 描画 Step3 元素名を 2D 描画する OpenGL には文字描画の概念がないこと元素名は回転してほしくないことの 2 点の理由から元素名は 2D 描画するそのために原子の 3 次元空間の座標から文字を描画するウィンドウ上の座標を求める < 座標変換について > 座標変換についてまとまった詳しい解説は OpenGL による 3D 描画の基礎知識の 3

2f, div, div); (*) と記述する引数は順に半径 Z 軸まわりの分割数 Z 軸に沿った分割数で球の中心座標を設定する引数はないこれは常にこの関数が球の中心を原点として描画するからであるこの場合の座標系がオブジェクト座標系となるしかし図のように実際にワールド座標系で考えれば O 原子の中心座標は (0, 0.4, 0) だし右側の H 原子は (cosθ, 0.

1 3D 描画 Step3 元素名を 2D 描画する OpenGL には文字描画の概念がないこと元素名は回転してほしくないことの 2 点の理由から元素名は 2D 描画するそのために原子の 3 次元空間の座標から文字を描画するウィンドウ上の座標を求める < 座標変換について > 座標変換についてまとまった詳しい解説は OpenGL による 3D 描画の基礎知識の 3 ページ以降に記述してあるので参照のこと y 軸 z 軸 θ x 軸ワールド座標系の軸オブジェクト座標系とワールド座標系 O 原子も H 原子も描画するときは glut.glutsolidsphere(0.2f, div, div); (*) と記述する引数は順に半径 Z 軸まわりの分割数 Z 軸に沿った分割数で球の中心座標を設定する引数はないこれは常にこの関数が球の中心を原点として描画するからであるこの場合の座標系がオブジェクト座標系となるしかし図のように実際にワールド座標系で考えれば O 原子の中心座標は (0, 0.4, 0) だし右側の H 原子は (cosθ, 0.4-sinθ, 0) [ θ=( )/2] であるこのような位置に描画するためには描画したい球の中心が原点になるよう事前に gltranslatef や glrotatef で座標変換しておく例えば O 原子の場合 gl.gltranslatef(0.0f, 0.4f, 0.0f); // y 軸正方向に 0.4 平行移動 θに相当するを実行した後で (*) の球の描画命令を書けばよいまた右側の H 原子は上記の 0.4 の平行移動が利いた状態でさらに以下を実行する gl.glrotatef(-degree, 0.0f, 0.0f, 1.0f); // 座標軸を z 軸周りに-degree 度回転 gl.gltranslatef(1.0f, 0.0f, 0.0f); // x 軸正方向に 1 だけ平行移動 -1-

2 このような回転や平行移動による座標変換の情報は ModelView 行列が持っている ModelView 行列は gl.glpushmatrix() でいったん保存しておき回転や平行移動を重ねて描画した後 gl.glpopmatrix() で保存した状態に戻すことができるワールド座標系とウィンドウ座標系 3 次元空間であるワールド座標から 2 次元の表示領域に対する座標をもとめるには Projectioin 行列を使うこの行列は 3D からどのように 2D に投影するかを決めるものであるまたパネルに対する表示領域をビューポートといい 4 次元の配列で表現するビューポート =[ 左下の点の x 座標, y 座標, 幅, 高さ ] オブジェクト座標系からウィンドウ座標系への変換 OpenGL には便利な関数があって glu.gluproject(objx, objy, objz, modelmatrix, 0, projmatrix, 0, viewport, 0, winpos, 0); objx, objy, objz:3d 空間の x 座標 y 座標 z 座標 ( オブジェクト座標系 ) modelmatrix:modelview 行列 projmatrix:projection 行列 viewport: ビューポートを呼び出すと winpos(double の配列 ) にビューポートの左下を原点とする右上が正方向の 2 次元ピクセルの単位での座標がはいるつまりオブジェクト座標系からウィンドウ座標系に変換してくれるしかし描画するにはパネルの左上を原点とした下向きが正の座標でなければならないので今回は上記の関数で求めた座標をさらに変換する下記のソースコードはこの変換部分が空欄になっているので下図を参考に考えて埋めなさい描画で必要な座標の原点 viewport[2] viewport[0] ビューポート getheight() viewport[3] glu.gluproject で求まる座標の原点 viewport[1] < 作成手順 > 1. を編集する 2. 実行して元素名 O,H が正常に描画されることを確認する -2-

3 package chemical.water; import java.awt.color; import java.awt.font; import java.awt.graphics; import java.awt.point; 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; private float rotx = 0.0f, roty = 0.0f; // 回転量 private float srotx, sroty; // ドラッグ開始時の回転量 private Point startpoint, endpoint; // ドラッグの開始点と終了点 private boolean defaultflg = true; // true だったら回転量を 0 にする private double[] model = new double[16]; // ModelView 行列 private double[] proj = new double[16]; // Projection 行列 private int[] view = new int[4]; // ビューポート private double[] pointo = new double[3]; // O 原子のウィンドウ座標 private double[] pointh1 = new double[3]; // H 原子 1 のウィンドウ座標 private double[] pointh2 = new double[3]; // H 原子 2 のウィンドウ座標 /* 光 // 光の位置 {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 ; // 緑 * コンストラクタ -3-

4 public WaterPanel () { // MouseEvent を受け取れるようにする addmouselistener(this); // MouseMotionEvent を受け取れるようにする addmousemotionlistener(this); // 3D 描画できるようにリスナ登録 addgleventlistener(this); /* 2D 描画 *********************************************************** public void paintcomponent(graphics g) { // 親クラスの paintcomponent 呼び出し super.paintcomponent(g); // フォント設定 Dialog は Windows では MS ゴシック g.setfont(new Font("Dialog", Font.BOLD, 24)); // 白色設定 g.setcolor(color.white); // 文字位置の微調整用 int tune = 8; // 元素名を描画 g.drawstring("o", (int)pointo[0]-tune, (int)pointo[1]+tune); g.drawstring("h", (int)pointh1[0]-tune, (int)pointh1[1]+tune); g.drawstring("h", (int)pointh2[0]-tune, (int)pointh2[1]+tune); /* 3D 描画 *********************************************************** * x 軸周りに円柱を描画 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(); * オブジェクト座標からウィンドウ座標を求める public boolean gluproject(double objx, double objy, double objz, double[] modelmatrix, double[] projmatrix, int[] viewport, double[] winpos ) { /* gluproject:3d 空間のx 座標,y 座標,z 座標,ModelView 行列,Projection 行列, ビューポートを使って * ウィンドウ座標を求める * ただしビューポート ( 描画領域 ) の左下が原点 y 座標上向き -4-

5 boolean bl = glu.gluproject(objx, objy, objz, modelmatrix, 0, projmatrix, 0, viewport, 0, winpos, 0); winpos[0] += viewport[0]; // パネルの左上を原点とする y 座標下向きに変換 // viewport の中身は [ 左下の x 座標, y 座標, ビューポート ( 描画領域 ) の幅, 高さ ] winpos[1] = getheight() - viewport[1] - winpos[1]; return bl; * GLEventListener のメソッド :3D 描画メソッド public void display(glautodrawable drawable) { /* deaultflg=true なら最初かリセットボタンが押された状態 * なので回転量を 0 にするs if (defaultflg) { rotx = 0.0f; roty = 0.0f; defaultflg = false; // 背景色で塗りつぶし 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); // マウスの移動量に応じて回転 gl.glrotatef(rotx, 1.0f, 0.0f, 0.0f); gl.glrotatef(roty, 0.0f, 1.0f, 0.0f); // 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); -5-

6 // ModelView 行列を取得 gl.glgetdoublev(gl.gl_modelview_matrix, model, 0); // O 原子のウィンドウ座標を取得 gluproject(0.0, 0.0, 0.0, model, proj, view, pointo); // 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); gl.glgetdoublev(gl.gl_modelview_matrix, model, 0); // ModelView 行列を取得 gluproject(0.0, 0.0, 0.0, model, proj, view, pointh1); // 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); gl.glgetdoublev(gl.gl_modelview_matrix, model, 0); // ModelView 行列を取得 gluproject(0.0, 0.0, 0.0, model, proj, view, pointh2); // 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); // 光の色を設定 -6-

7 gl.gllightfv(gl.gl_light0, GL.GL_SPECULAR, lspecular, 0); // 鏡面 gl.gllightfv(gl.gl_light0, GL.GL_DIFFUSE, ldiffuse, 0); // 拡散 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); // Projection 行列取得 gl.glgetdoublev(gl.gl_projection_matrix, proj, 0); // ビューポート取得 gl.glgetintegerv(gl.gl_viewport, view, 0); /* MouseListener のメソッド ************************************************* public void mouseclicked(mouseevent e) { public void mouseentered(mouseevent e) { public void mouseexited(mouseevent e) { * マウスを押したらスタートポイントに設定 public void mousepressed(mouseevent e) { // マウスを押した場所を取得 startpoint = e.getpoint(); // 現時点での回転量を保存 srotx = rotx; sroty = roty; -7-

8 public void mousereleased(mouseevent e) { /* MouseMotionListener のメソッド ************************************************ * ドラッグで回転量を計算 public void mousedragged(mouseevent e) { // マウスの場所を取得 endpoint = e.getpoint(); // 回転量を計算 ( パネルの端から端で一回転 ) rotx = srotx f*(float)(endPoint.y - startpoint.y)/(float)getwidth(); roty = sroty f*(float)(endPoint.x - startpoint.x)/(float)getheight(); // 再描画 repaint(); public void mousemoved(mouseevent e) { /* defaultflg の setter ************************************************************** public void setdefaultflg(boolean defaultflg) { this.defaultflg = defaultflg; -8-

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

3D 描画 Step1-1 まず O 原子となる球を 1 つ描画する <WaterPanel.java の作成 > 1.Chemical プロジェクトをインポート共有フォルダから Chemical.zip をコピーして workspace 内にはりつけパッケージエクスプローラで右クリックイン GUI プログラミング第 4 回演習 3DChemical ~ OpenGL(JOGL) による 3D 描画 : 水の化学式モデルを書いてみる ~ 104.45 実際は背景は黒くする 1.eclipse.zip を D: ドライブにコピーし右クリックここに解凍 2.workspace を S: ドライブから D: ドライブにコピー 3.eclipse.exe を起動