ナレッジボックス

Pocket


OpenGL ES 2.0で波紋を作る#7 板ポリゴンに動きをつける

 

最終章です。板ポリゴンへの動きのつけ方を解説します。

ポイント

 ・3D座標のz軸

波紋

板ポリゴンでは、x軸とy軸を利用して2Dポリゴンを画面に描画しました。

この板ポリゴンのz軸に対して高さをつけると、板ポリゴンが3Dポリゴンに変わります。

 

今回は、このz軸の算出がポイントです。

z軸には、中心座標から距離と時間に応じて高低差をつけます。高低差はサイン波を利用します。サイン波により波の広がりが表現できます。

 

では、板ポリゴンに波の広がりを付けてみましょう。

波紋作成

今回は、以下のファイルを修正します。

 ・Shader.vsh

 ・Shader.fsh

 ・GameViewController.m

 

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

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

Shader.vsh

 

定数は、WAVE_HEIGHT:波の高さ、WAVE_WIDTH:波の幅、WAVE_SPEED:波の速度、PI:円周率を設定します。

 

mainメソッドには、以下を追加します。

 ・波の広がりであるz軸の算出

 ・フラグメントシェーダに連携するためのカラーの設定

 

波の広がりの算出は、以下のとおりです。

  波の広がり(z軸の高さ) = 波の高さ ✕ sin(半径 ー 時間)

 

波の高さは、座標0から離れるに従ってなくなるようにします。係数を1.0にすると端の波がなくなります。今回は、波紋に見せるため1.3の係数を掛けます。

半径は、p.xy におけるベクトル空間の距離を算出します。

時間は、drow_count と定数を利用して速度を調整します。

サイン波の算出は、定数を利用して波の幅を調整します。

 

フラグメントシェーダには、z軸の高さを連携します。

Shader.fsh

 

カラーは、頂点シェーダから連携されたz軸の高さを利用します。

 

z軸の範囲は、頂点シェーダの定数 WAVE_HEIGHT になります。ここでは、 -0.05〜0.05の間で設定されます。

 

カラーは0.0〜1.0で設定されるため、-0.05〜0.05が0.0〜1.0になるように変換処理を追加します。

また、水の色としてRGBカラーの赤:0.5、緑:0.9、青:0.9を設定します。この時、波の低い箇所は暗く、高い箇所は明るくなるように gl_FragColor を調整します。

GameViewController.m

 

頂点シェーダで波の広がりを算出するための変数 count を定義します。

 

 

板ポリゴンをズームアップするため、カメラの設定値を修正します。

画角とカメラの位置に注目してください。

 

 

updateメソッドは、描画前に処理されるメソッドです。

count は頂点シェーダで利用する時間の代わりに使用します。描画されるタイミングでカウントアップします。

 

 

updateメソッドで算出した count 変数を頂点シェーダへ連携するための処理を追加します。「unif_pm」と同様の設定です。

 

波の広がりを算出するための処理は以上です。

波紋の実行

それでは、シミュレータを起動してみましょう!

シミュレータを起動すると、波紋が画面に描画されます。

 

image00

 

※動画を作ってみました!こちらから動画を見れます。

まとめ

今回は、波紋をテーマにObjective-CとOpenGL でプログラムを書いてみました。

 

OpenGLの開発は、最初に理解しなければいけないことが多いように感じました。

 

例えば、Javaで最初に学ぶことは、『Hello World !』をコンソールに出力することです。これは、数行あれば完成します。おまじないが1行、『Hello World !』の出力が1行です。

 

OpenGLは、まずはOpenGLの言語仕様、初期化から描画までの流れを理解しなければなりません。

さらに動きのあるポリゴンを作成するとなるとカメラ、光、影をベクトル、行列によって計算しなければなりません。

さらに、複雑な動きになると、高レベルな数学の知識が必要になります。

 

Javaとは違い、OpenGLは最初に乗り越えないといけない壁が高いと思います。

 

ですが、エンジニアとして、自由に描画できるOpenGLの魅力は尽きません。また、提供されるライブラリなどでは限界があります。

必要な時に、求められることができるようになるためには知識が必要です。

そのためには、OpenGLのような低レベル言語を経験し、エンジニアとしての底力を上げておきましょう!

バックナンバー

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 カメラをつける

OpenGL ES2.0で波紋を作る#7 板ポリゴンに動きをつける

 


Pocket

お問合せ

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

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

技術情報

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

株式会社クロノス > 技術情報 > ナレッジボックス > 01.画像関連 > OpenGL ES 2.0で波紋を作る#7 板ポリゴンに動きをつける