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画像のデータそのものを保持しているわけではなく、出力画像を構成するレンダバッファを取りまとめる単なるコンテナです。
実際に画面を構成する色や深度のデータは、レンダバッファが保持しています。

フレームバッファオブジェクトやレンダバッファなど、オブジェクト同士を接続することを『アタッチ』と呼び、それらのオブジェクトとコンテキストを接続することを『バインド』と呼びます。
※『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入門/6.1 座標軸とビューポート』、『Shinsaku HIURA Home Page/講義資料/2007年度 コンピュータ工学演習/コンピュータ工学演習 解説と課題(6)』、『Web site of Haiyuan WU/Home page for wuhy/グラフィックス科学演習/4. 3次元グラフィックスの基礎』参照
●投影変換(射影変換、透視変換)
視点座標系(射影座標系、眼点座標系)から正規化デバイス座標系への変換を投影変換と呼びます。
視点座標系は視点のローカル座標系で、カメラを原点として右がx軸の正方向、上がy軸の正方向、視線がz軸の負方向となっており、ビューボリュームの設定に使用されます。
ビューボリューム(視野空間、視体積、視野錘台)は、ワールド座標系の三次元空間において、レンダリングを行う特定の領域ことで、たとえワールド座標系内に存在していてもビューボリュームの外にあるオブジェクトはレンダリングされません。
ビューボリュームはカメラから見て垂直な手前と奥の面と視野角によって決定され、平行投影なら直方体、透視投影なら錐台の空間領域となります。
投影変換によりビューボリュームの空間領域を正規化し、カメラから見た前後関係、透視投影であれば遠方のオブジェクトを小さくするなど、三次元空間から二次元平面に変換することができます。
※『IMURA Masataka/OpenGLメモ/OpenGLの座標系』、『XNA - ソーサリーフォース/XNA プログラミング Tips 一覧/基礎知識/3Dモデルの座標変換について』、『床井研究室/コンピュータグラフィックス/コンピュータグラフィックス 第8回:スクリーンに映す』参照
●モデルビュー変換
ワールド座標系から視点座標系への変換をモデルビュー変換と呼びます。
モデルビュー変換はモデリング変換と視点変換(視界変換、ビューイング変換)を合わせた物です。
モデリング変換は個々の3Dオブジェクトを拡大/縮小、回転、平行移動して、ワールド座標系に配置することです。
視点変換は、ワールド座標系における視点(カメラ)の位置と視線(方向)を決定することです。
※『WisdomSoft/OpenGL入門/モデルビュー変換』、『viLab/授業資料/コンピュータグラフィックス/モデルビュー変換』参照
●OpenGL ESグラフィックスパイプライン
QuartzとOpenGLとの違いから始めたことと、実際にプログラムをコーディングする順序での説明として、一般的な説明の順序とは逆に説明しました。
一般的に示される処理の流れとしては下記のようになります。
今回のプロジェクトは2Dグラフィックスの表示のため、ライティングや深度処理などが不要になります。
なお、テクスチャリングに関しては後述します。
参考文献
・iOS OpenGL ESプログラミングガイド
・GLUTによる「手抜き」OpenGL入門
・WisdomSoft/OpenGL入門
・Shinsaku HIURA Home Page/講義資料/2007年度 コンピュータ工学演習
・Web site of Haiyuan WU/Home page for wuhy/グラフィックス科学演習
・IMURA Masataka/OpenGLメモ
・XNA - ソーサリーフォース/XNA プログラミング Tips 一覧
・床井研究室/コンピュータグラフィックス
・viLab/授業資料/コンピュータグラフィックス
また今回の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の使い方
|
※『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入門/6.1 座標軸とビューポート』、『Shinsaku HIURA Home Page/講義資料/2007年度 コンピュータ工学演習/コンピュータ工学演習 解説と課題(6)』、『Web site of Haiyuan WU/Home page for wuhy/グラフィックス科学演習/4. 3次元グラフィックスの基礎』参照
●投影変換(射影変換、透視変換)
視点座標系(射影座標系、眼点座標系)から正規化デバイス座標系への変換を投影変換と呼びます。
視点座標系は視点のローカル座標系で、カメラを原点として右がx軸の正方向、上がy軸の正方向、視線がz軸の負方向となっており、ビューボリュームの設定に使用されます。
ビューボリューム(視野空間、視体積、視野錘台)は、ワールド座標系の三次元空間において、レンダリングを行う特定の領域ことで、たとえワールド座標系内に存在していてもビューボリュームの外にあるオブジェクトはレンダリングされません。
ビューボリュームはカメラから見て垂直な手前と奥の面と視野角によって決定され、平行投影なら直方体、透視投影なら錐台の空間領域となります。
投影変換によりビューボリュームの空間領域を正規化し、カメラから見た前後関係、透視投影であれば遠方のオブジェクトを小さくするなど、三次元空間から二次元平面に変換することができます。
※『IMURA Masataka/OpenGLメモ/OpenGLの座標系』、『XNA - ソーサリーフォース/XNA プログラミング Tips 一覧/基礎知識/3Dモデルの座標変換について』、『床井研究室/コンピュータグラフィックス/コンピュータグラフィックス 第8回:スクリーンに映す』参照
●モデルビュー変換
ワールド座標系から視点座標系への変換をモデルビュー変換と呼びます。
モデルビュー変換はモデリング変換と視点変換(視界変換、ビューイング変換)を合わせた物です。
モデリング変換は個々の3Dオブジェクトを拡大/縮小、回転、平行移動して、ワールド座標系に配置することです。
視点変換は、ワールド座標系における視点(カメラ)の位置と視線(方向)を決定することです。
※『WisdomSoft/OpenGL入門/モデルビュー変換』、『viLab/授業資料/コンピュータグラフィックス/モデルビュー変換』参照
●OpenGL ESグラフィックスパイプライン
QuartzとOpenGLとの違いから始めたことと、実際にプログラムをコーディングする順序での説明として、一般的な説明の順序とは逆に説明しました。
一般的に示される処理の流れとしては下記のようになります。
頂点配列(プリミティブ)の設定 |
↓ |
モデルビュー変換(オブジェクトの配置) |
↓ |
投影変換(ビューボリュームのクリッピング) |
↓ |
ビューポート変換(画面サイズへ変換) |
↓ |
フレームバッファオブジェクトへ出力 |
↓ |
CAEAGLLayerで表示 |
今回のプロジェクトは2Dグラフィックスの表示のため、ライティングや深度処理などが不要になります。
なお、テクスチャリングに関しては後述します。
参考文献
・iOS OpenGL ESプログラミングガイド
・GLUTによる「手抜き」OpenGL入門
・WisdomSoft/OpenGL入門
・Shinsaku HIURA Home Page/講義資料/2007年度 コンピュータ工学演習
・Web site of Haiyuan WU/Home page for wuhy/グラフィックス科学演習
・IMURA Masataka/OpenGLメモ
・XNA - ソーサリーフォース/XNA プログラミング Tips 一覧
・床井研究室/コンピュータグラフィックス
・viLab/授業資料/コンピュータグラフィックス
![]() | OpenGLで作るiPhone SDKゲームプログラミング (2009/12/18) 横江 宗太(株式会社パンカク) 商品詳細を見る |
![]() | iPhoneではじめるOpenGL ESプログラミング (2010/07/13) 酒井 裕司 商品詳細を見る |
![]() | OpenGL Programming Guide: The Official Guide to Learning OpenGL, Versions 3.0 and 3.1 (2009/07/21) Dave The Khronos OpenGL ARB Working Group Shreiner 商品詳細を見る |
![]() | OpenGLプログラミングガイド 原著第5版 (2006/12/19) OpenGL策定委員会 商品詳細を見る |
![]() | はじめてのiPhone3プログラミング (2009/12/17) Dave Mark、Jeff LaMarche 他 商品詳細を見る |
![]() | Beginning Ios 6 Development: Exploring the Ios Sdk (2012/12/26) David Mark、Jack Nutting 他 商品詳細を見る |