ナレッジボックス

Pocket


OpenGL ES 2.0で波紋を作る#5 格子状の板ポリゴンを作る

 

この章では、波紋の元になる格子状の板ポリゴンの作成について解説します。

ポイント

 ・板ポリゴン

 ・縮退三角形

板ポリゴン

ポリゴンとは、立体的な物体を表現するための多角形のことを言います。

 

OpenGLは三角形を利用して多角形を作成します。四角形は三角形を2つ組み合わせ、五角形は3つ組み合わせることで作成できます。

OpenGLのポリゴンも同様に、複数の三角形を組み合わせることで多角形を作成し、立体を表現します。この三角形を組み合わせて、2Dのポリゴンを作成します。ここでは、この2Dポリゴンを「板ポリゴン」と呼びます。

 

今回、板ポリゴンは以下の設計で作成します。

 ・1つの四角形を細かく分割する

 ・分割した四角形から、三角形を作るための頂点を算出する。

 ・頂点をベースに三角形を作成する

 ・一つ一つの三角形に色を塗る

板ポリゴン作成

前の章で作成したrepercussionsプロジェクトに対して、以下のファイルを修正します。

 ・Shader.vsh

 ・Shader.fsh

 ・GameViewController.m

 

変更箇所について解説します。

変更箇所は、背景を反転させています。

Shader.vsh

Shader.vshファイルは、頂点シェーダです。絵を描くための処理を記載します。

 

頂点情報は attribute で宣言した変数を利用します。attributeを宣言した attr_pos は、外部から頂点情報を設定することができます。

 

varying で宣言した vary_color は、頂点シェーダからフラグメントシェーダに情報を連携するための変数です。この後に呼ばれるフラグメントシェーダに色情報を連携します。

 

gl_Position は、OpenGLの変数です。頂点シェーダから頂点情報を受け取ります。

Shader.fsh

Shader.fshファイルは、フラグメントシェーダです。色を塗るための処理を記載します。

 

フラグメントシェーダでは、頂点情報のように attribute を利用することが出来ません。

そのため、varying にて宣言した vary_color を利用し、頂点シェーダから色情報を受け取ります。

GameViewController.m

「OpenGL ES を組み込むベースを作成」 で説明した修正の必要なメソッドと宣言部について解説します。

以下の修正以外は、そのままです。

 

 

クラスの宣言部では、波紋の作成に必要な構造体の宣言、定数、インスタンス変数を定義します。

 

VertexData は、頂点情報を格納するための構造体です。

 

kDivCount、kVertexCount、kIndexCount は、バッファ作成や描画時に利用するための定数です。

kDivCount は、1枚の四角形を格子状に分割するための数です。

kVertexCount は、格子状に分割した頂点の数です。

kIndexCount は、IBOで利用する頂点のインデックスの数です。

 

インスタンス変数として、頂点バッファとインデックスバッファの変数を定義します。

 

 

setupGLメソッドでは、描画に必要なVBO、IBOを作成します。

 

頂点バッファ/インデックスバッファ作成、バインド、バッファデータのアップロードは、「基礎知識2」(シェーダの効率的な描画) で解説した内容と同じです。

 

VBOには、頂点情報を設定します。

頂点情報は、VertexDataの配列(vertrices)を利用します。

 

頂点毎に頂点の座標(x、y、z)と色(u、v)を算出し、VertexDataに設定し、それを配列へ格納します。

 

頂点の座標は、頂点の分割数と頂点間の長さから算出します。

 

色は、頂点の座標を利用します。今回は、x座標とy座標をRGBカラーのRとGとして設定します。

 

 

IBOは、glDrawElements呼び出し際、GL_TRIANGLE_STRIPモードで描画されます。

GL_TRIANGLE_STRIPモードは、次の1点と前の2点の頂点を利用して三角形を描くモードです。

ここでは、この頂点を算出する処理を記載しています。

 

IBOは、頂点バッファの頂点情報のインデックスを設定します。この設定には数値の配列(indices)を利用します。

 

頂点情報のインデックスは、頂点の分割数を元に算出します。

現在のy座標を視点に、x座標から頂点バッファの頂点情報のインデックスを設定します。

その後、次のy座標を算出し、同じように頂点情報のインデックスを設定します。

 

ここでポイントになるのが、y座標が変わるタイミングです。

x座標の終わりと次のx座標の始まりが繋がるため、無駄な三角形が描画されます。

この繋がりを描画させないための処理として、縮退三角形を利用します。

 

縮退三角形については、後半部分で解説します。

 

 

tearDownGLメソッドは、シェーダをメモリから開放する処理を記載します。

 

setupGLメソッドで作成したVBO、IBOを削除します。

 

 

 

updataメソッドは、今回、使用しません。

 

不要な処理を削除します。

 

 

glkViewメソッドでは、初期化時に作成したVBOとIBOをバインドします。そして、画面に板ポリゴンを描画します。

 

頂点情報設定、フラグメント情報設定、描画は、「基礎知識2」(シェーダの効率的な描画) で説明した内容と同じです。

縮退三角形

今回、板ポリゴンを作成するためGL_TRIANGLE_STRIPモードで描画しています。このモードは、縮退三角形を描画しない特徴があります。

 

縮退三角形とは、面積が0の三角形、または、3点の座標が直線に並ぶ三角形のことを言います。

 

image01

 

通常、GL_TRIANGLE_STRIPモードで描画すると上の図のような順番でポリゴンが描かれます。このポリゴンは、2つの三角形で四角形を描いています。

 

image02

 

次に、1つの四角形を2分割し、8つの三角形で四角形を描きます。

 

image03

 

ポイントは、2→5→3の三角形です。

GL_TRIANGLE_STRIPモードの仕様上、次の1点と前の2点を利用して三角形を描くため、2→5→3の三角形が描かれます。

この三角形が描かれると、波紋が綺麗に表示されなくなります。

 

この2→5→3の三角形を描画しないためには、どうすれば良いのでしょうか?

 

それを解決するのが、縮退三角形です。

 

縮退三角形を利用する箇所は、以下です。

 1. y座標が変わるタイミングのx座標の終わり

 2. y座標が変わるタイミングのx座標の始まり

 

修正方法は、以下を追加するだけです。

 1. y座標が変わるタイミングのx座標の終わり

  x座標の最後の頂点の位置に、同じ頂点を1つ追加します。

   → 以下の図のindices[6]です。

 2. y座標が変わるタイミングのx座標の始まり

  x座標の最初の頂点の位置に、同じ頂点を1つ追加します。

   → 以下の図のindices[8]です。

 

これにより縮退三角形が作成され、不要な三角形が描画されなくなります。

image04 image05

板ポリゴンの実行

シミュレータを起動すると、板ポリゴンが画面に描画されます。

 

image06

 

次回は、この板ポリゴンにカメラをつけます。

カメラをつけることで、3D視点から板ポリゴンを眺めることができます。

バックナンバー

OpenGL ES2.0で波紋を作る#1 前提知識1

OpenGL ES2.0で波紋を作る#2 前提知識2

OpenGL ES2.0で波紋を作る#3 プロジェクト作成

OpenGL ES2.0で波紋を作る#4 OpenGL ES を組み込むベースを作成

OpenGL ES2.0で波紋を作る#5 格子状の板ポリゴンを作る

 


Pocket

お問合せ

開発に関するご相談/各種お問合せは下記まで。

TEL.06-4806-3470 月曜~金曜(祝日を除く)10:00~18:00
contact-dev@kronos-jp.net

技術情報

  • ナレッジボックス
グリーンハンド
STA-LOG
クロノスラボ
採用