OpenGl ES 2.0 Learn For Android（

OpenGl ES 2.0 Learn For Android（四）画一个三角锥

年末的最后一天。2018年马上过去了。迎来的2019年，肯定会是更美好，更有意义的一年！

上一篇讲了初探3D，但是画的是一个面片。那么结合之前的三篇，我们构造一个锥体，来简单验证一下之前学到的内容。

前四篇的内容在这里。
OpenGl ES 2.0 Learn For Android
OpenGl ES 2.0 Learn For Android（一）世界是三角形的
OpenGl ES 2.0 Learn For Android（二）给三角形贴上图片
OpenGl ES 2.0 Learn For Android（三）初探三维的世界

1. 构建一个三角锥

在开始实现这个三角锥之前，我们先需要想好它的样子。这里的话，为了简单，我构造一个底部在xz平面上，顶点在y轴刻度为0.5位置的三角锥。
如下图所示。

三角锥

这个三角锥，就会有四个顶点。
那么，构建四个平面，照理说需要画12个顶点。但是我们之前有说过三角形的三个绘制方式，三角形，三角扇，三角带。三角带每次都可以复用之前的两个顶点。那么我们构建四个平面，只需要六个顶点。

private float[] mTrianglePoints =
            {        0.0f,  0.5f,  0.0f,
                     0.0f,  0.0f,  0.5f,
                     0.5f,  0.0f,  0.0f,
                    -0.25f, 0.0f, -0.25f,
                     0.0f,  0.5f,  0.0f,
                     0.0f,  0.0f,  0.5f};

给顶点着色器的传值方式还是不变。
那么，如果还用之前单一的颜色，就看不出这个立体的效果了。所以我们把屏幕刷成黑色，然后给各个顶点赋值不同颜色。

2. 顶点颜色赋值

之前在贴图一章，讲过给片段着色器赋值的方式。那么，其实应该先说现在这个，再讲贴图。不过关系也不是很大。我们定义了顶点，然后定义每个顶点颜色，那么片段着色器会自动进行渲染。它的渲染方式是线性渐变。如果三角形三个顶点颜色不一样，你已经猜到了，就有点像颜料渲染开的效果。
VertexShader:

        ...
        attribute vec4 a_Color;
        varying vec4 v_Color;
        void main()
        {                          
            v_Color =  a_Color;
            ...
        }

FragmentShader:

        ...
        varying vec4 v_Color;
        void main()
        {                          
            gl_FragColor = v_Color;
        }

现在的话，对每一个顶点，都传一个颜色值,为红，绿，蓝，灰。就跟Android的RGB一样。

private float[] mColorPoints =
            {1.0f, 0.0f, 0.0f,
                    0.0f, 1.0f, 0.0f,
                    0.0f, 0.0f, 1.0f,
                    0.5f, 0.5f, 0.5f,
                    1.0f, 0.0f, 0.0f,
                    0.0f, 1.0f, 0.0f,};

一样的，按照顶点的方式对a_Color进行使能传值。
然后，进行DrawFrame

     glDrawArrays(GL_TRIANGLE_STRIP, 0, 6);

一切正常的话，会看到下面这个样子。想象一下，一个底部在xz平面的三角锥，我们从z轴正方向往负方向的视角看去。

三角锥正视
这个不是很明显的话，我们将它沿x轴旋转20度，看一下它的变化。
x轴旋转20度
感觉还不是很明显。那么这样，我们现在让它每画一帧，沿y轴旋转1度。

    private void updateAngle() {
        rotateM(modelMatrix, 0, (float) 1.0, 0f, 1f, 0f);
        multiplyMM(mMVPMatrix, 0, projectionMatrix, 0, modelMatrix, 0);
    }

    @Override
    public void onDrawFrame(GL10 glUnused) {
        updateAngle();
        glClear(GL_COLOR_BUFFER_BIT);

        // Assign the matrix
        glUniformMatrix4fv(uMatrixLocation, 1, false, mMVPMatrix, 0);
        // Draw the table.
        glDrawArrays(GL_TRIANGLE_STRIP, 0, 6);
    }

旋转三角锥

附录：
ffmpeg将mp4转gif：

1. 查看视频信息 ffmpeg -i xxx.mp4
2. ffmpeg -i S70131-15433307.mp4 -s 272x480 -b:v 200k output1.mp4
   -s用于设定分辨率,-b:v设定视频比特率来压缩大小
3. ffmpeg -ss 2 -t 5 -i output1.mp4 -s 272x480 -r 15 output1.gif
   -ss 2 -t 5，从第2秒的地方开始，往后截取5秒钟, -r 用于设定帧数. 通常Gif有15帧左右就比较流畅了
4. convert output1.gif -fuzz 20% -layers Optimize output2.gif
   设置fuzz因子可以将相近的颜色视为相同的颜色，这样就可以抵消抖动和色彩压缩的影响。
   -fuzz选择多少能取得最大的压缩效果，同时对画质的影响可以接受，则需要耐心地尝试。

参考自：
使用ffmpeg来将mp4视频转换成gif格式图片

demo地址：
https://github.com/YueZhiFengMing/LearnOpenGl/tree/master/Fourth3D

参考资料###

1. 《OpenGL ES应用开发实践指南:Android卷》
2. 使用ffmpeg来将mp4视频转换成gif格式图片