(摘) Godot 免费跨平台游戏引擎: Shader 着色器

着色器是一个神奇的存在。官方资料看这里

一个老外的分步视频

The Book of Shaders

Shader，是运行在GPU上的程序，中文称为着色器。它的主要用途是对三维物体进行着色处理，对光与影进行计算，以及控制纹理颜色的呈现等，最终，将游戏引擎中的几何数据转化为屏幕上的模型、场景以及特效。

着色器被誉为照亮虚拟世界的"魔法"。 着色器还可以用来做后期处理，类似PS。

着色器shader的编写需要使用着色语言GL Shader Language（GLSL），GLSL的语法与C语言很类似。

GLSL 代表 openGL Shading Language，openGL 着色语言

Godot所使用的的着色器语言和GLSL非常相似，并且增加了一些功能又稍稍降低了复杂度。

入口：例如sprite中，Material –> 新建ShaderMaterial –> 新建Shader 即进入编辑环境

它能做什么

快速定位顶点
快速计算颜色
快速计算光照
进行大量的数学计算

它不能做什么

绘制外部网格
从当前像素(或顶点)访问其他像素
储存之前的迭代
动态更新(可以，但是需要编译)

Godot中，你可以重写三个函数来控制着色器的运作：

vertex()  顶点函数用于修改每个顶点信息,运行在网格中的所有顶点上

fragment() 片段函数

light() 光照函数,用于每个像素和每束光照

shader_type canvas_item;

uniform float time_factor = 0.80;
uniform vec2 amplitude = vec2(5.0,20.0);

void vertex(){
	//VERTEX.x += cos(TIME * time_factor + VERTEX.y + VERTEX.x) * amplitude.x;
	//VERTEX.y += sin(TIME * time_factor + VERTEX.x + VERTEX.y) * amplitude.y;
}

COLOR = texture(TEXTURE, UV); //从纹理读取

COLOR.b = 1.0; //设置蓝色通道值为1.0

简单的两句话，就让它“摇摆”

它的语法就不是GDScript那样类似python了。语句后带分号，象是c系列。也使用{}进行区隔。

varying 变量声明：varying float a;

float bool Vec2 Vec3 int

在函数内声明的变量没有varying关键字，是内部变量。用varying声明的为全局变量。

函数

float sum(float a, float b){
	float o;
}

spatial 3D渲染

canvas_item 2D渲染

particles 粒子渲染

//顶点处理器

void vertex() { 
   
	VERTEX.y += 0.5;    //VERTEX是获取这个mesh所有顶点的局部坐标

}  

uniform用于逻辑语言与着色器之间传递数据

shader_type canvas_item;

//每个像素点都会进行一次fragment函数
void fragment(){

}

COLOR shader内置属性，表示像素点的颜色

UV shader内置属性，表示当前像素点的坐标。它是一个常量，不能修改。 左上角为(0.0,0.00)，右下角(1.0,1.0)，正中(0.5,0.5)

texture函数是shader内置函数，传入纹理和UV值，可以返回UV坐标上的颜色(vec4)

COLOR.rgb=vec3(1.0,1.0,1.0); 这是一种简洁的写法，给当前点一个rgb颜色

内置函数

render_mode 渲染模式

UV 取值在0-1之间，从左到右，由上到下。

先指定着色器类型，再通过fragment函数为每个像素设置一个颜色。

shader_type canvas_item;

void fragment(){
	COLOR = vec4(UV,0.5,1.0);
}

COLOR即为当前点的颜色值，也可以单独设置rgba: COLOR.r = 1.0;

通过语句读取当前点的颜色: COLOR = texture(TEXTURE, UV);

uniform 统一值输入，用于在界面中设置着色器的变量

在脚本中，可以进行参数设置

#着色器
shader_type canvas_item;

uniform float al = 0.8;

void fragment(){
	COLOR = vec4(UV.y,UV.y,UV.y,al);
}

#脚本中
xx.material.set_shader_param("al",0.1)

设置顶点的偏移

void vertex() {
	VERTEX += vec2(0.0,10.0);
}

通过与时间的结合，实现了一个圆形围绕移动

void vertex() {
   VERTEX += vec2(cos(TIME)*50.0, sin(TIME)*50.0);
}

UV: 点坐标

sampler2D: 用于绑定2D纹理的采样器类型，浮点值

SCREEN_TEXTURE: 屏幕截图纹理

SCREEN_PIXEL_SIZE:

SCREEN_UV: 屏幕UV坐标

COLOR： 每个像素的输出颜色

VERTEX: 顶点的位置

POINT_SIZE: Point原语的大小

POINT_COORD: 绘制Point基元时在点上的位置。

FRONT_FACING: 如果原始的正面，则为真。

TIME: 着色器启动后的时间

COLOR = textureLod(SCREEN_TEXTURE, SCREEN_UV, 0.0);

mat2 2x2矩阵，按主要顺序排列。

uniform 外部可设置参数

varying 变量

const 常量

fragment函数中

VIEWPORT_SIZE 视区大小(以像素为单位)

VERTEX 来自顶点函数的顶点(默认情况下，在视图空间中)

NORMAL 来自于顶点函数的法向量(默认情况下，在视图空间中)

UV 来自顶点功能的UV

COLOR 来自顶点功能的颜色

ALPHA 透明度

SCREEN_TEXTURE 内置纹理，用于从屏幕上读取

SCREEN_UV 屏幕当前像素的UV坐标

相关代码

vec2 uv = fragCoord.xy/iResolution.xy; // 将像素位置映射到0-1

vec4 fragColor = texture(iChannel0, uv); // 获取纹理在uv出的像素颜色

fragColor.r = abs(sin(iTime)); // 让红色分量的值随时间改变。

fragCoord.xy / iResolution.xy 会将坐标转换到 [0, 1] 之间。

uv = 2.0 * uv - 1.0 将坐标转换到 [-1, 1] 之间，中央为原点（0，0）

这里讲了一个烧纸效果，空了学习一下 https://www.jianshu.com/p/bb09ccd7f82f

最简单的几个效果学习一下 https://www.jianshu.com/p/a7e1b82eeb37

基础知识 https://www.jianshu.com/p/9b2c81d4c07e

探寻着色器shader编程的本质 https://www.bilibili.com/video/av969443112/

fragment 内建函数:

COLOR = texture(TEXTURE, UV); //默认值

NORMALMAP = texture(NORMAL_TEXTURE, UV).rgb; //法线贴图

in vec4 FRAGCOORD 片段坐标，像素调整。

in sampler2D TEXTURE 默认的2D纹理

in vec2 UV 来自顶点功能的UV。

in sampler2D NORMAL_TEXTURE 默认2D法线纹理。

in sampler2D SCREEN_TEXTURE 屏幕纹理

godot的shader中没有提供鼠标位置相关函数或语句，我们暂时只能通过参数的方式传值。

//旋转效果
shader_type canvas_item;
render_mode unshaded;

uniform float pivot_x : hint_range(0.01,0.99) = 0.5;
uniform float pivot_y : hint_range(0.01,0.99) = 0.5;
uniform float angular_speed  = 1.0;

void vertex(){
    vec2 pivot = vec2(pivot_x, pivot_y);
    float rot = TIME * angular_speed; 
    UV -= pivot;
    UV *= mat2(vec2(sin(rot), -cos(rot)), vec2(cos(rot), sin(rot)));
    UV += pivot;
}

实现图片随着窗口放大缩小

shader_type canvas_item;

uniform float scale_ratio = 1.0;

vec2 rot(vec2 uv, float a){
    return vec2(uv.x * cos(a) - uv.y * sin(a), uv.y * cos(a) + uv.x * sin(a));  
}

void fragment(){
    vec2 uv = UV/scale_ratio;
    uv.y*=scale_ratio;
    vec4 cc = texture(TEXTURE, rot(uv, 30)); 
    COLOR = cc;
}

在gd脚本中修改参数

extends TextureRect

var scaleRatio = 0;

func _ready():
    var winSize = OS.window_size;
    scaleRatio = winSize.x/winSize.y;

func _on_game_bg_resized():
    var winSize = OS.window_size;
    var newScaleRatio = winSize.x/winSize.y;
    material.set_shader_param('scale_ratio', scaleRatio/newScaleRatio);

2D游戏中制作动态水效果 https://www.jianshu.com/p/f1f244364ee8