unity渐变shader ware

大家好，我是阿赵。之前一直有网友问我拿昼夜变化demo的源码。但由于那个是几年前突然兴起写的一个例子，也没有特意保存，后来换电脑了就找不到了。
也正是这种原因，所以我最近写文章，都会把源码直接贴上来。这样其实是为了方便我自己以后有需要时能直接找回来而已。
昼夜变化的例子里面，分成了2个部分：
1、天空盒的过渡效果
2、LightMap的过渡效果
由于那个例子是当时随手写的，LightMap过渡的部分，实在是通用性不强，所以我暂时不打算公开源码，等以后考虑得成熟一点再说吧。
天空盒的过渡效果倒是非常的简单，简单到单独写一篇文章来接受我也觉得有点没东西写，所以这篇文章会顺便介绍一下CubeMap的一些扩展知识，和不使用Unity内置天空盒，而用一个球体作为天空盒的做法。
先来看看效果：

天空盒渐变

一、天空盒渐变过渡的shader实现

1、完整Shader

Shader "azhao/SkyBoxTrans"
{
	Properties
	{
		_SkyTex1("SkyTex1",CUBE) = "white"{}
		_SkyTex2("SkyTex2",CUBE) = "white"{}
		_SkyRange("SkyRange",Range(0,1)) = 0

	}
		SubShader
		{
			Tags { "RenderType" = "Opaque" "Queue" = "BackGround" }
			LOD 100

			Pass
			{
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag


				#include "UnityCG.cginc"

				struct appdata
				{
					float4 vertex : POSITION;
					float3 normal : NORMAL;
				};

				struct v2f
				{
					float4 vertex : SV_POSITION;
					float3 worldPos : TEXCOORD0;
					float3 worldNormal : TEXCOORD1;
				};

				samplerCUBE _SkyTex1;
				samplerCUBE _SkyTex2;
				float _SkyRange;



				v2f vert(appdata v)
				{
					v2f o;

					o.vertex = UnityObjectToClipPos(v.vertex);
					o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
					o.worldNormal = UnityObjectToWorldNormal(v.normal);
					return o;
				}

				float4 frag(v2f i) : SV_Target
				{
					float3 worldViewDir = UnityWorldSpaceViewDir(i.worldPos);
					worldViewDir = normalize(worldViewDir)*-1;
					float3 worldReflect = reflect(worldViewDir,i.worldNormal);
					float4 col = texCUBE(_SkyTex1, worldReflect)*(1 - _SkyRange) + texCUBE(_SkyTex2, worldReflect)*_SkyRange;
					return col;
				}
				ENDCG
			}
		}
}

2、说明

这个shader实在是非常的简单，其实就是采样了2张CubeMap，然后通过一个插值来做过渡而已。
那么使用的时候，就可以用C#写一个脚本，通过shader名创建一个Material材质球，并且用RenderSettings.skybox赋值给RenderSettings的全局天空盒。然后通过给材质球的_SkyTex1和_SkyTex2赋值，再通过_SkyRange来控制2个skybox之间的插值过渡就可以了。
由于过于简单，所以C#代码我就不写了。

二、第二种天空盒做法

如果不想用Unity的RenderSettings里面的skybox作为天空盒显示，而想通过做一个很大的球体作为天空盒，也是可以的。

这里我用Unity自带的Sphere创建一个球体，并且把它的缩放放大到5000倍，然后把上面用于天空球的材质赋给物体，再从摄像机里面看，会发现看不到这个天空盒。

看不到的原因有2个：

1.由于默认的shader的cull是back的，而unity自带的球体法线方向是向外的，所以摄像机在球体内部看不到

2.把球体放大5000倍之后，摄像机默认的远端裁剪是1000，这时候已经超出了视锥的裁剪范围了。

所以需要对cull和 o.vertex.z做修改

1.cull 改成front

2.由于o.vertex = UnityObjectToClipPos(v.vertex);这里已经是转换成裁剪空间的坐标了，所以我们把o.vertex.z = 0;让球体在裁剪空间的z坐标变成0，那么摄像机就肯定看得到了。

最后要注意的是，由于这个球是模拟天空盒来渲染的，所以需要修改渲染队列"Queue" = “BackGround”

最后，由于是从内部看，所以上下会颠倒，所以在计算UV的时候，就不需要乘以-1了。

完整的shader

Shader "azhao/SkyBoxModelTrans"
{
	Properties
	{
		_SkyTex1("SkyTex1",CUBE) = "white"{}
		_SkyTex2("SkyTex2",CUBE) = "white"{}
		_SkyRange("SkyRange",Range(0,1)) = 0

	}
		SubShader
		{
			Tags { "RenderType" = "Opaque" "Queue" = "BackGround" }
			LOD 100

			Pass
			{
				cull front
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag


				#include "UnityCG.cginc"

				struct appdata
				{
					float4 vertex : POSITION;
					float3 normal : NORMAL;
				};

				struct v2f
				{
					float4 vertex : SV_POSITION;
					float3 worldPos : TEXCOORD0;
					float3 worldNormal : TEXCOORD1;
				};

				samplerCUBE _SkyTex1;
				samplerCUBE _SkyTex2;
				float _SkyRange;



				v2f vert(appdata v)
				{
					v2f o;

					o.vertex = UnityObjectToClipPos(v.vertex);
					o.vertex.z = 0;
					o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
					o.worldNormal = UnityObjectToWorldNormal(v.normal);
					return o;
				}

				float4 frag(v2f i) : SV_Target
				{
					float3 worldViewDir = UnityWorldSpaceViewDir(i.worldPos);
					worldViewDir = normalize(worldViewDir);
					float3 worldReflect = reflect(worldViewDir,i.worldNormal);
					float4 col = texCUBE(_SkyTex1, worldReflect)*(1 - _SkyRange) + texCUBE(_SkyTex2, worldReflect)*_SkyRange;
					return col;
				}
				ENDCG
			}
		}
}

三、CubeMap制作

上面贴完代码了，下面就开始扩展内容了。首先来看看CubeMap是怎样制作的。Unity内部提供了2种方式

1、使用6张贴图生成CubeMap

所谓的CubeMap，Cube是立方体的意思。一个立方体有6个面，所以传统的CubeMap做法，就是给Cube的这6个面分别贴上“上下左右前后”的贴图，让6个面形成一个无缝连接的Cube。

Unity引擎里面可以创建这种格式的CubeMap

把6张图按照指定的方位拖到框里面，就可以看到效果

值得注意的是，Unity给了一个警告：

这个警告的意思大概是降低face size是一个毁灭性的操作，你需要重新指定这些贴图来修复分辨率的问题。

这是什么意思呢？可以看看这个cubemap文件，会发现这个文件非常的大。实际上这个CubeMap里面的6张贴图并不是引用关系，而是内置在CubeMap里面的。在指定图片的时候，会发现有个Face Size的选项，这个选项规定了拖进去的图片生成CubeMap时的分辨率，Unity会将图片修改成指定的分辨率，并将6张图合并生成一个CubeMap文件。
如果在已经指定生成好了CubeMap之后，再去修改Face Size，其实是并不会直接生效的，还需要把6张贴图重新指定一次，才能生成新的CubeMap文件。
这种生成CubeMap的方式是Legecy的，也就是Unity旧版本的支持方式，新版本的Unity官方并不是特别的建议使用这种方式的CubeMap指定方式。不过由于这种是传统的CubeMap，所以资源特别的好找。

2、使用1张全景贴图生成CubeMap

接下来这种，Unity比较建议的生成CubeMap方式。

只用一张贴图，然后在导入贴图选项里面把TextureShape指定为Cube

这样同样也会在Unity引擎里面生成一个CubeMap。

但实际上并没有额外的cubemap文件生成，还是原来的png贴图文件。这样的好处是，如果我们想修改这张CubeMap的分辨率，直接在贴图导入设置里面修改就可以了。

3、6张贴图的Cube转换成1张全景图

如果我们已经有了6张贴图组成的CubeMap，想把它变成一张全景图，需要怎样操作呢？
我这里写了一个脚本：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
public class CreateCubeMapTex : EditorWindow
{
    static private CreateCubeMapTex _instance;

    public static CreateCubeMapTex Instance
    {
        get
        {
            if(_instance == null)
            {
                _instance = EditorWindow.GetWindow<CreateCubeMapTex>();
                _instance.maxSize = _instance.minSize = new Vector2(500, 200);
                _instance.titleContent = new GUIContent("CubeMap转换全景图");
            }
            return _instance;
        }
    }
    [MenuItem("Tools/CubeMap转换全景图")]
    static void ShowWin()
    {
        CreateCubeMapTex.Instance.Show();
    }
    private Cubemap cubemapTex;
    private Object folder;
    private string[] texTypes = new string[] { "jpg", "png", "tga" };
    private int texTypeIndex = 0;
    void OnGUI()
    {
        GUILayout.BeginHorizontal();
        GUILayout.Label("需要转换的CubeMap",GUILayout.Width(120));
        cubemapTex = (Cubemap)EditorGUILayout.ObjectField(cubemapTex, typeof(Cubemap), false, GUILayout.Width(200));
        GUILayout.EndHorizontal();
        GUILayout.BeginHorizontal();
        GUILayout.Label("保存的文件夹", GUILayout.Width(120));
        folder = EditorGUILayout.ObjectField(folder, typeof(Object), false, GUILayout.Width(200));
        GUILayout.EndHorizontal();
        GUILayout.BeginHorizontal();
        GUILayout.Label("选择保存的类型:", GUILayout.Width(120));
        texTypeIndex = EditorGUILayout.Popup(texTypeIndex, texTypes, GUILayout.Width(200));
        GUILayout.EndHorizontal();
        if (GUILayout.Button("转换", GUILayout.Width(80), GUILayout.Height(30)))
        {
            CreateFun();
        }
    }

    private void CreateFun()
    {
        if (cubemapTex == null)
        {
            ShowTips("请先指定需要转换的cubemap");
            return;
        }
        if (folder == null)
        {
            ShowTips("请先指定保存的文件夹");
            return;
        }
        int width = cubemapTex.width;
        int height = cubemapTex.height;

        //生成一个空物体，上面挂摄像机、skybox组件
        GameObject tempGo = new GameObject();
        Camera cam = tempGo.AddComponent<Camera>();
        //生成一个新的材质球，使用unity内置的shader：Skybox/Cubemap
        Skybox skybox = tempGo.AddComponent<Skybox>();
        Material mat = new Material(Shader.Find("Skybox/Cubemap"));
        //把指定的CubeMap赋予给材质球，然后材质球赋予给skybox组件
        mat.SetTexture("_Tex", cubemapTex);
        skybox.material = mat;
        //让摄像机除了指定的skybox，其他东西都看不到
        cam.cullingMask = 0;

        //新建一张RenderTexture，用于摄像机渲染输出
        RenderTexture cubemap = new RenderTexture(width*2, height*2, 32);
        cubemap.dimension = UnityEngine.Rendering.TextureDimension.Cube;
        //把摄像机看到的东西渲染输出到RenderTexture
        cam.RenderToCubemap(cubemap, 63, Camera.MonoOrStereoscopicEye.Mono);
        //再新建一张RenderTexture，用于接受经过转换后的全景图
        RenderTexture equirect = new RenderTexture(width*2, height, 32);
        cubemap.ConvertToEquirect(equirect, Camera.MonoOrStereoscopicEye.Mono);

        RenderTexture origRT = RenderTexture.active;
        RenderTexture.active = equirect;
        //创建需要保存的Texture2D，并复制像素
        Texture2D tex = new Texture2D(equirect.width, equirect.height, TextureFormat.ARGB32, false, true);
        tex.ReadPixels(new Rect(0, 0, tex.width, tex.height), 0, 0);
        RenderTexture.active = origRT;
        GL.Clear(true, true, Color.black);
        tex.Apply();

        //根据指定的保存格式，保存图片
        byte[] bytes = null;
        if(texTypeIndex == 0)
        {
            bytes = tex.EncodeToJPG();
        }
        else if(texTypeIndex == 1)
        {
            bytes = tex.EncodeToPNG();
        }
        else if(texTypeIndex == 2)
        {
            bytes = tex.EncodeToTGA();
        }
        string savePath = AssetDatabase.GetAssetPath(folder);
        savePath = savePath + "/" + cubemapTex.name + "_Panorama."+texTypes[texTypeIndex];
        System.IO.File.WriteAllBytes(savePath, bytes);

        AssetDatabase.SaveAssets();
        AssetDatabase.Refresh();

        //删除刚才生成的临时文件
        GameObject.DestroyImmediate(tempGo);
        GameObject.DestroyImmediate(mat);
        GameObject.DestroyImmediate(cubemap);
        GameObject.DestroyImmediate(equirect);

        ShowTips("生成全景图成功，地址:" + savePath);
    }


    private void ShowTips(string str)
    {
        EditorUtility.DisplayDialog("提示", str, "确定");
    }
}

这个脚本放在Editor文件夹里面，然后就可以在菜单”Tools/CubeMap转换全景图”里面打开这个工具窗口。

指定CubeMap、保存的文件夹和需要保存的图片格式，就可以转换CubeMap为一张全景图了。

刚才6张的skybox贴图，经过转换后，变成了这样一张全景图。
虽然很多人拿到工具能用就行，但原理我也解释一下吧：
1.我没找到Unity有直接转换的方法，但Unity有提供把摄像机看到的东西渲染到Cube格式的RenderTexture的方法，所以这个工具的核心就是camera.RenderToCubemap方法
2.为了在转换过程中不受到其他场景里面的元素的影响，所以我新建了一个空的GameObject，并给他加上了Camera组件和SkyBox组件。Camera组件指定cullingMask = 0让它只能渲染指定的Skybox。然后SkyBox组件是可以让摄像机不是读取RenderSetting里面的SkyBox，而是挂在组件上的Skybox
3.剩下的事情就很简单了，RenderToCubemap把摄像机看到的东西渲染到Cube格式的RenderTexture，做转换，然后保存RenderTexture就行了。

四、CubeMap旋转

上面使用CubeMap采样的shader，都是通过世界空间观察方向和世界法线做反射计算，得到的值作为UV的，所以如果我们旋转球体本身，会发现天空球的方向是固定的，并不会跟随物体旋转而旋转。
这里再提供一个可以旋转采样CubeMap的UV的方法。其实就是构造一个旋转矩阵，让反射方向沿着某个轴旋转一定的角度。
完整Shader

Shader "azhao/SkyBoxModelTransRota"
{
	Properties
	{
		_SkyTex1("SkyTex1",CUBE) = "white"{}
		_SkyTex2("SkyTex2",CUBE) = "white"{}
		_SkyRange("SkyRange",Range(0,1)) = 0
		_RotaAxis("RotaAxis",Vector) = (0,1,0)
		_RotaAngle("RotaAngle",Range(-1,1)) = 0
		_RotaCenter("RotaCenter",Vector) = (0,0,0)
	}
		SubShader
		{
			Tags { "RenderType" = "Opaque" "Queue" = "BackGround" }
			LOD 100

			Pass
			{
				cull front
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag


				#include "UnityCG.cginc"

				struct appdata
				{
					float4 vertex : POSITION;
					float3 normal : NORMAL;
				};

				struct v2f
				{
					float4 vertex : SV_POSITION;
					float3 worldPos : TEXCOORD0;
					float3 worldNormal : TEXCOORD1;
				};

				samplerCUBE _SkyTex1;
				samplerCUBE _SkyTex2;
				float _SkyRange;
				float3 _RotaAxis;
				float _RotaAngle;
				float3 _RotaCenter;

				float3 RotateAroundAxis(float3 center, float3 position, float3 axis, float angle)
				{
					position -= center;
					float C = cos(angle);
					float S = sin(angle);
					float t = 1 - C;
					float m00 = t * axis.x * axis.x + C;
					float m01 = t * axis.x * axis.y - S * axis.z;
					float m02 = t * axis.x * axis.z + S * axis.y;
					float m10 = t * axis.x * axis.y + S * axis.z;
					float m11 = t * axis.y * axis.y + C;
					float m12 = t * axis.y * axis.z - S * axis.x;
					float m20 = t * axis.x * axis.z - S * axis.y;
					float m21 = t * axis.y * axis.z + S * axis.x;
					float m22 = t * axis.z * axis.z + C;
					float3x3 finalMatrix = float3x3(m00, m01, m02, m10, m11, m12, m20, m21, m22);
					return mul(finalMatrix, position) + center;
				}


				v2f vert(appdata v)
				{
					v2f o;

					o.vertex = UnityObjectToClipPos(v.vertex);
					o.vertex.z = 0;
					o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
					o.worldNormal = UnityObjectToWorldNormal(v.normal);
					return o;
				}

				float4 frag(v2f i) : SV_Target
				{
					float3 worldViewDir = UnityWorldSpaceViewDir(i.worldPos);
					worldViewDir = normalize(worldViewDir);
					float3 worldReflect = reflect(worldViewDir,i.worldNormal);
					float3 cubeUV = RotateAroundAxis(_RotaCenter, worldReflect, normalize(_RotaAxis), _RotaAngle*UNITY_PI);
					float4 col = texCUBE(_SkyTex1, cubeUV)*(1 - _SkyRange) + texCUBE(_SkyTex2, cubeUV)*_SkyRange;
					return col;
				}
				ENDCG
			}
		}
}