Cardboardを使ってポリゴンを描画する

今回は以前紹介したCardboardで実際にポリゴンを描画する方法を書いていこうと思います。

あまり色々書いてもわかりづらいので、最小構成で書いていきます。

今回描画するポリゴンは、Cardboardの公式サンプルに習ってプリミティブなキューブを描画します。

ライフサイクル

Cardboardでポリゴンを描画する場合、メソッドのライフサイクルは、

onCreate()→onSurfaceChanged()→onSurfaceCreated()→onNewFrame()→onDrawEye()→onDrawEye()→onFinishFrame()

と進み、onFinishFrameの後onNewFrameから繰り返します。

 

Activityの設定

デフォルトのActivityはだいたいこうなってると思います。

 このextendsされているActivityをCardboardActivityに変更し、さらにimplementsを追加します。追加するのはCardboardView.StereoRendererです。

最終的にクラスはこうなります。

 

implementsだけ変更してActivityを変更し忘れると地味にはまります。(はまってました。) 

 

変数宣言

描画するために使用する変数は以下になります。

CAMERA_Z

カメラの初期注視点を指定します。

mGlProgram

使用するOpenGLESを指定します。

mPositionParam

シェーダーに渡す頂点座標

mModelViewProjectionParam

シェーダーに渡す射影変換行列

mCamera、mView、mHeadView、mModelViewProjection、mModelView、mModelCube

4×4の行列を格納するための配列

mCubeVertices

GLに渡すキューブの頂点座標の配列Buffer

 

onCreate()

onCreateでは、CardboardViewの初期化と各変数を初期化していきます。 

 CardboardViewにlayoutファイルで作成したCardboardViewを指定し、レンダラーを設定します。

他の変数については、4×4のMatrixとして使用するため、配列として初期化しておきます。

 

onSurfaceCreated()

onSerfaceCreateでは表示するモデルの頂点座標の他にノーマルマッピングやUV座標などをByteBufferに変換します。

他には、使用するシェーダを読み込んだり、変換したBufferの座標を表示させる空間に配置します。

まずはBufferの変換について説明します。

 CUBE_COORDSにはキューブを構成するための頂点座標が格納されています。

今回はキューブの各面を三角形2つによって正方形を作成しています。

そのため、3×2×6の数の頂点が必要になるため、36個の頂点が入っています。

 次にシェーダの読み込みとモデルの配置を行います。

 まずシェーダを読み込むためにloadGLShaderメソッドを作成し、これを使いシェーダを読み込みます。

そして更に読み込むシェーダは改行が入っていないので、テキストに合わせて改行を入れるために テキストを変更しています。

 

また、読み込むシェーダの内容は以下のようになっています。

まずは頂点シェーダ

 次にピクセルシェーダ(フラグメントシェーダ)

シェーダを読み込んだらそれをOpenGLESに渡してあげます。

GLES20.glCreateProgram()によって使用するプログラムを作成し、それぞれのシェーダを当てはめていき、それらをGLES20.glLinkProgram(mGlProgram)によってリンクさせます。

またGLES20.glEnable(GLES20.GL_DEPTH_TEST)を記述することによって深度を測って描画することができるようになります。

そして、Matrix.setIdentityM(mModelCube, 0)でビューにモデルを配置しています。

Matrix.translateM(mModelCube, 0, 0, 0, -12.0f)では配置したモデルの初期座標を原点(カメラ位置)から奥に向かって移動させています。

 

onNewFrame()

onNewFrameは毎フレーム1度呼ばれるため、モデルの座標変換や、射影変換行列をOpenGLESに渡してあげます。

また、端末が動いた量をカメラに反映させています。

 

onDrawEye()

onDrawEyeは毎フレーム2度呼ばれます。

ここでは描画処理を行います。

GLES20.glClear()では背景を初期化しています。

次に頂点シェーダにGLES20.glGetAttribLocation(mGlProgram, “a_Position”)を使い頂点座標を渡すためのハンドルを設定し、GLES20.glEnableVertexAttribArray(mPositionParam)によって有効化させます。

そしてカメラからのビューを変換し、射影変換行列に変換します。

最後にGLES20.glDrawArrays()を使いモデルを描画させます。

描画させてみたものはこちらです。

 

Screenshot_2014-10-06-22-16-39 

 

これでやっとプリミティブな赤いキューブが空間にぽつんと浮いたものがくるくる回っているものが出来上がりました。

シェーダ周りが結構ややこしいので、簡単なものを作るのにも時間がかかりました。

とりあえず一度作りさえすれば色々使い回しができて作りやすくなります。

次回はポリゴンにテクスチャを貼り付け、更に透過させるのを書いていこうと思います。

 

 

 

では、また

●この記事を書いた人