Unity使用ShaderGragh制作透明指针_shadergraph透明效果

1 概述

Shader动画，有时候比Transform的动画更加高效

1 不会像正常对象操作Transform额外占用一个Batches
2 HDRP的Shader去掉 Receieve Decal 属性可以节约一个Batches，默认是两个Batches

2 使用环境

Unity 2021.3 + HDRP管线

3 制作流程

3.1 创建一个ShaderGragh

右键单击，创建一个ShaderGragh【根据当前使用的管线，创建后可以继续调整】

优点：可以创建多个管线的Shader资源，方便切换或者升级管线
节点式的编辑器，类似UE的蓝图编辑器，可视化编程比较直观，暴露参数简单

3.2 打开ShaderGraph编辑器

点击创建的Shader，选择Open Shader Editor，打开ShaderGraph编辑器

3.3 编辑器界面介绍

左侧菜单如下：
Save Asset – 保存资源 [点击保存按钮后，Shader才会进行编译操作，否则不会有变化！]
Save As – 另存为
Show In Project – 在Porject文件夹高亮

右侧菜单如下：
ColorMode – 当前节点的预览颜色
Blackboard – 暴露参数的面板
Graph Inspector – 细节面板，查看节点和Shader的信息、编辑参数
MainPreview – 材质效果预览面板

一些Blackboard下的参数新增后默认值为0，颜色默认分为黑色，可以修改到合适的值，比如默认白色。

3.4 Shader节点和部分信息如下

锚点参数：0.5，0.5
平铺控制：1，1
偏移控制：0，0
颜色控制：白色
透明度：1

3.5 常用节点介绍

旋转节点【Rotate】：对UV进行操作，旋转贴图
平铺和偏移节点【TilingAndOffset】：对UV进行操作，平铺或者平移贴图
乘法节点【Multiply】：对贴图进行一个颜色叠加

编辑器内部，点击右键创建节点【CreateNode】，具有搜索功能

3.6 使用Shader

首先新建材质，然后找到ShaderGraph下的RotateShader，点击选择即可。

3.7 贴图规范

有一句话叫做：黑透白不透。
利用黑底贴图做底，其他部件使用白色，Shader透明类型选择Additive，即可完美剔除黑色部分。

问：白色部分调节颜色变成黑色会完全透明，怎么做才能获得黑色效果？
答：颜色不动，将Alpha值调成-1即可。

以下是两个Mesh的Shader叠加效果

这里做了一个透明底黑箭头的贴图【错误】做对比，效果很不理想。

两种贴图的对比：
左侧：正确；
右侧：错误；

4 控制Shader旋转

4.1 API介绍

主要使用函数 material.SetFloat(Key_Angle, angle_);
Key对应ShaderGraph的暴露变量的Reference字段，创建变量后会自动分配，也可以自行修改，如下图所示：

4.2 示例代码：

using UnityEngine;

public class SG_Rotate : MonoBehaviour
{
	/// <summary>
	/// Shader - Key引用
	/// </summary>
	public static string Key_Angle = "_FE_Angle";

	[Header("仪表材质")]
	public Material material;

	[Header("指针角度")]
	public float Angle;

	[Header("顺时针转动")]
	public bool IsRight = false;


    void Update()
    {
		Angle += 10 * Time.deltaTime;

		if(Angle >= 360 || Angle <= -360)
		{
			Angle= 0;
		}

		SetAngle_(Angle, IsRight);
	}

	void SetAngle(float angle_)
	{
		Angle = angle_;

		SetAngle_(Angle, IsRight);
	}

	void SetAngle_(float angle_, bool isRight)
	{
		if (!material)
		{
			return;
		}

		if (isRight)
		{
			angle_ = -angle_;
		}

		material.SetFloat(Key_Angle, angle_);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

3.9 Shader Demo资源下载

透明Shader指针旋转动画