OpenGL で描画する図形を定義したら、描画します。図形の描画 OpenGL ES 2.0 で使用するには、想像以上に多くのコードが必要です。これは、 グラフィック レンダリング パイプラインを細かく制御できます。
このレッスンでは、前のレッスンで定義したシェイプを 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 コード 作成します。
- プログラム - 描画に使用するシェーダーを含む OpenGL ES オブジェクト 選択します。
シェイプを描画するには頂点シェーダーが少なくとも 1 つ、そのシェイプに色を付けるフラグメント シェーダーが 1 つ必要です。
これらのシェーダーは、コンパイルして OpenGL ES プログラムに追加する必要があります。プログラムは、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 シェーディング言語(GLSL)コードが含まれています。 OpenGL ES 環境で動作します。このコードをコンパイルするには、レンダラクラスのユーティリティ メソッドを作成します。
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 サイクルと処理時間の面で制約があるため、同じ作業を何度も行うのは避けるべきです。追加した場合 実行時にシェーダーの内容がわからない場合、そのシェーダーのみが 一度作成すると、後で使用するためにキャッシュに保存できます。
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); }
このコードをすべて配置すれば、このオブジェクトを描画するには
draw()
メソッドをレンダラの onDrawFrame()
メソッド内から呼び出します。
Kotlin
override fun onDrawFrame(unused: GL10) { ... mTriangle.draw() }
Java
public void onDrawFrame(GL10 unused) { ... mTriangle.draw(); }
アプリケーションを実行すると、次のようになります。
このコード例には問題がいくつかあります。まず第一線では
できます。次に、三角形は少し押しつぶされ、画面を変更すると形状が変わります。
方向によって異なります。シェイプが歪んでいるのは、オブジェクトの
画面領域の縦横の比率が、頂点が
GLSurfaceView
が表示されています。投影とカメラを使用すると解決できます
次のレッスンで説明します。
最後に、三角形は静止しており、少し物足りないかもしれません。 モーションの追加レッスンでは、 OpenGL ES グラフィックス パイプラインをさらに活用します。