CDR6275

Michio SHIRAISHI Official Site


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

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

3. ポリゴンモデル

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

3.4 三角形の稜線を描く

 さて、前節で複数の三角形の内部を塗りつぶすことができるようになったので、次に稜線を描いてみましょう。それほど難しくありません。

#include <iostream>

#define _USE_MATH_DEFINES
#include <math.h>

#include "PentagonEdges.h"
#include "SimpleProgramObject.h"
#include "Matrix.h"

enum
{
  ATTRIBUTE_VERTEX_COORDINATE,
  NUM_ATTRIBUTES
};

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

GLuint edgeIndices[14] = {
  0, 1,
  1, 2,
  2, 3,
  3, 4,
  4, 0,
  0, 2,
  0, 3,
};

bool PentagonEdges::initialize(){
  
#if !TARGET_OS_IPHONE
  BaseApplication::initializeWindow(640, 640, "PentagonEdges");
#endif
  
  // 五角形の頂点座標
  float pentagonVertices[3*5];
  for(int i=0; i<5; i++){
    pentagonVertices[3*i+0] = 0.8f * (float)cos(i*M_PI*2.0/5.0);
    pentagonVertices[3*i+1] = 0.8f * (float)sin(i*M_PI*2.0/5.0);
    pentagonVertices[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, pentagonVertices, 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)*14, edgeIndices, GL_STATIC_DRAW);

  // 背景色の設定
  glClearColor(0.75f, 0.75f, 0.75f, 1.0f);
  
  // 頂点シェーダ内のprojectionMatrixの位置を保存する
  uniforms[UNIFORM_PROJECTION_MATRIX] = glGetUniformLocation(program, "projectionMatrix");

  return true;
}


void PentagonEdges::update(){
  
}

void PentagonEdges::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);
  // 三角形を描く
//  glDrawArrays(GL_LINES, 0, 2*7);
  glDrawElements(GL_LINES, 2*7, GL_UNSIGNED_INT, 0);
  // 使用するプログラムオブジェクトを解除する
  glUseProgram(0);
#if _WIN32 || (TARGET_OS_MAC && !TARGET_OS_IPHONE)
  // バッファの入れ替え
  glfwSwapBuffers(window);
  // イベントの取得
  glfwPollEvents();
#endif
}

 実行結果は次のようになります。

pentagon-edges

 要素配列の個数が変わりましたので、

  glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLuint)*9, edgeIndices, GL_STATIC_DRAW);
 

から

  glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLuint)*14, edgeIndices, GL_STATIC_DRAW);
  

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

 また、描画の方法が、

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

から

  glDrawElements(GL_LINES, 2*7, GL_UNSIGNED_INT, 0);
  

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