教程

OpenGL ES入門教程1-Tutorial01-GLKit
OpenGL ES入門教程2-Tutorial02-shader入門
這次是三維圖形變換。

OpenGL ES系列教程在這里。
OpenGL ES系列教程的代碼地址 - 你的star和fork是我的源動力，你的意見能讓我走得更遠。

效果展示

概念準備

1、計算機圖形學

首先了解計算機處理圖形的流程，如下圖

應用程序把數據以圖元的方式提供給圖形硬件，一般是點、線、多邊形、紋理映射圖像；基本圖元通過幾何變換和投影變換，獲得二維屏幕坐標；對每一個屏幕像素點進行著色，得到具體的顯示幀。

2、幾何處理階段

以頂點為基礎，對幾何圖元進行處理，把三維坐標轉變為二維屏幕坐標的過程。
具體的坐標系變換如下：

MC是建模坐標系，WC是世界坐標系，VC是觀察坐標系，PC是投影坐標系，NPC是規格化投影坐標系，DC是設備坐標系。

幾何變換

a、基本幾何變換

平移變換、比例變換、旋轉變換、對稱變換、錯切變換
具體的變換矩陣可以點這里 或者 這里

b、復合變換

• 關于任意點的比例、旋轉變換

1、將任意點P移到原點，作平移變換；
2、進行比例、旋轉等變換；
3、將參考點移到原處；

• 繞任意軸的旋轉變換

看這里

投影變換

把三維物體變為二維圖形表示的過程成為投影變換。分類如下：

投影中心，也叫投影參考點，相當于人的視點，投影線相當于人的視線。

平行投影

投影中心和投影平面的距離為無窮大的投影。

• 正平行投影

投影方向垂直于投影平面時稱為正平行投影。三視圖（主視圖、俯視圖、側視圖）都屬于正平行投影。

• 斜平行投影

投影方向不垂直于投影平面的平行投影稱為斜平行投影。

透視投影

投影中心和投影平面的距離是有限的。
透視投影的推導可以看 這里

OpenGL ES的變換

OpenGL ES通過頂點緩存數組和圖元繪制指令，形成基本的圖元；圖元在頂點著色器會進行頂點變換，也就是幾何處理階段的幾何變換和投影變換；到了像素處理階段，根據之前的結果，通過光照、紋理等對每一個像素點進行著色。
舉一個例子，下面的代碼用到了透視投影、平移變換、旋轉變換。

    KSMatrix4 _projectionMatrix;
    ksMatrixLoadIdentity(&_projectionMatrix);
    float aspect = width / height; //長寬比
    
    
    ksPerspective(&_projectionMatrix, 30.0, aspect, 5.0f, 20.0f); //透視變換，視角30°
    
    //設置glsl里面的投影矩陣
    glUniformMatrix4fv(projectionMatrixSlot, 1, GL_FALSE, (GLfloat*)&_projectionMatrix.m[0][0]);
    
    glEnable(GL_CULL_FACE);
    
    
    KSMatrix4 _modelViewMatrix;
    ksMatrixLoadIdentity(&_modelViewMatrix);
    
    //平移
    ksTranslate(&_modelViewMatrix, 0.5, 0.0, -10.0);
    
    KSMatrix4 _rotationMatrix;
    ksMatrixLoadIdentity(&_rotationMatrix);
    
    //旋轉
    ksRotate(&_rotationMatrix, degree, 1.0, 0.0, 0.0); //繞X軸
    ksRotate(&_rotationMatrix, yDegree, 0.0, 1.0, 0.0); //繞Y軸
    
    //把變換矩陣相乘，注意先后順序
    ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);

這里插入一點矩陣的基本性質：

Paste_Image.png

ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix); 這一行的代碼的精髓在于理解rotation和modelView的先后順序對最后結果的影響。
ksPerspective(&_projectionMatrix, 30.0, aspect, 5.0f, 20.0f);這里需要明白5個參數的意義：result矩陣，視角，長寬比，近平面距離，遠平面距離，不明白的可以點這里的透視投影推導。
ksTranslate(&_modelViewMatrix, 0.5, 0.0, -10.0);這里是簡單的平移變換，后三個參數為x、y、z的距離。
ksRotate(&_modelViewMatrix, degree, 1.0, 0.0, 0.0);這里是旋轉變換，后三個參數為旋轉軸。

glsl代碼

attribute vec4 position;
attribute vec4 positionColor;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying lowp vec4 varyColor;

void main()
{
    varyColor = positionColor;
    
    vec4 vPos;
    vPos = projectionMatrix * modelViewMatrix * position;
    
//    vPos = position;

    gl_Position = vPos;
}

思考題

• 透視投影里面有一個視錐體的概念，物體不在視錐體內的部分不可見，OpenGL ES是如何判斷一個點是否在視錐體內？
• 平移變換里面的z參數為何是負數，它的取值范圍是多少？
• ksMatrixMultiply的參數如果顛倒會如何？
• glsl代碼里面的projectionMatrix * modelViewMatrix * position順序能否交換？要如何交換？

總結

教程2、3是shader的一個分支，內容相對較難，接下的教程主要以GLKit為主。

附上源碼地址
代碼里面的util在 這里