Android openGL ES 2.0入门--画三角形、正方形

因为最近的项目需要用到openGL ES 2.0，折腾了半天，查了网上一大堆资料，都没找到系统的openGL ES 2.0的学习资料。经过这半天，总算自己写了一个可以画出三角形和正方形的代码，顺便对网上一堆的代码封装了下。嗯，开始说吧。

首先感谢这篇教程：

http://hukai.me/android-training-course-in-chinese/graphics/opengl/environment.html

以及它的android官方原文：https://developer.android.com/training/graphics/opengl/shapes.html

不想往下看的同学，源码在这里：

http://download.csdn.net/detail/code_better/9592177

其他的我就不多说了，想说的都在注释里：

项目结构图：

先在manifest.xml里加上：

<uses-feature
    android:glEsVersion="0x00020000"
    android:required="true" />

MainActivity:

/**
 * GLSurfaceView相当于画布
 * 主要绘画工作都在Renderer里
 */
public class MainActivity extends AppCompatActivity {

    private GLSurfaceView glSurfaceView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //创建一个GLSurfaceView实例
        glSurfaceView = new MyGLSurfaceView(this);
        //将glSurfaceView设置为activity的ContentView.
        setContentView(glSurfaceView);
    }
    @Override
    protected void onPause() {
        super.onPause();
        if (glSurfaceView != null) {
            glSurfaceView.onPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (glSurfaceView != null) {
            glSurfaceView.onResume();
        }
    }
}

MyGLSurfaceView:

class MyGLSurfaceView extends GLSurfaceView {

    public MyGLSurfaceView(Context context) {
        super(context);
        // 创建一个OpenGL ES 2.0 context,非常重要
        setEGLContextClientVersion(2);
        //设置Renderer到GLSurfaceView
        setRenderer(new MyGL20Renderer());
        // 只有在绘制数据改变时才绘制view
        //此设置会阻止绘制GLSurfaceView的帧，直到你调用了requestRender()，这样会非常高效
//        setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    }
}

MyGL20Renderer:

public class MyGL20Renderer implements GLSurfaceView.Renderer {

    //声明一个三角形对象
    Triangle triangle = null;
    //声明一个正方形对象
    Square square = null;

    public void onSurfaceCreated(GL10 unused, EGLConfig config) {
        //设置背景的颜色
        GLES20.glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
        triangle = new Triangle();
        square = new Square();
    }

    public void onDrawFrame(GL10 unused) {
        // 重绘背景色
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

        //绘制三角形
//        triangle.draw();
        //绘制矩形
        square.draw();
    }

    public void onSurfaceChanged(GL10 unused, int width, int height) {
        GLES20.glViewport(0, 0, width, height);
    }
}

Util:

/**
 * Created by 炜贤 on 2016/8/1.
 * <p/>
 * 画一个图形：需要至少一个顶点着色器来绘制一个形状，以及一个片段着色器为该形状上色。
 * 这些着色器必须被编译然后添加到一个OpenGL ES Program当中，并利用它来绘制形状。
 */
public class Util {

    /**
     * float类型大小为4个字节
     */
    private static final int LENGTH = 4;

    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;" +
                    "}";


    public int loadShader(int type, String shaderCode) {

        // 创建一个vertex shader类型(GLES20.GL_VERTEX_SHADER)
        // 或一个fragment shader类型(GLES20.GL_FRAGMENT_SHADER)
        int shader = GLES20.glCreateShader(type);

        // 将源码添加到shader并编译它
        GLES20.glShaderSource(shader, shaderCode);
        GLES20.glCompileShader(shader);

        return shader;
    }

    /**
     * 顶点着色器（Vertex Shader）：用来渲染形状顶点的OpenGL ES代码
     *
     * @return 顶点着色器
     */
    public int getVertexShader() {
        return loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
    }

    /**
     * 片段着色器（Fragment Shader）：使用颜色或纹理渲染形状表面的OpenGL ES代码。
     *
     * @return 片段着色器
     */
    public int getFragmentShader() {
        return loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);
    }

    /**
     * 程式（Program）：一个OpenGL ES对象，包含了你希望用来绘制一个或更多图形所要用到的着色器
     * 程式（program)是用来装配着色器的（个人理解）
     *
     * @return 程式
     */
    public int getProgram() {
        //获取顶点着色器
        int vertexShader = getVertexShader();
        //获取片段着色器
        int fragmentShader = getFragmentShader();

        int program = GLES20.glCreateProgram();             // 创建空的OpenGL ES Program
        GLES20.glAttachShader(program, vertexShader);   // 将vertex shader添加到program
        GLES20.glAttachShader(program, fragmentShader); // 将fragment shader添加到program
        GLES20.glLinkProgram(program);                  // 创建可执行的 OpenGL ES program

        // 添加program到OpenGL ES环境中
        GLES20.glUseProgram(program);
        return program;
    }


    /**
     * @param coords_per_vertex 每个顶点的坐标数
     * @param vertexBuffer      浮点缓冲区
     * @param color             颜色数组，数组的四个数分别为图形的RGB值和透明度
     */
    public void draw(int coords_per_vertex, FloatBuffer vertexBuffer, float color[]) {
        //获取程式
        int program = getProgram();

        //得到处理到顶点着色器的vPosition成员
        int vPositionHandler = GLES20.glGetAttribLocation(program, "vPosition");

        // 启用一个指向图形的顶点数组的handle
        GLES20.glEnableVertexAttribArray(vPositionHandler);

        // 准备坐标数据
        GLES20.glVertexAttribPointer(vPositionHandler, coords_per_vertex,
                GLES20.GL_FLOAT, false,
                LENGTH * coords_per_vertex, vertexBuffer);

        // 得到处理到片段着色器的vPosition成员
        int mColorHandle = GLES20.glGetUniformLocation(program, "vColor");

        // 设置颜色
        GLES20.glUniform4fv(mColorHandle, 1, color, 0);

        // 绘制三角形比较简单，这里采用glDrawArrays方法(默认是逆时针方向)
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);

        // 禁用指向图形的顶点数组
        GLES20.glDisableVertexAttribArray(vPositionHandler);
    }

    /**
     *
     * @param coords_per_vertex 每个顶点的坐标数
     * @param vertexBuffer      浮点缓冲区
     * @param color             颜色数组，数组的四个数分别为图形的RGB值和透明度
     * @param drawOrder         绘制顶点的顺序（按逆时针方向）
     * @param drawListBuffer    绘图顺序顶点的缓冲区
     */
    public void draw(int coords_per_vertex, FloatBuffer vertexBuffer, float color[], short drawOrder[], ShortBuffer drawListBuffer) {
        //获取程式
        int program = getProgram();

        //得到处理到顶点着色器的vPosition成员
        int vPositionHandler = GLES20.glGetAttribLocation(program, "vPosition");

        // 启用一个指向图形的顶点数组的handle
        GLES20.glEnableVertexAttribArray(vPositionHandler);

        // 准备坐标数据
        GLES20.glVertexAttribPointer(vPositionHandler, coords_per_vertex,
                GLES20.GL_FLOAT, false,
                LENGTH * coords_per_vertex, vertexBuffer);

        // 得到处理到片段着色器的vPosition成员
        int mColorHandle = GLES20.glGetUniformLocation(program, "vColor");

        // 设置颜色
        GLES20.glUniform4fv(mColorHandle, 1, color, 0);

        // 绘制图形
        GLES20.glDrawElements(GLES20.GL_TRIANGLES, drawOrder.length, GLES20.GL_UNSIGNED_SHORT, drawListBuffer);

        // 禁用指向图形的顶点数组
        GLES20.glDisableVertexAttribArray(vPositionHandler);
    }
}

Triangle:

/**
 * 三角形
 */
public class Triangle {

    private FloatBuffer vertexBuffer;

    // 设置每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 3;
    // 设置三角形顶点数组
    static float triangleCoords[] = { // 默认按逆时针方向顺序绘制
            0.0f, 0.622008459f, 0.0f,   // 顶
            -0.5f, -0.311004243f, 0.0f,   // 左底
            0.5f, -0.311004243f, 0.0f    // 右底
    };

    // 设置图形的RGB值和透明度
    float color[] = {0.63671875f, 0.76953125f, 0.22265625f, 1.0f};

    /**
     * 初始化
     * 流程：创建一个顶点的缓冲区空间，然后将其作为一个浮点的缓冲区，
     * 然后将坐标加到这个缓冲区中，然后将读指针指向第一个位置
     */
    public Triangle() {
        // 初始化顶点字节缓冲区，用于存放形状的坐标，
        ByteBuffer bb = ByteBuffer.allocateDirect(
                // (每个浮点数占用4个字节)
                triangleCoords.length * 4);
        // 设置使用设备硬件的原生字节序
        bb.order(ByteOrder.nativeOrder());

        // 将ByteBuffer作为一个浮点缓冲区
        vertexBuffer = bb.asFloatBuffer();
        // 把坐标都添加到FloatBuffer中
        vertexBuffer.put(triangleCoords);
        // 设置buffer从第一个坐标开始读
        vertexBuffer.position(0);
    }

    /**
     * 绘图
     */
    public void draw(){
        new Util().draw(COORDS_PER_VERTEX,vertexBuffer,color);
    }
}

Square:

/**
 * 正方形
 */
public class Square {

    //顶点缓冲区
    private FloatBuffer vertexBuffer;
    //绘图顺序顶点缓冲区
    private ShortBuffer drawListBuffer;

    // 每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 3;
    //正方形四个顶点的坐标
    static float squareCoords[] = {-0.5f, 0.5f, 0.0f,   // top left
            -0.5f, -0.5f, 0.0f,   // bottom left
            0.5f, -0.5f, 0.0f,   // bottom right
            0.5f, 0.5f, 0.0f}; // top right

    private short drawOrder[] = {0, 1, 2, 0, 2, 3}; // 顶点的绘制顺序
    // 设置图形的RGB值和透明度
    float color[] = {0.63671875f, 0.76953125f, 0.22265625f, 1.0f};

    public Square() {
        // initialize vertex byte buffer for shape coordinates
        ByteBuffer bb = ByteBuffer.allocateDirect(
                // (坐标数 * 4)
                squareCoords.length * 4);
        bb.order(ByteOrder.nativeOrder());
        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(squareCoords);
        vertexBuffer.position(0);

        // 为绘制列表初始化字节缓冲
        ByteBuffer dlb = ByteBuffer.allocateDirect(
                // (对应顺序的坐标数 * 2)short是2字节
                drawOrder.length * 2);
        dlb.order(ByteOrder.nativeOrder());
        drawListBuffer = dlb.asShortBuffer();
        drawListBuffer.put(drawOrder);
        drawListBuffer.position(0);
    }

    /**
     * 绘图
     */
    public void draw() {
        new Util().draw(COORDS_PER_VERTEX, vertexBuffer, color, drawOrder, drawListBuffer);
    }
}

这个画出来的三角形和正方形的效果并不是我们预想的的那样，那是因为投影的问题，请看我之后的博客吧，谢谢！