CDR6275

Michio SHIRAISHI Official Site


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

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

3. ポリゴンモデル

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

3.1 五角形の頂点を描く

 さて、この章では複数の三角形を描く方法について考えてみます。ここでは五角形を3つの三角形に分けて描く方法について考えてみます。まず、五角形の頂点座標を求めて、頂点を点として描くことを考えます。

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

pentagon-vertices

 それではメインのプログラムを見てみましょう。

#include <iostream>

#define _USE_MATH_DEFINES
#include <math.h>

#include "PentagonVertices.h"
#include "SimpleProgramObject.h"
#include "Matrix.h"

enum
{
  ATTRIBUTE_VERTEX_COORDINATE,
  NUM_ATTRIBUTES
};

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

bool PentagonVertices::initialize(){
#if !TARGET_OS_IPHONE
  BaseApplication::initializeWindow(640, 640, "PentagonVertices");
#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;
#if TARGET_OS_IPHONE
  const char* vertexShaderFileName = "first-points.vs";
#else
  const char* vertexShaderFileName = "first.vs";
#endif
  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);
  
  // 背景色の設定
  glClearColor(0.75f, 0.75f, 0.75f, 1.0f);

  return true;
}

void PentagonVertices::update(){
  
}

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

 前回と変わった点について説明します。まず、頂点の数を5つに増やし、それぞれの座標を計算によって求めます。五角形の頂点は\(2\pi\)を5つに分ければよいので、\(i=0,\cdots,4\)とすれば、次のようにすれば求まりますね。

\[
\begin{aligned}
x_i &= r \cos \frac{2i}{5}\pi \\
y_i &= r \sin \frac{2i}{5}\pi \\
z_i &= 0
\end{aligned}
\]

 プログラムでは以下のようになります。

  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;
  }

 また、頂点の数が15個になりましたので、頂点バッファに渡すデータの個数を変更してあります。

 glBufferData(GL_ARRAY_BUFFER, sizeof(float)*15, pentagonVertices, GL_STATIC_DRAW);

また、これまでは次のようにして内部が塗りつぶされた三角形を描いていました。

 glDrawArrays(GL_TRIANGLES, 0, 3);

この部分を以下のように変更してあります。

  glDrawArrays(GL_POINTS, 0, 5);

 ここでデフォルトでは点が描かれる大きさが1ピクセルでほとんど見えませんので、

  glPointSize(4.0f);

として、見やすくしてあります(iOS上のOpenGL ES 2.0ではglPointSizeではなく、頂点シェーダでgl_PointSize = 10.0;のように指定するようです)。

やってみよう

  1. 8角形の頂点を描いてみましょう。