【图片】【着色器介绍】Godot着色器从入门到入门【godot吧】

（本系列教程！并不会！讲到可视化着色器）
看了一下，吧里都没人吐槽Godot的着色器语言吗？？？

说实话，Godot的着色器语言教程是真的浓缩：
开篇直接丢出“它和openGL”很像，然后就是介绍一些基本的东西，然后再来了一波“花里胡哨”的操作：
先是搞出山脉，再把山脉搞成海面。接着就给你讲了一些“高级”的操作。（最主要这些文档未翻译完全！！！）
我敢打一百个赌，新手绝对看不懂。

在此，开一个小小的坑，我在这把官方想讲的内容捋顺一下。
！还是那句话：本教程可能并不严谨，如有错误，欢迎指出！
（阅读本系列前，请确认你有一定GDS基础）
00-前言-初步认知
首先，我们得理解：
什么是着色器语言？
每种编程语言都有自己适用的工作，而着色器语言，它生来就是为了渲染图形的，但着色器语言实际上是“库”
我必须用着色器语言才能绘制图形吗？
不，在严格意义来说，大多数编程语言都有绘制图形的能力，但它们一般只能绘制简易几何图形，所以编写效率极低（写个成百上千行才能实现一个普通的场景），这使曾经的程序员十分苦恼。终于，着色器语言出现了！！它其实就是一个“库”，它把原本数十行的代码封装成一个函数，这使得程序员只需要用一行调用这个函数，就可以实现令人惊艳的结果
那着色器语言到底可以干什么？
-大到无尽的星辰浩瀚的大海
-小到这的一草一木
若你想注入灵魂，那着色器语言是必须的

（以上的场景之所以鲜活，都是着色器语言的功劳）
我们再看一个鲜活的例子：战地系列
1992年，《飞鹰行动发布》

2002年，《战地1942》

........
现在《战地5》

战地系列游戏核心玩法并未有所更变，只是因为画质的提升，就给这个系列注入了新的活力
这也很好地体现出了着色器在近几年的发展
所以为了游戏的灵魂，开始学着色器语言吧

支持更多的教程，至于官方的教程不适合新手，或者新手看不懂，那是常态了

01-1-从GDS到godot着色器语言
首先，我们得明白：godot着色器语言是由“变量”与“函数”所构成的
复习一下：在GDS中，变量是由关键字var声明，并且可以直接赋值

再回忆一下一些常用的数据类型：
int(整数)float(浮点数)bool(布尔值)string(字符串)Vector2(二维向量)Vector3(三维向量)
而在godot着色器语言中，声明变量的关键字是varying，

对比GDS：
float(浮点数)bool(布尔值)Vec2(二维向量)Vec3(三维向量)！int(整数)！
可以看出，在向量方面，godot着色器语言采用简写。并且godot着色器语言没有string数据类型！！！
注：在godot着色器语言中int处于非常尴尬的处境，所以我们权当没有int这个数据类型
（原因之后再讲）
而且godot着色器语言非常“讲究”，在声明变量时，你必须规定它的数据类型

并且你无法直接赋值！！！varying声明的变量必须在顶点函数内才能赋值！！！
再回想一下GDS的函数知识：
它使用func声明

而godot着色器语言还是很“讲究”！
首先，它不需要用关键字声明。但你必须规定它返回的数据类型，这意味着你必须写上return返回值
！甚至连函数传入的参数都得规定数据类型！

（如果返回的数据类型是void[空]，则可以不写return）
想必你已经发现了，为什么godot着色器语言的语句的末尾要加” ; ”呢？
在GDS中，一段语句的结束可以用换行表示，而在godot着色器语言中，在语句末尾加
” ; ”表示结束，这也意味着你可以在一行表示多个语句：

一些要点：
（1）为什么不建议使用int?
首先，你会发现varying是无法规定int的：

而且，在后期计算中，得到的结果大多为浮点数（小数），所以int根本不适用，所以没有特殊要求，不建议使用int数据类型。

（2）变量赋值相关知识：
我们可以在函数外声明一个变量，再在顶点函数内赋值

（至于什么是顶点函数，下下节课再讲）
我们也可以直接在任意函数内声明变量并赋值，这样不用varying关键字：

但请注意，在函数内声明的变量（没有varying关键字的变量）是内部变量（私有）；而用
varying声明的变量为全局变量。（关于作用域问题请参照GDS【新手向教程】）
贴吧有图片数量限制，接下文

接上文
（2）函数相关知识：
首先，在godot着色器语言中函数内容是以{}（大括号）括起，这意味着缩进不在重要：

（以上方法均不会报错）
声明的函数也只能在其它函数内调用

（3）绝对性概述：
所有已被储存信息的"name"(或者叫"key")均不可以重复，例如：
全局变量名与局部变量名不能重复！

变量名与函数名不能重复！

变量名与参数名不可重复！

.........

（4）执行顺序概述
godot着色器语言是严格意义上的
自上而下执行！
自上而下执行！！
自上而下执行！！！
所以这意味着，在使用变量和函数前，请确定已声明它们：

错误：

错误：

本节完

大佬

01-2-“噪声图”与“法线贴图”
在正式开始前编写着色器语言前，我们先来了解一些基础知识：
首先，什么是“噪声图”？
你在godot中生成的噪声图是一张看起来杂乱的图片

它一般用于生成一些特殊图形，其原理很简单，主要是依靠了“灰度值”
灰度值表示的就是一个图片每个像素的“明暗度”，它的值在0到255间
灰度值虽然叫“灰度”值，但它表示的是“白度”，黑色的灰度值为0，白色的灰度值为255
想象一下，如果把上面的噪声图上像素的灰度值叠加到一个平面上，大致是这样：

（也就是像素点暗淡的地方位置低，像素点鲜亮的地方位置高）
噪声图也是可以有一定形状的，这时，我们一般称这个噪声图为“遮罩”：

它转化出来大致这样：

当然，彩色图片也是可以的：
（就比如官方的图标）

（图中较暗的部分位置低，较亮的部分位置高）
我们再来了解“法线贴图”
“法线贴图”看起来就是一张花花绿绿的图片，但它的意义重大，
你只需要给普普通通的贴图或网格添加一个法线贴图，它就有了凹凸的质感

为什么会这样呢？
先看一张图：

上面这张图，它并没有什么特殊的，然而当我添加一些线条后：

你就会发现，其中有些图案好似“凸”出来了
再观察下字，你会发现，这是反的，而倒过来后：

你会发现它又好似“凹”下去了
为什么呢？因为你的大脑会根据线条的明暗关系，自动绘制立体图！！
而电脑也差不多，只不过它所识别的是花花绿绿的“法线贴图”罢了。
这就是“噪声图”与“法线贴图”，下节我们再正是编写代码
本节完

学习曲线太抖，入坑需谨慎

技术类的都支持

以前一直都不知道还有varying这么个东西，都只用过uniform和const

，看来我看文档还是有点不太仔细

02-1-利用噪声图制作3D丘陵
其实按照道理来说，我们应该先学2D的，但为了方便理解，我们先来研究3D
首先，创建一个新项目，并添加如下节点：

把MeshInstance的mesh设置为PlaneMesh（平面）

然后给它添加一个着色器脚本

为了方便编辑，把视图改为线框：

接下来，先别急着写代码，我们先来了解一些知识：
一个着色器脚本不可缺少的就是Shader types（着色器类型），它有点像它共有三种类型：
· spatial: 3D渲染.
· canvas_item: 2D渲染.
· particles: 粒子渲染
每种类型都有自己独特的内置属性方法
这里我们是渲染3D场景，所以用spatial
Processor（处理器）
这就是着色器语言的核心，Processor可以使一个物体发生变换，有三个处理器，但它们默认是空的，你可以在特定的着色器类型下，重写特定的Processor，如下：
Vertex processor（顶点处理器）
它可以作用顶点，如更改顶点位置
Fragment processor（片段处理器）
它可以作用片段（即物体表面），如更改物体颜色
Light processor（光照处理器）
它可以作用光线
首先，点击shader进入着色器编辑界面，声明着色器类型：

添加一个顶点处理器：

（顺便介绍了注释）
注意，处理器的返回值只能是void!!!
在顶点处理器中添加如下代码：

添加完这段代码后，你会发现，整个平面升高了，别急，让我们来解读一下这段代码：
VERTEX是获取这个mesh所有顶点的局部坐标
所以上面这段代码可以理解为：将这个mesh所有顶点向上提高0.5
而什么是局部坐标呢？
观察方向轴

绿色为y轴，红色为x轴，蓝色为z轴，而局部坐标的原点就在mesh中心

接下文

接上文
明白坐标轴之后，我们再把vertex()写成这样：

注：着色器语言中if和GDS的if书写形式上有些区别
你会发现：

mesh倾斜了
回顾刚才那段代码，大致意义为：
如果一个顶点的x轴位置大于0，则这个顶点的y轴位置升高0.5

相信你对vertex()有了基本的认识，但你如果还困惑的话，
你可以直接理解为：vertex()会将每个顶点进行运算。也就是说，在上面的例子中，我们的mesh有四个顶点，这意味着vertex()运行了4次！！！

接下来我们正式开始做“丘陵”
但4个顶点还是太少，无法绘制出复杂的图形，回到MeshInstance的属性面板，增加细分：

接下来我们就要使用一个关键字：uniform，它可以声明变量，很像GDS的export，可以在编辑器中修改它声明的变量。

uniform声明一个变量，使它的类型为sampler2D

接着在属性面板中设置tex，把它设置成噪声图（不用更改其他属性）:

声明个变量height,紧接着把vertex()改为：

至于这段代码什么意思呢？
这节课暂时不讲，因为它太重要了，所以下节单独来讲！！！！

改完后你会发现，mesh变得凹凸不平了

但为了后期更改和满足更多人的需要：
再用uniform声明一个变量，用于控制“高度倍数”：

这样，你就可以在属性栏中更改高度了。

但把视图改回来后你会发现，你做的丘陵根本就没有凹凸感！！！

这是因为你仅仅改变了顶点的位置，但没计算光线，至于如何计算光线，下下节再讲

至于下节，我们来深度讨论一下UV的概念

（主要就是上面这张图的texture()方法）
本节完

02-2-关于UV介绍
我们先来看一下上节留下的这张图：

首先我们简单地看一下这段代码：
虽然你还看不懂texture()方法，但我们依旧可以看出：
我们首先将height赋值为图片tex（就是我们的噪声图）某一处像素点的y坐标
然后我们将当前顶点的y坐标加上height
接着，我们来了解一下texture()的用法，你可以直接理解为：
texture()可以获取一张图片上一个像素点的坐标和颜色等信息
（注：因为一般的图片是平面所以没有高度值，所以一般y轴所表示的是“灰度值”）

texture()可以传入的参数有多种形式，这里我们讲最简单的一种，也就是上图那种：
texture(图片，二维向量)，这样就可以获取图片上某个像素点的属性
而texture(tex, VERTEX.xz / 2.0 ).y就是获取这个像素点的y轴值（灰度值）

这时你可能会问：
“tex我知道，那是我们上节声明并设置的噪声图，但 VERTEX.xz / 2.0是什么？”
不要急，我说过了texture(图片，二维向量)，所以VERTEX.xz / 2.0是个二维向量！！
咱们一步一步来：

VERTEX.x知道吧，它表示当前顶点的x坐标；
VERTEX.z，也就是当前顶点的z坐标；

你得明白，多个属性是可以写在一起的！它们会组成一个向量！！
所以VERTEX.xz等价于vec2(VERTEX.x,VERTEX.z) !!!
以此类推：VERTEX.xzy等价于vec3(VERTEX.x,VERTEX.z,VERTEX.y)

所以VERTEX.xz就是一个二维向量！！！
而那个 / 2.0就代表除以2.0
而向量除以一个常数，就是向量内每个参数都除以它，如：
vec2(VERTEX.x,VERTEX.z) / 2.0即为：
vec2(VERTEX.x / 2.0,VERTEX.z / 2.0)
（注：因为VERTEX.x或VERTEX.z以及其它坐标属性，非特殊情况下均为为float[浮点数]，所以在运算时，不建议直接写int[整数]，例如"/ 2"建议写成"/ 2.0"）

了解完texture()后，你可能会问：
为什么要给二维向量VERTEX.xz除以2呢？
！！！
除以的这个2其实是指Mesh的大小：

而为什么要除以Mesh的大小呢？？
因为要防止图片重复或损失！
什么是重复或损失呢？？？

本节课重点来了！！！
打起精神！ψ(*｀ー´)ψ
为了方便演示，我把噪声图替换为官方图标：

我还是height = texture(tex, VERTEX.xz / 2.0 ).y，结果：

如上图所示，图片映射到平面后还是原本的长宽比例，但被切成了4分，位置变化了！！

别急，我们再来看如果我改为height = texture(tex, VERTEX.xz).y我不除以2了：

如上图所示，图片映射到平面后还是原本的长宽比例，但在平面上出现了4个！！！

这到底是怎么回事呢？
别急，先听我说段故事：在那个图形刚刚发展的年代，搞图形的程序员们被一个问题深深的困扰着：众所周知图片是由像素点组成的（不考虑矢量图），这意味着图片是大小不一的，所以在应用时总会出现坐标转换问题，最后人们想出了一个非常简单的方法解决这一问题：将图片使用UV坐标
uv坐标的原点在图片左上角，无论图片长宽如何，永远长到达1，宽到达1，也就意味着图片右下角坐标永远为（1,1），所有图片的UV大小相等！！

明白这些基础知识后，我们再来看：UV大小只能是0到1吗？
不，UV坐标是无限长的，因为图片可以在平面内无限重复：

接下来核心来了：
因为我们Mesh的大小是默认的2*2
所以坐标大致是这样的：

接下文

接上文
然后我们再观察height = texture(tex, VERTEX.xz ).y;
你会发现每次获取的图像的像素点UV位置是VERTEX.xz
也就是我们Mesh的顶点的x和z坐标
将上图Mesh中我标注出的4个顶点，传入UV图坐标中：

你会发现，这和生成图一致：

为了确认这点，我们再来看一下height = texture(tex, VERTEX.xz / 2.0 ).y

这也和生成图一致：

相信读到这里，你一定明白UV的工作原理了吧

当然，还有一个UV属性

如果你直接写UV属性的话，图片将会根据Mesh大小自动拉伸，占满Mesh:

这就是UV，自行更改试试吧

本节完

#注意：
如果你的mesh和texture的比例不同的话，譬如一个是正方形，一个是矩形，着色器会自行拉伸texture，如：

日	一	二	三	四	五	六

【着色器介绍】Godot着色器从入门到入门

扫二维码下载贴吧客户端