Unity发布Webgl使用的流光效果

Shader "XYS/HighLitScan"
{
	Properties
	{
		_Metallic("Metallic", Range( 0 , 1)) = 0.25
		_Smoothness("Smoothness", Range( 0 , 1)) = 0.14
		_Color("Color", Color) = (0.9056604,0.9056604,0.9056604,0)
		_Diffuse("Diffuse", 2D) = "white" {}
		[HDR]_Highcolor("Highcolor", Color) = (0.8113208,0.8113208,0.8113208,0)
		_Width("Width", Range( 0 , 10)) = 5
		_Speed("Speed", Range( -10 , 10)) = 0
		_Direction("Direction", Range( 0 , 1)) = 1
		_HighLitTexture("HighLitTexture", 2D) = "white" {}
		_EdgeLength ( "Edge length", Range( 2, 50 ) ) = 2
		[HideInInspector] _texcoord2( "", 2D ) = "white" {}
		[HideInInspector] _texcoord( "", 2D ) = "white" {}
		[HideInInspector] __dirty( "", Int ) = 1
	}

	SubShader
	{
		Tags{ "RenderType" = "Transparent"  "Queue" = "Geometry+0" "IsEmissive" = "true"  }
		Cull Back
		CGPROGRAM
		#include "UnityShaderVariables.cginc"
		#include "Tessellation.cginc"
		#pragma target 4.6
		#pragma surface surf Standard keepalpha addshadow fullforwardshadows vertex:vertexDataFunc tessellate:tessFunction 
		struct Input
		{
			float2 uv_texcoord;
			float2 uv2_texcoord2;
		};

		uniform float4 _Color;
		uniform sampler2D _Diffuse;
		uniform float4 _Diffuse_ST;
		uniform float4 _Highcolor;
		uniform sampler2D _HighLitTexture;
		uniform float4 _HighLitTexture_ST;
		uniform float _Direction;
		uniform float _Speed;
		uniform float _Width;
		uniform float _Metallic;
		uniform float _Smoothness;
		uniform float _EdgeLength;

		float4 tessFunction( appdata_full v0, appdata_full v1, appdata_full v2 )
		{
			return UnityEdgeLengthBasedTess (v0.vertex, v1.vertex, v2.vertex, _EdgeLength);
		}

		void vertexDataFunc( inout appdata_full v )
		{
		}

		void surf( Input i , inout SurfaceOutputStandard o )
		{
			float2 uv_Diffuse = i.uv_texcoord * _Diffuse_ST.xy + _Diffuse_ST.zw;
			o.Albedo = ( _Color * tex2D( _Diffuse, uv_Diffuse ) ).rgb;
			float2 uv_HighLitTexture = i.uv_texcoord * _HighLitTexture_ST.xy + _HighLitTexture_ST.zw;
			float lerpResult11 = lerp( -i.uv2_texcoord2.x , i.uv2_texcoord2.y , _Direction);
			float4 clampResult35 = clamp( ( _Highcolor * pow( ( tex2D( _HighLitTexture, uv_HighLitTexture ).r * sin( ( (0.0 + (lerpResult11 - 0.0) * (3.14 - 0.0) / (1.0 - 0.0)) + ( _Speed * _Time.y ) ) ) ) , exp( (10.0 + (_Width - 0.0) * (0.0 - 10.0) / (10.0 - 0.0)) ) ) ) , float4( 0,0,0,0 ) , float4( 1,1,1,0 ) );
			o.Emission = clampResult35.rgb;
			o.Metallic = _Metallic;
			o.Smoothness = _Smoothness;
			o.Alpha = 1;
		}

		ENDCG
	}
	Fallback "Diffuse"
	CustomEditor "ASEMaterialInspector"
}

这是unity常用的简单流光特效shader，但是发布web后显示不出来。所以修改了其他流光效果测试，发现效果不是很满意。

在b站上搜到了一个up主关于ui框流光的设计，感觉可以行，就拿来试了下，虽然用起来不高明，甚至有点笨拙，但是可以短时间内规避错误，后期有空在想办法换。

主要思路就是，将模型换一个自带shader需要有texture，然后将贴图放上去，比如我想做流光，就贴一张光线图：

这样贴上去就是红色的模型带着一些光线。 

然后再通过animation刻一个动画，控制Tilling的数值变化，实现流光效果。

曲线救国了属于是

后记：

忘记了一个重要事情：自定义的 Shader 都要加入到Always Included Shaders中。防止打包之后丢失shader。

Always Included Shaders：Edit 》 Proejct Settings 》 Graphics 》 Always Included Shaders