07．描画速度の計測

（開発環境として「Eclipse」を使用した、古い情報です。
　開発環境として「Android Studio」を使用した、新しい情報は、
　「ホーム > プログラミング > モデルビューアを作る ( Android + OpenGL ES 1.0/1.1 ) ( Android Studio 2.3.3 版 )」）

06．で作成したモデルビューアに、描画速度を表示する機能を付加します。

使用開発環境は、Eclipse 3.7.2 ベースの Pleiades です。

解説

１回のフレーム描画にかかった時間を計測し、描画速度を画面に描画します。

時間の計測は、System.currentTimeMillis 関数で行います。

計測結果の描画速度値の画面への描画は、OpenGL ES の描画として行います。画面に表示される描画速度値には、それ自身を表示するのにかかった時間は加味されていません。画面に表示される描画速度値は、あくまで参考数値となります。

OpenGL ES には、標準では、文字列描画に関する関数、クラスは用意されていないので、自作します。
OpenGL ES での文字列描画のひとつの方法は以下です。

ビットマップオブジェクトを生成する。
作成したビットマップを描画対象とするキャンバスオブジェクトを生成する。
生成したキャンパス上に文字列を描画すると、文字列が描画されたビットマップオブジェクトができる。
文字列が描画されたビットマップをテクスチャとして、OpenGL描画すると、画面に文字列が表示されます。

実装

プロジェクトを開く

06．で作成したモデルビューアプロジェクトを開きます。

モデルビューアレンダラクラスにシーン描画関数をオーバーライド

モデルビューアレンダラクラスに、描画速度計算処理および描画速度表示処理を追加した、シーン描画関数を、オーバーライド関数として追加します。

メッセージ描画関数も追加します。

メッセージテクスチャオブジェクトを識別するテクスチャID変数をメンバ変数として追加します。
キャンバスに文字列を描画するときのペンオブジェクトをメンバ変数として追加します。
メッセージテクスチャのポリゴン座標用のFloatBuffer変数をメンバ変数として追加します。
メッセージテクスチャのテクスチャ座標値用のFloatBuffer変数をメンバ変数として追加します。
コンストラクタに、FloatBufferオブジェクト生成処理を追加します。

public class ModelViewerRenderer extends OpenGLPickRenderer { （・・・省略・・・） private Paint m_paintMessageTexture; private int m_iMessageTextureID; private FloatBuffer m_fbVertexMessageTexture; private FloatBuffer m_fbTextureMessageTexture; public ModelViewerRenderer() { （・・・省略・・・） // ペイントの作成 m_paintMessageTexture = new Paint(); m_paintMessageTexture.setTextSize( 20 ); m_paintMessageTexture.setAntiAlias( true ); m_paintMessageTexture.setColor( Color.WHITE ); // ビットマップにおける文字色は、白。これにより、描画時に、glColorで任意の色付けが可能になる。 m_paintMessageTexture.setTypeface( Typeface.MONOSPACE ); // 等幅フォント // メッセージテクスチャのポリゴン座標値とテクスチャ座標値 float[] f4Vertex = { 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f }; float[] f4TextureCoord = { 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f }; m_fbVertexMessageTexture = makeFloatBuffer( f4Vertex ); m_fbTextureMessageTexture = makeFloatBuffer( f4TextureCoord ); } （・・・省略・・・） // フレームの描画 @Override public void onDrawFrame( GL10 gl ) { long lTimeMillisStart = System.currentTimeMillis(); gl.glClear( GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT ); if( false == isViewingFrustumValid() ) { setupViewingFrustum(); } if( false == isViewingTransformValid() ) { setupViewingTransform(); } preRenderScene(); gl.glPushMatrix(); renderStockScene(); gl.glPopMatrix(); gl.glPushMatrix(); renderScene(); gl.glPopMatrix(); postRenderScene(); long lTimeMillisEnd = System.currentTimeMillis(); long lTimeMillisDiff = lTimeMillisEnd - lTimeMillisStart; if( 0 == lTimeMillisDiff ) { lTimeMillisDiff = 1; } String strMessage = String.format( "%5d[fps] ( %6.4f[spf] )", (int)( 1000.0 / lTimeMillisDiff + 0.5 ), lTimeMillisDiff / 1000.0 ); gl.glPushMatrix(); renderMessage( gl, strMessage ); gl.glPopMatrix(); } private void renderMessage( GL10 gl, String strMessage ) { if( 0 == m_iMessageTextureID ) { return; } // ペイントを使って文字列を描画した場合の文字列のピクセル幅、ピクセル高さの取得 int iStringWidth = (int)( m_paintMessageTexture.measureText( strMessage ) + 1.0f ); iStringWidth = ( iStringWidth + 31 ) & ( ~31 ); // 32の倍数に FontMetrics fontmetrics = m_paintMessageTexture.getFontMetrics(); int iStringHeight = (int)( fontmetrics.bottom - fontmetrics.top + 1.0f ); iStringHeight = ( iStringHeight + 31 ) & ( ~31 ); // 32の倍数に // 文字列テクスチャの作成 // 空のビットマップ作成 Bitmap bitmap = Bitmap.createBitmap( iStringWidth, iStringHeight, Bitmap.Config.ARGB_8888 ); // キャンバスをビットマップの上に作成 Canvas canvas = new Canvas( bitmap ); // ビットマップを透明色で塗りつぶす bitmap.eraseColor( Color.TRANSPARENT ); // テキストをペイントでキャンバスに描画 canvas.drawText( strMessage, 0, -fontmetrics.top, m_paintMessageTexture ); // 作成したテクスチャをバインド gl.glBindTexture( GL10.GL_TEXTURE_2D, m_iMessageTextureID ); // 拡大縮小の方法 gl.glTexParameterf( GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST ); // 縮小は、もっとも近い要素で補完 gl.glTexParameterf( GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR ); // 拡大は、線形で補完 // 繰り返しの方法 gl.glTexParameterf( GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE ); // 画像の端のピクセルの色を使う gl.glTexParameterf( GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE ); // 画像の端のピクセルの色を使う // GLUtils.texImage2Dを使ってglTexImage2Dを呼び出す。 GLUtils.texImage2D( GL10.GL_TEXTURE_2D, 0, bitmap, 0 ); // ビットマップ用メモリはもう用なし bitmap.recycle(); // OpenGLのテクスチャ描画処理 // エクスチャＯＮ gl.glEnable( GL10.GL_TEXTURE_2D ); // 透過処理の有効化 gl.glEnable( GL10.GL_ALPHA_TEST ); gl.glEnable( GL10.GL_BLEND ); gl.glBlendFunc( GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA ); gl.glTexEnvf( GL10.GL_TEXTURE_ENV, GL10.GL_TEXTURE_ENV_MODE, GL10.GL_MODULATE ); // その他の機能の有効化、無効化 gl.glDisable( GL10.GL_DEPTH_TEST ); gl.glDisable( GL10.GL_LIGHTING ); gl.glDisable( GL10.GL_CULL_FACE ); // 変換行列作成 gl.glMatrixMode( GL10.GL_PROJECTION ); gl.glPushMatrix(); gl.glLoadIdentity(); gl.glOrthof( 0.0f, getWidth(), getHeight(), 0.0f, -1.0f, 1.0f ); // 画面の左上隅が(0,0) になり、右下隅が(2,2)になる視野角錐台。 gl.glMatrixMode( GL10.GL_MODELVIEW ); gl.glPushMatrix(); gl.glLoadIdentity(); // テクスチャを貼るポリゴンの座標値の更新 m_fbVertexMessageTexture.put( 0, 0.0f ); m_fbVertexMessageTexture.put( 1, getHeight() - (float)iStringHeight ); m_fbVertexMessageTexture.put( 2, (float)iStringWidth ); m_fbVertexMessageTexture.put( 3, getHeight() - (float)iStringHeight ); m_fbVertexMessageTexture.put( 4, 0.0f ); m_fbVertexMessageTexture.put( 5, getHeight() ); m_fbVertexMessageTexture.put( 6, (float)iStringWidth ); m_fbVertexMessageTexture.put( 7, getHeight() ); gl.glEnableClientState( GL10.GL_VERTEX_ARRAY ); gl.glEnableClientState( GL10.GL_TEXTURE_COORD_ARRAY ); gl.glVertexPointer( 2, GL10.GL_FLOAT, 0, m_fbVertexMessageTexture ); gl.glTexCoordPointer( 2, GL10.GL_FLOAT, 0, m_fbTextureMessageTexture ); gl.glColor4f( 1.0f, 1.0f, 0.0f, 1.0f ); gl.glDrawArrays( GL10.GL_TRIANGLE_STRIP, 0, 4 ); gl.glDisableClientState( GL10.GL_VERTEX_ARRAY ); gl.glDisableClientState( GL10.GL_TEXTURE_COORD_ARRAY ); // 変換行列を元に戻す gl.glPopMatrix(); gl.glMatrixMode( GL10.GL_PROJECTION ); gl.glPopMatrix(); gl.glMatrixMode( GL10.GL_MODELVIEW ); // 機能の有効化、無効化の復元 gl.glEnable( GL10.GL_DEPTH_TEST ); gl.glDisable( GL10.GL_ALPHA_TEST ); gl.glDisable( GL10.GL_BLEND ); gl.glDisable( GL10.GL_TEXTURE_2D ); } }

メッセージ用テクスチャの構築関数、破棄関数の追加

モデルビューアレンダラクラスに、メッセージ用テクスチャオブジェクトを構築する関数、メッセージ用テクスチャオブジェクトを破棄する関数を追加します。

public class ModelViewerRenderer extends OpenGLPickRenderer { （・・・省略・・・） public void createMessageTexture() { destroyMessageTexture(); GL10 gl = getGL(); int[] aiTextureName = new int[1]; gl.glGenTextures( 1, aiTextureName, 0 ); m_iMessageTextureID = aiTextureName[0]; } public void destroyMessageTexture() { if( 0 == m_iMessageTextureID ) { return; } GL10 gl = getGL(); int[] aiTextureName = { m_iMessageTextureID }; gl.glDeleteTextures( 1, aiTextureName, 0 ); m_iMessageTextureID = 0; } }

OpengGL描画コンテキストの消失と再作成に対応する

OpenGL描画コンテキストの消失と再作成に対応します。

アクティビティの一時停止と復帰が行われたときに、OpenGL描画コンテキストの消失と再作成が行われます。

OpenGL描画コンテキストが消失すると、グラフィックスメモリ上のテクスチャは消失します。OpenGL描画コンテキストの再作成が行われても、グラフィックスメモリ上のテクスチャオブジェクトの再作成は、自動では行われません。
グラフィックスメモリ上にテクスチャオブジェクトはないにもかかわらず、グラフィックスメモリ上にテクスチャオブジェクトがあるものとして描画処理等を行うと、プログラムがクラッシュすることもあります。

OpenGL描画コンテキストが消失されようとするときには、テクスチャオブジェクトの破棄処理を実施するようにします。

モデルビューアビュークラスに、onPause関数をオーバラード関数として追加し、OpenGL描画コンテキストが消失しようとするときに実施すべき処理の窓口関数の呼び出しを追加します。
UIスレッドからのOpenGL関数呼び出しになるので、イベントキューイングします。

public class ModelViewerView extends GLSurfaceView implements GestureDetector.OnGestureListener { （・・・省略・・・） // OpenGL描画コンテキストの消失と再作成の対応。 // OpenGL描画コンテキストが消失されようとするときには、破棄処理を実施する。レンダラクラスのpreSurfaceDestroy()で実施。 // OpenGL描画コンテキストが再作成されたときには、構築処理を実施する。レンダラクラスのonSurfaceCreated()で実施。 @Override public void onPause() { // OpenGL関数呼び出しがあるので、イベントキューイングする。 queueEvent( new Runnable() { public void run() { m_renderer.preSurfaceDestroy(); } } ); super.onPause(); } }

ベースOpenGLレンダラクラスに、OpenGL描画コンテキストが消失しようとするときに実施すべき処理の窓口関数を追加します。

public class OpenGLBaseRenderer implements Renderer { （・・・省略・・・） // サーフェースが作成された時、再作成された時 // （レンダリングスレッドの起動時および、アンドロイドデバイスのスリープからの復帰時） public void onSurfaceCreated( GL10 gl, EGLConfig config ) { （・・・省略・・・） } // サーフェースがが破棄されようとする時 public void preSurfaceDestroy() { } （・・・省略・・・） }

モデルビューアレンダラクラスに、OpenGL描画コンテキストが消失しようとするときに実施すべき処理の窓口関数をオーバーライド関数として追加し、テクスチャオブジェクトの破棄関数の呼び出しを追加します。

public class ModelViewerRenderer extends OpenGLPickRenderer { （・・・省略・・・） @Override public void preSurfaceDestroy() { destroyMessageTexture(); super.preSurfaceDestroy(); } }

OpenGL描画コンテキストが再作成されたときには、テクスチャオブジェクトの構築処理を実施するようにします。
モデルビューアレンダラクラスに、onSurfaceCreated関数をオーバーライド関数として追加し、テクスチャオブジェクトの構築関数の呼び出しを追加します。

public class ModelViewerRenderer extends OpenGLPickRenderer { （・・・省略・・・） @Override public void onSurfaceCreated( GL10 gl, EGLConfig config ) { super.onSurfaceCreated( gl, config ); createMessageTexture(); } }

実行

Android Virtual Device にて、動作確認。

※ ターゲット：「Android 4.0.3 - API Level 15」、ハードウェア：「GPU emulation」をyes、として作成したAndroid Virtual Device にて動作確認。

実行し、アスキー形式STLファイルからモデルデータを読み込み、回転等の再描画が発生する操作を行なった際に、描画速度が画面下部ーに表示されることを確認します。

fps: frame per second : １秒間に描画できる回数を表します。数値が大きいほど、描画速度は速いことになります。
spf: second per frame : 1回の描画に要する時間を表します。数値が小さいほど、描画速度は速いことになります。

ModelData02.stlファイルの読み込み

ダウンロード

サンプルプロジェクト

 サンプルモデル（ModelData02.stl）