前言

上節講述了雙線性插值算法，雖然也有提到主要應用的點就是紋理采樣，但是對于這一塊有些小小白可能還不了解，所以這一節補充一下紋理采樣的內容！

請叫我貼心航火火！夢想為小白而生！

正文

1、為什么需要紋理采樣？

想象一個場景： 如果有這么一個需求，需要在屏幕的一塊400x400目標區域顯示一張圖片，正好這張圖片的尺寸也是400x400像素，怎么做？

答： 啥都不需要做，是的，根本不需要做什么處理，直接一一對應像素顯示即可！

但是，實際情況中，往往幾乎不可能這么巧合的一一對應，要么紋理圖片過大，要么紋理圖片過小，沒法一一對應，怎么辦呢？

答： 通過引入一種機制，進行等比例對應，這就是uv坐標的由來，它本質上就表示百分比，一般地，uv坐標的標準取值范圍是：0.0 - 1.0。

舉個紋理圖片過小的例子，如下圖： 當我們需要繪制 400x400 窗口區域，圖片紋理大小是 200x200，如果要在窗口 (20, 20) 位置繪制，那么我們就相當于取紋理圖片的 $(20/400,20/400)=(0.05,0.05)$ 比例位置的像素數據，也就是 $(0.05?200，0.05?200)=(10,10)$ 位置的數據！這里的 $(0.05,0.05)$? 其實就是uv坐標！

這里引申一下，由于上述舉的例子是繪制區域大，紋理圖片小。所以自然而然會存在多個繪制區域對應一個紋理像素位置的情況。這時候就應用到上節的內容。是直接采用最鄰近的采樣方式，還是雙線性插值的方式，來緩解像素化的情況，取決于自身的需求！

2、什么是紋理采樣？

在屏幕上某一像素繪制時，根據像素所在位置，去圖片上尋找對應像素值的過程，這個過程就是紋理采樣！如下圖所示：

3、如何進行紋理采樣？

其實需要采樣的情形無非就是兩種情況，上面也說了！紋理太大或太大。這里咱們只說紋理太小的情況，需要用到上一節的雙線性插值的知識。

紋理太大的時，解決的思路無非就是讓紋理變小，變到一個最適合繪制窗口的大小。如果想要適應各種繪制窗口大小，就需要利用MipMap的知識，后面章節有空的話，會把這部分給補上哦，童鞋們！

（1）假設繪制區域為矩形

需要在一個分辨率為 screen_width X screen_height 的矩形窗口區域繪制一張圖片，這張圖片分辨率為picture_width X picture_height，假設繪制區域左下角的uv坐標為 $(u_{x0},u_{y0})$，右上角的uv坐標為 $(u_{x1},u_{y1})$ ，且滿足 $0=<u_{x0}、u_{x1}、u_{y0}、u_{y1}<=1.0$ ，則對于任何繪制區域坐標為 $(x,y)$? 的uv坐標為
$$\begin{gathered} u_x=\frac{x}{screen\_width}?u_{x1}+(1?\frac{x}{screen\_width})?u_{x0} \\ {u}_y=\frac{y}{screen\_height}?u_{y1}+(1?\frac{y}{screen\_height})?u_{y1} \end{gathered}$$
既然已經有了繪制區域每一個位置的uv坐標，咱么只需要根據uv坐標，去紋理圖片進行采樣像素值即可，至于采取何種采樣方法，可以參考上一片文章，既可以采用最鄰近取整的方式，也可以采取雙線性插值的方式！這里根據用戶需求，自行決定，不多贅述！

（2）假設繪制區域為三角形

給定三個頂點 $p1=(x_1,y_1)、p2=(x_2,y_2)、p3=(x_3,y_3)$ 并且給定三個頂點的uv坐標分別為 $u_1=(u_{x1},u_{y1}),u_2=(u_{x2},u_{y2}),u_3=(u_{x3},u_{y3})$，如何得知三角形內每一個頂點 $p(x,y)$ 的uv坐標呢？

這時候重心坐標插值公式，又派上用上了，之前的章節已經介紹過，就不過多闡釋了！

這時候 每一個三角形內的頂點 $p(x,y)$ 的uv坐標$u_p=\alpha u_1+\beta u_2+\gamma u_3$ ，三個系數根據重心坐標公式即可算得！這時候同樣，根據uv坐標去紋理圖片進行采樣像素值即可！

簡單給個參考圖：

4、什么是紋理的Wrap方式？

雖然標準規定的uv坐標范圍為：$(0.0,1.0)$ ，但是如果越界了，對應的uv坐標的采樣值如何取呢？這個問題的答案就是紋理的Wrap屬性！

5、有哪些紋理的Wrap方式？

常見的Wrap方式有四種：

• Repeat
• Mirror_Repeat
• Clamp_To_Edge
• Clamp_To_Border

這里分別簡單介紹并給出示例圖：

（1）Repeat

超出部分，不斷循環重復

（2）Mirror_Repeat

超出部分，不斷循環鏡像重復

（3）Clamp_To_Edge

紋理坐標會被約束在0到1之間，超出的部分會重復紋理坐標的邊緣，產生一種邊緣被拉伸的效果

（4）Clamp_To_Border

超出的坐標為用戶指定的邊緣顏色

6、如何實現紋理的Wrap方式？

上述的第（3）和第（4）很好理解，咱們就討論下第（1）種和第（2）種的計算方式吧！

（1）Repeat

計算公式：
$$\begin{gathered} 記f(x)函數表示取浮點數x的小數部分,則坐標(u_x,u_y)的最終坐標為 \\ {u}_x=f(f(u_x)+1) \\ {u}_y=f(f(u_y)+1) \end{gathered}$$

舉例佐證：

• $(1.2,2.2)=>(f(0.2+1),f(0.2+1))=>(0.2,0.2)$ ok

• $(0.3,0.8)=>(f(0.3+1),f(0.8+1))=>(0.3,0.8)$ ok

• $(?0.5,?2.2)=>(f(?0.5+1),f(?0.2+1))=>(0.5,0.8)$ ok

（2）Mirror_Repeat

計算公式：
$$\begin{gathered} 記f(x)函數表示取浮點數x的小數部分,則坐標(u_x,u_y)的最終坐標為 \\ {u}_x=1?f(f(u_x)+1) \\ {u}_y=1?f(f(u_y)+1) \end{gathered}$$

舉例佐證：

• $(1.2,2.2)=>(1?f(0.2+1),1?f(0.2+1))=>(1?0.2,1?0.2)=>(0.8,0.8)$ ok
• $(0.3,0.8)=>(1?f(0.3+1),1?f(0.8+1))=>(1?0.3,1?0.8)=>(0.7,0.2)$ ok
• $(?0.5,?2.2)=>(1?f(?0.5+1),1?f(?0.2+1))=>(1?0.5,1?0.8)=>(0.5,0.2)$ ok

結尾：喜歡的小伙伴可以點點關注+贊哦

希望對各位小伙伴能夠有所幫助哦，永遠在學習的道路上伴你而行， 我是航火火，火一般的男人！