纹理和采样?计算机图形系列-02期
纹理采样Game艺视界原创 75717 0
实名

通过了实名认证的内容创造者

发布于 2022-3-21 21:04:29

您需要 登录 才可以下载或查看,没有账号?注册

x
本帖最后由 Game艺视界 于 2022-3-21 21:53 编辑

b64e78dc188da7f93a16111abbb1eb9.png


大家好,在计算机图形学中,我们需要两个数据三角形和纹理,我们在上一集中看到了三角形,所以今天我们将讨论纹理,我想看的第一件事是我们如何在图形上表示颜色,如果我们采用这种浅绿色或任何颜色,使用 0 和 1 之间的数字来表示红绿色和蓝色分量,在这种情况下,我们的浅绿色由 0.57 红色 0.82 和 0.31 蓝色组成,我们将所有这些信息写在一起作为一个三维点或者我有时也会把它写成一个三维向量,我已经在上周的视频中使用了这个符号。

78a66ac85061841e376ed1000c06cc12.png


我正在谈论颜色作为顶点属性,现在我们知道我们如何代表一种颜色,我们可以看看纹理,纹理无非就是一堆颜色排列在一个网格中,我会让这个网格更明显一点。

这里我们可以在水平方向上指定一个索引方向和垂直方向,这个纹理有一个宽度在高度为8的情况下,每个网格方块被称为像素或纹理。

它们可以使用纹理旁边的irate数字进行索引,例如,我用蓝色突出显示的这个Texel,水平索引为3,垂直索引为1,在第三个公式中,我将把它写成T下标3逗号1,它等于这个三维向量,它包含该颜色的红色,绿色和蓝色的组成部分,这只是一个8x8的纹理因此不包含太多的细节,

但是如果我们增加数量,组成这个纹理的texels,然后是这个纹理所假定的图,现在我们知道了什么是纹理

UV映射

我们将在UV贴图上移动,给定此3d模型的 UV 贴图在这种情况下是一个立方体,在这种情况下,这个纹理是一个骰子六个面的图像,

继续进行UV映射,UV贴图是一种允许我们将该图像粘贴到 3d 模型上的技术在这种情况下,这将给我们一个骰子,通过定义纹理周围的坐标系,纹理的左上角将有坐标0右下角将有坐标1我们称水平轴为U轴,垂直轴为V轴,我们所要做的就是为构成立方体的每个顶点定义一个UV坐标

例如前面的四个顶点可以映射到UV坐标系统上就像这样,我们现在将这个UV坐标存储为对应的顶点如果你仔细观察,你可能会注意到在UV坐标系中,我们通过添加两个顶点来解决这个问题在顶点缓冲区中,它们将共享相同的位置,但将有一个不同的UV坐标,由于顶点属性在三角形曲面上插值,我们可以确定树D模型上任何点的颜色,
假设我们有这个点,然后计算机可以告诉我们它的UV坐标是什么,现在所要做的就是弄清楚该点下的颜色。不幸的是,在这一点之下,要做到这一点并不容易。

我们使用一种叫做采样器的东西,

你可以把它想象成一个函数,它接受U和V坐标,并输出一种颜色,它可以基于程序函数或基于纹理,这就是我们将要看到的。

考虑到这种纹理,我画了一个UV如果我们现在在UV坐标系上有一个多边形就像这样,你会看到我们有一个小问题,因为它没有被控制在0到1的范围内,这是非常有用的,但它回避了问题我们应该把哪个颜色赋值给0到1范围之外的点,解决这个问题的一种方法是给每个点都指定一种颜色在0到1的范围之外,比如黑色,但这不是很好相反地,如果我们能够映射每个点那就更好了。在0到1的范围之外回到0到1的范围使用寻址函数最简单的方法可能是钳位函数,给定输入X返回0,如果 X 大于 1 并在所有其他情况下返回 x, 寻址函数背后的想法是我们为您的坐标计算其结果两次,一次是你的坐标,一次是V坐标,所以在 在这种情况下,如果我们为 0.5 计算它返回 0.5,如果我们计算1.35它返回1,因为1.35大于1然后寻址函数返回一。这两个值现在形成一个新的UV坐标这个


换句话说,我们原始点的颜色应该与这个新点下方的颜色相同,在这个新点下面的颜色我们可以画出这个颜色,在0到1范围之外的每一个点,都要使用钳位clamp还有很多其他的地址函数。例如repeat函数,它只是重复图像您将看到的每个整数连接点都是由函数 frac 组成的,Frac定义为x的绝对值减去x四舍五入的绝对值,向下 frac 所做的就是返回数字的小数部分

例如nea的frac,如果3.5返回0.5的重复函数,现在定义为1 - X的小数部分,如果X小于0和 X 的小数部分,在所有其他情况下我们也有镜像函数,它在每个整数结点镜像纹理,它被定义为的小数部分 X 如果 X 向下舍入是偶数和 1- 镜像寻址函数,如果 X 随机字是奇数,它镜像 X 的小数部分原点周围的纹理,

最后我们有镜像寻址函数,它镜像周围的纹理UV坐标系的原点,然后在它之外变成一个钳位函数,如果X的绝对值大于1,它被定义为1。既然我们知道如何将颜色分配给 0 到 1 范围之外的 UV 坐标,

是时候讨论过滤了
这是实际将颜色分配给UV坐标的过程,过滤实际将颜色分配给 UV 坐标过滤主要围绕插值演变,
最简单的插值形式是可能是线性插值如果我们拿两种颜色举例蓝色和绿色,我们把它们命名为a和B那么你应该想象在a和B之间有一条线。从a点的0到B点的1,给定0和1之间的任意值,线性插值会逐渐将a的值改变为B的值

就像此视频中您可以想到的几乎所有概念一样,您可以将线性插值视为函数如果我们将颜色 a 和 B 表示为两个向量,则它接受两个值 a 和 B 以及范围从 0 到 1 的第三个值那么我们可以计算颜色,假设这个点为 0.5,我们只需填写这些值填入我们的线性插值函数,然后使用基本的向量数学

然后使用基本矢量数学计算结果颜色将是这个颜色,只要你看到我使用大写字母L代表最圆的视频,你应该知道它代表线性插值函数

回答我们一直想回答的问题,已知这个纹理我们怎么知道这个点应该是什么颜色

我要回答这个问题,让我放大这些像素,首先应该知道的是,它们不是真正的彩色方块,而是它们只是有颜色的点,这也意味着如果我们想为了知道我们应该给白点指定什么颜色在这四个像素的颜色之间,最简单的方法是分配颜色到白点只需要指定Texel的颜色最接近它,所以在这种情况下,这就是我们提到的右下Texel这种方法作为最近邻过滤,但它可能导致致伪影,所以确定这个白点颜色的一个更好的方法是在这四个像素之间插入颜色。

我们可以使用的一种技术是构建线性插值来做到这一点,我们首先在顶部两个纹理之间进行线性插值,然后底部两个纹理之间进行。最后在这两种颜色之间我们计算出了最终的颜色。这种方法称为 B 线性插值,因为我们水平线性插值两次,垂直线性插值一次,

现在我们知道了概念,工作让我们讨论一个月,我们所知道的是UV坐标但是UV坐标范围从0到1,这是没有用的,因为我们可以在纹理中查找颜色,是通过给它一个精确的索引必须将UV坐标从0到1的范围,映射到一个范围从0到纹理宽度或高度中有多少像素的范围,我们称这些坐标为x和y x被计算为你的坐标,通过寻址函数并乘以纹理的宽度类似地,y等于V坐标放上我们的寻址函数,然后乘以纹理的高度在这里X和y坐标恰好是等于u5.66。接下来我们要做的是算出DS的颜色。(详细讲解见下方原教程)

最后还有最后一件事我想讨论,那就是 MIT 映射
假设我们有这个 8 x 8 的纹理,我们必须将它显示在一个只占用 3 x 2 纹素的对象上,你可能已经预料到了 2 通过 2纹理会变得更蓝,这就是为什么它没有变成蓝色的原因,更多的蓝色是,因为它是用接近插值的建筑来采样的只考虑了这四个区域的4个像素,就像你看到的蓝色像素服务器和样本,因此结果给你2纹理将确保蓝色的固定

这个问题需要考虑这些4 × 4的矩阵块,然后最后的2x2纹理会变得更蓝色。问题当然是我们如何对这些更大的区域进行抽样

假设我们有这个128乘128的纹理,然后我们可以为它生成一个mipmap链其中包含的图像总是比前一个小四倍,这也是为什么纹理通常是正方形,有宽度和高度是2的幂因为它可以一直到小1x1纹理,这个mipmap链的工作方式是每4像素一个纹理组成一个texel在下一个纹理中我们当然是这样做的构建你的插值,就像我已经说过的,在中间地图链中的每个纹理比之前的图像小四倍,这意味着中间地图链中的第一个图像是原始图像的四分之一。下一个是原始图像面积的1/16下一个是64。原始图像的面积等作为一个完整的边注的和这一行数字等于1 / 3这个结果已经用过了,它对我们有用的唯一原因是因为现在我们知道mipmapping会占用1/3的内存

假设我们有这个 5x5 纹理,我们想对这一点进行采样,我们现在采用小于 5x5 纹理的 MIT 贴图和大于 5x5 纹理的 MIT 贴图,适合真正喜欢数学的人我们知道我们需要一个4乘4和8乘8的纹理使用这些公式我把它作为一个练习留给你们去弄清楚为什么会这样回到我们的点

我们将在与5x5 纹理中的点相同的点使用构建插值对我们的 MIT 地图进行采样,这将为我们提供两种看起来相同但实际上不同的颜色

现在剩下的就是在这些颜色之间进行线性插值两种颜色,这就是为什么这种计算颜色的方法被称为万亿富翁插值,因为您首先在墓穴中构建插值 it Maps,然后将它们的结果线性插值在一起,但唯一剩下的问题是我们应该在那条线上的哪个位置我们的样本换句话说,我们的线性插值的 T 参数是什么,因为事实证明我们可以采用我们的线性插值函数并重写它以获得 T 的表达式

我们现在将说 a 和 B 是 4 和 8,L 是 线性插值的结果将等于 5 我们可以将其填入公式中,现在 T 将是您可以用于线性的值在4和8之间插入,得到5,在这种情况下,

T是等于0.35(ppt是0.25),现在我们知道我们可以在它们之间线性插值此时可以使用两种颜色作为点的颜色

内容以原视频教程为主

原帖地址:纹理和采样?计算机图形系列-02期 (qq.com)

作者:FloatyMonkey

https://www.youtube.com/c/FloatyMonkey/videos




评分

参与人数 7元素币 +100 活跃度 +44 展开 理由
元素界王神... + 11 + 4 【点赞】这很有大网气质!
苏鱼 + 19 + 10 首发必发微元素,荣耀加身装备酷。
xiye + 19 + 8 【点赞】这很有大网气质!
AirLee-Wei + 20 + 4 厉害了
gxfc5688 + 12 + 5 资源哪里好,肯定元素找。
tutuzi + 8 + 5 这就是大佬的世界嘛
auldark + 11 + 8 天下武功出少林,世界资源入元素。

查看全部评分

本帖被以下画板推荐:

微信公众号:Game艺视界
使用道具 <
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表