首页/编程百科

紋理流動 shader，Shader實例（流光實現）

 2023-10-15 阅读 29 评论 0

摘要：Shader實例（流光實現） 流光效果 首先來看一下流光效果。流光效果是一個非常常見的效果，不僅僅是游戲，一些廣告之類的也都會有這種效果。流光的原理還是比較簡單的：首先就是需要一張流光圖，這張流光圖的大部分都是黑色，然后有
Shader實例（流光實現）

流光效果


首先來看一下流光效果。流光效果是一個非常常見的效果，不僅僅是游戲，一些廣告之類的也都會有這種效果。流光的原理還是比較簡單的：首先就是需要一張流光圖，這張流光圖的大部分都是黑色，然后有一條亮線，然后我們在采樣的時候，最終輸出疊加上這張圖的采樣值，并根據時間調整采樣的UV就可以有流光的效果啦。下面是一個比較簡單的流光效果實現：

下面看屬性參數：

接下來是SubShader中的一些參數定義

頂點函數處理

光照處理

以上是對于2D圖像常用的流光實現方式，如果是3D物體用這種方式的話，可能會出現問題，所以對于3D物體，采用按照物體的世界坐標按時間偏移查詢紋理貼圖就行了

具體參數按需求改下就好了

按照方向消失或重現效果


我們再來看一個用模型空間坐標作為采樣的uv的栗子，也是一種比較好玩的效果。比如我們需要一個模型身體按照一定的方向逐漸消失，直至全部消失掉的一個效果。下面說一下思路，與世界空間采樣的流光效果一樣，我們在vertex階段記錄一下vertex坐標，傳遞給fragment階段，在fragment階段用這個值和一個設定好的閾值進行比較，不滿足條件的像素點直接discard，逐漸調整閾值，就可以得到讓模型按照某個方向消失的效果了。紋理流動 shader，代碼如下：
[csharp]?view plain?copy
  1. //按照方向消失的效果??
  2. //by:CJB_King??
  3. //2017.12.23?
  4. Shader?"SelfShader/DissolveEffectX"???
  5. {??
  6. ????Properties??
  7. ????{??
  8. ????????_MainTex("MainTex(RGB)",?2D)?=?"white"?{}??
  9. ????????_DissolveVector("DissolveVector",?Vector)?=?(0,0,0,0)??
  10. ????}??
  11. ??????
  12. ????CGINCLUDE??
  13. ????#include?"Lighting.cginc"??
  14. ????uniform?sampler2D?_MainTex;??
  15. ????uniform?float4?_MainTex_ST;??
  16. ????uniform?float4?_DissolveVector;??
  17. ??
  18. ????struct?v2f???
  19. ????{??
  20. ????????float4?pos?:?SV_POSITION;??
  21. ????????float3?worldNormal?:?NORMAL;??
  22. ????????float2?uv?:?TEXCOORD0;??
  23. ????????float3?worldLight?:?TEXCOORD1;??
  24. ????????float4?objPos?:?TEXCOORD2;??
  25. ????};??
  26. ??
  27. ????v2f?vert(appdata_base?v)??
  28. ????{??
  29. ????????v2f?o;??
  30. ????????o.pos?=?mul(UNITY_MATRIX_MVP,?v.vertex);??
  31. ????????o.uv?=?TRANSFORM_TEX(v.texcoord,?_MainTex);??
  32. ????????//頂點轉化到世界空間??
  33. ????????o.objPos?=?v.vertex;??
  34. ????????o.worldNormal?=?UnityObjectToWorldNormal(v.normal);??
  35. ????????o.worldLight?=?UnityObjectToWorldDir(_WorldSpaceLightPos0.xyz);??
  36. ????????return?o;??
  37. ????}??
  38. ??????????????
  39. ????fixed4?frag(v2f?i)?:?SV_Target??
  40. ????{??
  41. ????????half3?normal?=?normalize(i.worldNormal);??
  42. ????????half3?light?=?normalize(i.worldLight);??
  43. ????????fixed?diff?=?max(0,?dot(normal,?light));??
  44. ????????fixed4?albedo?=?tex2D(_MainTex,?i.uv);??
  45. ????????//不滿足條件的discard??
  46. ????????clip(i.objPos.xyz?-?_DissolveVector.xyz);??
  47. ????????fixed4?c;??
  48. ????????c.rgb?=?diff?*?albedo;??
  49. ????????c.a?=?1;??
  50. ????????return?c;??
  51. ????}??
  52. ????ENDCG??
  53. ??
  54. ????SubShader??
  55. ????{??
  56. ??????????
  57. ????????Pass??
  58. ????????{??
  59. ????????????Tags{?"RenderType"?=?"Opaque"?}??
  60. ??????????????
  61. ????????????CGPROGRAM??
  62. ????????????#pragma?vertex?vert??
  63. ????????????#pragma?fragment?frag??
  64. ????????????ENDCG?????
  65. ????????}??
  66. ????}??
  67. ????FallBack?"Diffuse"??
  68. }??
還有一個小問題，其實上圖中的例子里面，模型從上到下，理想情況應該是調整Y軸，不過例子里面調整的確實X軸，原因應該與Unity導入之后會繞著X軸旋轉90度有關，也就是原本在max里面的Y軸變成Unity里面的X軸。

下面，我們再看一下增加了邊緣高亮的消失效果，為了讓模消失的型邊緣高亮，我們通過將用于clip的factor值與另一個高亮閾值值進行比較，如果factor小于高亮閾值，則返回一個高亮的顏色值，否則正常渲染。這樣模型就總共有三種顯示狀態：clip狀態，高亮狀態，正常狀態。代碼如下：
[csharp]?view plain?copy
  1. //消失效果??
  2. //by：CJB_King
  3. //2017.12.23?
  4. ??
  5. Shader?"SelfShader/DissolveEffectX"??
  6. {??
  7. ????Properties{??
  8. ????????_Diffuse("Diffuse",?Color)?=?(1,1,1,1)??
  9. ????????_DissolveColor("Dissolve?Color",?Color)?=?(0,0,0,0)??
  10. ????????_MainTex("Base?2D",?2D)?=?"white"{}??
  11. ????????_ColorFactor("ColorFactor",?Range(0,1))?=?0.7??
  12. ????????_DissolveThreshold("DissolveThreshold",?Float)?=?0????
  13. ????}??
  14. ??????
  15. ????CGINCLUDE??
  16. ????#include?"Lighting.cginc"??
  17. ????uniform?fixed4?_Diffuse;??
  18. ????uniform?fixed4?_DissolveColor;??
  19. ????uniform?sampler2D?_MainTex;??
  20. ????uniform?float4?_MainTex_ST;??
  21. ????uniform?float?_ColorFactor;??
  22. ????uniform?float?_DissolveThreshold;????
  23. ??????
  24. ????struct?v2f??
  25. ????{??
  26. ????????float4?pos?:?SV_POSITION;??
  27. ????????float3?worldNormal?:?TEXCOORD0;??
  28. ????????float2?uv?:?TEXCOORD1;??
  29. ????????float4?objPos?:?TEXCOORD2;???
  30. ????};??
  31. ??????
  32. ????v2f?vert(appdata_base?v)??
  33. ????{??
  34. ????????v2f?o;??
  35. ????????o.pos?=?mul(UNITY_MATRIX_MVP,?v.vertex);??
  36. ????????o.uv?=?TRANSFORM_TEX(v.texcoord,?_MainTex);??
  37. ????????o.worldNormal?=?mul(v.normal,?(float3x3)unity_WorldToObject);??
  38. ????????o.objPos?=?v.vertex;????
  39. ????????return?o;??
  40. ????}??
  41. ??????
  42. ????fixed4?frag(v2f?i)?:?SV_Target??
  43. ????{??
  44. ????????float?factor?=?i.objPos.x?-?_DissolveThreshold;??
  45. ????????clip(factor);???
  46. ????????//Diffuse?+?Ambient光照計算??
  47. ????????fixed3?worldNormal?=?normalize(i.worldNormal);??
  48. ????????fixed3?worldLightDir?=?normalize(_WorldSpaceLightPos0.xyz);??
  49. ????????fixed3?lambert?=?saturate(dot(worldNormal,?worldLightDir));??
  50. ????????fixed3?albedo?=?lambert?*?_Diffuse.xyz?*?_LightColor0.xyz?+?UNITY_LIGHTMODEL_AMBIENT.xyz;??
  51. ????????fixed3?color?=?tex2D(_MainTex,?i.uv).rgb?*?albedo;??
  52. ????????//等價于下面注釋代碼的操作??
  53. ????????fixed?lerpFactor?=?saturate(sign(_ColorFactor?-?factor));??
  54. ????????return?lerpFactor?*?_DissolveColor?+?(1?-?lerpFactor)?*?fixed4(color,?1);??
  55. ????????/*?
  56. ????????if?(factor?<?_ColorFactor)?
  57. ????????{?
  58. ????????????return?_DissolveColor;?
  59. ????????}?
  60. ????????return?fixed4(color,?1);*/??
  61. ????}??
  62. ????ENDCG??
  63. ??????
  64. ????SubShader??
  65. ????{??
  66. ????????Tags{?"RenderType"?=?"Opaque"?}??
  67. ????????Pass??
  68. ????????{??
  69. ????????????//不讓模型穿幫，關掉了背面裁剪??
  70. ????????????Cull?Off??
  71. ????????????CGPROGRAM??
  72. ????????????#pragma?vertex?vert??
  73. ????????????#pragma?fragment?frag?????
  74. ????????????ENDCG??
  75. ????????}??
  76. ????}??
  77. ????FallBack?"Diffuse"??
  78. }??

溶解效果進階版


之前的文章里，我們研究過溶解效果，不過這個效果是基于全身的，我們來嘗試一下，把上面按照方向消失的效果與溶解效果結合起來，做成一個按照某個方向逐漸溶解的效果。要得到隨機的溶解效果，我們需要采樣一張噪聲圖，然后在原本會直接clip掉的部分根據采樣的噪聲圖進行clip，就能得到按照方向的溶解效果啦。
[csharp]?view plain?copy
  1. //溶解效果??
  2. //by：CJB_King
  3. //2017.12.23
  4. ??
  5. Shader?"SelfShader/DissolveEffectX"??
  6. {??
  7. ????Properties{??
  8. ????????_Diffuse("Diffuse",?Color)?=?(1,1,1,1)??
  9. ????????_DissolveColor("Dissolve?Color",?Color)?=?(1,1,1,1)??
  10. ????????_MainTex("Base?2D",?2D)?=?"white"{}??
  11. ????????_DissolveMap("DissolveMap",?2D)?=?"white"{}??
  12. ????????_DissolveThreshold("DissolveThreshold",?Range(0,1))?=?0??
  13. ????????_DissolveSpeedFactor("DissolveSpeed",?Range(0,5))?=?2??
  14. ????????_DissolveControl("ColorFactorB",?Float)?=?0??
  15. ????}??
  16. ??????
  17. ????CGINCLUDE??
  18. ????#include?"Lighting.cginc"??
  19. ????uniform?fixed4?_Diffuse;??
  20. ????uniform?fixed4?_DissolveColor;??
  21. ????uniform?sampler2D?_MainTex;??
  22. ????uniform?float4?_MainTex_ST;??
  23. ????uniform?sampler2D?_DissolveMap;??
  24. ????uniform?float?_DissolveThreshold;??
  25. ????uniform?float?_DissolveSpeedFactor;??
  26. ????uniform?float?_DissolveControl;???
  27. ??????
  28. ????struct?v2f??
  29. ????{??
  30. ????????float4?pos?:?SV_POSITION;??
  31. ????????float3?worldNormal?:?TEXCOORD0;??
  32. ????????float2?uv?:?TEXCOORD1;??
  33. ????????float4?objPos?:?TEXCOORD2;???
  34. ????};??
  35. ??????
  36. ????v2f?vert(appdata_base?v)??
  37. ????{??
  38. ????????v2f?o;??
  39. ????????o.pos?=?mul(UNITY_MATRIX_MVP,?v.vertex);??
  40. ????????o.uv?=?TRANSFORM_TEX(v.texcoord,?_MainTex);??
  41. ????????o.worldNormal?=?mul(v.normal,?(float3x3)unity_WorldToObject);??
  42. ????????o.objPos?=?v.vertex;????
  43. ????????return?o;??
  44. ????}??
  45. ??????
  46. ????fixed4?frag(v2f?i)?:?SV_Target??
  47. ????{??
  48. ????????fixed4?dissolve?=?tex2D(_DissolveMap,?i.uv);??
  49. ????????//Diffuse?+?Ambient光照計算??
  50. ????????fixed3?worldNormal?=?normalize(i.worldNormal);??
  51. ????????fixed3?worldLightDir?=?normalize(_WorldSpaceLightPos0.xyz);??
  52. ????????fixed3?lambert?=?saturate(dot(worldNormal,?worldLightDir));??
  53. ????????fixed3?albedo?=?lambert?*?_Diffuse.xyz?*?_LightColor0.xyz?+?UNITY_LIGHTMODEL_AMBIENT.xyz;??
  54. ????????fixed3?color?=?tex2D(_MainTex,?i.uv).rgb?*?albedo;??
  55. ????????float?factor?=?i.objPos.x?-?_DissolveControl;??
  56. ????????if(factor?<?0)??
  57. ????????{??
  58. ????????????clip(_DissolveThreshold?-?dissolve.r?*?abs(factor)?*?_DissolveSpeedFactor);??
  59. ????????}??
  60. ????????return?fixed4(color,?1);??
  61. ????}??
  62. ????ENDCG??
  63. ??????
  64. ????SubShader??
  65. ????{??
  66. ????????Tags{?"RenderType"?=?"Opaque"?}??
  67. ????????Pass??
  68. ????????{??
  69. ????????????Cull?Off??
  70. ????????????CGPROGRAM??
  71. ????????????#pragma?vertex?vert??
  72. ????????????#pragma?fragment?frag?????
  73. ????????????ENDCG??
  74. ????????}??
  75. ????}??
  76. ????FallBack?"Diffuse"??
  77. }??

Shader "SelfShader/Dissolve"
{Properties{_MainColor("MainColor",COLOR)=(1,1,1,1)_MainTex ("Texture", 2D) = "white" {}_Noise("Noise",2D)="white"{}_Dissolve("Dissolve",Vector)=(0.2,0.5,0.8)_DissolveThread("DissolveThread",float)=0.2_DissolveColor("DissolveColor",COLOR)=(1,1,1,1)_DissolveColFactor("_DissolveColFactor",float)=2_FlyFactor("FlyFactor",float)=3}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#include "Lighting.cginc"struct a2v{float4 vertex : POSITION;float2 uv : TEXCOORD0;fixed3 normal:NORMAL;};struct v2f{float2 uv : TEXCOORD0;float4 pos : SV_POSITION;fixed3 worldNormal:TEXCOORD1;fixed3 worldPos:TEXCOORD2;fixed3 objPos:TEXCOORD3;};sampler2D _Noise;sampler2D _MainTex;float4 _MainTex_ST;fixed4 _MainColor;fixed4 _Dissolve;float _DissolveThread;fixed4 _DissolveColor;float _DissolveColFactor;float _FlyFactor;v2f vert (a2v v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.worldPos=mul((float3x3)unity_ObjectToWorld,v.vertex);o.worldNormal=UnityObjectToWorldNormal(v.normal);o.objPos=v.vertex;o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.pos.xyz+=v.normal*saturate(_DissolveThread-_FlyFactor)*_FlyFactor;return o;}fixed4 frag (v2f i) : SV_Target{fixed3 worldNor=normalize(i.worldNormal);fixed3 lightDir=normalize(_WorldSpaceLightPos0.xyz);fixed4 albedo = tex2D(_MainTex, i.uv)*_MainColor;fixed4 noiseColor=tex2D(_Noise,i.uv);float factor=noiseColor.r-_DissolveThread;clip(factor);fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz*albedo.rgb;fixed3 diffuse=_LightColor0.rgb*albedo.rgb*(0.5*dot(lightDir,worldNor)+0.5);float lerpFactor=saturate(sign(_DissolveColFactor-factor));return lerp(fixed4(ambient+diffuse,1),_DissolveColor,lerpFactor);}ENDCG}}
}


版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接：https://808629.com/143671.html

上一篇：測試包括哪幾個方面，測試需要具備的能力以及探索式測試
下一篇：docker原理與架構，linux系統結構詳解
标签：紋理流動 shader相機流光unity炫酷的shadershadergraphshader細節unity ase 效果shaderunity自發光shader開發實戰
紋理流動 shader

发表评论:

最新文章
阅读排行
猜你喜欢
热门标签

本站为非赢利网站，部分文章来源或改编自互联网及其他公众平台，主要目的在于分享信息，版权归原作者所有，内容仅供读者参考，如有侵权请联系我们删除！

Copyright © 2022 86后生记录生活 Inc. 保留所有权利。

底部版权信息