08．描画の高速化（頂点配列）

05．で作成したモデルビューワの描画処理は、１回の「glBegin関数～glEnd関数」で、１つの描画要素（点、線、三角形）の描画処理であり、複数の描画要素（点、線、三角形）を描画する際には、描画要素の数だけ、「glBegin関数～glEnd関数」を呼び出していました。

頂点配列を利用し、「複数の描画要素（点、線、三角形）の描画処理を、まとめる」ことにより、描画の高速化を行います。

解説

頂点配列を用いた描画を行うためには、構築処理と、描画処理と、破棄処理を作成する必要があります。

構築処理では、頂点配列を作成を行います。

描画処理では、頂点配列を用いて描画を行います。
glVertexPointer関数を用いて、頂点配列を指定します。
glDrawArrays関数を用いて、描画します。

破棄処理では、頂点配列の削除を行います。

プロジェクトを開く

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

モデルデータ構造の頂点配列対応

モデルクラスについて、

以下の、頂点配列に関するメンバー変数を追加します。
float* m_afTriangleVertex; // 三角形の頂点の配列
unsigned int* m_auiEdgeVertexIndex; // 稜線の頂点の番号の配列

以下の、頂点配列に関する関数の宣言を追加します。
void InitArray();
void UninitArray();

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

class CModel { public: std::vector<CVector> m_vVertex; // 頂点配列 std::vector<CIndexedTriangle> m_vIndexedTriangle; // 三角形配列 float* m_afTriangleVertex; // 三角形の頂点の配列 unsigned int* m_auiEdgeVertexIndex; // 稜線の頂点の番号の配列 public: CModel() { m_afTriangleVertex = NULL; m_auiEdgeVertexIndex = NULL; } ~CModel() { DestroyArray(); } void MakeArray(); void DestroyArray(); };

頂点配列の作成と破棄の定義

頂点配列に関する２つの関数（作成と破棄）の定義を追加します。

「メニュー／プロジェクト／新しい項目の追加」でファイル名「Model.cpp」のファイルを作成します。

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

// // Model.cpp // #include "stdafx.h" #include "Model.h" void CModel::MakeArray() { DestroyArray(); if( 0 == m_vIndexedTriangle.size() ) { return; } // 三角形頂点配列 unsigned int uiCountData = m_vIndexedTriangle.size() * 3 * 3; // １つの三角形は、３頂点。１頂点は３座標値。 m_afTriangleVertex = new float[uiCountData]; for( unsigned int uiIndexTriangle = 0; uiIndexTriangle < m_vIndexedTriangle.size(); uiIndexTriangle++ ) { m_afTriangleVertex[uiIndexTriangle * 9 + 0] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[0]].x; m_afTriangleVertex[uiIndexTriangle * 9 + 1] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[0]].y; m_afTriangleVertex[uiIndexTriangle * 9 + 2] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[0]].z; m_afTriangleVertex[uiIndexTriangle * 9 + 3] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[1]].x; m_afTriangleVertex[uiIndexTriangle * 9 + 4] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[1]].y; m_afTriangleVertex[uiIndexTriangle * 9 + 5] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[1]].z; m_afTriangleVertex[uiIndexTriangle * 9 + 6] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[2]].x; m_afTriangleVertex[uiIndexTriangle * 9 + 7] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[2]].y; m_afTriangleVertex[uiIndexTriangle * 9 + 8] = m_vVertex[m_vIndexedTriangle[uiIndexTriangle].m_ui3IndexVertex[2]].z; } // 稜線頂点番号配列 uiCountData = m_vIndexedTriangle.size() * 3 * 2; // 一つの三角形は、３つの稜線。１つの稜線は、２つの頂点。 m_auiEdgeVertexIndex = new unsigned int[uiCountData]; for( unsigned int uiIndexTriangle = 0; uiIndexTriangle < m_vIndexedTriangle.size(); uiIndexTriangle++ ) { m_auiEdgeVertexIndex[uiIndexTriangle * 6 + 0] = uiIndexTriangle * 3 + 0; m_auiEdgeVertexIndex[uiIndexTriangle * 6 + 1] = uiIndexTriangle * 3 + 1; m_auiEdgeVertexIndex[uiIndexTriangle * 6 + 2] = uiIndexTriangle * 3 + 1; m_auiEdgeVertexIndex[uiIndexTriangle * 6 + 3] = uiIndexTriangle * 3 + 2; m_auiEdgeVertexIndex[uiIndexTriangle * 6 + 4] = uiIndexTriangle * 3 + 2; m_auiEdgeVertexIndex[uiIndexTriangle * 6 + 5] = uiIndexTriangle * 3 + 0; } } void CModel::DestroyArray() { if( m_auiEdgeVertexIndex ) { delete m_auiEdgeVertexIndex; } if( m_afTriangleVertex ) { delete m_afTriangleVertex; } }

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

頂点配列の作成の関数の呼び出し

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

ModelViewer.cpp の WndProc関数の、WM_COMMAND　ウィンドウメッセージ処理の、ID_FILE_OPEN コマンド処理の m_glrenderer.m_model = model;
の前に、
m_glrenderer.m_model.DestroyArray();
を追加します。
後に、
m_glrenderer.m_model.MakeArray();
を追加します。

LRESULT CALLBACK WndProc( HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam ) { （・・・略・・・） case WM_COMMAND: { （・・・略・・・） switch( wmId ) { （・・・略・・・） case ID_FILE_OPEN: { （・・・略・・・） CModel model; if( LoadStlFile( pszFileName, model ) ) { memset( glrenderer.m_auiName_picked, 0x00, NAMEARRAYSIZE * sizeof( unsigned int ) ); glrenderer.m_model.DestroyArray(); glrenderer.m_model = model; glrenderer.m_model.MakeArray(); } （・・・略・・・）

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

ピック描画の色配列対応

ピック処理は、「要素ごとに色を変えてオフスクリーンに描画する」というピック描画を行っています。
ピック描画においては、要素ごとに色を変え、「glBegin関数～glEnd関数」を呼び出していました。
頂点配列を利用し、「複数の描画要素（点、線、三角形）の描画処理を、まとめる」ことにより、ビック描画の高速化を行います。

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

以下の、色配列に関するメンバー変数を追加します。
GLubyte* m_abt4VertexIdColor;
GLubyte* m_abt4TriangleIdColor;

以下の、色配列に関する関数の宣言を追加します。
void InitArray();
void UninitArray();

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

class CModelViewerRenderer : public COpenGLRendererPick { （・・・略・・・） // メンバ変数 private: public: CModel m_model; GLubyte* m_abt4VertexIdColor; GLubyte* m_abt4TriangleIdColor; （・・・略・・・） // メンバ関数 private: void RenderModel( ERENDERMODE eRenderMode ); void IdentifyPickRegionPixels( unsigned int uiCountPickRegionPixel, unsigned int aauiNamePickRegionPixel[][NAMEARRAYSIZE] ); void MakeArray(); void DestroyArray(); （・・・略・・・） };

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

ピック描画用の色配列の作成と破棄の定義

ModelViewerRenderer.cppに、ピック描画用の色配列に関する２つの関数（作成と破棄）の定義を追加します。

void CModelViewerRenderer::MakeArray() { unsigned int uiMaxColor = 256 * 256 * 256; // 256*256*256=16,777,216。unsigned int の最大値(4,294,967,295)に対して余裕あり。 // 頂点番号色配列 unsigned int uiCountData = uiMaxColor * 4; // １頂点はRGBAの４値。 m_abt4VertexIdColor = new GLubyte[uiCountData]; for( unsigned int ui = 0; ui < uiMaxColor; ui++ ) { m_abt4VertexIdColor[ui * 4 + 0] = GetRValue( ui ); m_abt4VertexIdColor[ui * 4 + 1] = GetGValue( ui ); m_abt4VertexIdColor[ui * 4 + 2] = GetBValue( ui ); m_abt4VertexIdColor[ui * 4 + 3] = (GLubyte)255; } // 三角形番号色配列 uiCountData = uiMaxColor * 3 * 4; // １つの三角形は、３座標値。１頂点はRGBAの４値。 m_abt4TriangleIdColor = new GLubyte[uiCountData]; for( unsigned int ui = 0; ui < uiMaxColor; ui++ ) { GLubyte r = GetRValue( ui ); GLubyte g = GetGValue( ui ); GLubyte b = GetBValue( ui ); m_abt4TriangleIdColor[ui * 12 + 0] = r; m_abt4TriangleIdColor[ui * 12 + 1] = g; m_abt4TriangleIdColor[ui * 12 + 2] = b; m_abt4TriangleIdColor[ui * 12 + 3] = (GLubyte)255; m_abt4TriangleIdColor[ui * 12 + 4] = r; m_abt4TriangleIdColor[ui * 12 + 5] = g; m_abt4TriangleIdColor[ui * 12 + 6] = b; m_abt4TriangleIdColor[ui * 12 + 7] = (GLubyte)255; m_abt4TriangleIdColor[ui * 12 + 8] = r; m_abt4TriangleIdColor[ui * 12 + 9] = g; m_abt4TriangleIdColor[ui * 12 + 10] = b; m_abt4TriangleIdColor[ui * 12 + 11] = (GLubyte)255; } } void CModelViewerRenderer::DestroyArray() { delete m_abt4VertexIdColor; delete m_abt4TriangleIdColor; }

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

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

モデルビューアーレンダラクラスのコンストラクタとデストラクタに、色配列の作成と破棄の関数の呼び出しを追加します。

ModelViewerRenderer.cpp の CModelViewerRenderer::CModelViewerRenderer関数 および CModelViewerRenderer::~CModelViewerRenderer関数 の内容を以下のようにします。

CModelViewerRenderer::CModelViewerRenderer() : （・・・略・・・） { MakeArray(); } CModelViewerRenderer::~CModelViewerRenderer() { DestroyArray(); }

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

描画処理の頂点配列対応

描画処理を頂点配列に対応した処理に変更します。

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

void CModelViewerRenderer::RenderModel( ERENDERMODE eRenderMode ) { if( 0 == m_model.m_vVertex.size() ) { return; } unsigned int uiIndexTriangle; unsigned int uiIndexLine; unsigned int uiIndexPoint; unsigned int ui3; glPushAttrib( GL_ALL_ATTRIB_BITS ); // アトリビュート復帰できるように、一つ追加 // 頂点配列の有効化 glEnableClientState( GL_VERTEX_ARRAY ); // 頂点配列の指定 glVertexPointer( 3, GL_FLOAT, 0, m_model.m_afTriangleVertex ); // 面 if( m_bRenderFace ) { if( RM_PICK_ELEMENTID == eRenderMode ) { glEnableClientState( GL_COLOR_ARRAY ); glColorPointer( 4, // Must be 4. GL_UNSIGNED_BYTE, 0, m_abt4TriangleIdColor ); } 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 ) { 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] ); } } } 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 ); } glDrawElements( GL_LINES, m_model.m_vIndexedTriangle.size() * 3 * 2, GL_UNSIGNED_INT, &m_model.m_auiEdgeVertexIndex[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 ); glDrawElements( GL_LINES, 2, GL_UNSIGNED_INT, &m_model.m_auiEdgeVertexIndex[2 * uiIndexLine] ); } } } // 点 if( m_bRenderPoint ) { glPointSize( 5.0 ); if( RM_PICK_ELEMENTID == eRenderMode ) { glEnableClientState( GL_COLOR_ARRAY ); glColorPointer( 4, // Must be 4. GL_UNSIGNED_BYTE, 0, m_abt4VertexIdColor ); } 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; }

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

実行

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

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

fps

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

spf

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

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


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

ダウンロード

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

関連ページ

前項目：07．描画速度の計測

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