本文主要是介绍图形学初识--纹理采样和Wrap方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录 前言正文1、为什么需要纹理采样？2、什么是纹理采样？3、如何进行纹理采样？（1）假设绘制区域为矩形（2）假设绘制区域为三角形 4、什么是纹理的Wrap方式？5、有哪些纹理的Wrap方式？（1）Repeat（2）Mirror_Repeat（3）Clamp_To_Edge（4）Clamp_To_Border 6、如何实现纹理的Wrap方式？（1）Repeat（2）Mirror_Repeat 结尾：喜欢的小伙伴可以点点关注+赞哦
前言
上节讲述了双线性插值算法，虽然也有提到主要应用的点就是纹理采样，但是对于这一块有些小小白可能还不了解，所以这一节补充一下纹理采样的内容！
请叫我贴心航火火！梦想为小白而生！
正文
1、为什么需要纹理采样？
想象一个场景： 如果有这么一个需求，需要在屏幕的一块400x400目标区域显示一张图片，正好这张图片的尺寸也是400x400像素，怎么做？
答： 啥都不需要做，是的，根本不需要做什么处理，直接一一对应像素显示即可！
但是，实际情况中，往往几乎不可能这么巧合的一一对应，要么纹理图片过大，要么纹理图片过小，没法一一对应，怎么办呢？
答： 通过引入一种机制，进行等比例对应，这就是uv坐标的由来，它本质上就表示百分比，一般地，uv坐标的标准取值范围是：0.0 - 1.0。
举个纹理图片过小的例子，如下图： 当我们需要绘制 400x400 窗口区域，图片纹理大小是 200x200，如果要在窗口 (20, 20) 位置绘制，那么我们就相当于取纹理图片的 ( 20 / 400 , 20 / 400 ) = ( 0.05 , 0.05 ) (20 / 400 , 20 / 400) = (0.05, 0.05) (20/400,20/400)=(0.05,0.05) 比例位置的像素数据，也就是 ( 0.05 ∗ 200 ， 0.05 ∗ 200 ) = ( 10 , 10 ) (0.05 * 200，0.05 * 200) = (10, 10) (0.05∗200，0.05∗200)=(10,10) 位置的数据！这里的 ( 0.05 , 0.05 ) (0.05, 0.05) (0.05,0.05) 其实就是uv坐标！
这里引申一下，由于上述举的例子是绘制区域大，纹理图片小。所以自然而然会存在多个绘制区域对应一个纹理像素位置的情况。这时候就应用到上节的内容。是直接采用最邻近的采样方式，还是双线性插值的方式，来缓解像素化的情况，取决于自身的需求！
2、什么是纹理采样？
在屏幕上某一像素绘制时，根据像素所在位置，去图片上寻找对应像素值的过程，这个过程就是纹理采样！如下图所示：
3、如何进行纹理采样？
其实需要采样的情形无非就是两种情况，上面也说了！纹理太大或太大。这里咱们只说纹理太小的情况，需要用到上一节的双线性插值的知识。
纹理太大的时，解决的思路无非就是让纹理变小，变到一个最适合绘制窗口的大小。如果想要适应各种绘制窗口大小，就需要利用MipMap的知识，后面章节有空的话，会把这部分给补上哦，童鞋们！
（1）假设绘制区域为矩形
需要在一个分辨率为 screen_width X screen_height 的矩形窗口区域绘制一张图片，这张图片分辨率为picture_width X picture_height，假设绘制区域左下角的uv坐标为 ( u x 0 , u y 0 ) (u_{x0}, u_{y0}) (ux0,uy0)，右上角的uv坐标为 ( u x 1 , u y 1 ) (u_{x1}, u_{y1}) (ux1,uy1) ，且满足 0 = < u x 0 、 u x 1 、 u y 0 、 u y 1 < = 1.0 0 =< u_{x0}、u_{x1}、u_{y0}、u_{y1} <= 1.0 0= （2）假设绘制区域为三角形 给定三个顶点 p 1 = ( x 1 , y 1 ) 、 p 2 = ( x 2 , y 2 ) 、 p 3 = ( x 3 , y 3 ) p1 = (x_1,y_1)、p2 = (x_2,y_2)、p3 = (x_3,y_3) p1=(x1,y1)、p2=(x2,y2)、p3=(x3,y3) 并且给定三个顶点的uv坐标分别为 u 1 = ( u x 1 , u y 1 ) , u 2 = ( u x 2 , u y 2 ) , u 3 = ( u x 3 , u y 3 ) u_1 = (u_{x1},u_{y1}),u_2 = (u_{x2},u_{y2}),u_3 = (u_{x3},u_{y3}) u1=(ux1,uy1),u2=(ux2,uy2),u3=(ux3,uy3)，如何得知三角形内每一个顶点 p ( x , y ) p(x,y) p(x,y) 的uv坐标呢？ 这时候重心坐标插值公式，又派上用上了，之前的章节已经介绍过，就不过多阐释了！ 这时候 每一个三角形内的顶点 p ( x , y ) p(x,y) p(x,y) 的uv坐标 u p = α u 1 + β u 2 + γ u 3 u_p = \alpha u_1 + \beta u_2 +\gamma u_3 up=αu1+βu2+γu3 ，三个系数根据重心坐标公式即可算得！这时候同样，根据uv坐标去纹理图片进行采样像素值即可！ 简单给个参考图： 4、什么是纹理的Wrap方式？ 虽然标准规定的uv坐标范围为： ( 0.0 , 1.0 ) (0.0, 1.0) (0.0,1.0) ，但是如果越界了，对应的uv坐标的采样值如何取呢？这个问题的答案就是纹理的Wrap属性！ 5、有哪些纹理的Wrap方式？ 常见的Wrap方式有四种： RepeatMirror_RepeatClamp_To_EdgeClamp_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 计算公式： 记 f ( x ) 函数表示取浮点数 x 的小数部分 , 则坐标 ( u x , u y ) 的最终坐标为 u x = f ( f ( u x ) + 1 ) u y = f ( f ( u y ) + 1 ) 记f(x)函数表示取浮点数x的小数部分,则坐标(u_x, u_y)的最终坐标为\\ u_x = f(\ f(u_x) + 1\ )\\ u_y = f(\ f(u_y) + 1\ ) 记f(x)函数表示取浮点数x的小数部分,则坐标(ux,uy)的最终坐标为ux=f( f(ux)+1 )uy=f( f(uy)+1 ) 举例佐证： ( 1.2 , 2.2 ) = > ( f ( 0.2 + 1 ) , f ( 0.2 + 1 ) ) = > ( 0.2 , 0.2 ) (1.2, 2.2) => (\ f(0.2 + 1),f(0.2 + 1)\ ) => (0.2, 0.2) (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 ) (0.3, 0.8) => (\ f(0.3 + 1),f(0.8 + 1)\ ) => (0.3, 0.8) (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 ) (-0.5, -2.2) => (\ f(-0.5 + 1),f(-0.2 + 1)\ ) => (0.5, 0.8) (−0.5,−2.2)=>( f(−0.5+1),f(−0.2+1) )=>(0.5,0.8) ok （2）Mirror_Repeat 计算公式： 记 f ( x ) 函数表示取浮点数 x 的小数部分 , 则坐标 ( u x , u y ) 的最终坐标为 u x = 1 − f ( f ( u x ) + 1 ) u y = 1 − f ( f ( u y ) + 1 ) 记f(x)函数表示取浮点数x的小数部分,则坐标(u_x, u_y)的最终坐标为\\ u_x = 1 - f(\ f(u_x) + 1\ )\\ u_y = 1 - f(\ f(u_y) + 1\ ) 记f(x)函数表示取浮点数x的小数部分,则坐标(ux,uy)的最终坐标为ux=1−f( f(ux)+1 )uy=1−f( f(uy)+1 ) 举例佐证： ( 1.2 , 2.2 ) = > ( 1 − f ( 0.2 + 1 ) , 1 − f ( 0.2 + 1 ) ) = > ( 1 − 0.2 , 1 − 0.2 ) = > ( 0.8 , 0.8 ) (1.2, 2.2) => (\ 1 - f(0.2 + 1),1 - f(0.2 + 1)\ ) => (1 - 0.2, 1 - 0.2) => (0.8,0.8) (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 ) (0.3, 0.8) => (\ 1 - f(0.3 + 1),1 - f(0.8 + 1)\ ) => (1 - 0.3, 1 - 0.8) => (0.7, 0.2) (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 ) (-0.5, -2.2) => (\ 1 - f(-0.5 + 1),1 - f(-0.2 + 1)\ ) => (1 - 0.5, 1 - 0.8) => (0.5, 0.2) (−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 结尾：喜欢的小伙伴可以点点关注+赞哦 希望对各位小伙伴能够有所帮助哦，永远在学习的道路上伴你而行， 我是航火火，火一般的男人！ 这篇关于图形学初识--纹理采样和Wrap方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！