Android多媒體之GL-ES戰記第二集--謎團立方

阿新 • • 發佈：2019-01-12

旁白：上集說到，為了獲取黑龍寶藏，勇者集結，共闖黑龍洞穴
經過一路艱辛，終於過了第四副本，前面還有什麼困難等待著他們?一起收看

第五副本：`龍之圖陣`

1.第一關卡：`畫一個矩形`

NPC：隱藏任務,解謎：GLES20.GL_TRIANGLE_STRIP繪製方式
發現逆時針畫的點貌似連的方式有點問題，貌似是先繪製2->3->4,在繪製1->2->3
因為2->3->4的三角形被1->2->3的等三角形遮住了,後來居上是程式設計的共識

static float sCoo[] = {   //以逆時針順序
        -0.5f, 0.5f, 0.0f, // 左上
        -0.5f, -0.5f, 0.0f, // 左下
        0.5f, -0.5f, 0.0f, // 右下
        0.5f, 0.5f, 0.0f, //右上
};

float 
 colors[] = new float[]{
        1f, 1f, 0.0f, 1.0f,//黃
        0.05882353f, 0.09411765f, 0.9372549f, 1.0f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1.0f,//綠
        1.0f, 0.0f, 1.0f, 1.0f,//紫色
};

---->[Rectangle#draw]---------
//繪製三角形
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
複製程式碼

怎麼能讓1->2->3和2->3->4

不會重疊?--點調下順序就行了
1->2->4->3

static float sCoo[] = {   //以逆時針順序
        -0.5f, 0.5f, 0.0f, // 1.
        -0.5f, -0.5f, 0.0f, // 2.
        0.5f, 0.5f, 0.0f, //4.
        0.5f, -0.5f, 0.0f, // 3.
};
複製程式碼

2.第二關卡：`畫五邊形`

先按照p1->p2->p3->p4->p5的順序，看有什麼效果
意料之內，先把p1->p2->p3->p4四點畫完，再畫第五點

怎麼調點呢?恩...好吧，哥要開始吹牛了
我這麼隨便一想,在滿足正方形的條件下，動一下p5點，就行了,然後讓p5上漂

static float sCoo[] = {   //以逆時針順序
        -0.5f, 0.5f, 0.0f, // p1
        0.0f, 0.8f, 0.0f, //p5
        -0.5f, -0.5f, 0.0f, // p2
        0.5f, 0.5f, 0.0f, //p4
        0.5f, -0.5f, 0.0f, // p3
};
複製程式碼

再多邊形也可以用三角形拼出來，不過感覺有點麻煩
解密：GL_TRIANGLE_STRIP：相鄰三個頂點繪製一個三角形

3.第三關卡：索引五邊形--`glDrawElements`

我就想來著，應該有控制三角形頂點的東西,不然調起來很麻煩

3.1.緩衝的簡單封裝

緩衝頂點資料的套路基本一致，封個方法在GLUtils裡吧,
暫時float(4位元組)和short(2位元組),其他的遇到再說

/**
 * float陣列緩衝資料
 * @param vertexs 頂點
 * @return 獲取浮點形緩衝資料
 */
public static FloatBuffer getFloatBuffer(float[] vertexs) {
    FloatBuffer buffer;
    ///每個浮點數:座標個數* 4位元組
    ByteBuffer qbb = ByteBuffer.allocateDirect(vertexs.length * 4);
    //使用本機硬體裝置的位元組順序
    qbb.order(ByteOrder.nativeOrder());
    // 從位元組緩衝區建立浮點緩衝區
    buffer = qbb.asFloatBuffer();
    // 將座標新增到FloatBuffer
    buffer.put(vertexs);
    //設定緩衝區以讀取第一個座標
    buffer.position(0);
    return buffer;
}

/**
 * short陣列緩衝資料
 * @param vertexs short 陣列
 * @return 獲取short緩衝資料
 */
public static ShortBuffer getShortBuffer(short[] vertexs) {
    ShortBuffer buffer;
    ByteBuffer qbb = ByteBuffer.allocateDirect(vertexs.length * 2);
    qbb.order(ByteOrder.nativeOrder());
    buffer = qbb.asShortBuffer();
    buffer.put(vertexs);
    buffer.position(0);
    return buffer;
}
複製程式碼

3.2：自己控制三角形的形成

咱們從0開始數數，怎麼控制點，看圖你應該能知道

static float sCoo[] = {   //以逆時針順序
        -0.5f, 0.5f, 0.0f, // p0
        -0.5f, -0.5f, 0.0f, // p1
        0.5f, -0.5f, 0.0f, // p2
        0.5f, 0.5f, 0.0f, //p3
        0.0f, 0.8f, 0.0f, //p4
};

//索引陣列
private short[] idx = {
        0, 4, 3,
        1, 3, 0,
        1, 2, 3
};

//索引緩衝
idxBuffer = GLUtils.getShortBuffer(idx);

//繪製
GLES20.glDrawElements(GLES20.GL_TRIANGLES, idx.length,
GLES20.GL_UNSIGNED_SHORT, idxBuffer);
複製程式碼

4.第四關卡：六邊形

先轉六邊形應該沒有什麼大問題了

static float sCoo[] = {   //以逆時針順序
        -0.5f, 0.5f, 0.0f, // p0
        -1.0f, 0.0f, 0.0f, // p1
        -0.5f, -0.5f, 0.0f, // p2
        0.5f, -0.5f, 0.0f, //p3
        1.0f, 0.0f, 0.0f, //p4
        0.5f, 0.5f, 0.0f, //p5
};

//索引陣列
private short[] idx = {
        0, 1, 5,
        1, 5, 2,
        2, 5, 4,
        2, 3, 4
};
複製程式碼

第六副本：`龍之空間`

到這來，咱們幾乎都是在平面，先轉要變立體了
守關boss要發大招了，勇士們，hold住

1.第一關卡：沿著y軸旋轉起來

關於變換第一集講了一些，忘了的可以回去看看
下面是轉一圈的效果，感覺少了一半

//圍繞y軸旋轉
Matrix.setRotateM(mOpMatrix, 0, currDeg, 0, 1, 0);
複製程式碼

我讓她一邊移動一邊旋轉,好像可以看出一點東西
不過是轉起來了，等到轉講視野的時候再詳細論述吧

Matrix.setRotateM(mOpMatrix, 0, currDeg, 0, 1, 0);
Matrix.translateM(mOpMatrix, 0, currDeg/360.f, 0,0);
複製程式碼

1.第二關卡：空間面

貌似一直z軸我們都是0,動一下唄,紙上和ps上還是各有優點的
紙上畫起來有感覺(但誤差很大)，ps裡複用強，先看p0,p1,p2,p3面
先從p0點(-0.5,0.5,0.5)入手,然後根據對稱關係，或目測確定其他點，

//點位陣列
static float sCoo[] = {
        -0.5f, 0.5f, 0.5f,//p0
        -0.5f, -0.5f, 0.5f,//p1
        -0.5f, -0.5f, -0.5f,//p2
        -0.5f, 0.5f, -0.5f,//p3
        }
        
//索引陣列
private short[] idx = {
        0, 1, 3,
        1, 2, 3,
        }
        
float colors[] = new float[]{
        1f, 1f, 0.0f, 1.0f,//黃
        0.05882353f, 0.09411765f, 0.9372549f, 1.0f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1.0f,//綠
        1.0f, 0.0f, 1.0f, 1.0f,//紫色
        }
複製程式碼

2.第二關卡：第二面

一面完成了，第二面p4、p5、p6、p7就好辦了，可以看出來p0,p1和p4,p5是一樣的
索引稍微畫畫也能看出規律，顏色再來那四個，就不貼了
可以看出和我們畫的有點出入，貌似是視口的問題，但不影響圖形本身

static float sCoo[] = {
        -0.5f, 0.5f, 0.5f,//p0
        -0.5f, -0.5f, 0.5f,//p1
        -0.5f, -0.5f, -0.5f,//p2
        -0.5f, 0.5f, -0.5f,//p3
        
        -0.5f, 0.5f, 0.5f,//p4
        -0.5f, -0.5f, 0.5f,//p5
        0.5f, -0.5f, 0.5f,//p6
        0.5f, 0.5f, 0.5f,//p7

//索引陣列
private short[] idx = {
        0, 1, 3,
        1, 2, 3,
        
        0+4, 1+4, 3+4,
        1+4, 2+4, 3+4,
複製程式碼

3.第三關卡：其他面

為了方便表述，我給每個面取了名字，分別是：A、B、C、D、E、F

static float sCoo[] = {
        //A面
        -0.5f, 0.5f, 0.5f,//p0
        -0.5f, -0.5f, 0.5f,//p1
        -0.5f, -0.5f, -0.5f,//p2
        -0.5f, 0.5f, -0.5f,//p3
        //B面
        -0.5f, 0.5f, 0.5f,//p4
        -0.5f, -0.5f, 0.5f,//p5
        0.5f, -0.5f, 0.5f,//p6
        0.5f, 0.5f, 0.5f,//p7
        //C面
        0.5f, 0.5f, 0.5f,//p8
        0.5f, -0.5f, 0.5f,//p9
        0.5f, -0.5f, -0.5f,//p10
        0.5f, 0.5f, -0.5f,//p11
        //D面
        -0.5f, 0.5f, 0.5f,//p12
        0.5f, 0.5f, 0.5f,//p13
        0.5f, 0.5f, -0.5f,//p14
        -0.5f, 0.5f, -0.5f,//p15
        //E面
        -0.5f, -0.5f, 0.5f,//p16
        0.5f, -0.5f, 0.5f,//p17
        0.5f, -0.5f, -0.5f,//p18
        -0.5f, -0.5f, -0.5f,//p19
        //F面
        -0.5f, 0.5f, -0.5f,//p20
        -0.5f, -0.5f, -0.5f,//p21
        0.5f, -0.5f, -0.5f,//p22
        0.5f, 0.5f, -0.5f,//p23
};

//索引陣列
private short[] idx = {
        0, 1, 3,//A
        1, 2, 3,
        0 + 4, 1 + 4, 3 + 4,//B
        1 + 4, 2 + 4, 3 + 4,
        0 + 4 * 2, 1 + 4 * 2, 3 + 4 * 2,//C
        1 + 4 * 2, 2 + 4 * 2, 3 + 4 * 2,
        0 + 4 * 3, 1 + 4 * 3, 3 + 4 * 3,//D
        1 + 4 * 3, 2 + 4 * 3, 3 + 4 * 3,
        0 + 4 * 4, 1 + 4 * 4, 3 + 4 * 4,//E
        1 + 4 * 4, 2 + 4 * 4, 3 + 4 * 4,
        0 + 4 * 5, 1 + 4 * 5, 3 + 4 * 5,//F
        1 + 4 * 5, 2 + 4 * 5, 3 + 4 * 5,
};

float colors[] = new float[]{
        //A
        1f, 1f, 0.0f, 1.0f,//黃
        0.05882353f, 0.09411765f, 0.9372549f, 1.0f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1.0f,//綠
        1.0f, 0.0f, 1.0f, 1.0f,//紫色
        //B
        1f, 1f, 0.0f, 1.0f,//黃
        0.05882353f, 0.09411765f, 0.9372549f, 1.0f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1.0f,//綠
        1.0f, 0.0f, 1.0f, 1.0f,//紫色
        //C
        1f, 1f, 0.0f, 1.0f,//黃
        0.05882353f, 0.09411765f, 0.9372549f, 1.0f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1.0f,//綠
        1.0f, 0.0f, 1.0f, 1.0f,//紫色
        //D
        1f, 1f, 0.0f, 1.0f,//黃
        0.05882353f, 0.09411765f, 0.9372549f, 1.0f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1.0f,//綠
        1.0f, 0.0f, 1.0f, 1.0f,//紫色
        //E
        1f, 1f, 0.0f, 1.0f,//黃
        0.05882353f, 0.09411765f, 0.9372549f, 1.0f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1.0f,//綠
        1.0f, 0.0f, 1.0f, 1.0f,//紫色
        //F
        1f, 1f, 0.0f, 1.0f,//黃
        0.05882353f, 0.09411765f, 0.9372549f, 1.0f,//藍
        0.19607843f, 1.0f, 0.02745098f, 1.0f,//綠
        1.0f, 0.0f, 1.0f, 1.0f,//紫色
};
複製程式碼

第七副本：`龍之逆鱗`

第六副本中的立方體並不怎麼讓人滿意，視角不怎麼好，
這一副本就來再看看相機和投影以及矩陣

1.第一關卡：調整相機

一開始眼睛在(0, 0, -3),看下圖你就知道為什麼畫的時候面有問題了
因為相機在後面，而且很正，所以看著就很正...

// 設定相機位置(檢視矩陣)
Matrix.setLookAtM(mViewMatrix, 0,
        0, 0, -3,
        0f, 0f, 0f,
        0f, 1.0f, 0.0f);
複製程式碼

現在調到後上方(2,2,-5)

 // 設定相機位置(檢視矩陣)
 Matrix.setLookAtM(mViewMatrix, 0,
         2f, 2f, -5.0f,
         0f, 0f, 0f,
         0f, 1.0f, 0.0f);
複製程式碼

2.第二關卡：旋轉試圖，按紙上的視口繪製

//初始化變換矩陣
Matrix.setRotateM(mOpMatrix, 0, 130, 0, 1, 0);
複製程式碼

然後再來看繪製的流程，就和紙上的一致了，所以視口很重要

第八副本：`龍之盛裝 LEVEL1`

顏色多沒勁，咱們來貼圖,經歷了這麼多，回頭看看，感慨良多這個副本將簡單認識貼圖，以後還會有高階的龍之盛裝

1.第一關卡：三角形貼圖

百度了一個小時，愣是沒有把貼圖整明白，敘述的邏輯性欠佳，都是貼個程式碼完事，
貼個完整的還好，但都是一段一段的程式碼...
現在我來捋一遍,最簡單的三角形貼圖的流程，先把視野移到(0,0，-3) 不然肯定變形

1.1:片元程式碼`rect_texture.frag`

precision mediump float;
varying vec2 aCoordinate;//貼圖座標系
uniform sampler2D vTexture;//貼圖

void main() {
  gl_FragColor=texture2D(vTexture,aCoordinate);
}
複製程式碼

1.2：頂點程式碼:`rect_texture.vert`

attribute vec3 vPosition;//頂點座標
uniform mat4 uMVPMatrix; //總變換矩陣

attribute vec2 vCoordinate;//貼圖頂點座標
varying vec2 aCoordinate;//貼圖頂點座標--片元變數

void main() {
  gl_Position = uMVPMatrix*vec4(vPosition,1);
  aCoordinate=vCoordinate;
}
複製程式碼

1.3:貼圖三角形:`TextureRectangle`

就是把顏色控制代碼換成了貼圖控制代碼再繪製的時候接受一個貼圖的id,GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texId);兩行程式碼貼圖
其餘的基本一致，下面最重要的是這個貼圖id如何獲取

/**
 * 作者：張風捷特烈<br/>
 * 時間：2019/1/9 0009:20:09<br/>
 * 郵箱：[email protected]<br/>
 * 說明：貼圖測試
 */
public class TextureRectangle {
    private static final String TAG = "Triangle";
    private Context mContext;
    private int mProgram;//OpenGL ES 程式
    private int mPositionHandle;//位置控制代碼
    private int mColorHandle;//顏色控制代碼
    private int muMVPMatrixHandle;//頂點變換矩陣控制代碼
    private FloatBuffer vertexBuffer;//頂點緩衝
    private final int vertexStride = COORDS_PER_VERTEX * 4; // 3*4=12
    static final int COORDS_PER_VERTEX = 3;//陣列中每個頂點的座標數
    static final int c = 1;//陣列中每個頂點的座標數
    static float sCoo[] = {   //以逆時針順序
            -c, c, 0.0f, // p0
            -c, -c, 0.0f, // p1
            c, -c, 0.0f, // p2
    };

    private final float[] textureCoo = {
            0.0f,0.0f,
            0.0f,1.0f,
            1.0f,0.0f,
    };

    static final int TEXTURE_PER_VERTEX = 2;//陣列中每個頂點的座標數
    private final int vertexTextureStride = TEXTURE_PER_VERTEX * 4; // 4*4=16

    private ShortBuffer idxBuffer;
    //索引陣列
    private short[] idx = {
            1, 2, 3,
    };
    private FloatBuffer mTextureCooBuffer;

    public TextureRectangle(Context context) {
        mContext = context;
        //初始化頂點位元組緩衝區
        bufferData();//緩衝頂點資料
        initProgram();//初始化OpenGL ES 程式
    }

    /**
     * 緩衝資料
     */
    private void bufferData() {
        vertexBuffer = GLUtil.getFloatBuffer(sCoo);
        mTextureCooBuffer = GLUtil.getFloatBuffer(textureCoo);
        idxBuffer = GLUtil.getShortBuffer(idx);
    }

    /**
     * 初始化OpenGL ES 程式
     */
    private void initProgram() {
        ////頂點著色
        int vertexShader = GLUtil.loadShaderAssets(mContext,
                GLES20.GL_VERTEX_SHADER, "rect_texture.vert");
        //片元著色
        int fragmentShader = GLUtil.loadShaderAssets(mContext,
                GLES20.GL_FRAGMENT_SHADER, "rect_texture.frag");

        mProgram = GLES20.glCreateProgram();//建立空的OpenGL ES 程式
        GLES20.glAttachShader(mProgram, vertexShader);//加入頂點著色器
        GLES20.glAttachShader(mProgram, fragmentShader);//加入片元著色器
        GLES20.glLinkProgram(mProgram);//建立可執行的OpenGL ES專案

        //獲取頂點著色器的vPosition成員的控制代碼
        mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
        //獲取片元著色器的vColor成員的控制代碼
        mColorHandle = GLES20.glGetAttribLocation(mProgram, "vCoordinate");
        //獲取程式中總變換矩陣uMVPMatrix成員的控制代碼
        muMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
    }

    public void draw(float[] mvpMatrix, int texId ) {
        // 將程式新增到OpenGL ES環境中
        GLES20.glUseProgram(mProgram);
        //啟用三角形頂點的控制代碼
        GLES20.glEnableVertexAttribArray(mPositionHandle);
        //啟用三角形頂點顏色的控制代碼
        GLES20.glEnableVertexAttribArray(mColorHandle);

        //頂點矩陣變換
        GLES20.glUniformMatrix4fv(muMVPMatrixHandle, 1, false, mvpMatrix, 0);

        //準備三角頂點座標資料
        GLES20.glVertexAttribPointer(
                mPositionHandle,//int indx, 索引
                COORDS_PER_VERTEX,//int size,大小
                GLES20.GL_FLOAT,//int type,型別
                false,//boolean normalized,//是否標準化
                vertexStride,// int stride,//跨度
                vertexBuffer);// java.nio.Buffer ptr//緩衝

        //準備三角頂點顏色資料
        GLES20.glVertexAttribPointer(
                mColorHandle,
                TEXTURE_PER_VERTEX,
                GLES20.GL_FLOAT,
                false,
                vertexTextureStride,
                mTextureCooBuffer);
        //繫結紋理
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texId);

        //繪製
        GLES20.glDrawElements(GLES20.GL_TRIANGLES, idx.length, GLES20.GL_UNSIGNED_SHORT, idxBuffer);
        //禁用頂點陣列:
        //禁用index指定的通用頂點屬性陣列。
        // 預設情況下，禁用所有客戶端功能，包括所有通用頂點屬性陣列。
        // 如果啟用，將訪問通用頂點屬性陣列中的值，
        // 並在呼叫頂點陣列命令（如glDrawArrays或glDrawElements）時用於呈現
        GLES20.glDisableVertexAttribArray(mPositionHandle);
    }
}
複製程式碼

1.4:載入紋理

我在GLUtil中封裝了兩個方法

/**
 * 資源id 載入紋理
 * @param ctx 上下文
 * @param resId 資源id
 * @return 紋理id
 */
public static int loadTexture(Context ctx, int resId) {
    Bitmap bitmap = BitmapFactory.decodeResource(ctx.getResources(), resId);
    return loadTexture(ctx, bitmap);
}
/**
 * bitmap 載入紋理
 * @param ctx 上下文
 * @param bitmap bitmap
 * @return 紋理id
 */
public static int loadTexture(Context ctx, Bitmap bitmap) {
    //生成紋理ID
    int[] textures = new int[1];
    //(產生的紋理id的數量,紋理id的陣列,偏移量)
    GLES20.glGenTextures(1, textures, 0);
    int textureId = textures[0];
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
    //實際載入紋理(紋理型別,紋理的層次,紋理影象,紋理邊框尺寸)
    GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
    bitmap.recycle();          //紋理載入成功後釋放圖片
    return textureId;
}
複製程式碼

1.5:使用紋理`GLRenderer.java`

private int textureId;
---->[GLRenderer#onSurfaceCreated]------
textureId = GLUtil.loadTexture(mContext, R.mipmap.mian_a);//初始化紋理

---->[GLRenderer#onDrawFrame]------
mTextureRectangle.draw(mMVPMatrix,textureId);//繪製時使用紋理
複製程式碼

2.第二關卡：矩形紋理

這是一道送分題，沒別的，座標改改就行了

 static float sCoo[] = {   //以逆時針順序
         -c, c, 0.0f, // p0
         -c, -c, 0.0f, // p1
         c, -c, 0.0f, // p2
         c, c, 0.0f, //p3
 };
 
 private final float[] textureCoo = {
        0.0f,0.0f,
        0.0f,1.0f,
        1.0f,0.0f,
        1.0f,1.0f,
};

//索引陣列
private short[] idx = {
        1, 2, 3,
        0, 1, 3,
};
複製程式碼

有興趣的可以動動貼圖座標系的點看一下，自己瞭解一下貼圖座標系

`OK,本集結束，下一集："聖火之光"，敬請期待`

後記：捷文規範

1.本文成長記錄及勘誤表

專案原始碼	日期	備註
V0.1-github	2018-1-11	Android多媒體之GL-ES戰記第二集--謎團立方

2.更多關於我

筆名	QQ	微信	愛好
張風捷特烈	1981462002	zdl1994328	語言
我的github	我的簡書	我的掘金	個人網站

Android多媒體之GL-ES戰記第二集--謎團立方

旁白：上集說到，為了獲取黑龍寶藏，勇者集結，共闖黑龍洞穴經過一路艱辛，終於過了第四副本，前面還有什麼困難等待著他們?一起收看第五副本：龍之圖陣 1.第一關卡：畫一個矩形 NPC：隱藏任務,解謎：GLES20.GL_TRIANGLE_STRIP繪製方式發現逆時針畫的點貌似連的方式

Android多媒體之GL-ES戰記第一集--勇者集結

前言 1.本系列借花獻佛,結合了很多前人的文章以及書籍,我儘可能去總結並用我的思想進行加工 2.OpenGL一直是我的心結，也是時候去解開了,本系列稱不上原創，但每行程式碼都有著我思考的痕跡 3.本系列所有的圖片都是[張風捷特烈]所畫，如果有什麼錯誤還請指出,定會最快改正 4.本系列文章允許轉載、擷取

Android多媒體之GL-ES戰記第三集--聖火之光

前情回顧旁邊: 勇者們為求黑龍寶藏，集結起來共闖黑龍副本，經歷重重艱辛，終於獲得立方開啟了黑龍之門,這也只是新徵程的起點，後面將有更大的挑戰等著他們張風捷特烈打開了門之後,看到了什麼?讓我們繼續收看副本九:黑暗之淵在開啟門後，光芒全部消失，眼中一團黑暗，張風捷特烈踏出一步

Android多媒體之認識聲音、錄音與播放(PCM)

一、對聲音的簡單認識 1、模擬訊號[摘錄於此] 模擬訊號傳輸過程中就是利用感測器把各種自然界各種連續的訊號轉換為幾乎一模一樣的電訊號。比如說話聲音，原本是聲帶的震動。經過麥克風的採集，將聲波訊號轉換為電訊號，電訊號波形是和原來的聲波波形一樣的。只是換種物理量來表示和傳遞。（電訊號模擬振動訊號）。複製

Android多媒體之認識MP3與內建媒體播放（MediaPlayer）

零、前言作為90後，mp3格式的音樂可謂靈魂之友。小時候帶著耳機，躺在桌子上聽歌看月亮心情依稀。當某個旋律想起，還會不會浮現某個風景，某個人……，今天全程單曲播放——梁靜茹-勇氣(獻上頻譜) 主要任務：SD卡音樂、網路音訊流的播放及控制 MP3的

Android多媒體之SoundPool+pcm流的音訊操作

零、前言今天比較簡單，先理一下錄製和播放的四位大將再說一下SoundPool的使用和pcm轉wav 講一下C++檔案如何在Android中使用，也就是傳說中的JNI 最後講一下變速播放和變調播放一、AudioRecord和MediaRecorder，AudioTrack和MediaPl

Android多媒體之Camera的相關操作

零、前言今天主要有兩點 1).介面佈局,檢視仿一下我手機自帶的相機 2).Camera的簡單使用，雖然Camera已經過時了，但還是來看一下，由簡入深下一篇會介紹替代者：Camera2 溫馨提示：本文多圖預警，請Wifi觀看~ 許可權申請自行解決 <uses-permissi

Android多媒體之Camera2的相關操作

零、前言 Android 5.0+ (API 21) ---->[原始碼裡讓我們用camera2] * @deprecated We recommend using the new {@link android.hardware.camera2} API for n

android 多媒體之 MediaStore 學習記錄

1、開啟照相機，並將圖片儲存到 photoUri 路徑 Uri photoUri=Uri.fromFile(picFile); Intent cameraIntent =new Intent(MediaStore.ACTION_IMAGE_CAPTURE); camer

Android多媒體之視訊播放器高階開發

1.獲取播放的資料來源播放視訊的資料來源一般有兩個，一個是請求網路，從伺服器後臺直接獲取播放的視訊資訊，另一種是播放手機中本地的視訊，這裡我們採用的播放源為播放手機本地的視訊 1.1 查詢獲取手機中的視訊的資訊 1.1.1 查詢方法一定義要查詢到的視訊的資訊，包括視

Android多媒體之---Camera實時視訊採集預覽時方向處理

手機攝像頭（Camera）的影象資料來源於攝像頭硬體的影象感測器，這個影象感測器被固定到手機上後會有一個預設的取景方向，這個取景方向恰好是當手機左側橫放時的方向，其座標原點於手機橫放時的左上角。手機的正常方向和影象感測器預設取景方向示意圖如下： C

讀書筆記1--android多媒體之手機拍照

android系統從4.4版本開始，選取相簿中的圖片不再返回圖片真實的Uri了，而是一個封裝過的Uri，因此如果是4.4版本以上的手機就需要對這個Uri進行解析才行。 android.media.action.IMAGE_CAPTURE//手機相機 com.android.

2018爆零記第二彈之day0

話說初賽水了個70分，ε=(´ο｀*)))唉，還是太菜了。今天兩點左右到了電子科大對面賓館，收拾安頓好後又去電子科大踩點。進門又走過了不長不短的水杉道，來到了不大不小的西湖（為什麼是這個名字...）。西湖被水上棧道分成兩半。左邊遊著一隻白天鵝和一群野鴨子，右邊遊著一群黑天鵝和一隻白鷺；我又路過

Android 學習之《第一行程式碼》第二版筆記（十）探究碎片（二）

一個簡易版的新聞應用同時相容手機和平板的應用程式一、佈局 news_content_frag.xml額我的程式碼裡面是news_content_fragment.xml,圖片打錯了二、程式碼編寫 1. 實體類（News.java） //新聞實體類 pub

Android 學習之《第一行程式碼》第二版筆記（九）探究碎片（一）

一、碎片 1. 碎片是什麼：碎片（Fragment）是一種可以嵌入在活動當中的UI片段，能讓程式更加合理和充分地利用大螢幕的空間。（可以理解成迷你型活動） 2. 簡單用法：在一個活動當中新增兩個碎片，並讓這兩個碎片平分活動空間。 1.）效果圖（沒錢買平板，CPU不支援

Android 學習之《Android程式設計權威指南》第二版程式碼+筆記整理（四）

（程式碼）GeoQuiz最終開發 GeoQuiz應用初步開發 GeoQuiz應用升級開發解決GeoQuiz應用旋轉恢復第一題的BUG 不展示編譯器自動完成的程式碼，僅提供手動修改或者編寫的程式碼。省略了先前一些程式碼，可參照上方連結。升級內容：增加作弊按鈕，給使用者提

Android 學習之《第一行程式碼》第二版筆記（十一）詳解廣播機制（一）

一、廣播機制簡介 1. 四大元件之一 2. Android 提供了一套完整的API，允許應用程式自由地傳送和接收廣播。 A. 傳送廣播藉助Intent B. 接收廣播藉助廣播接收器（Broadcast Receiver） 3. 廣播型別： A. 標準廣播：完全非同步執行

Android 學習之《第一行程式碼》第二版筆記（十二）詳解廣播機制（二）

廣播的最佳實踐——實現強制下線功能思路：在介面上彈出一個對話方塊，讓使用者無法進行任何操作，必須點選對話方塊中的確定按鈕，然後回到登入介面即可。一、效果圖 1. 登入介面並輸入賬號密碼 2. 登陸後的介面 3. 強制下線 4. 退回登陸的介面

React戰記之玩轉Flex佈局(上篇--容器屬性)

零、前言最近一直在總結Android，前端這塊感覺忘得也差不多了 Flex佈局以前也聽過，但沒有詳細學習過，趁機會用React玩轉一下，遇到一個新的知識怎麼學，一大堆的引數讓人發懵，我最喜歡的一句話：能應對變化的只有變化本身用自己的能力讓學習的物件非靜態，就像與你交流的是一個活的人而非人偶本文

Android 學習之《Android程式設計權威指南》第二版程式碼+筆記整理（三）

（程式碼）解決GeoQuiz應用旋轉恢復第一題的BUG 一、產生BUG的原因 1. 裝置旋轉時，系統會銷燬當前的QuizActivity例項，然後建立一個新的例項，這時陣列索引（mCurrentIndex）會初始化為0，因此使用者看到的還是第一道題目。 2.

Android多媒體之GL-ES戰記第二集--謎團立方

第五副本：龍之圖陣

1.第一關卡：畫一個矩形

2.第二關卡：畫五邊形

3.第三關卡：索引五邊形--glDrawElements

3.1.緩衝的簡單封裝

3.2：自己控制三角形的形成

4.第四關卡：六邊形

第六副本：龍之空間

1.第一關卡：沿著y軸旋轉起來

1.第二關卡：空間面

2.第二關卡：第二面

3.第三關卡：其他面

第七副本：龍之逆鱗

1.第一關卡：調整相機

2.第二關卡：旋轉試圖，按紙上的視口繪製

第八副本：龍之盛裝 LEVEL1

1.第一關卡：三角形貼圖

1.1:片元程式碼rect_texture.frag

1.2：頂點程式碼:rect_texture.vert

1.3:貼圖三角形:TextureRectangle

1.4:載入紋理

1.5:使用紋理GLRenderer.java

2.第二關卡：矩形紋理

OK,本集結束，下一集："聖火之光"，敬請期待

後記：捷文規範

1.本文成長記錄及勘誤表

2.更多關於我

相關推薦

第五副本：`龍之圖陣`

1.第一關卡：`畫一個矩形`

2.第二關卡：`畫五邊形`

3.第三關卡：索引五邊形--`glDrawElements`

第六副本：`龍之空間`

第七副本：`龍之逆鱗`

第八副本：`龍之盛裝 LEVEL1`

1.1:片元程式碼`rect_texture.frag`

1.2：頂點程式碼:`rect_texture.vert`

1.3:貼圖三角形:`TextureRectangle`

1.5:使用紋理`GLRenderer.java`

`OK,本集結束，下一集："聖火之光"，敬請期待`