iPhone3D講座2回

今回はOpenGLES2で板ポリゴンを描画します

今回のプログラム一式はこちら
・OpenGLES2DrawQuad.zip

今回以降から
前回のOpenGLES.framework、QuartzCore.frameworkに加えて
数学計算処理など便利なAPIも用意されているので
・GLKit.framework
をプロジェクトに追加してください

今回はやること盛りだくさんです。
画像付き板ポリゴンを描画するためには
以下の手順が必要です。
・①頂点構造の定義
・②テクスチャ（画像）の読み込み
・③頂点バッファオブジェクト(VBO)の作成
・④頂点シェーダ、フラグメントシェーダの作成およびコンパイル＆リンク
・⑤シェーダ変数の設定
・⑥頂点バッファオブジェクトの描画

描画の流れはDrawQuadView.mにまとめてあるので
そちらを確認してください

①頂点構造の定義
描画用の頂点データを定義します

// 頂点構造
typedef struct {
   float Position[3];   // 頂点座標
   float TexCoord[2]; // テクスチャ座標
} Vertex;

#define TEX_COORD_MAX   1

const Vertex Vertices[] = {
   {{1, -1, 1}, {TEX_COORD_MAX, 0}},
   {{1, 1, 1},  {TEX_COORD_MAX, TEX_COORD_MAX}},
   {{-1, 1, 1}, {0, TEX_COORD_MAX}},
   {{-1, -1, 1},{0, 0}},
};
// 頂点インデックス
const GLubyte Indices[] = {
   2, 1, 0,
   0, 3, 2,
};

今回は頂点インデックスで指定した頂点から成る
三角形を２つ合体して四角形を作成します。

３D描画の基本単位は三角形です
五角形は三角形三個、
六角形は三角形四個に分割可能といったように
何角形でも三角形で表現できます。
三角形のように描画の基本となる単位をプリミティブと呼びます。
他にも、線や点などのプリミティブがあります。

②テクスチャ（画像）の読み込み

   _texture = [[Texture alloc] initWithFile:[NSString stringWithUTF8String:"tile_floor.png"]];

③頂点バッファオブジェクト（VBO）の作成
頂点バッファオブジェクトは
大量の頂点データを効率よく描画するために
オンメモリにデータをキャッシュする仕組みです。
頂点データを格納する頂点バッファと
どの頂点を使って三角形を描画するのかを決める頂点インデックスを格納するインデックスバッファの作成をします

   // 頂点バッファ作成
   glGenBuffers(1, &_vertexBuffer);
   glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
   glBufferData(GL_ARRAY_BUFFER, sizeof(Vertices), Vertices, GL_STATIC_DRAW);
   
   // インデックスバッファ作成
   glGenBuffers(1, &_indexBuffer);
   glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _indexBuffer);
   glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(Indices), Indices, GL_STATIC_DRAW);

④頂点シェーダ、フラグメントシェーダの作成およびコンパイル＆リンク
シェーダとはGPU（グラフィックボード）での命令処理です。
処理が重い、描画処理に関してはGPUに直接命令することで高速化が計れます。
また、OpenGLES2以降からシェーダでの命令が必須になりました。
シェーダで直接描画処理を指定することでより頂点・ピクセル単位での
柔軟で高速な描画処理を行えるようになります。

シェーダは２種類あり、
頂点シェーダは頂点単位の処理、フラグメントシェーダはピクセル単位の処理を行います。

描画時には頂点単位に処理をされた後、
頂点同士のピクセル間を補間するラスタライズ化と呼ばれる処理がされ、
ピクセル単位の処理に移行します。
そのため両方とも実装は必須です。

Vertex.glslが頂点シェーダです。

// input Vertex data
attribute vec3 aPosition;
attribute vec2 aTexCoord;
// Uniform data
uniform mat4 uProjectionMatrix;
uniform mat4 uModelViewMatrix;
// Output Vertex data
varying vec2 vTexCoord;

void main(void) { 
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition,1.0);
    vTexCoord = aTexCoord;
}

attribute属性を持つ変数は頂点単位で送られてくるデータです。
uniform属性を持つ変数は外部（CPU側のプログラム）から設定されるどの頂点でも共通のデータです。
varying属性を持つ変数はフラグメントシェーダに渡すデータです。
頂点位置はフラグメントシェーダに渡す必要がないため
gl_Positionという予約語で出力します。

Fragment.glslがフラグメントシェーダです。

varying highp vec2 vTexCoord;
uniform sampler2D ColorTextureSampler;

void main(void) {
   gl_FragColor = texture2D(ColorTextureSampler, vTexCoord);
}

varying属性を持つ変数はフラグメントシェーダに送られてくるデータです。
なお、フラグメントシェーダではvec2,vec3などのベクトルやmat4などの行列など
数値が絡む変数には精度示す属性をつける必要があります。
highp属性は高精度であることを示します。
低精度なlowp属性を指定することもできます。
uniform属性を持つ変数は外部（CPU側のプログラム）から設定されるどのピクセルでも共通のデータです。
サンプラ（sampler2D）にはラスタライズ化されたテクスチャのテクセルデータが格納されています。
texture2D関数によってテクスチャ座標に対応するテクセルの色情報を取得できます。

作成したシェーダのコンパイル＆リンクは
下記で行っています。

// プログラムブルシェーダーのコンパイル
- (void)compileShaders {

   shader = [[Shader alloc] init];
   [shader compileShaders:@"Vertex.glsl" fragmentShader:@"Fragment.glsl"];

コンパイル＆リンクの実装は
Shader.h,Shader.mにありますが
決まりきった処理なので説明は割愛します。

シェーダーのコンパイル＆リンクが成功したら
シェーダー変数にアクセスするためのハンドルを取得しておきます
これらのハンドルは描画時にシェーダにデータを渡すために使います

   // シェーダ変数のハンドル取得
   _positionSlot = glGetAttribLocation(shader.programHandle, "Position");
   _texCoordSlot = glGetAttribLocation(shader.programHandle, "TexCoordIn");
   
   _modelViewUniform = glGetUniformLocation(shader.programHandle, "Modelview");
   _projectionUniform = glGetUniformLocation(shader.programHandle, "Projection");
   
   _textureUniform = glGetUniformLocation(shader.programHandle, "ColorTexture");

⑤シェーダ変数の設定

       
   GLKMatrix4 modelMatrix = GLKMatrix4Make(1,0,0,0,
                                           0,1,0,0,
                                           0,0,1,0,
                                           0,0,0,1);
   // ビュー変換
   GLKMatrix4 viewMatrix = [_transformations getViewMatrix];
   GLKMatrix4 modelViewMatrix = GLKMatrix4Multiply(viewMatrix,modelMatrix);
   glUniformMatrix4fv(_modelViewUniform, 1, 0, modelViewMatrix.m);
   
   // 射影変換行列
   const GLfloat aspectRatio = (GLfloat)(self.bounds.size.width) / (GLfloat)(self.bounds.size.height);
   const GLfloat fieldView = GLKMathDegreesToRadians(60.0f);
   const GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(fieldView, aspectRatio, 0.1f, 100.0f);
   glUniformMatrix4fv(_projectionUniform, 1, 0, projectionMatrix.m);

   
   // ビューポート変換の設定
   glViewport(0, 0, self.frame.size.width, self.frame.size.height);
   
   // 描画時に使用するシェーダの設定
   glUseProgram(shader.programHandle);
   
   // VBOの設定
   glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
   glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _indexBuffer);
   
   // 頂点データ構造の設定
   glEnableVertexAttribArray(_positionSlot);
   glEnableVertexAttribArray(_texCoordSlot);
   
   glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), 0);
   glVertexAttribPointer(_texCoordSlot, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (GLvoid*) (sizeof(float) * 3));
   
   // テクスチャの設定
   glActiveTexture(GL_TEXTURE0);
   glBindTexture(GL_TEXTURE_2D, _texture.handle);
   glUniform1i(_textureUniform, 0);

⑥頂点バッファオブジェクトの描画

   
   // 描画
   glDrawElements(GL_TRIANGLES, sizeof(Indices)/sizeof(Indices[0]), GL_UNSIGNED_BYTE, 0);

補足：
描画と直接は関係ありませんが
ジェスチャーで画面のインタラクティブ操作ができるようにしてあります
パン（１本指ドラッグ）：画面平行移動
パン（２本指ドラッグ）：画面のXY軸を基軸とした回転
ピンチ・インアウト：拡大縮小
ローテーション（２本指回転）：見ている奥行き方向(Z軸)に対しての回転

ジェスチャー操作部分はそのままパクってきたものなので詳細はリンク先を参照してください
http://www.raywenderlich.com/50398/opengl-es-transformations-gestures

DrawQuadView.mの
ジェスチャー実装部分を抜粋します

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
   // Begin transformations
   [_transformations start];
}
// パン
- (IBAction)pan:(UIPanGestureRecognizer *)sender
{
   // Pan (1 Finger)
   if((sender.numberOfTouches == 1) &&
      ((_transformations.state == S_NEW) || (_transformations.state == S_TRANSLATION)))
   {
       // 平行移動
       CGPoint translation = [sender translationInView:sender.view];
       float x = translation.x/sender.view.frame.size.width;
       float y = translation.y/sender.view.frame.size.height;
       [_transformations translate:GLKVector2Make(x, y) withMultiplier:5.0f];
   }
   
   // Pan (2 Fingers)
   else if((sender.numberOfTouches == 2) &&
           ((_transformations.state == S_NEW) || (_transformations.state == S_ROTATION)))
   {
       // 回転
       const float m = GLKMathDegreesToRadians(0.5f);
       CGPoint rotation = [sender translationInView:sender.view];
       [_transformations rotate:GLKVector3Make(rotation.x, rotation.y, 0.0f) withMultiplier:m];
   }
}
// ピンチイン・アウト
- (IBAction)pinch:(UIPinchGestureRecognizer *)sender
{
   // Pinch
   if((_transformations.state == S_NEW) || (_transformations.state == S_SCALE))
   {
       float scale = [sender scale];
       [_transformations scale:scale];
   }
}
// ローテーション
- (IBAction)rotation:(UIRotationGestureRecognizer *)sender
{
   // Rotation
   if((_transformations.state == S_NEW) || (_transformations.state == S_ROTATION))
   {
       float rotation = [sender rotation];
       [_transformations rotate:GLKVector3Make(0.0f, 0.0f, rotation) withMultiplier:1.0f];
   }
}

上記の
panメソッド
pinchメソッド
rotationメソッド
をstoryboardにて
DrawQuadViewクラスとひもづけています

次：iPhone3D講座3回

爆ぜろリアル！弾けろシナプス！バニッシュメントディスワールド！	0
不愉快です	0
筋肉イェイイェイ	0

メニュー

練習用

最新の15件