LearnOpenGL-P6 移動(dòng)旋轉(zhuǎn)和縮放圖像
0 上一章我們繪制了帶紋理的矩形,本章我們將對(duì)這張帶圖片進(jìn)行移動(dòng)、旋轉(zhuǎn)以及縮放等操作,讓其在窗口中能被調(diào)整為2d平面內(nèi)的各種擺放姿態(tài)。
(1)創(chuàng)建變換矩陣,利用變換矩陣改變圖片的姿態(tài)。
(2)使用鍵盤上的按鍵控制圖片的擺放姿態(tài)。

1 創(chuàng)建變換矩陣,利用變換矩陣改變圖片的姿態(tài)。
1.0 導(dǎo)入glm開源庫(https://github.com/g-truc/glm/tags)。glm是一個(gè)處理矩陣變換的開源庫。

1.1 將glm庫的頭文件路徑包含到項(xiàng)目頭文件路徑中,并將以下三個(gè)hpp文件包含進(jìn)main.cpp文件中。

1.2 在main.cpp的渲染循環(huán)中創(chuàng)建一個(gè)單位矩陣。然后將單位矩陣傳入glm的旋轉(zhuǎn)接口中轉(zhuǎn)成繞z軸逆時(shí)針旋轉(zhuǎn)90°的變換矩陣。再然后將矩陣傳入glm的縮放接口中轉(zhuǎn)成沿xyz三軸均縮小為0.5倍的變換矩陣。

1.3 在頂點(diǎn)著色器源碼中添加坐標(biāo)變換矩陣變量,變量的類型為mat4。將變換矩陣乘以頂點(diǎn)坐標(biāo)得到轉(zhuǎn)換后的新頂點(diǎn)坐標(biāo)位置。(此時(shí)坐標(biāo)轉(zhuǎn)換的方式為先縮放0.5倍,再繞著z軸旋轉(zhuǎn)90°。這個(gè)過程與我們?cè)O(shè)置轉(zhuǎn)換矩陣的過程是反過來的。如不太理解,可去查閱一下線性代數(shù)的知識(shí)。)

1.4 在shader中添加新的接口。該接口用來設(shè)置mat4類型的uniform變量。

1.5 每次渲染循環(huán)中,都將我們之前設(shè)置好的轉(zhuǎn)換矩陣傳入到著色器中。

1.6 編譯運(yùn)行程序可得到一個(gè)先縮放了0.5倍后繞著z軸逆時(shí)針旋轉(zhuǎn)了90°的圖像。

1.7 我們現(xiàn)在可以再玩點(diǎn)花的。我們?cè)诿總€(gè)渲染幀中,都先讓圖像從坐標(biāo)原點(diǎn)移動(dòng)到右下角,再隨著時(shí)間的變換相對(duì)坐標(biāo)原點(diǎn)繞z軸逆時(shí)針旋轉(zhuǎn)一個(gè)角度,最后將其縮放0.5倍。其運(yùn)動(dòng)軌跡如下。


1.8 我們也可以換一種變換矩陣的組合順序,先讓圖像在原點(diǎn)處繞z軸旋轉(zhuǎn)一定的角度,再將其移動(dòng)到右下角位置,最后將其縮放0.5倍。其運(yùn)動(dòng)軌跡將發(fā)生改變。



2 使用鍵盤上的按鍵控制圖片的擺放姿態(tài)。
2.0 我們接下來不搞之前的那種固定軌跡的圖像移動(dòng)了。我們現(xiàn)在要讓圖像根據(jù)我們自己的意愿自由地運(yùn)動(dòng)。我們需要通過鍵盤來與程序進(jìn)行交互。
2.1 首先我們?cè)趍ain()函數(shù)之前,定義好關(guān)于縮放、旋轉(zhuǎn)和移動(dòng)的全局變量。

2.2 然后設(shè)置好矩陣轉(zhuǎn)換的順序(此時(shí)不同的設(shè)置順序會(huì)產(chǎn)生不一樣的效果,你們可以自己去嘗試一下。)

2.3 在鍵盤響應(yīng)的回調(diào)函數(shù)中設(shè)置好按鍵的響應(yīng)。
2.4 上下左右鍵負(fù)責(zé)控制圖像的上下坐標(biāo)移動(dòng)(此時(shí)要注意移動(dòng)量不能超出窗口的尺寸。)


2.5 WADS四個(gè)鍵負(fù)責(zé)控制圖像的縮放(此時(shí)要注意縮放量不能小于0.0f。)


2.6 qe二鍵負(fù)責(zé)控制圖像的旋轉(zhuǎn)(旋轉(zhuǎn)角度值不限制。)


2.7 最后編譯運(yùn)行程序即可得到一個(gè)通過鍵盤控制的在2d平面內(nèi)可以任意調(diào)整姿態(tài)的圖像。


