GLFun（4）～OpenGL ESへの対応と作業工程

2011. 12. 11

GLFunプロジェクトでOpenGL ESを利用できるようにするには、『GLFun（2）～QuartzFunとGLFunの違い』で述べたようにOpenGLES.frameworkとQuartzCore.frameworkの2つのフレームワークを追加する必要があります。

また今回のGLFunの場合、具体的なコンテンツの描画部分以外の基本的なOpenGL ESのコードは、OpenGLES2DViewとTexture2Dの2つのクラスをサンプルコードからコピーして使うとなっています。

●フレームワークの追加

フレームワークをプロジェクトに追加するには、XcodeのFrameworksフォルダを選択して右クリックし、『追加』→『既存のフレームワーク...』を選択します。

リストの一覧からOpenGLES.frameworkとQuartzCore.frameworkを選択し、『追加』ボタンをクリックします。

●サンプルコードからのクラスの追加

OpenGLES2DViewとTexture2Dの2つのクラスは、原著であるApress社のサイトからサンプルコードをダウンロードする必要があります。

日本語版も出ているiPhone OS 3.x版は『Beginning iPhone 3 Development Exploring the iPhone SDK』、iOS 4.x版は『Beginning iPhone 4 Development Exploring the iOS SDK』で、それぞれ『Source Code/Downloads』タブの『Download Now』からダウンロードすることができます。

iPhone OS 3.x版の場合は『Beginning iPhone Development Projects Oct 12 2009／12 GLFun／Classes』フォルダ、iOS 4.x版は『Begin_iPhone4_Projects_2011_01_21／14 - GLFun／Classes』フォルダ内にある両クラスのヘッダ／ソースファイルを、自身のGLFunプロジェクトのClassesフォルダにコピーし、XcodeのClassesに追加してください。
（どちらからコピーしても同じファイルです）

●iOSにおけるOpenGL ESの実装

前述の通り、本書ではOpenGL ESによる描画の基本的な部分は『2つのクラスをコピーすることで簡単に利用できる』と言うだけで、中身についてはほとんど触れられていません。

確かにそれだけで1冊本が書ける内容ですし、実際iOSでOpenGL ESを使う本は何冊も出ています。

ただ1、2冊買っても中々難しいものがあり、手元にある『OpenGLで作るiPhone SDKゲームプログラミング』や『iPhoneではじめるOpenGL ESプログラミング』では具体的な描画関数を中心に解説されていて、基盤技術の説明がほとんどありません。

公式の『iOS OpenGL ESプログラミングガイド』もOpenGL ESをiOS上でどう実装するかが話の中心なので、基礎技術に関しては他書を読むようにとなっています。

『OpenGL ESを使用したiOS用3Dグラフィックス（1）』で紹介したセッションビデオでも、通称『赤本』と呼ばれる『OpenGL Programming Guide』（日本語版は『OpenGLプログラミングガイド』）は必読とされていますが、高価な本であることもあって手が出しづらく、なかなか基礎的な内容に踏み込み難くなっています。

ここでは本プロジェクトで使用されている部分の基盤技術に関して、理解している範囲で説明したいと思います。

●コンテンツの作成と出力先

Quartzでは、Core Graphics技術を使用してコンテンツを作り、ビューを出力先としていました。

　Core Graphics（CGContext）　→　ビュー（UIView）

OpenGL ESの場合は、OpenGL ES技術を使用してコンテンツを作り、Core Animationレイヤを出力先とします。

　OpenGL ES（EAGLContext）　→　レイヤ（CAEAGLLayer）

※『GLFun（2）～QuartzFunとGLFunの違い』参照

●EAGLContextとCAEAGLLayer間の処理

OpenGL ES内でのレンダリング先はフレームバッファオブジェクトであり、EAGLがフレームバッファオブジェクトの内容をCAEAGLLayerに出力します。

フレームバッファオブジェクトは、画面に出力される2D画像のデータそのものを保持しているわけではなく、出力画像を構成するレンダバッファを取りまとめる単なるコンテナです。

実際に画面を構成する色や深度のデータは、レンダバッファが保持しています。

フレームバッファオブジェクトやレンダバッファなど、オブジェクト同士を接続することを『アタッチ』と呼び、それらのオブジェクトとコンテキストを接続することを『バインド』と呼びます。

CAEAGLLayer
CAEAGLLayerの使い方

1. レンダリングされたコンテンツを表示するため、　UIViewをサブクラス化 2. CALayerの代わりにCAEAGLLayerクラスを返すよう　に、UIViewの[layerClass]メソッドをオーバーライド	UIKit
3. OpenGL ESのレンダバッファとFBOを生成、バインド	OpenGL ES
4. レンダバッファにCAEAGLLayerをアタッチ	EAGL
5. OpenGL ESを使用してレンダバッファにレンダリング	OpenGL ES
6. ディスプレイにレンダバッファのコンテンツを表示	EAGL

※『iOS OpenGL ESプログラミングガイド』、『OpenGL ESを使用したiOS用3Dグラフィックス（2）』参照

●ビューポート変換

正規化デバイス座標系からビューポートのデバイス座標系（ウィンドウ座標系）への変換をビューポート変換と呼びます。

ビューポートは出力画面（CAEAGLLayer）のどの領域にOpenGL ESコンテンツを描画するかを示すもので、原点座標と領域サイズで指定します。

通常は画面全体に表示するため、原点を(0, 0)、サイズは出力画面の幅と高さを指定します。

正規化デバイス座標系はビューボリュームをx、y、zそれぞれが-1～1（資料によってはx、yが-1～1、zが0～1）の空間に投影変換したものです。

ビューポート変換により、正規化デバイス座標系(x, y)における(-1, -1)から(1, 1)に投影される平面を、ビューポートの平面のサイズに変換することができます。

※『WisdomSoft／OpenGL入門／ビューポート』、『GLUTによる「手抜き」OpenGL入門／６．１座標軸とビューポート』、『Shinsaku HIURA Home Page／講義資料／２００７年度　コンピュータ工学演習／コンピュータ工学演習　解説と課題(6)』、『Web site of Haiyuan WU／Home page for wuhy／グラフィックス科学演習／4.　３次元グラフィックスの基礎』参照

●投影変換（射影変換、透視変換）

視点座標系（射影座標系、眼点座標系）から正規化デバイス座標系への変換を投影変換と呼びます。

視点座標系は視点のローカル座標系で、カメラを原点として右がx軸の正方向、上がy軸の正方向、視線がz軸の負方向となっており、ビューボリュームの設定に使用されます。

ビューボリューム（視野空間、視体積、視野錘台）は、ワールド座標系の三次元空間において、レンダリングを行う特定の領域ことで、たとえワールド座標系内に存在していてもビューボリュームの外にあるオブジェクトはレンダリングされません。

ビューボリュームはカメラから見て垂直な手前と奥の面と視野角によって決定され、平行投影なら直方体、透視投影なら錐台の空間領域となります。

投影変換によりビューボリュームの空間領域を正規化し、カメラから見た前後関係、透視投影であれば遠方のオブジェクトを小さくするなど、三次元空間から二次元平面に変換することができます。

※『IMURA Masataka／OpenGLメモ／OpenGLの座標系』、『XNA - ソーサリーフォース／XNA プログラミング Tips 一覧／基礎知識／3Dモデルの座標変換について』、『床井研究室／コンピュータグラフィックス／コンピュータグラフィックス　第8回：スクリーンに映す』参照

●モデルビュー変換

ワールド座標系から視点座標系への変換をモデルビュー変換と呼びます。

モデルビュー変換はモデリング変換と視点変換（視界変換、ビューイング変換）を合わせた物です。

モデリング変換は個々の3Dオブジェクトを拡大／縮小、回転、平行移動して、ワールド座標系に配置することです。

視点変換は、ワールド座標系における視点（カメラ）の位置と視線（方向）を決定することです。

※『WisdomSoft／OpenGL入門／モデルビュー変換』、『viLab／授業資料／コンピュータグラフィックス／モデルビュー変換』参照

●OpenGL ESグラフィックスパイプライン

QuartzとOpenGLとの違いから始めたことと、実際にプログラムをコーディングする順序での説明として、一般的な説明の順序とは逆に説明しました。

一般的に示される処理の流れとしては下記のようになります。

頂点配列（プリミティブ）の設定

↓

モデルビュー変換（オブジェクトの配置）

↓

投影変換（ビューボリュームのクリッピング）

↓

ビューポート変換（画面サイズへ変換）

↓

フレームバッファオブジェクトへ出力

↓

CAEAGLLayerで表示

今回のプロジェクトは2Dグラフィックスの表示のため、ライティングや深度処理などが不要になります。

なお、テクスチャリングに関しては後述します。