文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Unity Shader实现线框效果的制作步骤

2024-04-02 19:55

关注

先上图看看效果:

在这里插入图片描述

下面详细分享一下制作步骤吧:

一、首先模型本身需要特殊处理

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、编写Shader


shader "Giraffe/Wireframe" {
	properties{
		   _Color("Color",Color) = (1.0,1.0,1.0,1.0)
		   _EdgeColor("Edge Color",Color) = (1.0,1.0,1.0,1.0)
		   _EdgeColor2("Edge Color",Color) = (1.0,1.0,1.0,1.0)
		   _Width("Width",Range(0,1)) = 0.2
	}
		SubShader{
			Tags {"Queue" = "Transparent" "IgnoreProjector" = "True"}
			Cull Front

			Pass {

			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma target 3.0
			#include "UnityCG.cginc"

			struct a2v {
				half4 uv : TEXCOORD0;
				half4 vertex : POSITION;
			};

			struct v2f {
				half4 pos : SV_POSITION;
				half4 uv : TEXCOORD0;
			};

			fixed4 _Color;
			fixed4 _EdgeColor;
			float _Width;

			v2f vert(a2v v)
			{
				v2f o;
				o.uv = v.uv;
				o.pos = UnityObjectToClipPos(v.vertex);
				return o;
			}

			fixed4 frag(v2f i) : COLOR
			{
				fixed4 col;
				//step(a, x) : 如果 x<a,返回0;否则,返回1。
				float LowX = step(_Width, i.uv.x);
				float LowY = step(_Width, i.uv.y);
				float HighX = step(i.uv.x, 1.0 - _Width);
				float HighY = step(i.uv.y, 1.0 - _Width);
				float num = LowX * LowY*HighX*HighY;
				col = lerp(_EdgeColor, _Color, num);

				clip((1-num)-0.1f);
				return col;
			}
			ENDCG
		}


			Cull Back
			Pass {
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"

			struct a2v {
				half4 uv : TEXCOORD0;
				half4 vertex : POSITION;

			};

			struct v2f {
				half4 pos : SV_POSITION;
				half4 uv : TEXCOORD0;

			};

			fixed4 _Color;
			fixed4 _EdgeColor2;
			float _Width;

			v2f vert(a2v v)
			{
				v2f o;
				o.uv = v.uv;
				o.pos = UnityObjectToClipPos(v.vertex);
				return o;
			}

			fixed4 frag(v2f i) : COLOR
			{
				fixed4 col;
				//step(a, x) : 如果 x<a,返回0;否则,返回1。
				float LowX = step(_Width, i.uv.x);
				float LowY = step(_Width, i.uv.y);
				float HighX = step(i.uv.x, 1.0 - _Width);
				float HighY = step(i.uv.y, 1.0 - _Width);
				float num = LowX * LowY*HighX*HighY;
				col = lerp(_EdgeColor2, _Color, num);

				clip((1 - num) - 0.1f);
				return col;
			}
			ENDCG
		}
	}
	FallBack "Diffuse"
}

三、讲解

模型部分:
1、处理是为了把所有模型面,以重叠的方式撑满整个UV。
2、为什么会用四边面,因为试过了三角面过多,看起来非常乱,效果不好。
代码部分:
1、分成两个Pass,分别渲染剔除正面和剔除背面的,这个比较好理解。
2、核心代码部分是:


float LowX = step(_Width, i.uv.x);
float LowY = step(_Width, i.uv.y);
float HighX = step(i.uv.x, 1.0 - _Width);
float HighY = step(i.uv.y, 1.0 - _Width);
float num = LowX * LowY*HighX*HighY;
col = lerp(_EdgeColor2, _Color, num);

在UV上找到对应的范围进行着色,其他位置透明化,如图所示:

在这里插入图片描述

以上就是Unity Shader实现线框效果的制作步骤的详细内容,更多关于Unity Shader实现线框的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯