Android OpenGL ES and 2D

Android OpenGL ES and 2D Graphics

OpenGL ES is a cross-platform API for rendering 2D and 3D graphics on embedded systems, including Android devices. This article will focus on using OpenGL ES for 2D graphics development in Android.

Why OpenGL ES for 2D?

While Android provides frameworks like Canvas and View for 2D drawing, OpenGL ES offers advantages for demanding 2D graphics applications, such as:

Performance

• Hardware Acceleration: OpenGL ES leverages the GPU for efficient rendering, leading to smoother animations and faster frame rates.
• Optimized for Graphics: It’s designed specifically for graphics, offering low-level control over rendering pipelines, enabling efficient resource management.

Flexibility

• Complex Geometries: Easily handle complex shapes, textures, and effects beyond the limitations of Canvas.
• Advanced Features: Supports shaders, blending, and transformations, enabling rich visual experiences.

Getting Started

To use OpenGL ES in an Android application, you need:

• Android Studio: The official IDE for Android development.
• OpenGL ES Libraries: Included in the Android SDK.
• Knowledge of OpenGL ES fundamentals: Understand concepts like shaders, vertices, and textures.

Basic Structure

An OpenGL ES application in Android typically involves the following components:

• Activity: The main component that interacts with the user and hosts the OpenGL ES view.
• GLSurfaceView: A specialized view that provides an OpenGL ES rendering surface. It handles the lifecycle and thread management of the OpenGL ES rendering context.
• Renderer: A class that implements the `GLSurfaceView.Renderer` interface and handles all OpenGL ES operations, including drawing, updating, and event handling.

Code Example

// MainActivity.java
package com.example.opengl2d;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.opengl.GLSurfaceView;
import android.view.MotionEvent;

public class MainActivity extends AppCompatActivity {
    private GLSurfaceView glSurfaceView;
    private MyRenderer renderer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        glSurfaceView = new GLSurfaceView(this);
        renderer = new MyRenderer();
        glSurfaceView.setRenderer(renderer);
        setContentView(glSurfaceView);
    }

    @Override
    protected void onResume() {
        super.onResume();
        glSurfaceView.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        glSurfaceView.onPause();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        renderer.handleTouch(event.getX(), event.getY());
        return true;
    }
}

// MyRenderer.java
package com.example.opengl2d;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLES20;
import android.opengl.Matrix;

public class MyRenderer implements GLSurfaceView.Renderer {
    private final float[] mProjectionMatrix = new float[16];
    private final float[] mViewMatrix = new float[16];
    private final float[] mMVPMatrix = new float[16];
    private int mProgram;
    private int mPositionHandle;
    private int mColorHandle;
    private int mMVPMatrixHandle;

    private final float[] triangleCoords = {
        // X, Y, Z
        -0.5f,  0.5f, 0.0f, // top left
         0.5f,  0.5f, 0.0f, // top right
         0.0f, -0.5f, 0.0f  // bottom center
    };

    private final int[] triangleColors = {
        // R, G, B, A
        255, 0, 0, 255, // red
        0, 255, 0, 255, // green
        0, 0, 255, 255   // blue
    };

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Black background

        String vertexShaderCode =
                "attribute vec4 vPosition;\n" +
                "attribute vec4 vColor;\n" +
                "uniform mat4 uMVPMatrix;\n" +
                "varying vec4 vColorVarying;\n" +
                "void main() {\n" +
                "  vColorVarying = vColor;\n" +
                "  gl_Position = uMVPMatrix * vPosition;\n" +
                "}";

        String fragmentShaderCode =
                "precision mediump float;\n" +
                "varying vec4 vColorVarying;\n" +
                "void main() {\n" +
                "  gl_FragColor = vColorVarying;\n" +
                "}";

        // Load shaders and create program
        int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
        int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);
        mProgram = GLES20.glCreateProgram();
        GLES20.glAttachShader(mProgram, vertexShader);
        GLES20.glAttachShader(mProgram, fragmentShader);
        GLES20.glLinkProgram(mProgram);

        // Get attribute and uniform locations
        mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
        mColorHandle = GLES20.glGetAttribLocation(mProgram, "vColor");
        mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        GLES20.glViewport(0, 0, width, height);

        // Calculate the projection and view matrices
        float ratio = (float) width / height;
        Matrix.frustumM(mProjectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7); // Perspective projection
        Matrix.setLookAtM(mViewMatrix, 0, 0, 0, -3, 0, 0, 1, 0, 1, 0); // Camera position

        // Calculate the model-view-projection matrix
        Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

        GLES20.glUseProgram(mProgram);

        // Prepare vertex data
        GLES20.glVertexAttribPointer(mPositionHandle, 3, GLES20.GL_FLOAT, false, 0, triangleCoordsBuffer);
        GLES20.glEnableVertexAttribArray(mPositionHandle);
        GLES20.glVertexAttribPointer(mColorHandle, 4, GLES20.GL_UNSIGNED_BYTE, true, 0, triangleColorsBuffer);
        GLES20.glEnableVertexAttribArray(mColorHandle);

        // Pass the model-view-projection matrix to the shader
        GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mMVPMatrix, 0);

        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3); // Draw the triangle

        GLES20.glDisableVertexAttribArray(mPositionHandle);
        GLES20.glDisableVertexAttribArray(mColorHandle);
    }

    // Load shader from a string
    private int loadShader(int type, String shaderCode) {
        int shader = GLES20.glCreateShader(type);
        GLES20.glShaderSource(shader, shaderCode);
        GLES20.glCompileShader(shader);
        return shader;
    }

    // Handle touch event (update triangle position)
    public void handleTouch(float x, float y) {
        // Implement touch handling logic here (e.g., update triangle position)
    }
}

Output

Running this code will render a simple triangle on the screen.

Conclusion

Android OpenGL ES is a powerful tool for building visually rich and performant 2D applications. By utilizing its capabilities, you can create engaging games, interactive UI elements, and stunning visual effects. This article provides a starting point for exploring the world of 2D graphics development with OpenGL ES on Android.