zoukankan      html  css  js  c++  java
  • unity描边效果

    这里总结了几种在unity实现描边效果的方法,首先准备一个模型导入在unity中,使用默认shader,上传一张原始图,以便后面实现功能效果的对比



    一、边缘光,这里参照官方的一个SurfaceShader Example,Rim Lighting

    1.在unity创建一个SurfaceShader,命名RimLighting

    Shader "Custom/RimLighting" {
    	Properties {
    		_Color ("Color", Color) = (1,1,1,1)
    		_MainTex ("Albedo (RGB)", 2D) = "white" {}
    		//边缘光颜色
    		_RimColor("Rim Color",Color) =(1,1,1,1)
    		//边缘光强度
    		_RimPower("Rim Power", Range(0.5,8.0)) = 3.0
    	}
    	SubShader {
    		Tags { "RenderType"="Opaque" }
    		LOD 200
    		
    		CGPROGRAM
    		// Physically based Standard lighting model, and enable shadows on all light types
    		#pragma surface surf Standard fullforwardshadows
    
    		// Use shader model 3.0 target, to get nicer looking lighting
    		#pragma target 3.0
    
    		sampler2D _MainTex;
    
    		struct Input {
    			float2 uv_MainTex;
    			//法线
    			float3 worldNormal;
    			//视角方向
    			float3 viewDir;
    		};
    
    		fixed4 _Color;
    		fixed4 _RimColor;
    		half _RimPower;
    
    		void surf (Input IN, inout SurfaceOutputStandard o) {
    			// Albedo comes from a texture tinted by color
    			fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
    			o.Albedo = c.rgb;
    			o.Alpha = c.a;
    			
    			half rim = 1.0 - saturate(dot(normalize(IN.viewDir), IN.worldNormal));
    			o.Emission = _RimColor.rgb * pow(rim, _RimPower);
    		}
    		ENDCG
    	}
    	FallBack "Diffuse"
    }
    

    2.将模型材质的shader改为刚才所写的shader,Custom/RimLighting


    3.更改后,具体效果如下



    二、法线外拓,用一个Pass渲染边框,一个Pass渲染实物

    1. 创建一个UnlitShader,命名为NormalUnlitShader

    Shader "Custom/NormalUnlitShader"
    {
    	Properties
    	{
    		_MainTex ("Texture", 2D) = "white" {}
    		_Outline("Out Line",Range(0.001,0.005))=0.002
    		_Color("Color",Color)=(1,1,1,1)
    	}
    
    	CGINCLUDE
    	#include "UnityCG.cginc"
    	struct v2f
    	{
    		float4 pos:POSITION;
    		float4 color:COLOR;
    	};
    
    	sampler2D _MainTex;
    	float _Outline;
    	fixed4 _Color;
    
    	v2f vert(appdata_base v)
    	{
    		v2f o;
    		o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    		float3 norm = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);
    		float2 offset = TransformViewToProjection(norm.xy);
    		o.pos.xy += offset * o.pos.z * _Outline;
    		o.color = _Color;
    		return o;
    	}
    	ENDCG
    
    	SubShader
    	{
    		Cull Front
    		Pass
    		{
    			CGPROGRAM
    			#pragma vertex vert
    			#pragma fragment frag
    			fixed4 frag (v2f i) : COLOR
    			{
    				return i.color;
    			}
    			ENDCG
    		}
    
    		CGPROGRAM
    		#pragma surface surf Lambert  
    		struct Input {
    			float2 uv_MainTex;
    		};
    		void surf(Input IN, inout SurfaceOutput o) {
    			fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
    			o.Albedo = c.rgb;
    			o.Alpha = c.a;
    		}
    		ENDCG
    	}
    }
    

    2.这里再换成新建的NormalUnlitShader,就会发现一些问题,他会在一些我们并不像描边的地方也改变了颜色,这就是因为这根据模型法线并不是全部都均匀的向外扩展,才导致这样的情况



    3.再换一个Sphere模型应用与怪物同一个材质球,就会发现Sphere模型,是能达到我们的需求的,也能很明显的看出两者的差别,因为球的法线都是均匀的往外扩展的,这个方法的使用就需要以后根据实际的要求来使用



    三、屏幕特效,描边效果

    1. 新建一个辅助摄像机,设置参数如下,并将模型的Layer设置为Monster,这样辅助摄像机就能单独看见这个怪物模型


    2.写一个纯色shader,辅助摄像机用RenderWithShader,纯色渲染一张纹理处理

    Shader "Custom/UnlitSolidColor"
    {
    	SubShader
    	{
    		Pass
    		{
    			//返回蓝色
    			Color(0,0,1,1)
    		}
    	}
    }
    

    3.将纯色纹理,可以模糊放大几次,次数越多,边框就越宽,这里需要使用到一个像素偏移函数,Graphics.BlitMultiTap和一个Blur效果shader

    Shader "Custom/OutterLineBlur" {
    
    Properties {
    	_MainTex ("", 2D) = "white" {}
    }
    
    Category {
    	ZTest Always Cull Off ZWrite Off Fog { Mode Off }
    
    	Subshader {
    		Pass {
    			CGPROGRAM
    				#pragma vertex vert
    				#pragma fragment frag
    				#pragma fragmentoption ARB_precision_hint_fastest
    
    				#include "UnityCG.cginc"
    
    				struct v2f {
    					float4 pos : POSITION;
    					half4 uv[2] : TEXCOORD0;
    				};
    
    				float4 _MainTex_TexelSize;
    				float4 _BlurOffsets;
    
    				v2f vert (appdata_img v)
    				{
    					v2f o;
    					float offX = _MainTex_TexelSize.x * _BlurOffsets.x;
    					float offY = _MainTex_TexelSize.y * _BlurOffsets.y;
    
    					o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
    					float2 uv = MultiplyUV (UNITY_MATRIX_TEXTURE0, v.texcoord.xy-float2(offX, offY));
    				
    					o.uv[0].xy = uv + float2( offX, offY);
    					o.uv[0].zw = uv + float2(-offX, offY);
    					o.uv[1].xy = uv + float2( offX,-offY);
    					o.uv[1].zw = uv + float2(-offX,-offY);
    					return o;
    				}
    				
    				sampler2D _MainTex;
    				fixed4 _Color;
    
    				fixed4 frag( v2f i ) : COLOR
    				{
    					fixed4 c;
    					c  = tex2D( _MainTex, i.uv[0].xy );
    					c += tex2D( _MainTex, i.uv[0].zw );
    					c += tex2D( _MainTex, i.uv[1].xy );
    					c += tex2D( _MainTex, i.uv[1].zw );
    					return c /2 ;
    				}
    				ENDCG
    			}
    		}
    	}
    	Fallback off
    }
    

    4.将扩大后的纹理与原来的纹理,做一个对比,并依据原来纹理剔除掉中间部分,就只剩下一个边框纹理,这里需要使用一个剔除shader

    Shader "Custom/OutterLineCutoff" {
    	Properties {
    		_MainTex ("", 2D) = "white" {}
    	}	
    	Category {
    	BlendOp RevSub
    	Blend One One
    	ZTest Always Cull Off ZWrite Off Fog { Mode Off }
    	
    	Subshader {
    		Pass {
    			CGPROGRAM
    			#pragma vertex vert
    			#pragma fragment frag
    			#pragma fragmentoption ARB_precision_hint_fastest 
    			
    			sampler2D _MainTex;
    			sampler2D _MainTex1;
    			struct appdata
    			{
    				float4 vertex : POSITION;
    				float4 texcoord : TEXCOORD0;
    			};
    			struct v2f
    			{
    				float4 pos : SV_POSITION;
    				float2 uv : TEXCOORD0;
    			};
    			v2f vert (appdata v)
    			{
    				v2f o;
    				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    				o.uv = v.texcoord.xy;
    				return o;
    			}
    			half4 frag(v2f i) : COLOR
    			{
    				fixed4 c =  tex2D(_MainTex, i.uv);
    				return c;
    			}
    			ENDCG
    		}
    		}	
    	}
    	FallBack "Diffuse"
    }
    

    5.在主摄像机上,使用OnRenderImage函数,将得到的轮廓纯色纹理与摄像机的图像使用混合shader进行混合

    Shader "Custom/OutterLineComposer" {
    
    Properties {
    	_MainTex ("", 2D) = "white" {}
    }
    
    Category {
    	ZTest Always Cull Off ZWrite Off Fog { Mode Off }
    	Blend SrcAlpha OneMinusSrcAlpha
    
    	Subshader {
    		Pass {
    			CGPROGRAM
    				#pragma vertex vert
    				#pragma fragment frag
    				#pragma fragmentoption ARB_precision_hint_fastest
    
    				#include "UnityCG.cginc"
    
    				struct v2f {
    					float4 pos : POSITION;
    					half2 uv : TEXCOORD0;
    				};
    
    				v2f vert (appdata_img v)
    				{
    					v2f o;
    					o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
    					o.uv = v.texcoord.xy;
    					return o;
    				}
    
    				sampler2D _MainTex;
    
    				fixed4 frag( v2f i ) : COLOR
    				{
    					return tex2D( _MainTex, i.uv );
    				}
    				ENDCG
    			}
    		}
    	}
    	Fallback off
    }
    

    6.绑定在主摄像机的脚本

    using UnityEngine;
    using System.Collections;
    
    [ExecuteInEditMode]
    public class outline : MonoBehaviour {
        /// <summary>
        /// 辅助摄像机
        /// </summary>
        public Camera outlineCamera;
    
        #region 纯红色材质 solidColorMaterail
        public Shader solidColorShader;
        private Material m_solid=null;
        private Material solidMaterail
        {
            get 
            {
                if (m_solid == null)
                {
                    m_solid = new Material(solidColorShader);
                }
                return m_solid;
            }
        }
        #endregion
       
        #region 合并材质 compositeMaterial
        public Shader compositeShader;
        private Material m_composite=null;
        private Material compositeMaterial
        {
            get
            {
                if (m_composite == null)
                    m_composite = new Material(compositeShader);
                return m_composite;
            }
        }
        #endregion
        
        #region 模糊材质 blurMaterial
        public Shader blurShader;
        private Material m_blur=null;
        private Material blurMaterial
        {
            get 
            {
                if (m_blur == null)
                    m_blur = new Material(blurShader);
                return m_blur;
            }
        }
        #endregion
        
        #region 剔除材质 cutoffShader
        public Shader cutoffShader;
        private Material m_cutoff=null;
        private Material cutoffMaterial
        {
            get
            {
                if (m_cutoff == null)
                    m_cutoff = new Material(cutoffShader);
                return m_cutoff;
            }
        }
        #endregion
        /// <summary>
        /// 辅助摄像机渲染的RenderTexture
        /// </summary>
        private RenderTexture outlineRenderTex;
        /// <summary>
        /// 模糊扩大次数
        /// </summary>
        public int Iterations = 2;
        // Use this for initialization
        void Start () {
            outlineRenderTex = new RenderTexture((int)outlineCamera.pixelWidth, (int)outlineCamera.pixelHeight, 16);
        }
    
    	// Update is called once per frame
    	void Update () {
    	}
    
        void OnPreRender()
        {
            outlineCamera.targetTexture = outlineRenderTex;
            outlineCamera.RenderWithShader(solidMaterail.shader, "");
        }
    
        void OnRenderImage(RenderTexture source, RenderTexture desture)
        {
            RenderTexture _renderTexture = RenderTexture.GetTemporary(outlineRenderTex.width, outlineRenderTex.height, 0);
    
            MixRender(outlineRenderTex,ref _renderTexture);
           
            Graphics.Blit(_renderTexture, desture, compositeMaterial);
            RenderTexture.ReleaseTemporary(_renderTexture);
        }
    
        
        void MixRender(RenderTexture in_outerTexture, ref RenderTexture _renderTexture)
        {
            RenderTexture buffer = RenderTexture.GetTemporary(in_outerTexture.width, in_outerTexture.height, 0);
            RenderTexture buffer2 = RenderTexture.GetTemporary(in_outerTexture.width, in_outerTexture.height, 0);
    
            Graphics.Blit(in_outerTexture, buffer);
    
            //多次模糊放大
            for (int i = 0; i < Iterations; i++)
            {
                FourTapCone(buffer, buffer2, i);
                Graphics.Blit(buffer2, buffer);
            }
            Graphics.Blit(in_outerTexture, buffer, cutoffMaterial);
            Graphics.Blit(buffer, _renderTexture);
          
            RenderTexture.ReleaseTemporary(buffer);
            RenderTexture.ReleaseTemporary(buffer2);
        }
    
        float Spread = 0.8f;
        public void FourTapCone(RenderTexture source, RenderTexture dest, int iteration)
        {
            float off = 0.5f + iteration * Spread;
            Graphics.BlitMultiTap(source, dest, blurMaterial,
                                   new Vector2(off, off),
                                   new Vector2(-off, off),
                                   new Vector2(off, -off),
                                   new Vector2(-off, -off)
                                   );
        }
    
    }
    

    7.具体效果如下,因为这里是在主摄像机设置的屏幕特效,他可以忽略掉所有的遮挡,这是优点也是弊端


  • 相关阅读:
    MySQL-EXPLAIN执行计划字段解释
    MySQL-EXPLAIN执行计划Extra解释
    HTTP与HTTPS的区别
    【面试】Java中sleep和wait的区别
    Nginx之前后端分离(入门)
    玩程序 之 一 . 字符串处理工具(可通过C#脚本扩展)
    C#实现下载功能,可用于软件自动更新
    对c#剪切板Clipboard占用的问题一点解决方法
    C# 制作 仪表
    C#使用自定义字体(从文件获取)
  • 原文地址:https://www.cnblogs.com/liang123/p/6325898.html
Copyright © 2011-2022 走看看