学习之路系列
效果图
今天主要粗略的讲解以下几个坐标系统:
- 局部空间(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.0到1.0的范围内，并判断哪些顶点将会出现在屏幕上。
- 最后，我们将裁剪坐标变换为屏幕坐标，我们将使用一个叫做视口变换(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);
}
运行看下效果
