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

08．で作成したモデルビューアの描画処理は、頂点配列を用いた描画処理でした。

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

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

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

解説

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

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

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

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

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

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

1. glDeleteBuffer関数で、作成した頂点バッファオブジェクトを削除します。

プロジェクトを開く

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

モデルデータ構造のVBO対応

モデルクラスについて、

頂点配列に関するメンバー変数、メンバー関数の宣言を削除します。
VBOに関するメンバー変数を追加します。
VBOに関する関数の宣言を追加します。
コンストラクタにVBOに関するメンバー変数の初期化処理を追加します。

Model.hのCModelのクラス宣言の内容を以下のようにします。

class CModel { public: std::vector<CVector> m_vVertex; // 頂点配列 std::vector<CIndexedTriangle> m_vIndexedTriangle; // 三角形配列 //float* m_afTriangleVertex; // 三角形の頂点の配列 //unsigned int* m_auiEdgeVertexIndex; // 稜線の頂点の番号の配列 private: unsigned int m_auiVboID[3]; // VBO ID public: CModel() { //m_afTriangleVertex = NULL; //m_auiEdgeVertexIndex = NULL; memset( m_auiVboID, 0x00, 3 * sizeof( unsigned int ) ); } ~CModel() { // DestroyArray(); } //void MakeArray(); //void DestroyArray(); unsigned int GetTriangleVertexVboID() { return m_auiVboID[0]; } unsigned int GetEdgeVertexIndexVboID() { return m_auiVboID[1]; } void MakeVBO(); void DestroyVBO(); };

VBOの作成と破棄の定義

頂点配列に関する関数の定義を削除します。
VBOに関する２つの関数（作成と破棄）の定義を追加します。
OpenGL拡張機能を使用するためのヘッダーファイルのインクルードを追加します。

Model.cppの内容を以下のようにします。

// // Model.cpp // #include "stdafx.h" #include "Model.h" #include "OpenGLExtFuncs.h" //void CModel::MakeArray() void CModel::MakeVBO() { // VBO ID 配列の生成 if( 0 == m_auiVboID[0] ) { glGenBuffers( 3, m_auiVboID ); } if( 0 == m_vIndexedTriangle.size() ) { return; } // 三角形頂点配列 unsigned int uiCountData = m_vIndexedTriangle.size() * 3 * 3; // １つの三角形は、３頂点。１頂点は３座標値。 float* afTriangleVertex = new float[uiCountData]; for( unsigned int uiIndexTriangle = 0; uiIndexTriangle < m_vIndexedTriangle.size(); uiIndexTriangle++ ) { afTriangleVertex[uiIndexTriangle * 9 + 0] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[0]].x; afTriangleVertex[uiIndexTriangle * 9 + 1] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[0]].y; afTriangleVertex[uiIndexTriangle * 9 + 2] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[0]].z; afTriangleVertex[uiIndexTriangle * 9 + 3] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[1]].x; afTriangleVertex[uiIndexTriangle * 9 + 4] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[1]].y; afTriangleVertex[uiIndexTriangle * 9 + 5] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[1]].z; afTriangleVertex[uiIndexTriangle * 9 + 6] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[2]].x; afTriangleVertex[uiIndexTriangle * 9 + 7] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[2]].y; afTriangleVertex[uiIndexTriangle * 9 + 8] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[2]].z; } glBindBuffer( GL_ARRAY_BUFFER, GetTriangleVertexVboID() ); glBufferData( GL_ARRAY_BUFFER, uiCountData * sizeof( float ), afTriangleVertex, GL_STATIC_DRAW ); glBindBuffer( GL_ARRAY_BUFFER, 0 ); // バインドの解除 delete afTriangleVertex; // VRAMに転送するデータはglBufferDataによって、VRAM上にデータが置かれる。RAM上にデータは不要。 // 稜線頂点番号配列 uiCountData = m_vIndexedTriangle.size() * 3 * 2; // 一つの三角形は、３つの稜線。１つの稜線は、２つの頂点。 unsigned int* auiEdgeVertexIndex = new unsigned int[uiCountData]; for( unsigned int uiIndexTriangle = 0; uiIndexTriangle < m_vIndexedTriangle.size(); uiIndexTriangle++ ) { auiEdgeVertexIndex[uiIndexTriangle * 6 + 0] = uiIndexTriangle * 3 + 0; auiEdgeVertexIndex[uiIndexTriangle * 6 + 1] = uiIndexTriangle * 3 + 1; auiEdgeVertexIndex[uiIndexTriangle * 6 + 2] = uiIndexTriangle * 3 + 1; auiEdgeVertexIndex[uiIndexTriangle * 6 + 3] = uiIndexTriangle * 3 + 2; auiEdgeVertexIndex[uiIndexTriangle * 6 + 4] = uiIndexTriangle * 3 + 2; auiEdgeVertexIndex[uiIndexTriangle * 6 + 5] = uiIndexTriangle * 3 + 0; } glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, GetEdgeVertexIndexVboID() ); glBufferData( GL_ELEMENT_ARRAY_BUFFER, uiCountData * sizeof( unsigned int ), auiEdgeVertexIndex, GL_STATIC_DRAW ); glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, 0 ); // バインドの解除 delete auiEdgeVertexIndex; // VRAMに転送するデータはglBufferDataによって、VRAM上にデータが置かれる。RAM上にデータは不要。 } //void CModel::DestroyArray() void CModel::DestroyVBO() { if( 0 == m_auiVboID[0] ) { return; } glDeleteBuffers( 3, m_auiVboID ); memset( m_auiVboID, 0x00, 3 * sizeof( unsigned int ) ); }

VBOの作成の関数の呼び出し

ファイルからのモデルデータの読み込み処理の後に、VBO作成が実施されるようにします。

ModelViewerView.cppのCModelViewerView::OnFileOpen関数内のLoadStlFile関数呼び出し後の
m_model.DestroyArray();
m_model.MakeArray();
をコメントアウトし、
m_model.MakeVBO();
を追加します。

void CModelViewerView::OnFileOpen() { （・・・略・・・） if( LoadStlFile( pszFileName, model ) ) { memset( m_auiName_picked, 0x00, NAMEARRAYSIZE * sizeof( unsigned int ) ); //m_model.DestroyArray(); m_model = model; //m_model.MakeArray(); m_model.MakeVBO(); } （・・・略・・・） } }

ピック描画のVBO対応

ピック描画の色配列についても、グラフィックスメモリにコピーするようにします。

モデルビューアビュークラスについて、

色配列に関するメンバー変数（m_abt4VertexIdColor、m_abt4TriangleIdColor）を削除します。
色配列に関するメンバー関数（MakeArray、DestroyArray）の宣言を削除します。

VBOに関するメンバー変数（m_auiVboID）を追加します。
VBOに関する関数（MakeVBO、DestroyVBO、GetVertexIdColorVboID、GetTriangleIdColorVboID）の宣言を追加します。
OpenGL初期化処理関数（InitializeOpenGL）、OpenGL終了処理関数（UninitializeOpenGL）の宣言を追加します。

ModelViewerView.hのCModelViewerViewのクラス宣言の内容を以下のようにします。

class CModelViewerView : public COpenGLPickView { // メンバ変数 private: （・・・略・・・） CModel m_model; //GLubyte* m_abt4VertexIdColor; //GLubyte* m_abt4TriangleIdColor; unsigned int m_auiVboID[3]; // VBO ID // メンバ関数 private: （・・・略・・・） void IdentifyPickRegionPixels( unsigned int uiCountPickRegionPixel, unsigned int aauiNamePickRegionPixel[][NAMEARRAYSIZE] ); //void MakeArray(); //void DestroyArray(); void MakeVBO(); void DestroyVBO(); unsigned int GetVertexIdColorVboID(){ return m_auiVboID[0]; } unsigned int GetTriangleIdColorVboID(){ return m_auiVboID[1]; } bool InitializeOpenGL(); void UninitializeOpenGL(); protected: // シリアル化からのみ作成します。 （・・・略・・・）

ピック描画用のVBOの作成と破棄の定義

ModelViewerView.cppの、
色配列に関する関数の呼び出しを削除します。
色配列に関する関数の宣言を削除します。

コンストラクタに、VBOに関するメンバー変数の初期化処理を追加します。
VBOに関する２つの関数（作成と破棄）の定義を追加します。

CModelViewerView::CModelViewerView() : （・・・略・・・） { // TODO: 構築コードをここに追加します。 //MakeArray(); memset( m_auiVboID, 0x00, 3 * sizeof( unsigned int ) ); } CModelViewerView::~CModelViewerView() { //DestroyArray(); } （・・・略・・・） //void CModelViewerView::MakeArray() void CModelViewerView::MakeVBO() { if( 0 == m_auiVboID[0] ) { glGenBuffers( 3, m_auiVboID ); } unsigned int uiMaxColor = 256 * 256 * 256; // 256*256*256=16,777,216。unsigned int の最大値(4,294,967,295)に対して余裕あり。 // 頂点番号色配列 unsigned int uiCountData = uiMaxColor * 4; // １頂点はRGBAの４値。 GLubyte* abt4VertexIdColor = new GLubyte[uiCountData]; for( unsigned int ui = 0; ui < uiMaxColor; ui++ ) { abt4VertexIdColor[ui * 4 + 0] = GetRValue( ui ); abt4VertexIdColor[ui * 4 + 1] = GetGValue( ui ); abt4VertexIdColor[ui * 4 + 2] = GetBValue( ui ); abt4VertexIdColor[ui * 4 + 3] = (GLubyte)255; } glBindBuffer( GL_ARRAY_BUFFER, GetVertexIdColorVboID() ); glBufferData( GL_ARRAY_BUFFER, uiCountData * sizeof( GLubyte ), abt4VertexIdColor, GL_STATIC_DRAW ); glBindBuffer( GL_ARRAY_BUFFER, 0 ); // バインドの解除 delete abt4VertexIdColor; // VRAMに転送するデータはglBufferDataによって、VRAM上にデータが置かれる。RAM上にデータは不要。 // 三角形番号色配列 uiCountData = uiMaxColor * 3 * 4; // １つの三角形は、３座標値。１頂点はRGBAの４値。 GLubyte* abt4TriangleIdColor = new GLubyte[uiMaxColor * 3 * 4]; for( unsigned int ui = 0; ui < uiMaxColor; ui++ ) { GLubyte r = GetRValue( ui ); GLubyte g = GetGValue( ui ); GLubyte b = GetBValue( ui ); abt4TriangleIdColor[ui * 12 + 0] = r; abt4TriangleIdColor[ui * 12 + 1] = g; abt4TriangleIdColor[ui * 12 + 2] = b; abt4TriangleIdColor[ui * 12 + 3] = (GLubyte)255; abt4TriangleIdColor[ui * 12 + 4] = r; abt4TriangleIdColor[ui * 12 + 5] = g; abt4TriangleIdColor[ui * 12 + 6] = b; abt4TriangleIdColor[ui * 12 + 7] = (GLubyte)255; abt4TriangleIdColor[ui * 12 + 8] = r; abt4TriangleIdColor[ui * 12 + 9] = g; abt4TriangleIdColor[ui * 12 + 10] = b; abt4TriangleIdColor[ui * 12 + 11] = (GLubyte)255; } glBindBuffer( GL_ARRAY_BUFFER, GetTriangleIdColorVboID() ); glBufferData( GL_ARRAY_BUFFER, uiCountData * sizeof( GLubyte ), abt4TriangleIdColor, GL_STATIC_DRAW ); glBindBuffer( GL_ARRAY_BUFFER, 0 ); // バインドの解除 delete abt4TriangleIdColor; // VRAMに転送するデータはglBufferDataによって、VRAM上にデータが置かれる。RAM上にデータは不要。 } //void CModelViewerView::DestroyArray() void CModelViewerView::DestroyVBO() { if( 0 == m_auiVboID[0] ) { return; } glDeleteBuffers( 3, m_auiVboID ); memset( m_auiVboID, 0x00, 3 * sizeof( unsigned int ) ); } （・・・略・・・）

ピック描画用のVBOの作成と破棄の関数の呼び出し

モデルビューアービュークラスに、OpenGL初期化処理関数、OpenGL終了処理関数をオーバーライドします。オーバーライドしたのOpenGL初期化処理関数、OpenGL終了処理関数に、VBOの作成と破棄の関数の呼び出しを追加します。

bool CModelViewerView::InitializeOpenGL() { if( !COpenGLPickView::InitializeOpenGL() ) { return false; } MakeVBO(); return true; } void CModelViewerView::UninitializeOpenGL() { m_model.DestroyVBO(); DestroyVBO(); COpenGLPickView::UninitializeOpenGL(); }

OpenGLBaseView.h のベースOpenGLビュークラスの
メンバ関数
InitializeOpenGL
をprotected関数、さらにvirtual関数とします。

class COpenGLBaseView : public CView { （・・・略・・・） // メンバ関数 private: bool SetupPixelFormat(); bool SetupViewport(); bool PreRenderScene() { return true; } void RenderStockScene(); bool PostRenderScene() { return true; } void RenderAxis(); protected: virtual bool InitializeOpenGL(); virtual void UninitializeOpenGL(); virtual bool SetupProjectionMatrix(); virtual bool SetupModelViewMatrix(); virtual bool RenderScene() { return true; } （・・・略・・・）

OpenGLPickView.h のピックOpenGLビュークラスの
メンバ関数
UninitializeOpenGL
をprotected関数、さらにvirtual関数とします。

class COpenGLPickView : public COpenGLTrackView { （・・・略・・・） // メンバ関数 // メンバ関数 private: void CreateFrameBuffer( int iWidth, int iHeight ); void DestroyFrameBuffer(); bool RenderScene(); int DoPicking( int x, int y ); protected: virtual void UninitializeOpenGL(); virtual void RenderModel( ERENDERMODE eRenderMode ); virtual void IdentifyPickRegionPixels( unsigned int uiCountPickRegionPixel, unsigned int aauiNamePickRegionPixel[][NAMEARRAYSIZE] ); （・・・略・・・）

描画処理のVBO対応

描画処理をVBOに対応した処理に変更します。

ModelViewerView.cpp の CModelViewerView:RenderModel関数の内容を以下のようにします。

void CModelViewerView::RenderModel( ERENDERMODE eRenderMode ) { if( 0 == m_model.m_vVertex.size() ) { return; } if( 0 == m_model.m_vIndexedTriangle.size() ) { return; } unsigned int uiIndexTriangle; unsigned int uiIndexLine; unsigned int uiIndexPoint; unsigned int ui3; glPushAttrib( GL_ALL_ATTRIB_BITS ); // アトリビュート復帰できるように、一つ追加 // 頂点配列の有効化 glEnableClientState( GL_VERTEX_ARRAY ); // 頂点配列の指定 glBindBuffer( GL_ARRAY_BUFFER, m_model.GetTriangleVertexVboID() ); // VBO //glVertexPointer( 3, GL_FLOAT, 0, m_model.m_afTriangleVertex ); glVertexPointer( 3, GL_FLOAT, 0, (float*)0 ); glBindBuffer( GL_ARRAY_BUFFER, 0 ); // バインドの解除 // 面 if( m_bRenderFace ) { if( RM_PICK_ELEMENTID == eRenderMode ) { glEnableClientState( GL_COLOR_ARRAY ); glBindBuffer( GL_ARRAY_BUFFER, GetTriangleIdColorVboID() ); // VBO glColorPointer( 4, // Must be 4. GL_UNSIGNED_BYTE, 0, //m_abt4TriangleIdColor ); (GLubyte*)0 ); glBindBuffer( GL_ARRAY_BUFFER, 0 ); // バインドの解除 } else if( RM_PICK_ELEMENTTYPE == eRenderMode ) { glColor3f( 1.0f, 0.0f, 0.0f ); } else //if( RM_RENDER == eRenderMode ) { glColor3f( 0.5f, 0.5f, 0.0f ); } glDrawArrays( GL_TRIANGLES, 0, m_model.m_vIndexedTriangle.size() * 3 ); glDisableClientState( GL_COLOR_ARRAY ); // ピック面の描画 if( RM_RENDER == eRenderMode ) { if( RET_FACE == m_auiName_picked[1] ) { uiIndexTriangle = m_auiName_picked[2]; glColor3f( 1.0f, 1.0f, 0.0f ); // ピック色 glDrawArrays( GL_TRIANGLES, uiIndexTriangle * 3, 3 ); } } } // 線 if( m_bRenderLine ) { glLineWidth( 2.0 ); if( RM_PICK_ELEMENTID == eRenderMode ) { glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, m_model.GetEdgeVertexIndexVboID() ); // VBO for( uiIndexTriangle = 0; uiIndexTriangle < m_model.m_vIndexedTriangle.size(); uiIndexTriangle++ ) { for( ui3 = 0; ui3 < 3; ui3++ ) { uiIndexLine = uiIndexTriangle * 3 + ui3; glColor3ub( GetRValue( uiIndexLine ), GetGValue( uiIndexLine ), GetBValue( uiIndexLine ) ); glDrawElements( GL_LINES, 2, GL_UNSIGNED_INT, //&m_model.m_auiEdgeVertexIndex[2 * uiIndexLine] ); (unsigned int*)( 2 * uiIndexLine * sizeof( unsigned int ) ) ); } } glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, 0 ); // バインドの解除 } else { if( RM_PICK_ELEMENTTYPE == eRenderMode ) { glColor3f( 0.0f, 1.0f, 0.0f ); } else // if( RM_RENDER == eRenderMode ) { glColor3f( 0.0f, 0.5f, 0.5f ); } glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, m_model.GetEdgeVertexIndexVboID() ); // VBO glDrawElements( GL_LINES, m_model.m_vIndexedTriangle.size() * 3 * 2, GL_UNSIGNED_INT, //&m_model.m_auiEdgeVertexIndex[0] ); (unsigned int*)0 ); glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, 0 ); // バインドの解除 } // ピック線の描画 if( RM_RENDER == eRenderMode ) { if( RET_LINE == m_auiName_picked[1] ) { uiIndexLine = m_auiName_picked[2]; glLineWidth( 5.0f ); glColor3f( 0.0f, 1.0f, 1.0f ); glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, m_model.GetEdgeVertexIndexVboID() ); // VBO glDrawElements( GL_LINES, 2, GL_UNSIGNED_INT, //&m_model.m_auiEdgeVertexIndex[2 * uiIndexLine] ); (unsigned int*)( 2 * uiIndexLine * sizeof( unsigned int ) ) ); glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, 0 ); // バインドの解除 } } } // 点 if( m_bRenderPoint ) { glPointSize( 5.0 ); if( RM_PICK_ELEMENTID == eRenderMode ) { glEnableClientState( GL_COLOR_ARRAY ); glBindBuffer( GL_ARRAY_BUFFER, GetVertexIdColorVboID() ); // VBO glColorPointer( 4, // Must be 4. GL_UNSIGNED_BYTE, 0, //m_abt4VertexIdColor ); (GLubyte*)0 ); glBindBuffer( GL_ARRAY_BUFFER, 0 ); // バインドの解除 } else if( RM_PICK_ELEMENTTYPE == eRenderMode ) { glColor3f( 0.0f, 0.0f, 1.0f ); } else //if( RM_RENDER == eRenderMode ) { glColor3f( 0.5f, 0.0f, 0.5f ); } glDrawArrays( GL_POINTS, 0, m_model.m_vIndexedTriangle.size() * 3 ); glDisableClientState( GL_COLOR_ARRAY ); // ピック点の描画 if( RM_RENDER == eRenderMode ) { if( RET_POINT == m_auiName_picked[1] ) { uiIndexPoint = m_auiName_picked[2]; glPointSize( 10.0f ); glColor3f( 1.0f, 0.0f, 1.0f ); glDrawArrays( GL_POINTS, uiIndexPoint, 1 ); } } } // 頂点配列の無効化 glDisableClientState( GL_VERTEX_ARRAY ); glPopAttrib(); // アトリビュートの復帰 return; }

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

実行

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

描画速度はステータスバーに表示されます。

fps

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

spf

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

08．で作成したモデルビューワの描画速度：1000[fps]前後（数値は、モデルのポリゴン数、PCの性能に依存します）


09．で作成したモデルビューワの描画速度：1000[fps]前後（数値は、モデルのポリゴン数、PCの性能に依存します）
（08. で作成したモデルビューア と差がでませんでしたが、よりポリゴン数が多いモデルにおいて、描画速度に差が出ます。）

ダウンロード

ソースファイルダウンロード (ModelViewerOpenGLMFC2015_09_vbo.zip)

関連ページ

前項目：08．描画の高速化（頂点配列）

次項目：10．光源の効果の利用