[unityshader]制作能量护盾以及简单互动
效果圖
因為csdn有圖片大小限定,所以適當減去了點。
圖中效果為:能量護盾的收縮,以及與外界collider的碰撞交互效果。
準備模型(BLENDER)
使用Blender制作一個棱角球。
點開插件面板添加一個tissue插件
添加后,點擊插件面板這個按鈕
就能得到這樣的網格了
重置uv
網格由五邊面和六邊面構成,調整uv布局
選中所有的無邊面,調整所有的五邊面uv布局為左下角,再ctrl+i反選,調整六邊面在右上角(uv面板中g移動,s縮放等操作依然適用)
然后導出uv布局圖
制作表面貼圖(PS)
uv布局圖起始效果如下
使用色彩范圍選中黑色邊緣,在新建圖層中填充(可以使用快捷鍵ctrl+delete填充前景色)為白色。
再反選,新建圖層作為背景,填充為黑色。得到如下效果
雙擊白邊所在圖層,進入圖層樣式編輯,選擇外發光調整至合適發光邊緣
導出貼圖放入Unity
實現效果代碼
shader方面就是菲涅爾+頂點動畫(使用了_SinTime達到波動效果)+HDR顏色模式(在屬性名前面加上[HDR]即可)
關鍵是如何實現互動。
給棱角球加上一個互動腳本,當碰撞發生時(碰撞發生條件是雙方都有collider,其中至少一方含有rigbody組件),傳入碰撞點的信息到shader中,在shader中比較當前頂點距離碰撞點的距離,使用smoothstep把距離限制在0-1之間,還能根據參數調整遮罩邊緣,再把這個距離值乘上一層護盾顏色。
以下為互動腳本:
以下為shader代碼:
Shader "Unlit/Shield" {Properties{_MainTex ("Texture", 2D) = "white" {}[HDR]_Color("顏色",Color)=(1,1,1,1)_Strength("波浪度",Range(0,1))=0_Distance("擴散距離",Range(0,0.05))=0.01_FresnelPower("菲涅爾power",Range(0,10))=5_FresnelScale("菲涅爾比例",Range(0,1))=1_MaskRadius("遮罩半徑",Range(0,3))=0_MaskSmooth("羽化",Range(0,1))=0[HDR]_CollisionColor("碰撞顏色",Color)=(1,1,1,1)}SubShader{Tags { "RenderType"="transparent" "queue"="transparent"}LOD 100Pass{blend srccolor oneCGPROGRAM#pragma vertex vert#pragma fragment frag// make fog work#pragma multi_compile_fog#include "UnityCG.cginc"float _Strength;float _Distance;float _FresnelPower;float4 _Color;float _FresnelScale;float4 _InteractPoint;float _MaskSmooth;float4 _CollisionColor;float _Toggle;float _MaskRadius;struct appdata{float4 vertex : POSITION;float3 normal:NORMAL;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;UNITY_FOG_COORDS(1)float4 objPos:TEXCOORD1;float3 worldNormal:TEXCOORD2;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;v2f vert (appdata v){v2f o;v.vertex+=_Distance*float4((_Strength+_SinTime.w)*v.normal,0);o.objPos=v.vertex;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldNormal=normalize(UnityObjectToWorldNormal(v.normal));UNITY_TRANSFER_FOG(o,o.vertex);return o;}fixed4 frag (v2f i) : SV_Target{float4 worldPos=mul(unity_ObjectToWorld,i.objPos);float dt=smoothstep(_MaskRadius+_MaskSmooth,_MaskRadius-_MaskSmooth,distance(worldPos,_InteractPoint));float3 viewDir=normalize(WorldSpaceViewDir(i.objPos));float fresnel=_FresnelScale*pow(1-abs(dot(viewDir,i.worldNormal)),_FresnelPower);// sample the texturefixed4 col =tex2D(_MainTex, i.uv)*(fresnel*_Color+_CollisionColor*dt*_Toggle);// apply fogUNITY_APPLY_FOG(i.fogCoord, col);return col;}ENDCG}} }總結
以上是生活随笔為你收集整理的[unityshader]制作能量护盾以及简单互动的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 二、5移动端网页适配
- 下一篇: 我为什么要立刻放弃React而使用Vue