Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AndroidOpenGL/ESハンズオン                       Part 2        Smart.LABO 丹所 育男         Twitter : @tan1234jp
自己紹介•   丹所 育男(たんしょ いくお)•   愛知県春日井市出身、名古屋市在住、実家は可児市•   非常勤講師→制御系→ネットワーク系→業務系→制御系→    システム保守→制御系→業務系→携帯アプリ•   2011年6月に「SMART...
前回は・・・•   OpenGL/ESで何?•   描画できるオブジェクトは「点」「直線」「三角形」のみ•   Androidでは、GLSurfaceViewを継承    →OpenGLの描画に特化したView•   「直線」「三角形」には「書...
今回は・・・•   移動•   拡大・縮小•   回転    の3つです。
使用するプログラム•   http://itinfo.main.jp/android/OpenGL_Sample2.zip•   ダウンロード後、EclipseにImportしてください。
まずは、そのまま実行    •   中央に赤い四角形が表示されま        したか?
今回の座標系                  (0,3)           •   通常、コンピュータ・グラ                                      フィックの世界では、左上を               ...
マトリクス変換•   ポリゴン(OpenGL/ESで描画されたオブジェクト)の座標を操    作することで、移動・回転・拡大・縮小させて描画する機能    です。•   計算はGPU(画像処理を専門に扱うプロセッサ)上で行うた    め、高速。...
マトリクス変換の流れ    GL_MODELVIEW     モードにする     マトリクスを     初期化する    描画オブジェクトに  マトリクス変換を呼び出す      描画する
GL_MODELVIEWモード•   GL10オブジェクトの    glMatrixMode(GL10.GL_MODELVIEW);    glLoadIdentity();    を呼び出すだけ。       メソッド名           ...
移動•       移動には、GL10オブジェクトのglTranslatef()メソッドを使い        ます。•       onDrawFrame()を修正	   	    public void onDrawFrame(GL10 gl...
移動•   実行!    →赤色の四角形が最初の実行の時    より移動していますか?
移動 •    使用メソッド       メソッド名                        役割                         これから描画するオブジェクトを、x, y, zの方glTranslatef(x, y, z...
拡大・縮小•       拡大・縮小には、GL10オブジェクトのglScalef()メソッドを        使います。•       onDrawFrame()を修正	   	    public void onDrawFrame(GL10 ...
拡大・縮小•   実行!    →赤色の四角形が最初の実行の時    より変形していますか?
拡大・縮小 •    使用メソッド        メソッド名                     役割                     これから描画するオブジェクトを、x, y, zで指glScalef(x, y, z);   定し...
回転•       拡大・縮小には、GL10オブジェクトのglRotatef()メソッドを        使います。•       onDrawFrame()を修正	   	    public void onDrawFrame(GL10 gl...
回転•   実行!    →赤色の四角形が回転しています    か?
回転 •    使用メソッド         メソッド名                          役割                              これから描画するオブジェクトを、x, y, zglRotatef(deg...
組み合わせ    •       原点を中心に反時計回りに45度回転させ、右に1.0だけ移動            させてみましょう。            •    onDrawFrame()を修正	       	   public voi...
組み合わせ•   実行!    →想定した場所に赤の四角形が表    示されていますか?
組み合わせ•   マトリクス変換は、オブジェクトを描画する直前に呼ばれ    たものが最初に適用されます。•   プログラム上でマトリクス変換を呼び出す順番と、マトリ    クス変換が実際に実行される順番は逆転します。
組み合わせ      •       原点を中心に反時計回りに45度回転させ、右に1.0だけ移動              させるには・・・              •    onDrawFrame()を修正  	       	   pub...
組み合わせ•   実行!    →想定した場所に赤の四角形が表    示されていますか?
• 本日のハンズオンは以上です。お疲れ様でした。• 基本的な図形に対する描画は、前回のハンズオン の内容との組み合わせでほとんど可能です。• 今回は紹介できませんでしたが、オブジェクトに 画像を貼り付けることができるようになれば、 ゲーム作成が...
Upcoming SlideShare
Loading in …5
×

第2回Open GL/ESハンズオン

1,742 views

Published on

2012.12.3の勉強会で使用する、第2回OpenGLハンズオン用資料

  • Be the first to comment

第2回Open GL/ESハンズオン

  1. 1. AndroidOpenGL/ESハンズオン Part 2 Smart.LABO 丹所 育男 Twitter : @tan1234jp
  2. 2. 自己紹介• 丹所 育男(たんしょ いくお)• 愛知県春日井市出身、名古屋市在住、実家は可児市• 非常勤講師→制御系→ネットワーク系→業務系→制御系→ システム保守→制御系→業務系→携帯アプリ• 2011年6月に「SMART.LABO」として独立• 結局は「なんでも屋さん」
  3. 3. 前回は・・・• OpenGL/ESで何?• 描画できるオブジェクトは「点」「直線」「三角形」のみ• Androidでは、GLSurfaceViewを継承 →OpenGLの描画に特化したView• 「直線」「三角形」には「書き順」がある →描画メソッドの引数によって書き順が変わる
  4. 4. 今回は・・・• 移動• 拡大・縮小• 回転 の3つです。
  5. 5. 使用するプログラム• http://itinfo.main.jp/android/OpenGL_Sample2.zip• ダウンロード後、EclipseにImportしてください。
  6. 6. まずは、そのまま実行 • 中央に赤い四角形が表示されま したか?
  7. 7. 今回の座標系 (0,3) • 通常、コンピュータ・グラ フィックの世界では、左上を (0,0)としていますが、OpenGL/ ESでは自由に設定できます。(-2,0) (2,0) O • 今回は、わかりやすいように、 数学で使われる座標と同じ方式 をとっています。 • プログラムの75∼77行目の処理 がこれにあたります。 (0,-3)
  8. 8. マトリクス変換• ポリゴン(OpenGL/ESで描画されたオブジェクト)の座標を操 作することで、移動・回転・拡大・縮小させて描画する機能 です。• 計算はGPU(画像処理を専門に扱うプロセッサ)上で行うた め、高速。• 自前で座標を計算して描画することも可能ですが、行列演算 や三角関数の知識が必須となります。2次元なら何とかなる かもしれませんが、3次元となると・・・・・・ →こんなのやりたくないですよね!
  9. 9. マトリクス変換の流れ GL_MODELVIEW モードにする マトリクスを 初期化する 描画オブジェクトに マトリクス変換を呼び出す 描画する
  10. 10. GL_MODELVIEWモード• GL10オブジェクトの glMatrixMode(GL10.GL_MODELVIEW); glLoadIdentity(); を呼び出すだけ。 メソッド名 役割glMatrixMode(int 引数にGL10.GL_MODELVIEWを指定すると、マmode); トリクス変換を行うモードになるglLoadIdentity(); マトリクス変換モードを初期化する
  11. 11. 移動• 移動には、GL10オブジェクトのglTranslatef()メソッドを使い ます。• onDrawFrame()を修正 public void onDrawFrame(GL10 gl) { : gl.glMatrixMode(GL10.GL_MODELVIEW); //追加 gl.glLoadIdentity(); //追加 gl.glTranslatef(1.0f, 1.0f, 0.0f); //追加 : //四角形を描画 gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); :
  12. 12. 移動• 実行! →赤色の四角形が最初の実行の時 より移動していますか?
  13. 13. 移動 • 使用メソッド メソッド名 役割 これから描画するオブジェクトを、x, y, zの方glTranslatef(x, y, z); 向に移動させる。2次元の場合はzは0を指定す る
  14. 14. 拡大・縮小• 拡大・縮小には、GL10オブジェクトのglScalef()メソッドを 使います。• onDrawFrame()を修正 public void onDrawFrame(GL10 gl) { : gl.glMatrixMode(GL10.GL_MODELVIEW); //追加 gl.glLoadIdentity(); //追加 gl.glScalef(2.0f, 0.5f, 1.0f); //追加 : //四角形を描画 gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); :
  15. 15. 拡大・縮小• 実行! →赤色の四角形が最初の実行の時 より変形していますか?
  16. 16. 拡大・縮小 • 使用メソッド メソッド名 役割 これから描画するオブジェクトを、x, y, zで指glScalef(x, y, z); 定した倍率に拡大・縮小する。2次元の場合はz は1.0fを指定する
  17. 17. 回転• 拡大・縮小には、GL10オブジェクトのglRotatef()メソッドを 使います。• onDrawFrame()を修正 public void onDrawFrame(GL10 gl) { : gl.glMatrixMode(GL10.GL_MODELVIEW); //追加 gl.glLoadIdentity(); //追加 gl.glRotatef(30.0f, 0.0f, 0.0f, 1.0f); //追加 : //四角形を描画 gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); :
  18. 18. 回転• 実行! →赤色の四角形が回転しています か?
  19. 19. 回転 • 使用メソッド メソッド名 役割 これから描画するオブジェクトを、x, y, zglRotatef(degree, x, y, z); で指定した軸を中心に、反時計回りに degree度回転させる。2次元の場合はzは
  20. 20. 組み合わせ • 原点を中心に反時計回りに45度回転させ、右に1.0だけ移動 させてみましょう。 • onDrawFrame()を修正 public void onDrawFrame(GL10 gl) { : gl.glMatrixMode(GL10.GL_MODELVIEW); gl.glLoadIdentity(); gl.glRotatef(45.0f, 0.0f, 0.0f, 1.0f); //原点を中心に反時計回りに45度回転 gl.glTranslatef(1.0f, 0.0f, 0.0f); //右に1.0移動 : //四角形を描画 gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); :
  21. 21. 組み合わせ• 実行! →想定した場所に赤の四角形が表 示されていますか?
  22. 22. 組み合わせ• マトリクス変換は、オブジェクトを描画する直前に呼ばれ たものが最初に適用されます。• プログラム上でマトリクス変換を呼び出す順番と、マトリ クス変換が実際に実行される順番は逆転します。
  23. 23. 組み合わせ • 原点を中心に反時計回りに45度回転させ、右に1.0だけ移動 させるには・・・ • onDrawFrame()を修正 public void onDrawFrame(GL10 gl) { : gl.glMatrixMode(GL10.GL_MODELVIEW); gl.glLoadIdentity(); gl.glTranslatef(1.0f, 0.0f, 0.0f); //右に1.0移動逆にする gl.glRotatef(45.0f, 0.0f, 0.0f, 1.0f); //原点を中心に反時計回りに45度回転 : //四角形を描画 gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); :
  24. 24. 組み合わせ• 実行! →想定した場所に赤の四角形が表 示されていますか?
  25. 25. • 本日のハンズオンは以上です。お疲れ様でした。• 基本的な図形に対する描画は、前回のハンズオン の内容との組み合わせでほとんど可能です。• 今回は紹介できませんでしたが、オブジェクトに 画像を貼り付けることができるようになれば、 ゲーム作成が可能となります。• 次回(?)のハンズオンで、画像の貼り付け方な どができればと思っております。

×