CDR6275

Michio SHIRAISHI Official Site


OpenGL 4.1とOpenGL ES SL 1.0で学ぶ3次元コンピュータグラフィックス

東邦大学理学部情報科学科 白石路雄
最終更新: 2014年2月20日

3. ポリゴンモデル

 2章では、1つの三角形を描いてきました。3次元の形状モデルは三角形の集まりとして表されていますので、複数の三角形を描く方法について述べます。

3.3 頂点インデックスを使って描画する

 さて、前節では、五角形の頂点を作成してから、それをコピーして頂点座標からなる配列を作成していました。しかし、頂点番号を指定して、描画したほうが楽ですよね。ということで、頂点番号を使って描画する方法が以下のようになります。

#include <iostream>

#define _USE_MATH_DEFINES
#include <math.h>

#include "IndexedPentagon.h"
#include "SimpleProgramObject.h"
#include "Matrix.h"

enum
{
  ATTRIBUTE_VERTEX_COORDINATE,
  NUM_ATTRIBUTES
};

enum
{
  UNIFORM_PROJECTION_MATRIX,
  NUM_UNIFORMS
};
GLint uniforms[NUM_UNIFORMS];

GLuint faceVertexIndices[9] = {
  0, 1, 2,
  0, 2, 3,
  0, 3, 4,
};

bool IndexedPentagon::initialize(){
#if !TARGET_OS_IPHONE
  BaseApplication::initializeWindow(640, 640, "IndexedPentagon");
#endif
  
  GLfloat vertexCoordinates[3*5];
  for(int i=0; i<5; i++){
    vertexCoordinates[3*i+0] = 0.8f * (GLfloat)cos(i*M_PI*2.0/5.0);
    vertexCoordinates[3*i+1] = 0.8f * (GLfloat)sin(i*M_PI*2.0/5.0);
    vertexCoordinates[3*i+2] = 0.0f;
  }
  
  SimpleProgramObject programObject;
  const char* vertexShaderFileName = "first.vs";
  const char* fragmentShaderFileName = "first.fs";
  
  program = programObject.createProgram(vertexShaderFileName, fragmentShaderFileName, shaderSearchPath);

  // シェーダコード内の変数にインデックスを設定する
  glBindAttribLocation(program, ATTRIBUTE_VERTEX_COORDINATE, "vertexCoordinate");
  
  programObject.linkProgram();
  
  // 頂点配列オブジェクトを作成して設定する
#if TARGET_OS_IPHONE
  glGenVertexArraysOES(1, &vertexArrayObject);
  glBindVertexArrayOES(vertexArrayObject);
#else
  glGenVertexArrays(1, &vertexArrayObject);
  glBindVertexArray(vertexArrayObject);
#endif
  
  // 頂点バッファオブジェクトを作成する
  glGenBuffers(1, &vertexBufferObject);
  glBindBuffer(GL_ARRAY_BUFFER, vertexBufferObject);
  glBufferData(GL_ARRAY_BUFFER, sizeof(float)*15, vertexCoordinates, GL_STATIC_DRAW);
  
  // 頂点バッファオブジェクトにシェーダ内の変数vertexCoodrinateを結びつける
  glEnableVertexAttribArray(ATTRIBUTE_VERTEX_COORDINATE);
  glVertexAttribPointer(ATTRIBUTE_VERTEX_COORDINATE, 3, GL_FLOAT, GL_FALSE, sizeof(float)*3, 0);
  
  // 要素配列バッファオブジェクトを作成する
  glGenBuffers(1, &elementArrayBufferObject);
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, elementArrayBufferObject);
  glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLuint)*9, faceVertexIndices, GL_STATIC_DRAW);

  // 背景色の設定
  glClearColor(0.75f, 0.75f, 0.75f, 1.0f);
  
  return true;
}

void IndexedPentagon::update(){
  
}

void IndexedPentagon::draw(){
#if TARGET_OS_IPHONE
  int viewport[4];
  glGetIntegerv(GL_VIEWPORT, viewport);
  glViewport(0, (viewport[3]-viewport[2])/2, viewport[2], viewport[2]);
#endif
  // 背景のクリア
  glClear(GL_COLOR_BUFFER_BIT);
  // 使用するプログラムオブジェクトをする
  glUseProgram(program);
  // 三角形を描く
  glDrawElements(GL_TRIANGLES, 3*3, GL_UNSIGNED_INT, 0);
  // 使用するプログラムオブジェクトを解除する
  glUseProgram(0);
#if _WIN32 || (TARGET_OS_MAC && !TARGET_OS_IPHONE)
  // バッファの入れ替え
  glfwSwapBuffers(window);
  // イベントの取得
  glfwPollEvents();
#endif
}

 さて、変更した点を順に解説していきましょう。まず、頂点のインデックスを使って、3つの三角形を定義しています。

GLuint faceVertexIndices[9] = {
  0, 1, 2,
  0, 2, 3,
  0, 3, 4,
};

 最初の三角形は、0番目の頂点と1番目の頂点と2番目の頂点で構成され、次の三角形は0番目の頂点と2番目の頂点と3番目の頂点で構成され、というような順で並べていきます。次に頂点の要素配列を次のようにしてバッファに送ります。

  glGenBuffers(1, &elementArrayBufferObject);
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, elementArrayBufferObject);
  glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLuint)*9, faceVertexIndices, GL_STATIC_DRAW);
 

 また、描画の方法が、

glDrawArrays(GL_TRIANGLES, 0, 3*3);
 

から

glDrawElements(GL_TRIANGLES, 3*3, GL_UNSIGNED_INT, 0);
 

というように変更になっています。