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

先上图看看效果：

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

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











二、编写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实现线框的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 打开一个Unity工程步骤

    打开一个Unity工程步骤

    首先,2018以上的支持UnityHub的,要先安装UnityHub,unity.cn去下载. 然后打开unity工程目录 在ProjectSettings下找到ProjectVersion.txt 打开该txt文件可以知道工程的unity版本 去unity.cn下载对应的unity版本,如果没有对应的版本可以下载比较接近的版本,例如2019.2.7f1的工程,可以用2019.2系列其他版本尝试打开,一般建议高本版unity打开低版本工程,不建议低版本unity打开高版本unity工程. 打开u

  • Android实现Unity3D下RTMP推送的示例

    Android实现Unity3D下RTMP推送的示例

    目录 数据采集推送 简单调用流程 完成接口初始化后,调用Push()接口 调用OpenPusher() InitAndSetConfig() ClosePusher() 相关Event处理 总结 关于屏幕采集,有两种方案: 1. 直接封装Android原生的屏幕采集工程,在unity提供接口,拿到屏幕权限后,获取屏幕数据并推送: 2. 如果只需要拿到Unity的窗体或摄像机数据推出去,可在Unity下获取到需要推送的原始数据,然后封装原生的RTMP推流接口,调用原生SDK实现数据推送,这种做法的

  • 浅谈Unity脚本生命周期与执行顺序

    浅谈Unity脚本生命周期与执行顺序

    一.脚本生命周期 Unity脚本中的常见必然事件如下表所示 名称 触发时机 用途 Awake 脚本实例被创建时调用 用于游戏对象的初始化,注意Awake的执行早于所有脚本的Start函数 OnEnable 当对象变为可用或激活状态时被调用 用途 Start Update函数第一次运行之前调用 用于游戏对象的初始化 Update 每帧调用一次 用于更新游戏场景和状态 FixedUpdate 每个固定物理时间间隔调用一次 用于物理状态的更新 LateUpdate 每帧调用一次(在update之后调用

  • Unity学习之FSM有限状态机

    前言:一个游戏里的一个人物会存在多种状态,那么就需要有一个专门管理这些状态的类.不然会显得杂乱无章,不易于后面状态的增加或者减少. 思路:既然要方便管理,那么首先肯定得有个系统类(专门用来存放所有的状态.状态的增删等功能):然后就是需要把所有的状态都单独写一个类(已达到修改某个状态的时候,其他状态不会受到影响). 状态管理类: using System.Collections; using System.Collections.Generic; using UnityEngine; public

  • Unity连接MySQL并读取表格数据的实现代码

    Unity连接MySQL并读取表格数据的实现代码

    表格如下: 在Unity读取并调用时的代码: 而如果想要查看该数据库中的另一个表,不是直接使用Table[1],而是需要更改SELECT * from <?>的表名 代码: using System.Collections; using System.Collections.Generic; using UnityEngine; using MySql.Data.MySqlClient; using System.Data; using System; public class getGame

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

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

    先上图看看效果: 下面详细分享一下制作步骤吧: 一.首先模型本身需要特殊处理 二.编写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)

  • Unity shader实现遮罩效果

    Unity shader实现遮罩效果

    本文实例为大家分享了Unity shader实现遮罩效果的具体代码,供大家参考,具体内容如下 效果: shader代码: Shader "Custom/Mask" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {}//目标图片,即需要被遮罩的图片 _MaskLayer("Culling Mask",2D) = "white"{}//混合的图片,设置

  • Unity shader实现消融效果

    Unity shader实现消融效果

    本文实例为大家分享了Unity shader实现消融效果的具体代码,供大家参考,具体内容如下 效果图: shader代码: // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Custom/EdgeColo" { Properties { _MainTex ("Texture", 2D) = "white" {} _N

  • Unity Shader模拟玻璃效果

    本文实例为大家分享了Unity Shader实现玻璃效果的具体代码,供大家参考,具体内容如下 Shader "Glass Refraction" { Properties { _MainTex ("Main Tex", 2D) = "white" {} _BumpMap ("Normal Map", 2D) = "bump" {} _Cubemap ("Environment Cubemap&qu

  • Unity Shader实现裁切效果

    Unity Shader学习:裁切效果,供大家参考,具体内容如下 之前看到有人问关于物体裁切方面的问题,初学shader的话可能搞得不是很明白,这里提供下比较简单的思路,有需要的话可以直接使用.(关于切面缝合还没有找到比较好的方法) 裁切原理:将世界空间中像素y值(垂直裁切)大于物体自身坐标y值一定范围的直接discard. c#部分: using System.Collections; using System.Collections.Generic; using UnityEngine; p

  • Unity Shader实现序列帧动画效果

    本文实例为大家分享了Unity Shader序列帧动画效果的具体代码,供大家参考,具体内容如下   实现原理 主要的思想是设置显示UV纹理的大小,并逐帧修改图片的UV坐标.(可分为以下四步) 1.我们首先把 _Time.y 和速度属性_Speed 相乘来得到模拟的时间,并使用CG 的floor 函数对结果值取整来得到整数时间time 2.然后,我们使用time 除以_HorizontalAmount 的结果值的商来作为当前对应的行索引,除法结果的余数则是列索引. 3.接下来,我们需要使用行列索引

  • Unity Shader实现动态过场切换图片效果

    Unity Shader实现动态过场切换图片效果

    本文实例为大家分享了Unity Shader实现动态过场切换图片的具体代码,供大家参考,具体内容如下 一.简单介绍 Shader Language的发展方向是设计出在便携性方面可以和C++.Java等相比的高级语言,"赋予程序员灵活而方便的编程方式",并"尽可能的控制渲染过程"同时"利用图形硬件的并行性,提高算法效率". 本文介绍,如何使用 shader ,动态过场形式切换图片的一点简单效果. 二.实现原理 1.通过时间叠加判断,当 值小于 主图

  • Unity shader实现自由放大缩小效果

    Unity shader实现自由放大缩小效果

    本文实例为大家分享了Unity shader实现自由放大缩小效果的具体代码,供大家参考,具体内容如下 代码: 以下实现的shader代码: Shader "Hidden/Wave" { Properties { _MainTex ("Texture", 2D) = "white" {} _WaveWidth("Wave Width",float) = 0.5 _CenterX("CenterX",float

  • Unity Shader实现翻书效果

    Unity Shader实现翻书效果

    今天实现一个简单的翻书的效果,话不多说,先上一张效果图: 这里就随便用的一张纹理了,我们还是称为"翻木板"吧,哈哈. 实现过程: 其实这个效果实现起来还是挺简单的,大概思路其实就是 让所有顶点都绕Z轴旋转,并且通过正余弦使之带有一点弧度. 下面开始让我们一步一步的实现该效果. 首先打开Unity新建一个工程,场景,并且创建一个名为openBookEffect的Shader文件,删掉原本多余的代码. 第一步,我们先让它绕z轴旋转起来 这里就要用到一个旋转矩阵了,让顶点左乘该矩阵,就能得到

  • Unity Shader实现描边OutLine效果

    Unity Shader实现描边OutLine效果

    本文实例为大家分享了Unity Shader实现描边OutLine效果的具体代码,供大家参考,具体内容如下 Shader实现描边流程大致为:对模型进行2遍(2个pass)绘制,第一遍(描边pass)在vertex shader中对模型沿顶点法线方向放大,fragment shader设置输出颜色为描边颜色:第二遍正常绘制模型,除被放大的部分外,其余被覆盖,这样就有了描边的效果. 实现代码如下: Shader "Custom/OutlineShader" { Properties { _

随机推荐