Android多媒體之GLES2戰記第四集--移形換影

時間  2019-11-06
標籤 android 多媒體 gles2 gles 第四 欄目 Android 简体版
原文   原文鏈接

視野限制了人對這個宇宙的認知,但沒有視野，人將會一無所知

上集說到勇者墜入黑暗之淵,憑藉對世界的認知構建出了世界系
到此爲止，OpenGL的世界觀已經映入腦海，新手十二副本已經經過
接下來等待他們的將是什麼，普通副本開啓....git

普通副本一：斗轉星移

第一關卡：繪製矩形

這關簡單,回頭看看，是否是感受清晰了許多,下面列一下關鍵點，其餘不說了
這個矩形可不是一開始摸黑瞎畫的，而是軸系下可感的矩形,地址：matrix.MatrixRectangle
視角移回正方向0f, 0f, -6,這時候畫出的是後面github

軸系下的矩形.png 

//頂點座標
private float mVertex[] = {   //以逆時針順序
        -1f, 1f, 1.0f, // p0
        -1f, -1f, 1.0f, // p1
        1f, -1f, 1.0f, // p2
        1f, 1f, 1.0f, //p3
};

//索引數組
private short[] idx = {
        0, 1, 3,
        1, 2, 3
};

//頂點顏色
float colors[] = new float[]{
        1f, 1f, 0.0f, 1f,//黃
        0.05882353f, 0.09411765f, 0.9372549f,1f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1f,//綠
        1.0f, 0.0f, 1.0f,1f,//紫色
};
複製代碼
2.第二關卡：封裝矩陣變換

視圖的矩陣變換和投影矩陣感受在WorldRenderer裏也有點麻煩
封裝一下吧,仍是那四個矩陣編程

/**
 * 做者：張風捷特烈<br/>
 * 時間：2019/1/14/014:11:29<br/>
 * 郵箱：1981462002@qq.com<br/>
 * 說明：矩陣變化棧
 */

public class MatrixStack {
    private static float[] mProjectionMatrix = new float[16];//投影矩陣
    private static float[] mViewMatrix = new float[16];//相機矩陣
    private static float[] mOpMatrix;//變換矩陣
    //獲取具體物體的總變換矩陣
    private static float[] mMVPMatrix = new float[16];

    /**
     * 獲取不變換初始矩陣
     */
    public static void reset() {
        //mOpMatrix轉化爲單位陣
        mOpMatrix = new float[]{
                1, 0, 0, 0,
                0, 1, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1,
        };
    }
    /**
     * 設置沿xyz軸移動
     *
     * @param x 移動的 x 份量
     * @param y 移動的 y 份量
     * @param z 移動的 z 份量
     */
    public static void translate(float x, float y, float z) {
        Matrix.translateM(mOpMatrix, 0, x, y, z);
    }

    /**
     * 設置沿(x,y,z)點旋轉
     *
     * @param deg 角度
     * @param x   旋轉點的 x 份量
     * @param y   旋轉點的 y 份量
     * @param z   旋轉點的 z 份量
     */
    public static void rotate(float deg, float x, float y, float z) {
        Matrix.rotateM(mOpMatrix, 0, deg, x, y, z);
    }

    /**
     * 設置縮放
     * @param x   縮放的 x 份量
     * @param y   縮放的 y 份量
     * @param z   縮放的 z 份量
     */
    public static void scale(float x, float y, float z) {
        Matrix.scaleM(mOpMatrix, 0, x, y, z);
    }

    /**
     * 相機的位置
     * @param cx  攝像機位置x
     * @param cy  攝像機位置y
     * @param cz  攝像機位置z
     * @param tx  攝像機目標點x
     * @param ty  攝像機目標點y
     * @param tz  攝像機目標點z
     * @param upx 攝像機UP向量X份量
     * @param upy 攝像機UP向量Y份量
     * @param upz 攝像機UP向量Z份量
     */
    public static void lookAt(float cx, float cy, float cz,
                              float tx, float ty, float tz,
                              float upx, float upy, float upz) {
        Matrix.setLookAtM(mViewMatrix, 0,
                cx, cy, cz,
                tx, ty, tz,
                upx, upy, upz);
    }

    /**
     *  設置透視投影參數
     * @param left   near面的left
     * @param right  near面的right
     * @param bottom near面的bottom
     * @param top    near面的top
     * @param near   near面距頂點長
     * @param far    far面距頂點長
     */
    public static void frustum(
            float left, float right, float bottom,
            float top, float near, float far) {
        Matrix.frustumM(mProjectionMatrix, 0,
                left, right, bottom,
                top, near, far);
    }
    
    /**
     * 查看棧頂的變換矩陣
     *
     * @return mMVPMatrix
     */
    public static float[] peek() {
        submit();
        return mMVPMatrix;
    }
    
    /**
     * 提交變換
     */
    private static void submit() {
        Matrix.multiplyMM(
                mMVPMatrix, 0,
                mViewMatrix, 0,
                mOpMatrix, 0);

        Matrix.multiplyMM(
                mMVPMatrix, 0,
                mProjectionMatrix, 0,
                mMVPMatrix, 0);
    }

    //獲取具體物體的變換矩陣
    public static float[] getOpMatrix() {
        return mOpMatrix;
    }
}
複製代碼

MatrixStack使用數組

---->[WorldRenderer#onSurfaceChanged]------------
MatrixStack.frustum(
        -ratio, ratio, -1, 1,
        3, 9);
MatrixStack.lookAt(2, 2, -6,
        0f, 0f, 0f,
        0f, 1.0f, 0.0f);
MatrixStack.initStack();

---->[WorldRenderer#onDrawFrame]------------
MatrixStack.rotate(currDeg, 0, 1, 0);
mWorldShape.draw(MatrixStack.peek());
複製代碼

加面旋轉.gif

3.第三關卡：操做矩陣的狀態棧

想一下，若是我平移畫一個立方，mOpMatrix會變化，
我再平移畫一個立方時mOpMatrix會在上一個mOpMatrix的基礎上進行變換
這種狀況下咱們是但願mOpMatrix在畫完後回到以前狀態的,這就涉及棧的概念
此處沒用Java的Stack類，由於元素是操做矩陣,即float[],很差放bash

3.1：沒有恢復狀態時

一個x方向-1.5，另外一個x方向+1.5微信

沒有恢復狀態.png 

MatrixStack.translate(-1.5f, 0, 0);
mWorldShape.draw(MatrixStack.peek());
MatrixStack.translate(1.5f, 0, 0);
mWorldShape.draw(MatrixStack.peek());
複製代碼
3.2：MatrixStack添加恢復機制
//默認棧深爲10,棧中元素爲float[16]--即變換矩陣
private static float[][] mStack = new float[10][16];
private static int stackTop = -1;//棧頂無元素時爲-1

/**
 * 矩陣操做準備入棧---保存mOpMatrix狀態
 */
public static void save() {
    stackTop++;//棧頂+1
    //op矩陣入棧頂
    System.arraycopy(mOpMatrix, 0, mStack[stackTop], 0, 16);
}

/**
 * 棧頂出棧--恢復mOpMatrix
 */
public static void restore() {
    System.arraycopy(mStack[stackTop], 0, mOpMatrix, 0, 16);
    stackTop--;//棧頂下移
}
複製代碼
3.3：使用狀態恢復機制

一個x方向-1.5，另外一個x方向+1.5，這纔是咱們想要的效果post

有恢復狀態.png 

MatrixStack.save();
MatrixStack.translate(-1.5f, 0, 0);
mWorldShape.draw(MatrixStack.peek());
MatrixStack.restore();

MatrixStack.save();
MatrixStack.translate(1.5f, 0, 0);
mWorldShape.draw(MatrixStack.peek());
MatrixStack.restore();
複製代碼
4.第四關卡：總結移動旋轉縮放

綜合變換.gif

4.1：注意setRotateM與rotateM的區別

一開始寫成setRotateM了，效果疊加不上，而後debug一下，發現:
源碼中setRotateM會將一些之置零或1，也就是重置以前的變換，因此網站

public static void setRotateM(float[] rm, int rmOffset,
        float a, float x, float y, float z) {
    rm[rmOffset + 3] = 0;
    rm[rmOffset + 7] = 0;
    rm[rmOffset + 11]= 0;
    rm[rmOffset + 12]= 0;
    rm[rmOffset + 13]= 0;
    rm[rmOffset + 14]= 0;
    rm[rmOffset + 15]= 1;
複製代碼
4.2.使用：
MatrixStack.save();
 MatrixStack.translate(-1.5f, 0, 0);
 MatrixStack.rotate(currDeg, -1.5f, 0, 0);
 mWorldShape.draw(MatrixStack.peek());
 MatrixStack.restore();
 
 MatrixStack.save();
 MatrixStack.translate(1.5f, 0, 0);
 MatrixStack.rotate(currDeg, 0, 1, 0);
 MatrixStack.scale(0.5f,1,0.5f);
 mWorldShape.draw(MatrixStack.peek());
 MatrixStack.restore();
複製代碼

普通副本二：變心之陣

剛纔咱們用的是Matrix自帶的變換方法，自帶的靈活性確定欠佳
下面咱們來看一下這16個數字是怎麼讓圖形變換的ui

1.第一關卡：Matrix.translateM分析

怎麼分析呢?廢話，固然是看源碼了spa

/**
 * Translates matrix m by x, y, and z in place.
 *
 * @param m matrix
 * @param mOffset index into m where the matrix starts
 * @param x translation factor x
 * @param y translation factor y
 * @param z translation factor z
 */
public static void translateM(
        float[] m, int mOffset,
        float x, float y, float z) {
    for (int i=0 ; i<4 ; i++) {
        int mi = mOffset + i;
        m[12 + mi] += m[mi] * x + m[4 + mi] * y + m[8 + mi] * z;
    }
}
複製代碼

mOffset能夠看出是索引的偏移量，正常狀況下都是0，因此無論他
核心的就是四個for內語句，i從0~3，而後就是這句迷之代碼

m[12 + mi] += m[mi] * x + m[4 + mi] * y + m[8 + mi] * z;

mOffset爲0時，簡化一下:
m[12 + i] += m[i] * x + m[4 + i] * y + m[8 + i] * z;

感受仍是迷之代碼的,不要緊，再分析一下
i=0：  m[12] += m[0]*x + m[4]*y + m[8]*z
i=1：  m[13] += m[1]*x + m[5]*y + m[9]*z
i=2：  m[14] += m[2]*x + m[6]*y + m[10]*z
i=3：  m[15] += m[3]*x + m[7]*y + m[11]*z

Why ?
複製代碼
2.第二關卡：座標變換的源頭

因此的根源在於這句話，它表明了什麼意思?
注意：OpenGL 中的向量是列主元，也就是豎着排

座標變換.png

IMG20190114155647.jpg

而後算出gl_Position的結果會是一個四維向量
這也就是m12,m13,m14,m15爲何特別,m0,m1,m2,m3爲何和x息息相關

結果.png 

再換個角度來看，gl_Position中的四個維度分別表明：x,y,z,w

gl_Position.x = m0*x + m4*y + m8*z + m12
gl_Position.y = m1*x + m5*y + m9*z + m13
gl_Position.z = m2*x + m6*y + m10*z + m14
 
這也說明 m12 m13 m14 三個數分別控制x,y,z的位移 
複製代碼

如今再看translateM,能夠看出它的做用是改變第四行
咱們傳入的是行向量,傳入渲染器中變成列向量，至關於轉置，
也就是處理時uMVPMatrix的第四列，這樣一來路就走通了，
translateM經過改變第四行的向量來操做頂點的位置，yes!

3.第三關卡：Matrix.scaleM分析
public static void scaleM(float[] m, int mOffset,
        float x, float y, float z) {
    for (int i=0 ; i<4 ; i++) {
        int mi = mOffset + i;
        m[     mi] *= x;
        m[ 4 + mi] *= y;
        m[ 8 + mi] *= z;
    }
}

這個就簡單了：
i=0：  m[0] = m[0]*x     m[4] = m[4]*y   m[8] = m[8]*z
i=1：  m[1] = m[1]*x     m[5] = m[5]*y   m[9] = m[9]*z
i=2：  m[2] = m[2]*x     m[6] = m[4]*y   m[10] = m[10]*z
i=3：  m[3] = m[3]*x     m[7] = m[7]*y   m[11] = m[11]*z

>這樣一看是否是豁然開朗
複製代碼

旋轉仍是算了吧，沒幾張草稿紙還真算不清，源碼看着也挺複雜
等之後哪天閒到懷疑人生的時候再來慢慢算算吧。

副本三：形之累變

在一個圓環上等分點，能夠造成若干三角形，由此能夠拼合出圖形
這個副本是爲了練習一下規律型的運算，發現規律，加以使用

環.gif

1.第一關卡：環

/**
 *  初始化頂點座標與顏色
 * @param splitCount 分割點數
 * @param r 內圓半徑
 * @param R 外圈半徑
 */
public void initVertex(int splitCount, float r, float R) {
    //頂點座標數據的初始化
    verticeCount = splitCount * 2 + 2;
    float[] vertices = new float[verticeCount * 3];//座標數據
    float thta = 360.f / splitCount;
    for (int i = 0; i < vertices.length; i += 3) {
        int n = i / 3;
        if (n % 2 == 0) {//偶數點--內圈
            vertices[i] = (float) (r * Math.cos(Change.rad((n / 2) * thta)));//x
            vertices[i + 1] = (float) (r * Math.sin(Change.rad((n / 2) * thta)));//y
            vertices[i + 2] = 0;//z
        } else {//奇數點--外圈
            vertices[i] = (float) (R * Math.cos(Change.rad((n / 2) * thta)));//x
            vertices[i + 1] = (float) (R * Math.sin(Change.rad((n / 2) * thta)));//y
            vertices[i + 2] = 0;//z
        }
    }
    //i+8 表示 每次跨度兩個點
    //橙色：0.972549f,0.5019608f,0.09411765f,1.0f
    float colors[] = new float[verticeCount * 4];
    for (int i = 0; i < colors.length; i += 8) {
        colors[i + 0] = 1;
        colors[i + 1] = 1;
        colors[i + 2] = 1;
        colors[i + 3] = 1;
        colors[i + 4] = 0.972549f;
        colors[i + 5] = 0.5019608f;
        colors[i + 6] = 0.09411765f;
        colors[i + 7] = 1.0f;
    }
    vertexBuffer = GLUtil.getFloatBuffer(vertices);
    mColorBuffer = GLUtil.getFloatBuffer(colors);
}
複製代碼

這種狀況下，使用GL_TRIANGLE_STRIP時極好的，相鄰三點組成三角形

GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, verticeCount);
複製代碼

八邊環.png

調整參數.png

2.第二關卡：GLES20.GL_TRIANGLE_FAN三角形

fan 即扇子，一箇中心，鏈接其餘頂點，好處是比較節省頂點
這樣能夠繪製任意正多邊形

fan.png

正八邊形.png 

/**
 * 初始化頂點座標與顏色
 *
 * @param splitCount 分割點數
 * @param r          內圓半徑
 */
public void initVertex(int splitCount, float r) {
    //頂點座標數據的初始化
    verticeCount = splitCount + 2;
    float[] vertices = new float[verticeCount * 3];//座標數據
    float thta = 360.f / splitCount;
    vertices[0] = 0;
    vertices[1] = 0;
    vertices[2] = 0;
    for (int n = 1; n <= verticeCount - 1; n++) {
        vertices[n * 3] = (float) (r * Math.cos(Change.rad((n - 1) * thta)));//x
        vertices[n * 3 + 1] = (float) (r * Math.sin(Change.rad((n - 1) * thta)));//y
        vertices[n * 3 + 2] = 0;//z
    }
    //頂點顏色
    //橙色：0.972549f,0.5019608f,0.09411765f,1.0f
    float colors[] = new float[verticeCount * 4];
    colors[0] = 1;
    colors[1] = 1;
    colors[2] = 1;
    colors[3] = 1;
    for (int i = 1; i <= verticeCount - 1; i++) {
        colors[4 * i] = 0.972549f;
        colors[4 * i + 1] = 0.5019608f;
        colors[4 * i + 2] = 0.09411765f;
        colors[4 * i + 3] = 1.0f;
    }
    vertexBuffer = GLUtil.getFloatBuffer(vertices);
    mColorBuffer = GLUtil.getFloatBuffer(colors);
}
複製代碼

繪製時使用：GLES20.GL_TRIANGLE_FAN

GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, verticeCount);
複製代碼
3.第三關卡：總結一下幾種繪製方式

三角形系列 

glDrawArrays：
---->[繪製點線]-------
GLES20.GL_POINTS            繪製點
GLES20.GL_LINES             兩點一線
GLES20.GL_LINE_STRIP        相鄰兩點一線(不連首尾)
GLES20.GL_LINE_LOOP         相鄰兩點一線(連首尾)

---->[繪製三角形]-------
GLES20.GL_TRIANGLES         三點一個
GLES20.GL_TRIANGLE_STRIP    相鄰三點一個
GLES20.GL_TRIANGLE_FAN      第一點中心，散射到其餘點

glDrawElements:
---->[頂點索引繪製]------
GLES20.glDrawElements(
GLES20.GL_TRIANGLES, idx.length, 
GLES20.GL_UNSIGNED_SHORT, idxBuffer);
複製代碼

普通副本四：世界之幕

1.第一關卡:再看投影矩陣

視野

下面是視點：(2,2,-6) far 9 near 3的單位立方,結合上面的圖來看看:

立方.png

near 和 far兩個面決定了視野，即兩面間的內容可見
near面的上下左右的長度也決定這物體的高矮胖瘦,好比左右減半後，
你應該能想了視野被"壓扁"了,物體也會隨之變扁

左右除以二.png 

MatrixStack.frustum(
        -ratio/2, ratio/2, -1, 1,
        3f, 9);
複製代碼
2.第二關卡:near面與平移變換

near面越近，成像越小，你能夠根據那個圖，本身想一想

near.png

當觀察到的事物在near和far面組成的棱臺以外，便不可見
因此說眼睛限制了你對這個宇宙的認知,但沒有眼睛你會一無所知

平移視點.png

3.平行投影

這個比較簡單，也就是沒有透視，立方的對線都是平行的，參數和透視投影一致
3D通常都是透視投影,既然有這個API,應該有特定的用途吧

public static void orthoM(
        float left, float right, float bottom,
        float top, float near, float far) {
    Matrix.orthoM(mProjectionMatrix, 0,
            left, right, bottom,
            top, near, far);
}
複製代碼

平行投影0,0，-6.png

平行投影2,2，-6.png

好了，本集結束,下一集：宇宙之光

後記：捷文規範

1.本文成長記錄及勘誤表
項目源碼 日期 備註
V0.1-github 2018-1-15 Android多媒體之GL-ES戰記第四集--移形換影
2.更多關於我
筆名 QQ 微信 愛好
張風捷特烈 1981462002 zdl1994328 語言
個人github 個人簡書 個人掘金 我的網站
3.聲明

1----本文由張風捷特烈原創,轉載請註明
2----歡迎廣大編程愛好者共同交流
3----我的能力有限，若有不正之處歡迎你們批評指證，一定虛心改正
4----看到這裏，我在此感謝你的喜歡與支持

icon_wx_200.png
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程