Your SlideShare is downloading. ×
Android OpenGL HandsOn
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Android OpenGL HandsOn

2,024
views

Published on

2012.5.28の勉強会で使用するOpenGLハンズオン用資料

2012.5.28の勉強会で使用するOpenGLハンズオン用資料

Published in: Self Improvement

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,024
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AndroidOpenGL/ES ハンズオン Smart.LABO 丹所 育男(tan1234jp) 1
  • 2. 自己紹介• 丹所 育男(たんしょ いくお)• 春日井市出身・自宅は名古屋市・実家は可児市• 講師→制御系→ネットワーク系→業務系→制御系→ システム保守→制御系→業務系→携帯アプリ• 2011年6月に「SMART.LABO」として独立• Androidアプリの開発がメイン(iPhone,Coronaも)• Twitter : @tan1234jp 2
  • 3. OpenGL/ESとは?• OpenGL Embedded Subsetの略• 3Dコンピュータグラフィックス用APIのサブ セットで、3D空間に浮かんだ頂点を結んだ図 形を描画することに特化している。• 主に携帯電話などの組み込みシステムや、 ゲーム専用機で使われている。 →iOS, Android, Symbian OS, →PlayStation3、Nintendo 3DS 3
  • 4. 描画APIのサポート Canvas OpenGL/ES• 点 • 点• 直線 • 直線• 三角形 • 三角形• 四角形• 五角形以上の多角形• 円• 文字 4
  • 5. AndroidのView• Androidには、3種類のViewがある。 →View,SurfaceView,GLSurfaceView• OpenGLでは、GLSurfaceViewを継承したも のを使う。 5
  • 6. GLSurfaceView• OpenGLの描画に特化したView• 描画タイミングは端末依存(プログラマが決め ることもできる)• 別スレッドで動作するため、直接UIに対して 変更をかけることは不可 6
  • 7. OpenGL/ESの初期化• プロジェクトの作成 OpenGL_Sample• バージョンの決定(Ver1.5以降であればOK) 7
  • 8. OpenGL/ESの初期化• パッケージ名の設定 com.example.opengl_sample 8
  • 9. OpenGL/ESの初期化package com.example.opengl_sample;import android.app.Activity;import android.opengl.GLSurfaceView;import android.os.Bundle;public class OpenGL_SampleActivity extends Activity { private GLSurfaceView glSurfaceView; エラーとなるが無視 @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); glSurfaceView = new GLSurfaceView(this); glSurfaceView.setRenderer(new GLRenderSample()); setContentView(glSurfaceView); } 9
  • 10. OpenGL/ESの初期化 @Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); } @Override protected void onResume() { super.onResume(); glSurfaceView.onResume(); } //ここに後でコードを追加します!} 10
  • 11. OpenGL/ESの初期化 GLRenderSampleの作成 onResume()の後に以下のコードを追加。 class GLRenderSample implements GLSurfaceView.Renderer { public void onDrawFrame(GL10 gl) { gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); gl.glClear(GL10.GL_COLOR_BUFFER_BIT); } public void onSurfaceChanged(GL10 gl, int width, int height) { gl.glViewport(0, 0, width, height); } public void onSurfaceCreated(GL10 gl, EGLConfig config) { } 11
  • 12. OpenGL/ESの初期化• 実行! 真っ白な画面になりました か? 12
  • 13. コード解説 • GLRenderSampleの各メソッド メソッド名 呼ばれるタイミングonSurfaceCreated(GL10 gl, EGLConfig eglconfig) GLSurfaceView用のメモリ確保が終了onSurfaceChanged(GL10 gl, int width, int height) 画面サイズが変更された時onDrawFrame(GL10 gl) 再描画が必要な時 13
  • 14. コード解説• 各メソッドの呼び出され方 onSurfaceCreated onSurfaceChanged onDrawFrame 呼び出されるタイミングは 端末依存 14
  • 15. コード解説 • 描画範囲の設定 メソッド名 役割 OpenGL/ESの描画範囲を指定する。glViewport(int x, int y, int width, int height); 「どの座標(x, y)から、幅width、高さheightま で」を描画範囲とする。 15
  • 16. コード解説 • 描画クリア メソッド名 役割 画面全体を塗りつぶす色を決定する。RGBA(AglClearColor(float r, float g, float b, float a); はアルファ値)を指定する。 指定できる範囲は0∼1の実数値。 塗りつぶしを実行する。引数にglClear(int mask); GL_COLOR_BUFFER_BITを指定する。 • glClearColorの引数の値を適当に変更して、 いろいろな色で塗りつぶされることを確認し てみてください。 16
  • 17. OpenGL/ESの座標系• 座標系の違い (480,0) 原点(0,0) (0,1) (Xperiaの場合) (-1,0) (1,0) 原点(0,0) View SurfaceView OpenGL (0,854) (0,-1) 17
  • 18. 三角形を描画する• 例えば、(0,0),(1,0),(1,1)の3点を結ぶ三角形 を描画する場合・・・ HT-03A Xperia480px 854px 320px 480px 18
  • 19. 三角形を描画する• onDrawFrameを修正 public void onDrawFrame(GL10 gl) { gl.glClearColor(0.0f, 1.0f, 1.0f, 1.0f); //第1引数に変更あり! gl.glClear(GL10.GL_COLOR_BUFFER_BIT); float positions[] = { 1.0f, 0.0f, 0.0f, /右(1,0) / 0.0f, 0.0f, 0.0f, /原点(0,0) / 1.0f, 1.0f, 0.0f, /右上(1,1) / }; ByteBuffer bb = ByteBuffer.allocateDirect(positions.length * 4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(positions); 19
  • 20. 三角形を描画する• onDrawFrameを修正(続き) fb.position(0); gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, fb); gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3); } 20
  • 21. 三角形を描画する• 実行! →水色の背景に白い三角形 が表示されましたか? →解像度の違う端末でも同 じ画面が表示されました か? 21
  • 22. コード解説• 座標の設定float positions[] = { 1.0f, 0.0f, 0.0f, /右(1,0) / 0.0f, 0.0f, 0.0f, /原点(0,0) / 1.0f, 1.0f, 0.0f, /右上(1,1) / };• 浮動小数の1次元配列で表す• 配列に格納する順番は「頂点1(x,y,z)」「頂点 2(x,y,z)」「頂点3(x,y,z)」・・・とする。 22
  • 23. コード解説• 座標配列をOpenGL/ESに転送 ByteBuffer bb = ByteBuffer.allocateDirect(positions.length * 4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(positions); fb.position(0);• 座標配列をOpenGL/ESで扱えるメモリ形式に 変換• AndroidでOpenGL/ESを扱う際の「おまじな い」。 23
  • 24. コード解説• OpenGL/ESは、Android Runtimeではなく Libraries群(CPU依存)• Javaの配列などのデータを、そのまま OpenGL/ESへ転送することはできない• java.nio.* パッケージを使用して、OpenGL/ ESから直接参照できるようなデータに変換す る必要がある。 24
  • 25. Androidアーキテクチャ 25
  • 26. コード解説 • GLSurfaceViewに描画する メソッド名 役割 glVertexPointer()で転送するメモリ情報の種類 を設定する。引数はいろいろあるが、座標情報glEnableClientState(int array); を転送する場合は「GL_VERTEX_ARRAY」を 指定する。 位置情報を設定する。 size : 位置情報の要素数。3次元の場合は3。glVertexPointer(int size, int type, int stride, type : 位置情報の変数の型。Buffer pointer); stride : 常時0。 pointer : OpenGL/ESに転送可能な位置情報 GLSurfaceViewに描画する。 mode : 描画方法を指定する(後ほど説明)glDrawArrays(int mode, int first, int count); first : 描画する位置情報の開始位置。 count : 位置情報を使用する数。 26
  • 27. (発展)四角形を描画する• onDrawFrameを修正 public void onDrawFrame(GL10 gl) { : : float positions[] = { 1.0f, 0.0f, 0.0f, /右(1,0) / 0.0f, 0.0f, 0.0f, /原点(0,0) / 1.0f, 1.0f, 0.0f, /右上(1,1) / 0.0f, 0.0f, 0.0f, /原点(0,0) / 0.0f, 1.0f, 0.0f, /上(0,1) / 1.0f, 1.0f, 0.0f, /右上(1,1) / }; 27
  • 28. (発展)四角形を描画する• onDrawFrameを修正(続き) : : gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, fb); gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3 * 2); } 28
  • 29. (発展)四角形を描画する• 実行! →水色の背景の右上に、白 い四角形が表示されました か? →解像度の違う端末でも同 じ画面が表示されました か? 29
  • 30. (発展)四角形を描画する• 三角形を組み合わせれば、どんな多角形でも 作成可能 + = 30
  • 31. (発展)四角形を描画する• 重複している座標がある! public void onDrawFrame(GL10 gl) { : : float positions[] = { 1.0f, 0.0f, 0.0f, /右(1,0) / 0.0f, 0.0f, 0.0f, /原点(0,0) / 1.0f, 1.0f, 0.0f, /右上(1,1) / 0.0f, 0.0f, 0.0f, /原点(0,0) / 0.0f, 1.0f, 0.0f, /上(0,1) / 1.0f, 1.0f, 0.0f, /右上(1,1) / }; • 座標を使いまわししたい! 31
  • 32. (発展)四角形を描画する• onDrawFrameを修正 public void onDrawFrame(GL10 gl) { : : float positions[] = { 1.0f, 0.0f, 0.0f, /右(1,0) / 0.0f, 0.0f, 0.0f, /原点(0,0) / 1.0f, 1.0f, 0.0f, /右上(1,1) / // 0.0f, 0.0f, 0.0f,//原点(0,0) 0.0f, 1.0f, 0.0f,//上(0,1) // 1.0f, 1.0f, 0.0f,//右上(1,1) }; 32
  • 33. (発展)四角形を描画する• onDrawFrameを修正(続き) : : gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, fb); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); //第1・3引数変更 } 33
  • 34. (発展)四角形を描画する• 実行! →先ほどと同じ画面になり ましたか? 34
  • 35. glDrawArraysの引数• glDrawArrays()の第1引数で指定する値(定数) により、描画方法を変更することができる。 引数 説明GL10.GL_POINTS 点GL10.GL_LINES 直線GL10.GL_LINE_STRIP 折れ線GL10.GL_TRIANGLES 三角形GL10.GL_TRIANGLE_STRIP 1辺を共有しながら帯状に三角形を描画するGL10.GL_TRIANGLE_FAN 1点を共有しながら扇状に三角形を描画する 35
  • 36. glDrawArraysの引数• 描画方法の違い public void onDrawFrame(GL10 gl) { : : float positions[] = { ① 1.0f, 0.0f, 0.0f, /右(1,0) / ② 0.0f, 0.0f, 0.0f, /原点(0,0) / ③ 1.0f, 1.0f, 0.0f, /右上(1,1) / ④ 0.0f, 1.0f, 0.0f,//上(0,1) }; : : gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); //第1・3引数変更 } 36
  • 37. GL_POINTS• 点(1px)を描画する ④ ③ ② ① 37
  • 38. GL_LINES• 直線を描画する時に使う• 座標の描画順は、①②→③④→⑤⑥→ ④ ③ ② ① 38
  • 39. GL_LINE_STRIP• 直線を描画する時に使う• 座標の描画順は、①②→②③→③④→④⑤→ ④ ③ ② ① 39
  • 40. GL_TRIANGLE_STRIP• 隣接した三角形を描画する時に使う• 座標の描画順は、①②③→②③④→③④⑤→ ④ ③ ④ ③ ② ① ② ① 40
  • 41. GL_TRIANGLE_FAN• 扇形を描画する時に使う• 座標の描画順は、①②③→①③④→①④⑤→ ④ ③ ④ ③ ② ① ② ① 41
  • 42. GL_TRIANGLE_FAN• 引数を変更して実行する と、右の図形が描画されま す。 42
  • 43. 色をつける• onDrawFrameを修正 public void onDrawFrame(GL10 gl) { : : gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, fb); gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f); //追加 gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); } 43
  • 44. 色をつける• 実行! →水色の背景の右上に、赤 い四角形が表示されました か? 44
  • 45. コード解説 • 描画色を指定する メソッド名 役割 描画色を決定する。RGBA(Aはアルファ値)を指glColor4f(float r, float g, float b, float a); 定する。 指定できる範囲は0∼1の実数値。 • glColor4fの引数の値を適当に変更して、いろ いろな色で塗りつぶされることを確認してみ てください。 45
  • 46. • 本日のハンズオンはここまでです。お疲れ様 でした。• 今回は、単純に三角形を描画するのみでした が、任意の場所への描画や回転、拡大・縮 小、任意画像の描画などもできます。• ・・・が、数学(行列)の知識が必要となります ので、次回(?)のハンズオンにできればと 思っております。 46