IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 【Unity / Shader Graph】常见节点原理 | 02 图形化节点基本结构,基础节点UV,Sample Texture 2D -> 正文阅读

[游戏开发]【Unity / Shader Graph】常见节点原理 | 02 图形化节点基本结构,基础节点UV,Sample Texture 2D

【Unity / Shader Graph】常见节点原理 | 02 图形化节点基本结构,基础节点UV,Sample Texture 2D

部分内容来自YouTube@Ben Cloward
https://www.youtube.com/watch?v=bihZJzeuwOU&t=49s
这篇文章是总结了视频内容,并根据自己的经验分析了节点的表层逻辑。如果有什么错误的地方,欢迎留言指出。

图形化节点基本结构

面板上的接口颜色对应不同维度的数据

接口颜色代表数据维度
蓝色一维数据(float, int等)
绿色二维数据 (二维向量等)
黄色三维数据 (RGB颜色等)
粉色四维数据 (RGBA颜色等)

当我们把两个维度不同的接口相连时,Unity可能会为我们自动转换。可以看到下图,由四通道数据(RGBA, 粉色)自动转化为了三通道数据(RGB, 黄色)

在这里插入图片描述

基础节点

在这里插入图片描述
在这里插入图片描述

UV

UV贴图

游戏开发中常说的UV贴图,是保存了模型顶点位置和颜色对应关系的贴图(有u,v坐标信息的贴图)。
UV贴图的取值范围是[0, 1]。因为本质上UV贴图还是texture,而texture的坐标(s, t)就是规定在[0,1]之间的。
如果你曾使用过Maya, blender之类的建模软件就会知道(没用过也无所谓),每个物体的每个面在贴图界面中的对应关系是这样的:

在这里插入图片描述

图中右边选中了模型的黄色区域,表示选中的模型的面。左边就是我们说的UV贴图,它保存了模型每个面在贴图中对应的颜色信息。每个面展开后在UV贴图中的位置一般会被有意地设置为不相交。
每个面在UV贴图中所占区域的对应颜色,就是这个面在模型中的颜色。因此这样的UV贴图规定了贴图中的颜色应该被怎样赋值到各个面中。


UV节点

在这里插入图片描述

“Get the texture coordinate that are on the surface of the mesh.”
得到贴图在模型的面上的坐标

让我们观察这个Preview中颜色展现的状态。UV是二维向量(u, v),因此第三位永远置0。于是我们就能看到Preview中展现为下图:

在这里插入图片描述

通过这个预览我们也可以了解到。虽然这个节点的输出是四维向量,但本质上他保留的信息是UV坐标的位置,即(u, v, 0, 1)。
如果用最简单的形状,正方体,来观察我们得到的UV坐标数据,可以看到下面的结果。

在这里插入图片描述

图中,正方体的每个面都有自己的UV坐标。这里比较容易混淆的一个点是:

  • UV贴图中往往包括了贴图和多个面的对应关系。这样的对应关系取决于你的贴图在建模的时候如何设计排列方式。他们可以是一张贴图贴满整个模型(比如上面的花),也可以是每个面都贴上同样的贴图(比如下面的正方体)。
  • UV结点拿到的是每个单独的面的UV坐标的分布情况,也就是从每个面的贴图到每个面的模型坐标的映射方式。

因此,当我们拿着如下这样一张没有设计UV展开的贴图赋给一个unity中自带的正方体时,我们会发现这张贴图会被一一映射到一个正方体的每个面上。因为在这张”随便的贴图“和“随便的模型”之间并没有被给予特殊的对应关系,每个面的UV对应关系是默认的(一张贴图被完全贴上去)。

在这里插入图片描述

而在如下这样一张设计过的贴图中,每个面都有自己的子UV坐标。但是这些子UV坐标的位置关系都被建模软件包含到了一张“总贴图”和“总模型”上了。其中的过程不必我们考究。

在这里插入图片描述


Sample Texture 2D

在这里插入图片描述
采样(Sample) 的过程就是把Texture映射到物体表面的过程。Texture作为一张输入图片,它的坐标范围是[0,1] 。
在这里插入图片描述
为了把这样一张2D的图像转化到3D空间中,再展示到2D屏幕上,往往需要两次大转换:

  1. 根据照相机设定的映射方法,正交或透视,把贴图投射到三维物体表面:贴图坐标(s, t) → 模型坐标(u, v)
  2. 再转化为2D屏幕上对应的像素: 物体坐标(u, v) → 屏幕像素(x, y)

其中当然还包括模型坐标变换(旋转,平移,缩放等),坐标系的变换(物体坐标系->世界坐标系)等。这些操作都是通过矩阵乘法得到的。

节点的作用

在这里插入图片描述

最简单的理解方式:Sample Texture 2D这个节点的作用是根据UV坐标,分析贴图中的哪个颜色应该对应到模型的哪个位置。

通过对于输入(2维向量)和输出(4维向量)的观察,我个人对于这个节点的理解如下:
我们输入一张以位置为导向的包含有颜色信息的贴图,可以得到以颜色为导向的包含了位置信息的贴图。这之中的转换利用到了UV信息。也就是说,如何转换到对应的位置,取决于你的UV是如何设计的。
在这里插入图片描述

节点的输出

这里用一张虚幻内的图作为说明(原理是一样的,只是界面不一样。)
在这里插入图片描述
当我们使用R通道作为图像颜色信息时,拿到的贴图是R通道上的灰度值。这时模型上的贴图呈现灰色。因为彩色通道需要RGB三通道共同组成,而这里只有一个通道,展现出来的就是灰度图。

可以看到,图中白色的地方表示灰度值接近1,黑色的地方表示灰度值接近0。
当我们在使用Sample Texture 2D时,输出的是RGBA信息。每个通道的值的取值范围是[0, 1],也就是用(1, 1, 1, 1)表示纯白色,而不是(255, 255, 255, 255)。

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-09-04 01:42:50  更:2022-09-04 01:43:53 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 9:50:18-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码