ナレッジボックス

Pocket


OpenGL ES 2.0で波紋を作る#6 カメラをつける

 

前の章で作成した板ポリゴンへのカメラの使い方を解説します。

ポイント

 ・カメラの使い方

カメラの概念

板ポリゴンにカメラをつけるには、OpenGL上でのカメラの使い方を理解しなければなりません。

 

以下、カメラの使い方を解説します。

 ・プロジェクションの設定

 ・カメラ視点の設定

 ・モデルビューの設定

 ・描画

プロジェクションの設定

□ プロジェクションの概念

プロジェクションは、画角、ニアクリップ、ファークリップを利用します。

 

以下の図の青色がカメラから見える範囲です。

image00

 

項目 内容
画角 Y軸に対する視野領域の角度。
radianを設定します。
ニアクリップ カメラ視点から最初に見える距離。
nearを設定します。
ファークリップ カメラ視点から最後に見える距離。
farを設定します。

□ プロジェクションの設定

カメラのプロジェクションの設定は、「GLKMatrix4MakePerspective」を利用します。

 

GLKMatrix4MakePerspectiveの引数は、下記の通りです。

第1引数:ラジアン。GLKMathDegreesToRadiansを利用することで、度数からラジアンに変換できます。

第2引数:画面のアスペクト比

第3引数:ニアクリップ

第4引数:ファークリップ

□ カメラ視点の概念

カメラの視点の概念

カメラ視点には、カメラのベクトル、カメラの位置、ターゲットの位置を設定します。

 

image01

 

項目 内容
カメラの位置 カメラの位置座標。
eyeX、eyeY、eyeZを設定します。
ターゲットの位置 カメラから見るターゲットの位置座標。
targetX、targetY、targetZを設定します。
カメラのベクトル カメラの方向。
upX、upY、upZを設定します。

カメラ視点の設定

カメラ視点の設定は、「GLKMatrix4MakeLookAt」を利用します。

 

GLKMatrix4MakeLookAtの引数は、先頭から順にカメラの位置座標、ターゲットの位置座標、カメラのベクトルの座標を設定します。

□ モデルビュー

頂点シェーダへ連携するためのモデルビューを算出します。

モデルビューは、カメラのプロジェクションとカメラの視点の情報を掛けあわせた情報です。

モデルビューの設定

モデルビューの設定は、「GLKMatrix4Multiply」を利用します。

 

GLKMatrix4Multiplyは、行列の掛け算を行います。カメラのプロジェクション情報とカメラの視点情報を引数に渡します。

その後、頂点シェーダ側で頂点情報と掛け合わすことでカメラの視点になります。

□ 描画

頂点シェーダ内のデータアクセス

頂点シェーダ内のデータへアクセスするには、「glUniformMatrix4fv」を利用します。

これで、頂点シェーダが保持する「unif_pm」変数に外部からアクセスできるようになります。

カメラの作成

□ カメラの作成

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

 ・Shader.vsh

 ・GameViewController.m

 

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

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

Shader.fsh

 

カメラ情報は uniform で宣言した変数を利用します。uniform を宣言した unif_pm は、外部からカメラ情報を設定することができます。

※uniform は、attribute とは異なり宣言する数に制限があります。ご注意ください。

 

gl_Position は、頂点情報とカメラ情報を掛けあわせた情報を受け取ります。

GameViewController.m

 

描画時にOpenGLへ連携するモデルビューを宣言します。

 

 

setupGLメソッドでは、カメラの初期化処理を追加します。

 

カメラの初期化は、カメラのプロジェクション、カメラ視点を設定し、そこからモデルビューを算出します。

カメラのプロジェクション、カメラ視点、モデルビューは、上記で説明した内容と同じです。

 

ここでの注意点は、カメラの設定には微調整が必要になることです。

カメラの向き、視点の範囲、距離などが適切に設定されないと対象物を見失うことになります。

例えるならば、カメラのファインダーと同じイメージです。

 

 

glkViewメソッドでは、頂点シェーダにカメラ情報を連携するための処理を追加します。

カメラの実行

シミュレータを起動すると、カメラ視点から眺めた板ポリゴンが画面に描画されます。

 

image02

 

次回は、最終章です。

このカメラつき板ポリゴンに対して、時間に応じて高さを設定すると波紋が完成します。

バックナンバー

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

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

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

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

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

OpenGL ES2.0で波紋を作る#6 カメラをつける

 


Pocket

お問合せ

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

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

技術情報

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

株式会社クロノス > 技術情報 > ナレッジボックス > 01.画像関連 > OpenGL ES 2.0で波紋を作る#6 カメラをつける