Android 音視頻開發(五) : OpenGL ES API,瞭解 OpenGL 開發的基本流程,使用 OpenGL 繪製一個三角形,正方形,圓

1.OpenGL ES簡介

OpenGL Es學習,首先要了解Android的基本架構,如下圖:

 

在Android的第三層的Libraries裏面就有OpenGL  ES庫。OpenGL ES是一個跨平臺的圖形API,給3D圖形處理硬件指定了一個標準的軟件接口。

2.OpenGL ES在Android的使用

Android提供了兩個類:GLSufaceView和GLSurfaceView.Renderer.

2.1GLSurfaceView

GlSurfaceView就是一個surfaceView ,只是增加了Render,用OpenGL來顯示渲染。

2.2GLSurfaceView.Renderer

使用GLSurfaceView.setRenderer()將其附加到GLSurfaceView實例。

GLSurfaceView.Renderer要求實現以下方法:

  • onSurfaceCreated():創建GLSurfaceView時,系統調用一次該方法。使用此方法執行只需要執行一次的操作,例如設置OpenGL環境參數或初始化OpenGL圖形對象。
  • onDrawFrame():系統在每次重畫GLSurfaceView時調用這個方法。使用此方法作爲繪製(和重新繪製)圖形對象的主要執行方法。
  • onSurfaceChanged():當GLSurfaceView的發生變化時,系統調用此方法,這些變化包括GLSurfaceView的大小或設備屏幕方向的變化。例如:設備從縱向變爲橫向時,系統調用此方法。我們應該使用此方法來響應GLSurfaceView容器的改變。

使用GlSurfaceView步驟:

  1. 創建一個GlSurfaceView。
  2. 設置渲染
  3. 在GlSurfaceView.renderder中繪製處理顯示數據

3.OpenGL ES繪製圖形

在Android使用OpenGL ES的步驟:

  1. 在Manifest中聲明OpenGL ES使用,我使用OpenGL ES2.0的API
    <uses-feature android:glEsVersion="0x00020000" android:required="true" />

    如果要使用問了要是添加

    <supports-gl-texture android:name="GL_OES_compressed_ETC1_RGB8_texture" />
    <supports-gl-texture android:name="GL_OES_compressed_paletted_texture" />

     

  2. 設置相關的渲染Renderer,Renderer有三個方法:
  • onSurfaceCreated() - 在View的OpenGL環境被創建的時候調用。
  • onDrawFrame() - 每一次View的重繪都會調用
  • onSurfaceChanged() - 如果視圖的幾何形狀發生變化(例如,當設備的屏幕方向改變時),則調用此方法。

繪製圖形

示例代碼:

public class GlSurfaceViewActivity extends AppCompatActivity {
private GLSurfaceView gLsurfaceview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gl_surface_view);
        gLsurfaceview = findViewById(R.id.gLsurfaceview);
        gLsurfaceview.setEGLContextClientVersion(2);
       // gLsurfaceview.setRenderer(new Trianglerenderer());//三角形
        //gLsurfaceview.setRenderer(new SquareRenderer());//正方形
        gLsurfaceview.setRenderer(new CircleRenderer());//圓
        gLsurfaceview.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
    }

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

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

三角形的Renderer:

public class Trianglerenderer extends BackgroundRender {
    private int mProgram;
    private FloatBuffer vertexBuffer;

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

    static float triangleCoords[] = {
            0.0f,  0.6f, 0.0f, // top
            -0.5f, -0.3f, 0.0f, // bottom left
            0.5f, -0.3f, 0.0f  // bottom right
    };

    //設置顏色,依次爲紅綠藍和透明通道
    float color[] = { 0.0f, 1.0f, 0.0f, 1.0f ,
            1.0f, 0.0f, 0.0f, 1.0f,
            0.0f, 0.0f, 1.0f, 1.0f };
    static final int COORDS_PER_VERTEX = 3;

    private int mPositionHandle;
    private int mColorHandle;

    //頂點個數
    private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
    //頂點之間的偏移量
    private final int vertexStride = COORDS_PER_VERTEX * 4; // 每個頂點四個字節


    @Override
    public void onSurfaceCreated(GL10 gl10, EGLConfig eglConfig) {
        //將背景設置爲灰色
        GLES20.glClearColor(0.5f,0.5f,0.5f,1.0f);
        //申請底層空間
        ByteBuffer bb = ByteBuffer.allocateDirect(triangleCoords.length * 4);
        bb.order(ByteOrder.nativeOrder());
        //將座標數據轉換爲FloatBuffer,用以傳入OpenGL ES程序
        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(triangleCoords);
        vertexBuffer.position(0);

        int vertexShader =  loadShader(GLES20.GL_VERTEX_SHADER,vertexShaderCode);
        int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER,fragmentShaderCode);

        //創建一個空的OpenGLES程序
        mProgram = GLES20.glCreateProgram();
        //將頂點着色器加入到程序
        GLES20.glAttachShader(mProgram,vertexShader);
        //將片元着色器加入到程序中
        GLES20.glAttachShader(mProgram,fragmentShader);
        //連接到着色器程序
        GLES20.glLinkProgram(mProgram);
    }





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

    @Override
    public void onDrawFrame(GL10 gl10) {
        //將程序加入到OpenGLES2.0環境
        GLES20.glUseProgram(mProgram);

        //獲取頂點着色器的vPosition成員句柄
        mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
        //啓用三角形頂點的句柄
        GLES20.glEnableVertexAttribArray(mPositionHandle);
        //準備三角形的座標數據
        GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
                GLES20.GL_FLOAT, false,
                vertexStride, vertexBuffer);
        //獲取片元着色器的vColor成員的句柄
        mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
        //設置繪製三角形的顏色
        GLES20.glUniform4fv(mColorHandle, 1, color, 0);
        //繪製三角形
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
        //禁止頂點數組的句柄
        GLES20.glDisableVertexAttribArray(mPositionHandle);
    }

}

正方形的Renderer:

public class SquareRenderer extends BackgroundRender implements GLSurfaceView.Renderer {
    private FloatBuffer vertexBuffer;
    private ShortBuffer indexBuffer;
    private final String vertexShaderCode =
            "attribute vec4 vPosition;" +
                    "uniform mat4 vMatrix;" +
                    "void main() {" +
                    "  gl_Position = vMatrix*vPosition;" +
                    "}";

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

    private int mProgram;

    static final int COORDS_PER_VERTEX = 3;
    static float triangleCoords[] = {
            -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
    };

    static short index[] = {
            0, 1, 2, 0, 2, 3
    };

    private int mPositionHandle;
    private int mColorHandle;

    private float[] mViewMatrix = new float[16];
    private float[] mProjectMatrix = new float[16];
    private float[] mMVPMatrix = new float[16];

    //頂點個數
    private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
    //頂點之間的偏移量
    private final int vertexStride = COORDS_PER_VERTEX * 4; // 每個頂點四個字節

    private int mMatrixHandler;

    //設置顏色,依次爲紅綠藍和透明通道
    float color[] = {0.0f, 1.0f, 0.0f, 1.0f ,
            1.0f, 0.0f, 0.0f, 1.0f,
            0.0f, 0.0f, 1.0f, 1.0f};


    @Override
    public void onSurfaceCreated(GL10 gl10, EGLConfig eglConfig) {
        ByteBuffer bb = ByteBuffer.allocateDirect(
                triangleCoords.length * 4);
        bb.order(ByteOrder.nativeOrder());
        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(triangleCoords);
        vertexBuffer.position(0);

        ByteBuffer cc = ByteBuffer.allocateDirect(index.length * 2);
        cc.order(ByteOrder.nativeOrder());
        indexBuffer = cc.asShortBuffer();
        indexBuffer.put(index);
        indexBuffer.position(0);

        int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER,
                vertexShaderCode);
        int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER,
                fragmentShaderCode);

        //創建一個空的OpenGLES程序
        mProgram = GLES20.glCreateProgram();
        //將頂點着色器加入到程序
        GLES20.glAttachShader(mProgram, vertexShader);
        //將片元着色器加入到程序中
        GLES20.glAttachShader(mProgram, fragmentShader);
        //連接到着色器程序
        GLES20.glLinkProgram(mProgram);
    }

    @Override
    public void onSurfaceChanged(GL10 gl10, int width, int height) {
        //計算寬高比
        float ratio = (float) width / height;
        //設置透視投影
        Matrix.frustumM(mProjectMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
        //設置相機位置
        Matrix.setLookAtM(mViewMatrix, 0, 0, 0, 7.0f, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
        //計算變換矩陣
        Matrix.multiplyMM(mMVPMatrix, 0, mProjectMatrix, 0, mViewMatrix, 0);
    }

    @Override
    public void onDrawFrame(GL10 gl10) {
        //將程序加入到OpenGLES2.0環境
        GLES20.glUseProgram(mProgram);
        //獲取變換矩陣vMatrix成員句柄
        mMatrixHandler = GLES20.glGetUniformLocation(mProgram, "vMatrix");
        //指定vMatrix的值
        GLES20.glUniformMatrix4fv(mMatrixHandler, 1, false, mMVPMatrix, 0);
        //獲取頂點着色器的vPosition成員句柄
        mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
        //啓用三角形頂點的句柄
        GLES20.glEnableVertexAttribArray(mPositionHandle);
        //準備三角形的座標數據
        GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
                GLES20.GL_FLOAT, false,
                vertexStride, vertexBuffer);
        //獲取片元着色器的vColor成員的句柄
        mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
        //設置繪製三角形的顏色
        GLES20.glUniform4fv(mColorHandle, 1, color, 0);
        //繪製三角形
//        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, vertexCount);
        //索引法繪製正方形
        GLES20.glDrawElements(GLES20.GL_TRIANGLES, index.length, GLES20.GL_UNSIGNED_SHORT, indexBuffer);
        //禁止頂點數組的句柄
        GLES20.glDisableVertexAttribArray(mPositionHandle);
    }

}

圓的Renderer:

public class CircleRenderer extends BackgroundRender implements GLSurfaceView.Renderer {
    String vertexShaderCode = "attribute vec4 vPosition;\n" +
            "uniform mat4 vMatrix;\n" +
            "void main() {\n" +
            "  gl_Position = vMatrix*vPosition;\n" +
            "}" ;

    String fragmentShaderCode = "precision mediump float;\n" +
            " uniform vec4 vColor;\n" +
            " void main() {\n" +
            "     gl_FragColor = vColor;\n" +
            " }";
    int mProgram;

    private FloatBuffer vertexBuffer;
    private float[] circlrCoods;
    float color[] = { 1.0f, 1.0f, 1.0f, 1.0f }; //頂點統一白色

    public CircleRenderer() {
        //設置所有座標
        circlrCoods = createPositions();
        //float[] → FloatBuffer
        ByteBuffer bb = ByteBuffer.allocateDirect(circlrCoods.length * 4);
        bb.order(ByteOrder.nativeOrder());
        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(circlrCoods);
        vertexBuffer.position(0);
    }

    private float[]  createPositions(){
        ArrayList<Float> data=new ArrayList<>();
        data.add(0.0f);             //設置圓心座標
        data.add(0.0f);
        data.add(0.0f);
        //分成100條邊,繪製出來應該很像圓了
        float radius = 0.5f; //半徑1
        float angDegSpan=360f/100; //依次遞加的角度
        for(float i=0;i<360+angDegSpan;i+=angDegSpan){
            data.add((float)(radius*Math.cos(i*Math.PI/180f))); //x
            data.add((float) (radius*Math.sin(i*Math.PI/180f))); //y
            data.add(0.0f); //z
        }
        float[] f=new float[data.size()];
        for (int i=0;i<f.length;i++){
            f[i]=data.get(i);
        }
        return f;
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        int vetexShader = loadShader(GLES20.GL_VERTEX_SHADER , vertexShaderCode);
        int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER , fragmentShaderCode);
        //添加着色器
        mProgram = GLES20.glCreateProgram();
        GLES20.glAttachShader(mProgram,vetexShader);
        GLES20.glAttachShader(mProgram,fragmentShader);
        GLES20.glLinkProgram(mProgram);
    }

    private final float[] mMVPMatrix = new float[16];
    private final float[] mProjectMatrix = new float[16];
    private final float[] mViewMatrix = new float[16];
    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        GLES20.glViewport(0,0,width,height);
        float ratio = (float) width/height;
        //設置矩陣
        Matrix.frustumM(mProjectMatrix,0,-ratio,ratio,-1,1,3,20);
        Matrix.setLookAtM(mViewMatrix,0,0f,0f,7.0f,0f,0f,0f,0f,1.0f,0f);
        Matrix.multiplyMM(mMVPMatrix,0,mProjectMatrix,0,mViewMatrix,0);
    }

    int mMatrixHandler;
    int mPositionHandle;
    int vColorHandle;
    @Override
    public void onDrawFrame(GL10 gl) {
        Log.e("TAG","error");
        GLES20.glUseProgram(mProgram);
        mMatrixHandler = GLES20.glGetUniformLocation(mProgram,"vMatrix");
        GLES20.glUniformMatrix4fv(mMatrixHandler,1,false,mMVPMatrix,0);

        mPositionHandle = GLES20.glGetAttribLocation(mProgram,"vPosition");
        GLES20.glEnableVertexAttribArray(mPositionHandle);
        GLES20.glVertexAttribPointer(
                mPositionHandle,
                3,
                GLES20.GL_FLOAT,
                false,
                12,
                vertexBuffer
        );

        vColorHandle = GLES20.glGetUniformLocation(mProgram,"vColor");
        GLES20.glUniform4fv(vColorHandle,1,color,0);

        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN , 0 , circlrCoods.length/3);
        GLES20.glDisableVertexAttribArray(mPositionHandle);
    }


}


項目地址:https://github.com/ChloeDimen/AudioAndVideo

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章