学习之路系列

OpenGLES学习之路

效果图

今天主要粗略的讲解以下几个坐标系统:

• 局部空间(Local Space，或者称为物体空间(Object Space))
• 世界空间(World Space)
• 观察空间(View Space，或者称为视觉空间(Eye Space))
• 裁剪空间(Clip Space)
• 屏幕空间(Screen Space)

概述

为了将坐标从一个坐标系变换到另一个坐标系，我们需要用到几个变换矩阵，最重要的几个分别是模型(Model)、观察(View)、投影(Projection)三个矩阵。我们的顶点坐标起始于局部空间(Local Space)，在这里它称为局部坐标(Local Coordinate)，它在之后会变为世界坐标(World Coordinate)，观察坐标(View Coordinate)，裁剪坐标(Clip Coordinate)，并最后以屏幕坐标(Screen Coordinate)的形式结束。下面的这张图展示了整个流程以及各个变换过程做了什么：

1. 局部坐标是对象相对于局部原点的坐标，也是物体起始的坐标。
2. 下一步是将局部坐标变换为世界空间坐标，世界空间坐标是处于一个更大的空间范围的。这些坐标相对于世界的全局原点，它们会和其它物体一起相对于世界的原点进行摆放。
3. 接下来我们将世界坐标变换为观察空间坐标，使得每个坐标都是从摄像机或者说观察者的角度进行观察的。
4. 坐标到达观察空间之后，我们需要将其投影到裁剪坐标。裁剪坐标会被处理至-1.0到1.0的范围内，并判断哪些顶点将会出现在屏幕上。
5. 最后，我们将裁剪坐标变换为屏幕坐标，我们将使用一个叫做视口变换(Viewport Transform)的过程。视口变换将位于-1.0到1.0范围的坐标变换到由glViewport函数所定义的坐标范围内。最后变换出来的坐标将会送到光栅器，将其转化为片段。

原文链接LearnOpenGL
里面讲解的非常通俗易懂, 可以到里面看看

局部空间(Local Space，或者称为物体空间(Object Space))

局部空间其实相当于我们iOS中UIKit里面的@property(nonatomic) CGRect bounds;属性. 以自身为参照点，默认是(0,0,0).

世界空间(World Space)

世界空间顾名思义, 指的是整个空间. 每个物体有一个坐标. 这个跟iOS中的UIKit中的@property(nonatomic) CGRect frame;属性类似类似

观察空间(View Space，或者称为视觉空间(Eye Space))

这个就更好理解了, 指的是观察事物的位置及角度. 在OpenGL里面把这个概念称之为摄像机(Camera)

裁剪空间(Clip Space)

在裁剪空间OpenGL会将图像处理至-1.0 ~ 1.0的空间, 超出的部分都会被裁剪掉. 在前几篇文章中也有讲过, 顶点坐标必须在-1.0 ~ 1.0之间，超出部分不会显示.

屏幕空间(Screen Space)

指的就是呈现在屏幕上的大小, 由glViewport (GLint x, GLint y, GLsizei width, GLsizei height);该函数进行操作

我们先把上面这个效果实现一下，有不会的小伙伴可以参考这篇文章

组合

我们创建模型(Model)、观察(View)、投影(Projection)三个矩阵, 然后把他们组合在一起

修改顶点着色器中变量

attribute vec4 Position;

attribute vec2 TexCoordIn;
varying   vec2 TexCoordOut;


uniform mat4 Projection;    //new
uniform mat4 View;          //new
uniform mat4 Model;         //new

void main(void){
    
//    gl_Position = Position;
    gl_Position = Projection * View * Model * Position;
    
    TexCoordOut    = vec2(TexCoordIn.x, 1.0 - TexCoordIn.y);
}

在render:中新增模型矩阵、观察矩阵和投影矩阵, 并将其传入到着色器中. 这里先把他们都创建成初等矩阵

GLKMatrix4 projection = GLKMatrix4Identity;  
GLKMatrix4 model      = GLKMatrix4Identity;
GLKMatrix4 view       = GLKMatrix4Identity;

glUniformMatrix4fv(_model,      1, GL_FALSE, model.m);
glUniformMatrix4fv(_view,       1, GL_FALSE, view.m);
glUniformMatrix4fv(_projection, 1, GL_FALSE, projection.m);

投影( 正射投影、透视投影 )

参考文章:LearnOpenGL

• 透视投影比较贴合实际生活中的现象, 物体离你越远看起来越小
• 正射投影投射到屏幕上看不出太大的效果, 不管物体离你多远看起来都是一样大的

下面我们来试一下这两种效果

• 透视投影
  我们将上面的那个投影的初等矩阵做下修改

    //投影设置
    /*
     *  fovyRadians: 设置观察空间的大小
     *  aspect     : 设置宽高比
     *  nearZ      : 设置平截头体的近平面
     *  farZ       : 设置平截头体的远平面
     *  在近平面和远平面内且处于平截头体内的顶点才会被渲染
     */
    GLKMatrix4 projection = GLKMatrix4MakePerspective(45, 1, 0.1f, 100.0f);
    glUniformMatrix4fv(_projection, 1, GL_FALSE, projection.m);

观察矩阵我们下篇文章再讲，这里先随意设置一个在平截面内的值。由于OpenGL的投影矩阵交换了左右手，所以Z轴是反的

GLKMatrix4 view       = GLKMatrix4MakeTranslation(0.0, 0.0, -3.0);
glUniformMatrix4fv(_view,  1, GL_FALSE, view.m);

上面的Gif图中，可以看到当物体超出平截面的范围时，超出部分不会显示
透视投影，非常的符合真实情况，越远物体越小

• 正射投影
  将这个投影矩阵修改下

    //设置正射投影
    /*
     *  由上、下、左、右、近平面、远平面控制平截面的区域
     */
    GLKMatrix4 projection = GLKMatrix4MakeOrtho(1, -1, 1, -1, 0.1f, 100.0f);
    glUniformMatrix4fv(_projection, 1, GL_FALSE, projection.m);

可以从上面的Gif中看出，正射投影不会随着距离的远近改变物体的大小

下面我们创建一个正方体，这里我直接给出顶点数据，如下:

//4个顶点(分别表示xyz轴)
static const float Vertices[] = {
    
    //前面4个坐标
    -1, -1,  1,
     1, -1,  1,
    -1,  1,  1,
     1,  1,  1,
    
    //后面4个坐标
    -1, -1, -1,
     1, -1, -1,
    -1,  1, -1,
     1,  1, -1,
    
    //左边4个坐标
    -1, -1, -1,
    -1, -1,  1,
    -1,  1, -1,
    -1,  1,  1,
    
    //右边4个坐标
     1, -1, -1,
     1, -1,  1,
     1,  1, -1,
     1,  1,  1,
    
    //上边4个坐标
     1,  1, -1,
    -1,  1, -1,
     1,  1,  1,
    -1,  1,  1,
    //下边4个坐标
     1, -1, -1,
    -1, -1, -1,
     1, -1,  1,
    -1, -1,  1,
    
};

static const float Texture[] = {
    
    0, 0,
    1, 0,
    0, 1,
    1, 1,
    
    0, 0,
    1, 0,
    0, 1,
    1, 1,
    
    0, 0,
    1, 0,
    0, 1,
    1, 1,
    
    0, 0,
    1, 0,
    0, 1,
    1, 1,
    
    0, 0,
    1, 0,
    0, 1,
    1, 1,
    
    0, 0,
    1, 0,
    0, 1,
    1, 1,
};


static const GLubyte Indices[] = {
    
    //前面
    0,  1,  2,
    2,  3,  1,
    
    //后面
    4,  5,  6,
    6,  7,  5,
    
    //左面
    8,  9, 10,
    10, 11, 9,
    
    //右面
    12, 13, 14,
    14, 15, 13,
    
    //上面
    16, 17, 18,
    18, 19, 17,
    
    //下面
    20, 21, 22,
    22, 23, 21
};

设置好以后还需要设置一下透视投影, 将其投影成一个正方体. 将下面的投影矩阵宽高比设置一下

GLKMatrix4 projection = GLKMatrix4MakePerspective(45.0f, _width / _height, 0.1f, 100.0f);

看下效果

在调用渲染缓冲区前面添加下面代码

/**
 *  设置深度缓冲区
 */
- (void)setupDepthBuffer {
    
    glGenRenderbuffers(1, &_depthRenderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, _depthRenderBuffer);
    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16, _width, _height);
}

并且在render:函数中的

glClear(GL_COLOR_BUFFER_BIT);

修改为

glEnable(GL_DEPTH_TEST);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

下面我们创建10个立方体，立方体的坐标如下:

static const float cubePositions[10][3] = {
    { 0.0f,  0.0f,   0.0f},
    { 2.0f,  5.0f, -15.0f},
    {-1.5f, -2.2f,  -2.5f},
    {-3.8f, -2.0f, -12.3f},
    { 2.4f, -0.4f,  -3.5f},
    {-1.7f,  3.0f,  -7.5f},
    { 1.3f, -2.0f,  -2.5f},
    { 1.5f,  2.0f,  -2.5f},
    { 1.5f,  0.2f,  -1.5f},
    {-1.3f,  1.0f,  -1.5f},
};

在render:中循环10次创建10个立方体

//循环创建10个立方体
for(int i = 0; i < 10; i++) {
    
    CGFloat angle = 20.0f * i;
    
    GLKMatrix4 model      = GLKMatrix4MakeTranslation(cubePositions[i][0] * 2.0f,
                                                      cubePositions[i][1] * 2.0f,
                                                      cubePositions[i][2] * 2.0f);
    
    model = GLKMatrix4Rotate(model, angle, 1.0f, 0.3f, 0.5f);
    glUniformMatrix4fv(_model, 1, GL_FALSE, model.m);
    
    glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, Indices);
}

运行看下效果

Demo链接