図形を描画する

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();
}

アプリケーションを実行すると、次のようになります。

図 1. 投影またはカメラビューなしで描画される三角形。

このコード例には問題がいくつかあります。まず第一線では できます。次に、三角形は少し押しつぶされ、画面を変更すると形状が変わります。 方向によって異なります。シェイプが歪んでいるのは、オブジェクトの 画面領域の縦横の比率が、頂点が GLSurfaceView が表示されています。投影とカメラを使用すると解決できます 次のレッスンで説明します。

最後に、三角形は静止しており、少し物足りないかもしれません。 モーションの追加レッスンでは、 OpenGL ES グラフィックス パイプラインをさらに活用します。