OpenGL で描画する図形を定義したら、描画します。OpenGL ES 2.0 でシェイプを描画するには、API がグラフィック レンダリング パイプラインを詳細に制御できるため、想像よりも多くのコードが必要になります。
このレッスンでは、OpenGL ES 2.0 API を使用して、前のレッスンで定義したシェイプを描画する方法について説明します。
図形を初期化する
描画する前に、描画する図形を初期化して読み込む必要があります。プログラムで使用するシェイプの構造(元の座標)が実行中に変更されない限り、メモリと処理の効率を高めるために、レンダラの onSurfaceCreated()
メソッドで初期化する必要があります。
Kotlin
class MyGLRenderer : GLSurfaceView.Renderer { ... private lateinit var mTriangle: Triangle private lateinit var mSquare: Square override fun onSurfaceCreated(unused: GL10, config: EGLConfig) { ... // initialize a triangle mTriangle = Triangle() // initialize a square mSquare = Square() } ... }
Java
public class MyGLRenderer implements GLSurfaceView.Renderer { ... private Triangle mTriangle; private Square mSquare; public void onSurfaceCreated(GL10 unused, EGLConfig config) { ... // initialize a triangle mTriangle = new Triangle(); // initialize a square mSquare = new Square(); } ... }
図形を描画する
OpenGL ES 2.0 を使用して定義済みのシェイプを描画するには、グラフィック レンダリング パイプラインに多くの詳細を提供する必要があるため、大量のコードが必要です。具体的には、以下を定義する必要があります。
- 頂点シェーダー - 図形の頂点をレンダリングするための OpenGL ES グラフィックス コード。
- フラグメント シェーダー - 色やテクスチャを使用してシェイプの面をレンダリングするための OpenGL ES コード。
- プログラム - 1 つ以上の図形の描画に使用するシェーダーを含む OpenGL ES オブジェクト。
図形を描画するには頂点シェーダーが 1 つ以上、その形状に色を付けるフラグメント シェーダーが 1 つ必要です。これらのシェーダーをコンパイルして OpenGL ES プログラムに追加する必要があります。これは、シェイプの描画に使用されます。Triangle
クラスのシェイプの描画に使用できる基本的なシェーダーを定義する方法の例を次に示します。
Kotlin
class Triangle { private val vertexShaderCode = "attribute vec4 vPosition;" + "void main() {" + " gl_Position = vPosition;" + "}" private val fragmentShaderCode = "precision mediump float;" + "uniform vec4 vColor;" + "void main() {" + " gl_FragColor = vColor;" + "}" ... }
Java
public class Triangle { private final String vertexShaderCode = "attribute vec4 vPosition;" + "void main() {" + " gl_Position = vPosition;" + "}"; private final String fragmentShaderCode = "precision mediump float;" + "uniform vec4 vColor;" + "void main() {" + " gl_FragColor = vColor;" + "}"; ... }
シェーダーには、OpenGL ES 環境で使用する前にコンパイルする必要がある OpenGL Shading Language(GLSL)コードが含まれます。このコードをコンパイルするには、レンダラクラスのユーティリティ メソッドを作成します。
Kotlin
fun loadShader(type: Int, shaderCode: String): Int { // create a vertex shader type (GLES20.GL_VERTEX_SHADER) // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER) return GLES20.glCreateShader(type).also { shader -> // add the source code to the shader and compile it GLES20.glShaderSource(shader, shaderCode) GLES20.glCompileShader(shader) } }
Java
public static int loadShader(int type, String shaderCode){ // create a vertex shader type (GLES20.GL_VERTEX_SHADER) // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER) int shader = GLES20.glCreateShader(type); // add the source code to the shader and compile it GLES20.glShaderSource(shader, shaderCode); GLES20.glCompileShader(shader); return shader; }
シェイプを描画するには、シェーダー コードをコンパイルし、OpenGL ES プログラム オブジェクトに追加してから、プログラムをリンクする必要があります。この操作は、描画オブジェクトのコンストラクタで 1 回だけ行います。
注: OpenGL ES シェーダーのコンパイルとプログラムのリンクは、CPU サイクルと処理時間の点でコストがかかるため、複数回実行しないでください。ランタイムにシェーダーのコンテンツがわからない場合は、コードを 1 回だけ作成して、後で使用できるようにキャッシュする必要があります。
Kotlin
class Triangle { ... private var mProgram: Int init { ... val vertexShader: Int = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode) val fragmentShader: Int = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode) // create empty OpenGL ES Program mProgram = GLES20.glCreateProgram().also { // add the vertex shader to program GLES20.glAttachShader(it, vertexShader) // add the fragment shader to program GLES20.glAttachShader(it, fragmentShader) // creates OpenGL ES program executables GLES20.glLinkProgram(it) } } }
Java
public class Triangle() { ... private final int mProgram; public Triangle() { ... int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode); int fragmentShader = MyGLRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode); // create empty OpenGL ES Program mProgram = GLES20.glCreateProgram(); // add the vertex shader to program GLES20.glAttachShader(mProgram, vertexShader); // add the fragment shader to program GLES20.glAttachShader(mProgram, fragmentShader); // creates OpenGL ES program executables GLES20.glLinkProgram(mProgram); } }
これで、図形を描画する実際の呼び出しを追加できます。OpenGL ES で図形を描画するには、複数のパラメータを指定して、描画対象と描画方法をレンダリング パイプラインに伝える必要があります。描画オプションはシェイプによって異なる可能性があるため、シェイプクラスに独自の描画ロジックを含めることをおすすめします。
図形を描画する draw()
メソッドを作成します。このコードは、位置と色の値をシェイプの頂点シェーダーとフラグメント シェーダーに設定し、描画関数を実行します。
Kotlin
private var positionHandle: Int = 0 private var mColorHandle: Int = 0 private val vertexCount: Int = triangleCoords.size / COORDS_PER_VERTEX private val vertexStride: Int = COORDS_PER_VERTEX * 4 // 4 bytes per vertex fun draw() { // Add program to OpenGL ES environment GLES20.glUseProgram(mProgram) // get handle to vertex shader's vPosition member positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition").also { // Enable a handle to the triangle vertices GLES20.glEnableVertexAttribArray(it) // Prepare the triangle coordinate data GLES20.glVertexAttribPointer( it, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer ) // get handle to fragment shader's vColor member mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor").also { colorHandle -> // Set color for drawing the triangle GLES20.glUniform4fv(colorHandle, 1, color, 0) } // Draw the triangle GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount) // Disable vertex array GLES20.glDisableVertexAttribArray(it) } }
Java
private int positionHandle; private int colorHandle; private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX; private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex public void draw() { // Add program to OpenGL ES environment GLES20.glUseProgram(mProgram); // get handle to vertex shader's vPosition member positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition"); // Enable a handle to the triangle vertices GLES20.glEnableVertexAttribArray(positionHandle); // Prepare the triangle coordinate data GLES20.glVertexAttribPointer(positionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer); // get handle to fragment shader's vColor member colorHandle = GLES20.glGetUniformLocation(mProgram, "vColor"); // Set color for drawing the triangle GLES20.glUniform4fv(colorHandle, 1, color, 0); // Draw the triangle GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount); // Disable vertex array GLES20.glDisableVertexAttribArray(positionHandle); }
このコードをすべて配置したら、レンダラの onDrawFrame()
メソッド内から draw()
メソッドを呼び出すだけで、このオブジェクトを描画できます。
Kotlin
override fun onDrawFrame(unused: GL10) { ... mTriangle.draw() }
Java
public void onDrawFrame(GL10 unused) { ... mTriangle.draw(); }
アプリケーションを実行すると、次のようになります。
このコード例には問題がいくつかあります。何よりも 友人の印象に残りません次に、三角形は少し縮められ、デバイスの画面の向きを変更すると形状が変化します。形状が偏っているのは、GLSurfaceView
が表示される画面領域の比率に対してオブジェクトの頂点が修正されていないためです。次のレッスンでは投影とカメラビューを使用してこの問題を解決できます
最後に、三角形は静止しており、少し物足りないかもしれません。モーションを追加するレッスンでは、このシェイプを回転させ、OpenGL ES グラフィック パイプラインをより効果的に活用します。