目录
零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础
零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 特效
零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 转场
零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 函数
零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES GPUImage 使用
零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES GLSL 编程
一.前言
在《OpenGL ES 名词解释一》中已经讲解了着色器渲染等相关知识，本篇文章着重讲解坐标系和矩阵相关内容；
二.坐标系
1.屏幕坐标系
屏幕坐标系 的 左下点（0， 1），右下角（1，1） ， 左上角（0， 0） ， 右上角（1 ， 0）
2.纹理坐标系
纹理坐标系 的 左下点 （0， 0），右下角（1 ， 0） ， 左上角（0， 1 ）， 右上角（1， 1）
3.顶点坐标系
顶点坐标系 的 左下点（-1， -1），右下角（1，-1） ， 左上角（-1， 1） ， 右上角（1 ， 1）
4.图像坐标系
屏幕坐标系 的 左下点（0， 1），右下角（1，1） ， 左上角（0， 0） ， 右上角（1 ， 0）
很多人有一个误解：认为 OpenGL ES 纹理原点在左上角，因为如果绘制时纹理坐标设在左下角，绘制的图像就是上下倒立；而纹理坐标设制在左上角显示正常；
原因：图像默认的原点在左上角，而 OpenGL ES 纹理读取数据或者 FBO 读取数据时都是以左下角开始，所以图像才会出现上下倒立的现象；
解决办法：
- 方案一：绘制时将纹理坐标上下镜像
- 方案二：绘制时将顶点坐标上下镜像
- 方案三：绘制时将图像上下镜像后在填充到 OpenGL ES 纹理
关于方案三：将图片上下颠倒可以使用 stb_image 完成
stbi_set_flip_vertically_on_load(true);//开起上下镜像
三.混合
假设一种不透明东西的颜色是 A，另一种透明的东西的颜色是 B ，那么透过 B 去看 A ，看上去的颜色 C 就是 B 和 A 的混合颜色，可以用这个式子来近似，设 B 物体的透明度为 alpha (取值为 0 – 1 ，0 为完全透明，1 为完全不透明)
R(C)=alpha*R(B)+(1-alpha)*R(A)
G(C)=alpha*G(B)+(1-alpha)*G(A)
B(C)=alpha*B(B)+(1-alpha)*B(A)
R(x)、G(x)、B(x)分别指颜色 x 的 RGB 分量。看起来这个东西这么简单，可是用它实现的效果绝对不简单，应用 alpha 混合技术，可以实现出最眩目的火光、烟雾、阴影、动态光源等等一切你可以想象的出来的半透明效果。
四.变换矩阵
1.平移
为向量(x,y,z)定义一个平移矩阵
2.旋转
旋转过程涉及到弧度与角度的转化：
弧度转角度：角度 = 弧度 * (180.0f / PI)
角度转弧度：弧度 = 角度 * (PI / 180.0f)
3.缩放
为向量(x,y,z)定义一个缩放矩阵
4.矩阵组合顺序
矩阵组合顺序 1：先平移，再旋转，最后缩放——— OK
矩阵组合顺序 2：先平移，再缩放，最后旋转——— ERROR
矩阵组合顺序 3：先缩放，再旋转，最后平移——— ERROR
（除了第一种，其他组合顺序都是错误的）
矩阵组合顺序可以参考 glm 官方 demo 案例：
#include <glm/vec3.hpp> // glm::vec3
#include <glm/vec4.hpp> // glm::vec4
#include <glm/mat4x4.hpp> // glm::mat4
#include <glm/ext/matrix_transform.hpp> // glm::translate, glm::rotate, glm::scale
#include <glm/ext/matrix_clip_space.hpp> // glm::perspective
#include <glm/ext/scalar_constants.hpp> // glm::pi
glm::mat4 camera(float Translate, glm::vec2 const& Rotate)
{
glm::mat4 Projection = glm::perspective(glm::pi<float>() * 0.25f, 4.0f / 3.0f, 0.1f, 100.f);
glm::mat4 View = glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, -Translate));
View = glm::rotate(View, Rotate.y, glm::vec3(-1.0f, 0.0f, 0.0f));
View = glm::rotate(View, Rotate.x, glm::vec3(0.0f, 1.0f, 0.0f));
glm::mat4 Model = glm::scale(glm::mat4(1.0f), glm::vec3(0.5f));
return Projection * View * Model;
}
至于矩阵组合顺序为什么是先平移，再旋转，最后缩放，后面将专门留一篇文章做详细讲解！可以关注学习目录《OpenGL ES 基础》
五.投影矩阵
由观察空间到裁剪空间在公式上左乘一个投影矩阵，投影矩阵的产生分为两种：正交投影和透视投影;
不管是正交投影还是透视投影，最终都是将视景体内的物体投影在近平面上，这也是 3D 坐标转换到 2D 坐标的关键一步。
正投影就是没有 3D 效果的投影方式，用于显示 2D 效果；
透视投影就是有 3D 效果的投影方式，用于显示 3D 效果.
1.正交投影
正交投影产生的效果无论你离物体多远多近，都不会产生近大远小的效果，大致如下图，视点作为观察点，视椎体由前后左右上下 6 个面包裹而成，物体在视椎体内部，最后投影到 near 近平面，视椎体范围之外将无法显示到屏幕上来
正投影就是没有 3D 效果的投影方式，用于显示 2D 效果；
透视投影就是有 3D 效果的投影方式，用于显示 3D 效果.
正交投影矩阵，由 Matrix.ortho 这个方法产生
void orthoM(float[] m, int mOffset,
float left, float right, float bottom, float top,
float near, float far)
可以把近平面看作屏幕，left、right、top、bottom 都是以近平面中心相对的距离，由于手机屏幕的长宽一般不相等，以短边为基准 1 ，长边取值为长/宽，所以如果一个