08．描画の高速化（頂点バッファオブジェクトの利用）

07．で作成したモデルビューアの描画処理は、頂点配列を用いた描画処理でした。
頂点配列を用いた描画処理では、glDrawArrays や glDrawElements の呼び出しのたびに、頂点データが、クライアントメモリからグラフィックスメモリへコピーされます。

頂点バッファオブジェクト（ Vertex Buffer Object : VBO ) を用いた描画処理では、頂点データを、事前にクライアントメモリからグラフィックスメモリにコピーしておき、glDrawArrays や glDrawElements の呼び出しのときには、コピー済みの頂点データを用いて描画します。

頂点バッファオブジェクト（ Vertex Buffer Object : VBO ) を用いた描画処理は、頂点配列を用いた描画処理よりも高速に描画されます。

解説

頂点バッファオブジェクト（ Vertex Buffer Object : VBO ) を用いた描画を行うためには、構築処理と、描画処理と、破棄処理を作成する必要があります。

構築処理では、頂点バッファオブジェクトの作成、頂点データのクライアントメモリからグラフィックスメモリへのコピー、を行います。

glGenBuffer関数で、頂点バッファオブジェクトを作成します。
glBindBuffer関数で、作成した頂点バッファオブジェクトをバインドします。
glBufferData関数で、データをクライアントメモリからグラフィックスメモリにコピーします。

描画処理では、頂点バッファオブジェクトをバインドし、バインドした頂点バッファオブジェクトを用いて描画を行います。

glBindBuffer関数で、作成した頂点バッファをバインドします。
これまで、配列データのアドレスを渡して使用していた、glVertexPointer関数、glNormalPointer関数、glDrawElements関数は、頂点バッファオブジェクトを使用するときには、GL11の関数を使用し、配列データのアドレスを渡す代わりに、データのオフセット量を渡します。

破棄処理では、頂点バッファオブジェクトの削除を行います。

glDeleteBuffer関数で、作成した頂点バッファを削除します。

実装

プロジェクトを開く

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

モデルデータ構造クラスの変更

モデルデータ構造クラスに、頂点バッファオブジェクトの構築処理と、破棄処理を追加します。

float型、short型のバイトサイズに関するメンバ定数を追加します。
頂点バッファオブジェクトを識別する頂点バッファオブジェクトID配列変数をメンバー変数として追加します。
頂点バッファオブジェクトのIDのゲッター関数を追加します。
VBO構築処理関数を追加し、頂点バッファオブジェクトの作成、作成した頂点バッファオブジェクトをバインド、データをクライアントメモリからグラフィックスメモリにコピー、の処理を記述します。
VBO破棄処理関数を追加し、頂点バッファを削除する処理を記述します。

public class Model { // 定数 private static final int SIZEOF_FLOAT = Float.SIZE / 8; // Float.SIZEで、float型のビット数が得られるので、8で割って、バイト数を得る private static final int SIZEOF_SHORT = Short.SIZE / 8; // Short.SIZEで、short型のビット数が得られるので、8で割って、バイト数を得る // メンバー変数（・・・省略・・・） private int[] m_aiVBOid = new int[3]; // VBO ID （・・・省略・・・） public int getVBOidVertex() { return m_aiVBOid[0]; } public int getVBOidTriangleVertexIndex() { return m_aiVBOid[1]; } public int getVBOidEdgeVertexIndex() { return m_aiVBOid[2]; } public void createVBO( GL10 gl ) { destroyVBO( gl ); if( !( gl instanceof GL11 ) ) { return; } GL11 gl11 = (GL11)gl; // VBO ID 配列の生成 gl11.glGenBuffers( m_aiVBOid.length, m_aiVBOid, 0 ); // データの転送 if( 0 != m_aiVBOid[0] ) { // Vertexデータの転送 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, getVBOidVertex() ); gl11.glBufferData( GL11.GL_ARRAY_BUFFER, m_fbVertex.capacity() * SIZEOF_FLOAT, m_fbVertex, GL11.GL_STATIC_DRAW ); // TriangleVertexIndexデータの転送 gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, getVBOidTriangleVertexIndex() ); gl11.glBufferData( GL11.GL_ELEMENT_ARRAY_BUFFER, m_sbTriangleVertexIndex.capacity() * SIZEOF_SHORT, m_sbTriangleVertexIndex, GL11.GL_STATIC_DRAW ); // EdgeVertexIndexデータの転送 gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, getVBOidEdgeVertexIndex() ); gl11.glBufferData( GL11.GL_ELEMENT_ARRAY_BUFFER, m_sbEdgeVertexIndex.capacity() * SIZEOF_SHORT, m_sbEdgeVertexIndex, GL11.GL_STATIC_DRAW ); // バインドの解除 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, 0 ); gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, 0 ); } } public void destroyVBO( GL10 gl ) { if( 0 == m_aiVBOid[0] ) { return; } if( !( gl instanceof GL11 ) ) { return; } GL11 gl11 = (GL11)gl; gl11.glDeleteBuffers( m_aiVBOid.length, m_aiVBOid, 0 ); Arrays.fill( m_aiVBOid, 0 ); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

VBOの構築処理、破棄処理付きのモデルセット関数の追加

モデルが置き換わった際には、古いモデルに関して、VBOの破棄処理を実施し、新しいモデルに関して、VBOの構築処理を実施するモデルセット関数を、モデルビューアレンダラクラスに、オーバーライド関数として追加します。

また、VBOの構築関数、破棄関数を追加し、モデルに関するVBO処理およびピック処理用の要素番号色に関するVBO処理を追加します。

また、BYTE型のバイトサイズに関するメンバ定数を追加します。
また、ピック処理用の要素番号色バッファオブジェクトを識別するバッファオブジェクトID配列変数をメンバー変数として追加します。

public class ModelViewerRenderer extends OpenGLPickRenderer { // 定数 private static final int SIZEOF_BYTE = Byte.SIZE / 8; // Byte.SIZEで、byte型のビット数が得られるので、8で割って、バイト数を得る // メンバー変数（・・・省略・・・） private int[] m_aiVBOidIdColor = new int[2]; // VBO ID // コンストラクタ public ModelViewerRenderer() { （・・・省略・・・） } // アクセサ public int getVBOidVertexIdColor() { return m_aiVBOidIdColor[0]; } public int getVBOidTriangleIdColor() { return m_aiVBOidIdColor[1]; } @Override protected void renderModel( ERenderMode eRenderMode ) （・・・省略・・・） @Override public void setModel( Model model ) { // VBOの破棄処理 destroyVBO(); super.setModel( model ); // VBOの構築処理 createVBO(); } public void createVBO() { destroyVBO(); if( !( getGL() instanceof GL11 ) ) { return; } GL11 gl11 = (GL11)getGL(); // モデルに関するVBO if( null != getModel() ) { getModel().createVBO( getGL() ); } // ピック処理用の要素番号色に関するVBO if( null != getModel() ) { // ピック処理用の要素番号色は、モデルと連動しているので、モデルがない場合は、VBO作成スキップ // VBO ID 配列の生成 gl11.glGenBuffers( m_aiVBOidIdColor.length, m_aiVBOidIdColor, 0 ); // データの転送 if( 0 != m_aiVBOidIdColor[0] ) { // 頂点番号色データの転送 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, getVBOidVertexIdColor() ); gl11.glBufferData( GL11.GL_ARRAY_BUFFER, getVertexIdColorBuffer().capacity() * SIZEOF_BYTE, getVertexIdColorBuffer(), GL11.GL_STATIC_DRAW ); // 三角形番号色データの転送 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, getVBOidTriangleIdColor() ); gl11.glBufferData( GL11.GL_ARRAY_BUFFER, getTriangleIdColorBuffer().capacity() * SIZEOF_BYTE, getTriangleIdColorBuffer(), GL11.GL_STATIC_DRAW ); // バインドの解除 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, 0 ); } } } public void destroyVBO() { if( !( getGL() instanceof GL11 ) ) { return; } GL11 gl11 = (GL11)getGL(); // ピック処理用の要素番号色に関するVBO if( 0 != m_aiVBOidIdColor[0] ) { gl11.glDeleteBuffers( m_aiVBOidIdColor.length, m_aiVBOidIdColor, 0 ); Arrays.fill( m_aiVBOidIdColor, 0 ); } // モデルに関するVBO if( null != getModel() ) { getModel().destroyVBO( getGL() ); } } }

モデルセット関数の呼び出し側は、UIスレッドで動作しています。
モデルセット関数の呼び出され側には、レンダリングスレッドで動作しているOpenGLに関する処理（OpenGLのgl～関数を使用する処理）の呼び出しがあります。
OpenGLに関する処理（OpenGLのgl～関数を使用する処理）をUIスレッドから呼び出すので、モデルセット関数の呼び出しをイベントキューイングします。

モデルビューアビューの loadModelFile関数のモデルセット関数の呼び出しをイベントキューイングします。

無名関数で使用するmodel変数を、final変数にします。

public class ModelViewerView extends GLSurfaceView implements GestureDetector.OnGestureListener { （・・・省略・・・） public void loadModelFile( String strPath ) { final Model model = StlFileLoader.load( strPath ); if( null == model ) { Toast.makeText( getContext(), "Failed to load file : " + strPath, Toast.LENGTH_SHORT ).show(); return; } // OpenGL関数呼び出しがあるので、イベントキューイングする。 queueEvent( new Runnable() { public void run() { m_renderer.setModel( model ); requestRender(); // 再描画 } } ); } （・・・省略・・・） }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

描画処理をVBOを利用した処理に変更

描画処理をVBOを利用した処理に変更します。

モデルビューアレンダラクラスに、short型のバイトサイズに関するメンバ定数を追加します。

モデルビューアレンダラクラスのrenderModel関数を以下のようにします。

public class ModelViewerRenderer extends OpenGLPickRenderer { // 定数（・・・省略・・・） private static final int SIZEOF_SHORT = Short.SIZE / 8; // Short.SIZEで、short型のビット数が得られるので、8で割って、バイト数を得る（・・・省略・・・） @Override protected void renderModel( ERenderMode eRenderMode ) { Model model = getModel(); if( null == model || null == model.getVertexBuffer() ) { return; } GL10 gl = getGL(); if( !( gl instanceof GL11 ) ) { return; } GL11 gl11 = (GL11)gl; // 頂点配列の有効化 gl.glEnableClientState( GL10.GL_VERTEX_ARRAY ); if( 0 != model.getVBOidVertex() ) { // Use VBO // 頂点配列の指定 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, model.getVBOidVertex() ); gl11.glVertexPointer( 3, GL10.GL_FLOAT, 0, 0 ); } else { // 頂点配列の指定 gl.glVertexPointer( 3, GL10.GL_FLOAT, 0, model.getVertexBuffer() ); } // 面の描画 if( m_bRenderFace && null != model.getTriangleVertexIndexBuffer() ) { if( ERenderMode.RM_PICK_ELEMENTID == eRenderMode ) { gl.glEnableClientState( GL10.GL_COLOR_ARRAY ); if( 0 != getVBOidTriangleIdColor() ) { // Use VBO // 色配列の指定 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, getVBOidTriangleIdColor() ); gl11.glColorPointer( 4, // Must be 4. GL10.GL_UNSIGNED_BYTE, 0, 0 ); } else { // 色配列の指定 gl.glColorPointer( 4, // Must be 4. GL10.GL_UNSIGNED_BYTE, 0, getTriangleIdColorBuffer() ); } } else if( ERenderMode.RM_PICK_ELEMENTTYPE == eRenderMode ) { gl.glColor4f( 1.0f, 0.0f, 0.0f, 1.0f ); } else { gl.glColor4f( 0.5f, 0.5f, 0.0f, 1.0f ); } if( 0 != model.getVBOidTriangleVertexIndex() ) { // Use VBO gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, model.getVBOidTriangleVertexIndex() ); gl11.glDrawElements( GL10.GL_TRIANGLES, model.getTriangleVertexIndexBuffer().capacity(), GL10.GL_UNSIGNED_SHORT, 0 ); } else { gl.glDrawElements( GL10.GL_TRIANGLES, model.getTriangleVertexIndexBuffer().capacity(), GL10.GL_UNSIGNED_SHORT, model.getTriangleVertexIndexBuffer().position( 0 ) ); } gl.glDisableClientState( GL10.GL_COLOR_ARRAY ); // ピック面の描画 if( ERenderMode.RM_RENDER == eRenderMode ) { if( ERenderElementType.RET_FACE.getValue() == m_aiName[1] ) { int iIndexTriangle = m_aiName[2]; gl.glColor4f( 1.0f, 1.0f, 0.0f, 1.0f ); if( 0 != model.getVBOidTriangleVertexIndex() ) { // Use VBO gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, model.getVBOidTriangleVertexIndex() ); gl11.glDrawElements( GL10.GL_TRIANGLES, 3, GL10.GL_UNSIGNED_SHORT, 3 * iIndexTriangle * SIZEOF_SHORT ); } else { gl.glDrawElements( GL10.GL_TRIANGLES, 3, GL10.GL_UNSIGNED_SHORT, model.getTriangleVertexIndexBuffer().position( 3 * iIndexTriangle ) ); } } } } // 線の描画 if( m_bRenderLine && null != model.getEdgeVertexIndexBuffer() ) { gl.glLineWidth( 2.0f ); if( ERenderMode.RM_PICK_ELEMENTID == eRenderMode ) { int iCountTriangle = model.getTriangleCount(); int iIndexTriangle; int i3; int iIndexEdge; byte[] abtRGB = { 0, 0, 0 }; if( 0 != model.getVBOidEdgeVertexIndex() ) { // Use VBO gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, model.getVBOidEdgeVertexIndex() ); } for( iIndexTriangle = 0; iIndexTriangle < iCountTriangle; ++iIndexTriangle ) { for( i3 = 0; i3 < 3; ++i3 ) { iIndexEdge = iIndexTriangle * 3 + i3; index2rgb( iIndexEdge, abtRGB ); gl11.glColor4ub( abtRGB[0], abtRGB[1], abtRGB[2], (byte)255 ); if( 0 != model.getVBOidEdgeVertexIndex() ) { // Use VBO gl11.glDrawElements( GL10.GL_LINES, 2, GL10.GL_UNSIGNED_SHORT, 2 * iIndexEdge * SIZEOF_SHORT ); } else { gl.glDrawElements( GL10.GL_LINES, 2, GL10.GL_UNSIGNED_SHORT, model.getEdgeVertexIndexBuffer().position( 2 * iIndexEdge ) ); } } } } else { if( ERenderMode.RM_PICK_ELEMENTTYPE == eRenderMode ) { gl.glColor4f( 0.0f, 1.0f, 0.0f, 1.0f ); } else { gl.glColor4f( 0.0f, 0.5f, 0.5f, 1.0f ); } if( 0 != model.getVBOidEdgeVertexIndex() ) { // Use VBO gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, model.getVBOidEdgeVertexIndex() ); gl11.glDrawElements( GL10.GL_LINES, model.getEdgeVertexIndexBuffer().capacity(), GL10.GL_UNSIGNED_SHORT, 0 ); } else { gl.glDrawElements( GL10.GL_LINES, model.getEdgeVertexIndexBuffer().capacity(), GL10.GL_UNSIGNED_SHORT, model.getEdgeVertexIndexBuffer().position( 0 ) ); } } // ピック線の描画 if( ERenderMode.RM_RENDER == eRenderMode ) { if( ERenderElementType.RET_LINE.getValue() == m_aiName[1] ) { int iIndexEdge = m_aiName[2]; gl.glLineWidth( 5.0f ); gl.glColor4f( 0.0f, 1.0f, 1.0f, 1.0f ); if( 0 != model.getVBOidEdgeVertexIndex() ) { // Use VBO gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, model.getVBOidEdgeVertexIndex() ); gl11.glDrawElements( GL10.GL_LINES, 2, GL10.GL_UNSIGNED_SHORT, 2 * iIndexEdge * SIZEOF_SHORT ); } else { gl.glDrawElements( GL10.GL_LINES, 2, GL10.GL_UNSIGNED_SHORT, model.getEdgeVertexIndexBuffer().position( 2 * iIndexEdge ) ); } } } } // 点の描画 if( m_bRenderPoint ) // && null != model.getVertexBuffer() ) { gl.glPointSize( 5.0f ); if( ERenderMode.RM_PICK_ELEMENTID == eRenderMode ) { gl.glEnableClientState( GL10.GL_COLOR_ARRAY ); if( 0 != getVBOidVertexIdColor() ) { // Use VBO // 色配列の指定 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, getVBOidVertexIdColor() ); gl11.glColorPointer( 4, // Must be 4. GL10.GL_UNSIGNED_BYTE, 0, 0 ); } else { // 色配列の指定 gl.glColorPointer( 4, // Must be 4. GL10.GL_UNSIGNED_BYTE, 0, getVertexIdColorBuffer() ); } } else if( ERenderMode.RM_PICK_ELEMENTTYPE == eRenderMode ) { gl.glColor4f( 0.0f, 0.0f, 1.0f, 1.0f ); } else { gl.glColor4f( 0.5f, 0.0f, 0.5f, 1.0f ); } gl.glDrawArrays( GL10.GL_POINTS, 0, model.getVertexCount() ); gl.glDisableClientState( GL10.GL_COLOR_ARRAY ); // ピック点の描画 if( ERenderMode.RM_RENDER == eRenderMode ) { if( ERenderElementType.RET_POINT.getValue() == m_aiName[1] ) { gl.glPointSize( 10.0f ); gl.glColor4f( 1.0f, 0.0f, 1.0f, 1.0f ); int iIndexPoint = m_aiName[2]; gl.glDrawArrays( GL10.GL_POINTS, iIndexPoint, 1 ); } } } if( 0 != model.getVBOidVertex() ) { // Use VBO // バインドの解除 gl11.glBindBuffer( GL11.GL_ARRAY_BUFFER, 0 ); gl11.glBindBuffer( GL11.GL_ELEMENT_ARRAY_BUFFER, 0 ); } // 頂点配列の無効化 gl.glDisableClientState( GL10.GL_VERTEX_ARRAY ); } （・・・省略・・・） }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

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

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

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

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

OpenGL描画コンテキストが消失されようとするときには、VBOの破棄処理を実施するようにします。
モデルビューアレンダラクラスの、preSurfaceDestroy関数に、VBO破棄関数の呼び出しを追加します。

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

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

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

リビルドし、エラー、警告がないことを確認します。

実行

Android端末にて、動作確認。

実行し、07．で作成したモデルビューアと、描画速度を比較します。

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

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

08．で作成したモデルビューアの描画速度：500[fps]前後（数値はAndroidデバイスの性能に依存します）

07．で作成したモデルビューアの描画速度：333[fps]前後（数値はAndroidデバイスの性能に依存します）

ダウンロード

サンプルプロジェクト
（github.com上のダウンロードページ）

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