2. 第一个三角形

OpenGL ES 支持三种基本图元：点，线和三角形。本文以绘制一个三角形为目标。

1. 定义三角形，代码如下所示:

public class Triangle {
    private FloatBuffer vertexBuffer;
    private static final float VERTEXS[] = {
            -0.5f, 0.0f,
            0.5f, 0.0f,
            0.0f, 0.5f
    };
    public Triangle() {
        ByteBuffer vertexBytes = ByteBuffer.allocateDirect(
                VERTEXS.length * 4);
        vertexBytes.order(ByteOrder.nativeOrder());

        vertexBuffer = vertexBytes.asFloatBuffer();
        vertexBuffer.put(VERTEXS);
        vertexBuffer.position(0);

    }
    public FloatBuffer getVertexBuffer() {
        return vertexBuffer;
    }
}

  其中VERTEXS为三角形xy轴的坐标， 顶点坐标分别为(-0.5f, 0)、（0.5f, 0.0f)、（0.0f, 0.5f)。在opengl es中，以屏幕中心为原点(0,0)， 水平方向为X轴。如下图所示：

opengl01.jpeg

为了处理最高效，通常这些坐标都写进一个ByteBuffer，它会被传到OpenGLES图形管线以进行处理。

2. 顶点着色器和片段着色器
  为了绘制定义的形状必须提供很多图形渲染流程的细节。其中包括以下几项:

• 顶点着色器（Vertex Shader）：用于渲染形状顶点的 OpenGL ES 代码。
• 片段着色器（Fragment Shader）：使用颜色或纹理渲染形状表面的OpenGL ES代码。
• Program: OpenGL对象，包含了用于绘制一个或多个图形要用到的着色器。

  通常利用顶点着色器来绘制一个形状，并且用片段着色器来为该形状上色，最后这些着色器被编译后添加到 OpenGL ES Program中，并利用它来绘制形状。
这里先不介绍着色器具体的语法， 为了使用方便，封装了对着色器的相关操作，如下所示:

public class OpenGlUtils {
   private  static final String TAG = OpenGlUtils.class.getName();
   private static int loadShader(final String strSource, final int iType) {
       int[] compiled = new int[1];
       int iShader = GLES20.glCreateShader(iType);
       GLES20.glShaderSource(iShader, strSource);
       GLES20.glCompileShader(iShader);
       GLES20.glGetShaderiv(iShader, GLES20.GL_COMPILE_STATUS, compiled, 0);
       if (compiled[0] == 0) {
           Log.e(TAG, "msg:" + GLES20.glGetShaderInfoLog(iShader));
           return 0;
       }
       return iShader;
   }

   public static int loadProgram(final String strVSource, final String strFSource) {
       int iVShader;
       int iFShader;
       int iProgId;
       int[] link = new int[1];
       iVShader = loadShader(strVSource, GLES20.GL_VERTEX_SHADER);
       if (iVShader == 0) {
           Log.e(TAG, "msg:" +"Vertex Shader Failed");
           return 0;
       }
       iFShader = loadShader(strFSource, GLES20.GL_FRAGMENT_SHADER);
       if (iFShader == 0) {
           Log.e(TAG, "msg:" +"Fragment Shader Failed");
           return 0;
       }

       iProgId = GLES20.glCreateProgram();
       GLES20.glAttachShader(iProgId, iVShader);
       GLES20.glAttachShader(iProgId, iFShader);
       GLES20.glLinkProgram(iProgId);
       GLES20.glGetProgramiv(iProgId, GLES20.GL_LINK_STATUS, link, 0);
       if (link[0] <= 0) {
           Log.e(TAG, "msg:" +"Linking Failed");
           return 0;
       }
       GLES20.glDeleteShader(iVShader);
       GLES20.glDeleteShader(iFShader);
       return iProgId;
   }
}

  只需调用loadProgram函数即可，传入的参数分别为顶点着色器和片段着色器代码。而为了绘制三角形，着色器的代码如下所示:

 private static final String vertexShaderCode =
                    "attribute vec4 vPosition;" +
                    "void main() {" +
                    "gl_Position = vPosition;" +
                    "gl_PointSize = 10.0;" +
                    "}";

    private static final String fragmentShaderCode =
                    "precision mediump float;" +
                    "uniform vec4 vColor;" +
                    "void main() {" +
                    "gl_FragColor = vColor;" +
                    "}";

3. 最终绘制
整个Renderer代码如下:

     public class TriangleRenderer implements GLSurfaceView.Renderer {
    private static final String TAG = TriangleRenderer.class.getName();
    private Triangle triangle;
    private static final String vertexShaderCode =
                    "attribute vec4 vPosition;" +
                    "void main() {" +
                    "gl_Position = vPosition;" +
                    "gl_PointSize = 10.0;" +
                    "}";

    private static final String fragmentShaderCode =
                    "precision mediump float;" +
                    "uniform vec4 vColor;" +
                    "void main() {" +
                    "gl_FragColor = vColor;" +
                    "}";

    private int programId;
    private int vertexPositionId;
    private int colorPositionId;
    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        gl.glClearColor(1.0f, 0.0f, 0.0f, 0.0f);
        triangle = new Triangle();
        programId = OpenGlUtils.loadProgram(vertexShaderCode, fragmentShaderCode);
        if(programId <= 0){
            Log.e(TAG, "load program faild");
            return;
        }
        GLES20.glUseProgram(programId);
        vertexPositionId = GLES20.glGetAttribLocation(programId, "vPosition");
        colorPositionId = GLES20.glGetUniformLocation(programId, "vColor");

        GLES20.glVertexAttribPointer(vertexPositionId, 2,
                GLES20.GL_FLOAT, false,
                0, triangle.getVertexBuffer());
        GLES20.glEnableVertexAttribArray(vertexPositionId);
    }

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

    @Override
    public void onDrawFrame(GL10 gl) {
        gl.glClear(GL_COLOR_BUFFER_BIT);
        GLES20.glUniform4f(colorPositionId, 0.0f, 0.0f, 0.0f, 0.0f);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);   
    }    
}

主要流程包括：

• 设置背景颜色；
• 生成三角形顶点缓冲区；
• 编译链接着色器程序；
• 获取着色器中变量的地址；
• 设置顶点位置；
• 最终在OnDrawFrame中绘制三角形；
  运行后显示如下:

img2.jpg

重要函数说明:

• glVertexAttribPointer
  函数原型如下:

public static void glVertexAttribPointer(
        int indx,
        int size,
        int type,
        boolean normalized,
        int stride,
        java.nio.Buffer ptr
    )

  glVertexAttribPointer指定了渲染时索引值为index的顶点属性数组的数据格式和位置。size指定每个属性值的组件数量,且必须为1、2、3、4之一。type指定每个组件的数据格式，stride指定了一个属性到下一个属性之间的步长（这就允许属性值被存储在单一数组或者不同的数组中）。当数组中的值被访问并被转换至浮点值时，如果normalized被设置为GL_TRUE，意味着整数型的值会被映射至区间-1,1，或者区间[0,1]（无符号整数），反之，这些值会被直接转换为浮点值而不进行归一化处理。

• glEnableVertexAttribArray

public static native void glEnableVertexAttribArray(
        int index
    );

启用顶点位置属性索引。默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的，意味着数据在着色器端是不可见的，哪怕数据已经上传到GPU，由glEnableVertexAttribArray启用指定属性，才可在顶点着色器中访问逐顶点的属性数据。

• glUniform4f

public static native void glUniform4f(
        int location,
        float x,
        float y,
        float z,
        float w
    );

为当前程序对象指定Uniform变量的值。

• glDrawArrays

public static native void glDrawArrays(
        int mode,
        int first,
        int count
    );

绘制图形。其中mode指定绘制模式，包括：

• GL_TRIANGLES，每三个顶之间绘制三角形，之间不连接。
• GL_TRIANGLE_FAN：以V0V1V2,V0V2V3,V0V3V4，……的形式绘制三角形
• GL_TRIANGLE_STRIP：顺序在每三个顶点之间均绘制三角形。
  first指定从数组缓存中的哪一位开始绘制，一般都定义为0；count指定顶点的数量。