hello 兄弟們，好久不見撒，我又回來啦！，今天主要講解如何在頂點著色器中進行旋轉、平移和縮放，涉及到矩陣和向量方面的知識哦，忘記的可以翻一下高中數(shù)學啦，在講之前，先回顧一下矩陣和向量點積的知識，矩陣點乘向量，等于矩陣的每一行分別和向量相乘的和，如圖1所示，單位矩陣和向量（x,y,z,w）的點乘：

圖1

?一、旋轉

圖2所示，x軸上一點，繞z軸先轉α角度后到B點的位置，求B點的坐標：

圖2

?利用和角公式可得B點的坐標：

? ? ? ? ? ? ? ? ? ? ? ? f(x) = x*cos(α) - y*sin(α);

? ? ? ? ? ? ? ? ? ? ? ? f(y) = x*sin(α) + y*cos(α);

結合圖1的矩陣，若要f(x) = x*cos(α) - y*sin(α)，則矩陣的第一行元素為(cos(α), -sin(α), 0, 0),若要f(y) = x*sin(α) + y*cos(α)，則矩陣的第二行元素為(sin(α), cos(α), 0, 0),所以矩陣為圖3所示，因為我們計算矩陣用的是行主序，而shader中用的是列主序，需要將行主序轉換成列主序：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖3

了解了原理后，就可以在shader中進行旋轉了。我畫了一個正方形（具體畫法看我前幾篇文章，這里不做介紹，直接在頂點shader里進行旋轉），讓正方形旋轉30°，代碼如下：

attribute vec3 kzPosition;
uniform highp mat4 kzProjectionCameraWorldMatrix;
void main()
{
    precision mediump float;
    //度數(shù)轉為弧度制
    float angle = radians(30.);

    //旋轉矩陣
    mat4 m4 = mat4(
    cos(angle), sin(angle), 0.0, 0.0,
    -sin(angle), cos(angle), 0.0, 0.0,
    0.0,        0.0,         1.0, 0.0,
    0.0,        0.0,         0.0, 1.0
    );
    
    vec4 pos = m4 * vec4(kzPosition, 1.0);
    gl_Position = kzProjectionCameraWorldMatrix * pos;
}

?效果圖如圖4所示：

圖4

?二、平移

讓圖形沿x軸平移100，沿y平移200，也就是讓圖1中的x為x+100，讓y為y+200，那么和什么矩陣點乘會得到想要的結果呢？我們可以看到，圖1的矩陣出了（x，y，z），還有個w的元素，這個w也就是矩陣的齊次坐標（自行補習知識，這里不做贅述），我們可以通過w來改變圖形的位移，得到的平移矩陣如圖5所示：（記得在shader中使用的是列主席哦）

?平移代碼：

attribute vec3 kzPosition;
uniform highp mat4 kzProjectionCameraWorldMatrix;
void main()
{
    precision mediump float;
    float tx = 100.;
    float ty = 200.;
    float tz = 0.;
    //x,y移動100，200
    mat4 m = mat4(
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        tx,  ty,  tz,  1.0
    );
    
    vec4 pos = m * vec4(kzPosition, 1.);
    gl_Position = kzProjectionCameraWorldMatrix * pos;
}

?三、縮放

如果使圖片的x和y各縮放0.5倍，那么圖1中的x應該為0.5x，y應為0.5y，即矩陣的第一行的結果為0.5x，第二行為0.5y，則矩陣第一行的x的元素就應該是0.5，第二行的y元素也應該是0.5，得到的矩陣如圖6：

代碼：

attribute vec3 kzPosition;
uniform highp mat4 kzProjectionCameraWorldMatrix;
void main()
{
    precision mediump float;
    float sx = 0.5;
    float sy = 0.5;
    float sz = 1.;
    mat4 m = mat4(
        sx,  0.0, 0.0, 0.0,
        0.0, sy,  0.0, 0.0,
        0.0, 0.0, sz, 0.0,
        0.0, 0.0, 0.0, 1.0
    );
    
    vec4 pos = vec4(kzPosition, 1.) * m;
    gl_Position = kzProjectionCameraWorldMatrix * pos;
}

?效果圖如圖7所示：（相較于圖4，縮小了0.5倍）

圖7文章來源地址http://www.zghlxwxcb.cn/news/detail-596821.html

到了這里，關于GLSL——旋轉、平移和縮放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！