Unity3d游戏角色描边
本文发布于游戏程序员刘宇的个人博客,欢迎转载,请注明来源https://www.cnblogs.com/xiaohutu/p/10834491.html
游戏里经常需要在角色上做描边,这里总结一下平时几种常见的描边做法。
一,两批次法:
优点是简单,效果直接,性价比高。
1. 定点对着法线方向外移,缺点是可以看出顶点之间有断裂
Shader "ly/Outline_2Pass_1" { Properties { _MainTex("Texture", 2D) = "white"{} _Outline(, )) = 0.02 _OutlineColor(,,,) } SubShader { //第一个批次,画描边 Pass { //Cull掉前面的一半,只让描边显示在后面 Cull Front CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" fixed _Outline; fixed4 _OutlineColor; struct v2f { float4 pos : SV_POSITION; float4 color : COLOR; }; v2f vert (appdata_full v) { v2f o; //源顶点位置添加法线方向乘以参数的偏移量 v.vertex.xyz += v.normal * _Outline; //位置从自身坐标系转换到投影空间 //旧版本o.pos = mul(UNITY_MATRIX_MVP,v.vertex); o.pos = UnityObjectToClipPos(v.vertex); //描边颜色 o.color = _OutlineColor; return o; } float4 frag (v2f i) : COLOR { return i.color; //描边 } ENDCG } //第二个批次 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" sampler2D _MainTex; half4 _MainTex_ST; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; fixed4 color : COLOR; }; v2f vert(appdata_base v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = v.texcoord; o.color = fixed4(, , , ); return o; } fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); return col; } ENDCG } } }
2. 得到法线在投影空间上的xy轴,作为偏移方向将顶点外移,得到的结果类似1,也有断裂
3. 顶点的位置作为方向矢量,则不会因为方向差距较大而断裂
Shader "ly/Outline_2Pass_2" { Properties { _MainTex("Texture", 2D) = "white"{} _Outline(, )) = 0.02 _OutlineColor(,,,) } SubShader { //第一个批次,画描边 Pass { //Cull掉前面的一半,只让描边显示在后面 Cull Front CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" fixed _Outline; fixed4 _OutlineColor; struct v2f { float4 pos : SV_POSITION; float4 uv : TEXCOORD0; }; v2f vert (appdata_full v) { v2f o; //位置从自身坐标系转换到投影空间 //旧版本o.pos = mul(UNITY_MATRIX_MVP,v.vertex); o.pos = UnityObjectToClipPos(v.vertex); //方式二,扩张顶点位置 //法线变换到投影空间 //float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal); //得到投影空间的偏移 //float2 offset = TransformViewToProjection(normal.xy); ////方式三,把顶点当做方向矢量,在方向矢量的方向偏移 float3 dir = normalize(v.vertex.xyz); dir = mul((float3x3)UNITY_MATRIX_IT_MV, dir); float2 offset = TransformViewToProjection(dir.xy); //有一些情况下,侧边看不到,所以把方式一和二的算法相结合 //float3 dir = normalize(v.vertex.xyz); //float3 dir2 = v.normal; //float D = dot(dir, dir2); //D = (1 + D / _Outline) / (1 + 1 / _Outline); //dir = lerp(dir2, dir, D); //dir = mul((float3x3)UNITY_MATRIX_IT_MV, dir); //float2 offset = TransformViewToProjection(dir.xy); //offset = normalize(offset); //在xy两个方向上偏移顶点的位置 o.pos.xy += offset * o.pos.z * _Outline; return o; } float4 frag (v2f i) : COLOR { return _OutlineColor; //描边 } ENDCG } //第二个批次,略 }
二,边缘光
顶点的视角dir和法线dir点乘,得出偏离度,越靠近边缘,颜色的强度越高。
优点是节约批次。
v2f vert (appdata_full v) { v2f o; //略 //_RimColor边缘光颜色 //_RimPower边缘光强度 float3 viewDir = normalize(ObjSpaceViewDir(v.vertex)); - dot(normalize(v.normal), viewDir); fixed3 rimCol = smoothstep( - _RimPower, 1.0, dotProduct) * _RimColor; o.color = rimCol; //略 return o; }
三,后处理方式来画描边
优点是效果完美,缺点是消耗性能。
摄像机上挂一个脚本,处理后处理的步骤,outlineCamera 为临时摄像机,参数与主摄像机相同,看着同样的Unit层。
临时摄像机渲染到RT上,先画剪影,然后用自定义的描边shader画上去。
using UnityEngine; using UnitySampleAssets.ImageEffects; [RequireComponent(typeof(Camera))] [AddComponentMenu("Image Effects/Other/Post Effect Outline")] class PostEffectOutline : PostEffectsBase { public enum OutLineMethod { eIteration, eScale, } private Camera attachCamera; private Camera outlineCamera; private Shader simpleShader; private Shader postOutlineShader; private Material postOutlineMat; private RenderTexture mTempRT; , 1f, , 1f);// Color.green; [Range(, )] ; [Range(, )] ; public OutLineMethod outlineMethod = OutLineMethod.eIteration; void Awake() { FindShaders(); } void FindShaders() { if (!simpleShader) simpleShader = Shader.Find("ly/DrawSimple"); if (outlineMethod == OutLineMethod.eIteration) { if (!postOutlineShader) postOutlineShader = Shader.Find("ly/PostOutlineIteration"); } else { if (!postOutlineShader) postOutlineShader = Shader.Find("ly/PostOutlineScale"); } } protected override void Start() { base.Start(); attachCamera = GetComponent<Camera>(); if (outlineCamera == null) { outlineCamera = new GameObject().AddComponent<Camera>(); outlineCamera.enabled = false; outlineCamera.transform.parent = attachCamera.transform; outlineCamera.name = "outlineCam"; } postOutlineMat = new Material(postOutlineShader); } public override bool CheckResources() { CheckSupport(false); if (!isSupported) ReportAutoDisable(); return isSupported; } private void OnRenderImage(RenderTexture source, RenderTexture destination) { if (CheckResources() == false) { Graphics.Blit(source, destination); return; } outlineCamera.CopyFrom(attachCamera); outlineCamera.clearFlags = CameraClearFlags.Color; outlineCamera.backgroundColor = Color.black; outlineCamera.cullingMask = << LayerMask.NameToLayer("Unit"); if (mTempRT == null) mTempRT = RenderTexture.GetTemporary(source.width, source.height, source.depth); mTempRT.Create(); outlineCamera.targetTexture = mTempRT; outlineCamera.RenderWithShader(simpleShader, ""); postOutlineMat.SetTexture("_SceneTex", source); postOutlineMat.SetColor("_Color", outlineColor); postOutlineMat.SetInt("_Width", outlineWidth); postOutlineMat.SetInt("_Iterations", iterations); //画描边混合材质 Graphics.Blit(mTempRT, destination, postOutlineMat); mTempRT.Release(); } }
先用简单的shader画出剪影
Shader "ly/DrawSimple" { FallBack OFF }
然后就是这个自定义的描边shader画的过程。
第一种是类似高斯模糊的方式来迭代,迭代次数越多则越细腻。
// ly 类似高斯模糊方式迭代循环处理描边 Shader "ly/PostOutlineIteration" { Properties { _MainTex("Main Texture", 2D) = "black"{} //画完物体面积后的纹理 _SceneTex("Scene Texture", 2D) = "black"{} //原场景纹理 _Color(,,,0.8) //描边颜色 _Width( //描边宽度 _Iterations( //描边迭代次数(越多越平滑,消耗越高) } SubShader { Pass { CGPROGRAM sampler2D _MainTex; float2 _MainTex_TexelSize; sampler2D _SceneTex; fixed4 _Color; float _Width; int _Iterations; #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; }; v2f vert(appdata_base v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = v.texcoord.xy; return o; } half4 frag(v2f i) : COLOR { //迭代次数为奇数,保证对称 + ; float ColorIntensityInRadius; float Tx_x = _MainTex_TexelSize.x * _Width; float Tx_y = _MainTex_TexelSize.y * _Width; //计算是否大于0,则此像素属于外边的范围内 ; k<iterations; k+=) { ; j<iterations; j+=) { ColorIntensityInRadius += tex2D(_MainTex, i.uv.xy + float2((k - iterations / ) * Tx_x, (j - iterations / ) * Tx_y)); } } //如果有颜色,或者不在外边的范围内,则渲染原场景。否则,在外边内,渲染描边。 || ColorIntensityInRadius == ) return tex2D(_SceneTex, i.uv); else - _Color.a)*tex2D(_SceneTex, i.uv); } ENDCG } } }
第二种方法简单些,直接把剪影的部分uv扩大,再把原图叠上去。
// ly 扩张剪影uv来填充描边 Shader "ly/PostOutlineScale" { Properties { _MainTex("Main Texture", 2D) = "black"{} //画完物体面积后的纹理 _SceneTex("Scene Texture", 2D) = "black"{} //原场景纹理 _Color(,,,) //描边颜色 _Width( //描边宽度 } SubShader { Pass { CGPROGRAM sampler2D _MainTex; sampler2D _SceneTex; float2 _SceneTex_TexelSize; fixed4 _Color; float _Width; #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct v2f { float4 pos : SV_POSITION; half2 uv[] : TEXCOORD0; half2 uv2[] : TEXCOORD2; }; v2f vert(appdata_base v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv[] = v.texcoord.xy; o.uv[] = v.texcoord.xy; half2 offs = _SceneTex_TexelSize.xy * _Width; o.uv2[].x = v.texcoord.x - offs.x; o.uv2[].y = v.texcoord.y - offs.y; o.uv2[].x = v.texcoord.x + offs.x; o.uv2[].y = v.texcoord.y - offs.y; o.uv2[].x = v.texcoord.x + offs.x; o.uv2[].y = v.texcoord.y + offs.y; o.uv2[].x = v.texcoord.x - offs.x; o.uv2[].y = v.texcoord.y + offs.y; ) { o.uv[].y = - o.uv[].y; o.uv2[].y = - o.uv2[].y; o.uv2[].y = - o.uv2[].y; o.uv2[].y = - o.uv2[].y; o.uv2[].y = - o.uv2[].y; } return o; } half4 frag(v2f i) : COLOR { fixed4 stencil = tex2D(_MainTex, i.uv[]); // 有剪影的部分,显示原图 if (any(stencil.rgb)) { fixed4 framebuffer = tex2D(_SceneTex, i.uv[]); return framebuffer; } // 没有剪影的部分,先把剪影扩张,扩张出颜色的部分用剪影,没有颜色的用原图 else { fixed4 color1 = tex2D(_MainTex, i.uv2[]); fixed4 color2 = tex2D(_MainTex, i.uv2[]); fixed4 color3 = tex2D(_MainTex, i.uv2[]); fixed4 color4 = tex2D(_MainTex, i.uv2[]); fixed4 color; color.rgb = max(color1.rgb, color2.rgb); color.rgb = max(color.rgb, color3.rgb); color.rgb = max(color.rgb, color4.rgb); if (any(color.rgb)) { return _Color; //color.a = (color1.a + color2.a + color3.a + color4.a) * 0.25; //return color; } else { fixed4 framebuffer = tex2D(_SceneTex, i.uv[]); return framebuffer; } } } ENDCG } } SubShader { Pass { SetTexture[_MainTex]{} } } Fallback Off }
Unity3d游戏角色描边的更多相关文章
- Unity3D 游戏开发构架篇 ——角色类的设计与持久化
在游戏开发中,游戏角色占了很大的篇幅,可以说游戏中所有的内容都是由主角所带动.这里就介绍一下角色类的设计和持久化. 一.角色类应用场景和设计思想 游戏中的角色类型不一而足,有不同的技能,有不同的属性等 ...
- Unity3D游戏开发从零单排(四) - 制作一个iOS游戏
提要 此篇是一个国外教程的翻译,尽管有点老,可是适合新手入门. 自己去写代码.debug,布置场景,能够收获到非常多.游戏邦上已经有前面两部分的译文,这里翻译的是游戏的最后一个部分. 欢迎回来 在第一 ...
- [Unity3D]Unity3D游戏开发3D选择场景中的对象,并显示轮廓效果强化版
大家好,我是秦培,欢迎关注我的博客,我的博客地址blog.csdn.net/qinyuanpei. 在上一篇文章中,我们通过自己定义着色器实现了一个简单的在3D游戏中选取.显示物体轮廓的实例. 在文章 ...
- [Unity3D]Unity3D游戏开发之跑酷游戏项目解说
大家好,我是秦元培.我參加了CSDN2014博客之星的评选,欢迎大家为我投票,同一时候希望在新的一年里大家能继续支持我的博客. 大家晚上好.我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.c ...
- [Unity3D]Unity3D游戏开发之伤害数值显示
大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei.众所周知,在RPG游戏策划中最为重要的一个环节是数值策划.数值策划是一个关于游戏平衡方面的概念 ...
- [Unity3D]Unity3D游戏开发之怪物AI
大家好.欢迎大家关注由我为大家带来的Unity3D游戏开发系列文章,我的博客地址为:http://blog.csdn.net/qinyuanpei. 在上一篇文章中,我们基本上实现了一个 ...
- Unity3D游戏开发之C#编程中常见数据结构的比较
一.前言 Unity3D是如今最火爆的游戏开发引擎,它可以让我们能轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型的互动内容.它支持2D/3D游戏开发,据不完全统计,目前国内80%的手机游戏都 ...
- Unity3D游戏开发初探—2.初步了解3D模型基础
一.什么是3D模型? 1.1 3D模型概述 简而言之,3D模型就是三维的.立体的模型,D是英文Dimensions的缩写. 3D模型也可以说是用3Ds MAX建造的立体模型,包括各种建筑.人物.植被. ...
- Unity3D游戏在iOS上因为trampolines闪退的原因与解决办法
http://7dot9.com/?p=444 http://whydoidoit.com/2012/08/20/unity-serializer-mono-and-trampolines/ 确定具体 ...
随机推荐
- H3C DHCP系统组成
- 天河2 程序 version GLIBCXX_3.4.21 not found 解决方法
本文告诉大家在 天河2 运行程序时发现 version GLIBCXX_3.4.21 not found 如何修复 我在天河2运行一个程序报错 version `GLIBCXX_3.4.21' not ...
- IDEA + Spring boot 单元测试
1. 创建测试类 打开IDEA,在任意类名,任意接口名上,按ctrl+shift+t选择Create New Test image 然后根据提示操作(默认即可),点击确认,就在项目的/test/jav ...
- C# 使用汇编
本文告诉大家如何在 C# 里面使用汇编代码 请看 C#嵌入x86汇编--一个GPIO接口的实现 - 云+社区 - 腾讯云 C# inline-asm / 嵌入x86汇编 - 苏璃 - CSDN博客 通 ...
- 在eclipse动态网页项目中,编写web.xml时,servlet标签报错.
cvc-complex-type.2.4.b: The content of element 'servlet' is not complete. One of '{"http:// jav ...
- 利用Aspose.cells 将查询出的数据导出为excel,并在浏览器中下载。
正题前的唠叨 本人是才出来工作不久的小白菜一颗,技术很一般,总是会有遇到一些很简单的问题却不知道怎么做,这些问题可能是之前解决过的.发现这个问题,想着提升一下自己的技术水平,将一些学的新的‘好’东西记 ...
- 复盘:错误理解zuul路径匹配,无法使用zuul
场景: 项目中用到zuul时,配置url总是有问题,无法路由到对应微服务. 配置如下: zuul: routes: m2-member: path: /member/* serviceId: m2-m ...
- Vue+Element实现网页版个人简历系统
这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大 ...
- JS-数组常用方法整理
想了解数组有哪些原生方法,控制台输出,如图: length:数组的实例属性,返回或设置一个数组中的元素个数. toString():可以把数组转换成字符串,并返回结果. toLocaleString( ...
- 洛谷$P2605\ [ZJOI2010]$基站选址 线段树优化$dp$
正解:线段树优化$dp$ 解题报告: 传送门$QwQ$ 难受阿,,,本来想做考试题的,我还造了个精妙无比的题面,然后今天讲$dp$的时候被讲到了$kk$ 先考虑暴力$dp$?就设$f_{i,j}$表示 ...