前言

前面章節(jié)主要講解了視圖變換和投影變換，此時距離在屏幕空間顯示也就只差一步之遙了，只需要將NDC坐標(biāo)轉(zhuǎn)換為屏幕空間坐標(biāo)即可！有了前面一些章節(jié)的學(xué)習(xí)，相信大家對于本章節(jié)的學(xué)習(xí)還是很容易的！

正文

為什么需要屏幕空間變換？

因?yàn)榻?jīng)過了視圖變換和投影變換后，咱們已經(jīng)將所有的頂點(diǎn)坐標(biāo)轉(zhuǎn)換成了NDC坐標(biāo)，也就是x/y/z的范圍都在 $[?1,1]$ 的坐標(biāo)，但是正常咱們得電腦屏幕的XY坐標(biāo)范圍一般都是 $[0,width?1]\times [0,height?1]$ ，所以咱們需要屏幕空間變換！

什么是屏幕空間變換？

本質(zhì)上和之前的視圖變換、投影變換并無不同，就是一個矩陣罷了！

屏幕空間變換矩陣如何推導(dǎo)？

問題描述

將x坐標(biāo)由$[?1,1]$ 變換為 $ [0,screen_width - 1]$ ，將y坐標(biāo)由$[?1,1]$ 變換為 $ [0,screen_height - 1]$ ，將z坐標(biāo)由$[?1,1]$ 變換為 $ [0,1]$?.

如下圖所示：

步驟描述

步驟1：將xyz坐標(biāo)變換到 $[0,1]$ 的范圍

步驟2：將xy坐標(biāo)縮放至$[0,scree{n}_{w}idth?1]\times [0,scree{n}_{h}eight?1]$

咱們先思考下步驟1如何實(shí)現(xiàn)呢？當(dāng)前的xyz坐標(biāo)范圍為$[?1,1]$ ，目標(biāo)的坐標(biāo)范圍為$[0,1]$ ，如何做呢？

這時候其實(shí)咱們分兩步：

第一步：將$[?1,1]$ 縮放至$[?0.5,0.5]$ 的范圍。

第二步：將 $[?0.5,0.5]$ 沿著對應(yīng)軸軸方向移動0.5單位即可。

于是咱們分別得到縮放矩陣和平移矩陣如下：
$$S=\left[\begin{array}{cccc}0.5& 0& 0& 0\\ 0& 0.5& 0& 0\\ 0& 0& 0.5& 0\\ 0& 0& 0& 1\end{array}\right]$$

$$T=\left[\begin{array}{cccc}0& 0& 0& 0.5\\ 0& 0& 0& 0.5\\ 0& 0& 0& 0.5\\ 0& 0& 0& 1\end{array}\right]$$

于是咱們只需要將兩者相乘，即可獲得相應(yīng)的結(jié)果：
$$M_1=T?S=\left[\begin{array}{cccc}0.5& 0& 0& 0.5\\ 0& 0.5& 0& 0.5\\ 0& 0& 0.5& 0.5\\ 0& 0& 0& 1\end{array}\right]$$

然后咱們思考下步驟二，當(dāng)前的xy坐標(biāo)范圍為:$[0,1]$ ，目標(biāo)范圍為 $[0,screen_width-1] 和 [0,screen_height-1] $

這個問題也就只是個xy軸的縮放問題而已，很容易得到以下縮放矩陣：
$$M_2=\left[\begin{array}{cccc}screen\_width& 0& 0& 0\\ 0& screen\_height& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right]$$

然后咱們將步驟一的結(jié)果和步驟二的結(jié)果結(jié)合起來即可得到最終的屏幕空間變換矩陣，如下：
$$M_{screen}=M_2?M_1=M_2=\left[\begin{array}{cccc}0.5?screen\_width& 0& 0& 0.5?screen\_width\\ 0& 0.5?screen\_height& 0& 0.5?screen\_height\\ 0& 0& 0.5& 0.5\\ 0& 0& 0& 1\end{array}\right]$$

于是大功告成啦！咱們成功的將NDC坐標(biāo)轉(zhuǎn)換成了屏幕空間坐標(biāo)！

結(jié)尾：喜歡的小伙伴點(diǎn)點(diǎn)關(guān)注+贊哦!

你們的點(diǎn)贊就是我創(chuàng)作的最大動力！希望對各位小伙伴能夠有所幫助哦，永遠(yuǎn)在學(xué)習(xí)的道路上伴你而行， 我是航火火，火一般的男人！