基于Unity实现2D边缘检测

目录
  • 一、ShaderLab
    • 1.Alpha值边缘检测
    • 2.卷积边缘检测
  • 二、ShaderGraph

一、ShaderLab

1.Alpha值边缘检测

根据图片的Alpha值边缘判定,向内扩一段距离做边缘,颜色设置未描边颜色;

片元着色阶段,向上下左右四个方向做检测,有一个点的透明度为0,判定为边缘;

Shader "2DOutline"
{
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}
		_LineWidth("Width",Range(0,0.4)) = 1.0
		_LineColor("LineColor",color) = (1,1,1,1)
		_Intensity("Intensity",Range(1,10)) = 1.0
	}

	SubShader
	{
		Tags { "RenderType" = "Opaque" "Queue" = "Transparent"}
		Blend SrcAlpha OneMinusSrcAlpha

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed _LineWidth;
			float4 _LineColor;
			fixed _Intensity;

			v2f vert(appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				// 采样周围4个点
				float2 up_uv = i.uv + float2(0, 1) * _LineWidth * 1 / 10 * _MainTex_ST.xy;
				float2 down_uv = i.uv + float2(0,-1) * _LineWidth * 1 / 10 * _MainTex_ST.xy;
				float2 left_uv = i.uv + float2(-1,0) * _LineWidth * 1 / 10 * _MainTex_ST.xy;
				float2 right_uv = i.uv + float2(1,0) * _LineWidth * 1 / 10 * _MainTex_ST.xy;
				// 如果有一个点透明度为0 说明是边缘
				float w = tex2D(_MainTex,up_uv).a * tex2D(_MainTex,down_uv).a * tex2D(_MainTex,left_uv).a * tex2D(_MainTex,right_uv).a;

				if (w == 0) {
					col.rgb = lerp(_LineColor * _Intensity, col.rgb, w);
				}

				return col;
			}
		ENDCG
		}
	}
}

如果图片内容恰好铺满整张图,没有alpha值,方法不适用;下图底部边缘消失了;

2.卷积边缘检测

在屏幕后处理阶段,使用卷积做边缘检测;

卷积:根据像素周围八个方向的像素的计算出新的像素值;

边缘检测卷积算子,都包含水平和竖直两个方向的卷积核;

梯度公式:G = sqrt(Gx*Gx + Gy*Gy);

考虑性能问题,使用:G = |Gx|+|Gy|;

顶点着色器计算卷积纹理采样坐标,减少计算量(片元数量更多);

片元着色阶段Sobel卷积计算,插值获得片元像素颜色;

Sobel计算结果和梯度Gradient比较,大于梯度和EdgeColor做插值;

屏幕后效调用OnRenderImage接口;

Shader "EdgeDetection"
{
	Properties{
		_MainTex("Base (RGB)", 2D) = "white" {}
		_EdgeColor("Edge Color", Color) = (0, 0, 0, 1)
        //卷积梯度
		_Gradient("Gradient",float) =0.0
	}
	SubShader{
		Pass
		{
			ZTest Always Cull Off ZWrite Off

			CGPROGRAM

			#include "UnityCG.cginc"

			#pragma vertex vert
			#pragma fragment frag

			sampler2D _MainTex;
			uniform half4 _MainTex_TexelSize;
			//fixed _EdgeOnly;
			fixed4 _EdgeColor;
			//fixed4 _BackgroundColor;
			fixed _Gradient;

			struct v2f {
				float4 pos : SV_POSITION;
				half2 uv[9] : TEXCOORD0;
			};

			v2f vert(appdata_img v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);

				half2 uv = v.texcoord;

				o.uv[0] = uv + _MainTex_TexelSize.xy * half2(-1, -1);
				o.uv[1] = uv + _MainTex_TexelSize.xy * half2(0, -1);
				o.uv[2] = uv + _MainTex_TexelSize.xy * half2(1, -1);
				o.uv[3] = uv + _MainTex_TexelSize.xy * half2(-1, 0);
				o.uv[4] = uv + _MainTex_TexelSize.xy * half2(0, 0);
				o.uv[5] = uv + _MainTex_TexelSize.xy * half2(1, 0);
				o.uv[6] = uv + _MainTex_TexelSize.xy * half2(-1, 1);
				o.uv[7] = uv + _MainTex_TexelSize.xy * half2(0, 1);
				o.uv[8] = uv + _MainTex_TexelSize.xy * half2(1, 1);

				return o;
			}

			fixed luminance(fixed4 color) {
				return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;
			}

			half Sobel(v2f i) {
				const half Gx[9] = {    -1,  0,  1,
										-2,  0,  2,
										-1,  0,  1};
				const half Gy[9] = {   -1, -2, -1,
										0,  0,  0,
										1,  2,  1};

				half texColor;
				half edgeX = 0;
				half edgeY = 0;
				for (int it = 0; it < 9; it++) {
					texColor = luminance(tex2D(_MainTex, i.uv[it]));
					edgeX += texColor * Gx[it];
					edgeY += texColor * Gy[it];
				}

				half edge = 1 - abs(edgeX) - abs(edgeY);

				return edge;
			}

			fixed4 frag(v2f i) : SV_Target {
				half edge = Sobel(i);

				fixed4 col = tex2D(_MainTex, i.uv[4]);

				if(edge> _Gradient)
					col = lerp(_EdgeColor, tex2D(_MainTex, i.uv[4]), edge);				

				return col;
			}

			ENDCG
		}
	}
	FallBack Off
}

二、ShaderGraph

抓取图片缓冲,上下左右四个方位平移,乘以描边颜色;

四张图合并,减去原图范围的像素,只剩边缘;

最后将原图和边缘合并(可插值使边缘柔和);

升级项目到URP,修改projectsetting-graphic-pielinesettings;

导入ShaderGraph包,开始拖拖拽拽,真的香,效果好,速度快,思路清晰;

到此这篇关于基于Unity实现2D边缘检测的文章就介绍到这了,更多相关Unity边缘检测内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Unity实现角色受击身体边缘发光特效

    游戏中经常需要制作角色受击打的身体边缘光效果,本文使用的方法是,给Renderer叠加一个制作好的边缘光材质球,并通过脚本动态控制边缘光的渐变效果,表现出受击后的边缘光效果 工程结构如下 1 创建一个材质球HittedMatEffect.mat放在Assets/Resources/Material目录中,使用TransparentRim.shader 注意代码中用了Resources.Load,所以必须放在这个目录里,你可以改成别的方式 2 场景中创建一个Sphere(球体),挂上Runner脚

  • Unity相机移动之屏幕边缘检测

    本文实例为大家分享了Unity相机移动之屏幕边缘检测的具体代码,供大家参考,具体内容如下 功能: 类似LOL 红警 相机移动方式. 鼠标移动到屏幕边缘,相机随之移动. 当然还有可以加亿一点点细节,比如鼠标指针变化,滚轮推进拉远视野,中键平移视野等.(没做). 效果图: 这里做了可视化数据(可以看到限定的屏幕距离),线框内为检测的距离. 代码: 复制脚本,直接挂载相机上就可以用. using UnityEngine; /// <summary> /// 相机边缘移动 /// </summa

  • 基于Unity实现2D边缘检测

    目录 一.ShaderLab 1.Alpha值边缘检测 2.卷积边缘检测 二.ShaderGraph 一.ShaderLab 1.Alpha值边缘检测 根据图片的Alpha值边缘判定,向内扩一段距离做边缘,颜色设置未描边颜色: 片元着色阶段,向上下左右四个方向做检测,有一个点的透明度为0,判定为边缘: Shader "2DOutline" { Properties { _MainTex("Texture", 2D) = "white" {} _L

  • 基于Unity编写一个九宫格抽奖软件

    目录 一.前言 二.效果图 三.案例制作 1.界面搭建 2.代码编写 3.效果演示 四.后言 一.前言 本博文标题和内容参考:基于原生JS实现H5转盘游戏 博主将改编成Unity版本. 二.效果图 三.案例制作 1.界面搭建 使用了9个图片作为奖品栏,然后一个chooseBox作为蒙版,一个StartBtn开始按钮放在中间 2.代码编写 新建脚本goLuckyDraw.cs 使用DoTween插件做动画,没有导入这个插件的下载导入一下 实现抽奖,主要有两个方面,一个是概率的设置,一个是动画 动画

  • 基于Unity制作一个简易的计算器

    目录 一.前言 二.效果图及源工程 三.实现 1.界面搭建 2.代码实现 四.后记 一.前言 Hello,又见面了,今天分享如何使用Unity制作计算器,难度中等,可以用来学习,或者当成其他项目的小组件导入. 当然,也可以导出来,发布到网页端,来做一个嵌入式工具也可以. 二.效果图及源工程 效果图: 源工程 三.实现 1.界面搭建 所有的按钮摆放到Background下面. 2.代码实现 首先找到所有的按钮,添加到事件: //结果显示 TextComputeProcess = GameObjec

  • 基于p5.js 2D图像接口的扩展(交互实现)

    本文为大家分享了基于p5.js 2D图像接口的扩展,供大家参考,具体内容如下 一.心跳笔刷 组织结构: 1.纵坐标取一定范围内的随机值,横坐标按规律递增. 基本用法: 1.按住鼠标左键画出一条心跳线,松开鼠标左键,随机心跳线确定 2.按空格键清除画面 let isButtonRight = false; let make = null; let root = null; let makeSize = null; var mx=[],my=[];//记录鼠标位置 let Conce = true;

  • 基于Unity容器中的对象生存期管理分析

    IoC容器的对象生存期管理 如果你一直在使用IoC容器,你可能已经使用过了一些对象生存期管理模型(Object Lifetime Management).通过对对象生存期的管理,将使对象的复用成为可能.同时其使容器可以控制如何创建和管理对象实例. Unity提供的对象生存期管理模型是通过从抽象类LifetimeManager的派生类来完成.Unity将为每个类型的注册创建生存期管理器.每当UnityContainer需要创建一个新的对象实例时,将首先检测该对象类型的生存期管理器,是否已有一个对象

  • 基于Unity Line Renderer组件的常用属性说明

    Line Renderer(线条渲染器) 这个组件可以在场景中渲染出"线",比如说:做出手枪瞄准敌人时有红外线的射击辅助线,可以用LineRenderer来完成 不过这个组件对新手还是有些不友好的,看到下面的属性就头大,不过掌握了基本用法之后就没什么难度了,下面讲解一下属性(我用的Unity是2018.3.8版) 首先看一下Positions属性这是画线的核心 俩点(或多个点)连一线,一个物体只能带有一个LineRenderer组件,一个LineRenderer组件只能渲染一条连续的线

  • Android+OpenCv4实现边缘检测及轮廓绘制出图像最大边缘

    实现步骤: 图像灰度化 边缘检测 根据Canny检测得出来的Mat寻找轮廓 算出最大轮廓周长or面积 根据获取到的最大轮廓下标进行轮廓绘制 画出最大矩形,并返回Rect Canny边缘检测 基于Canny算法的边缘检测主要有5个步骤,依次是高斯滤波.像素梯度计算.非极大值像素梯度抑制.滞后阈值处理和孤立弱边缘抑制.Canny在有噪声的情况下表现好不好,取决于前面的降噪过程,可以手动做高斯处理提高识别率. /** image 输入图像,必须是CV_8U的单通道或者三通道图像. edges 输出图像

  • Python实现C#代码生成器应用服务于Unity示例解析

    目录 开发目标:实现小红帽所挂脚本的自动生成 下图为生成的最终目标 主程序具体python代码如下: 所设置的TMPL文件如下: 自动生成的c#代码展示如下: 开发目标:实现小红帽所挂脚本的自动生成 下图为生成的最终目标 本项目是从json中读取角色场景等信息,因此为了更好地判断所用属性是否需要,设置为bool类型,False表示在c#代码中注释掉该类属性,True代表使用该属性(属性暂时设置为) Timer = True # 计时器 speed = False # 速度 IsTrigger =

  • Unity实现局域网聊天室功能

    基于Unity实现一个简单的局域网聊天室,供大家参考,具体内容如下 学习Unity有一点时间了,之前学的都是做客户端的一些内容,现在开始学习联网.我的这个是在观看了 Siki 的教学内容来做的,也有自己的一点点小小的改动在里面.纯粹用于练手了. 因为本人也是小白一枚,所以,有错误的地方或者更好的实现方法,也希望有大神能帮忙指正,多谢! 整体过程分为两部分:构建服务端.构建客户端. 服务端: 大概思路: 1. 声明Socket连接以及绑定IP和端口,这里面使用 using System; usin

  • 基于Matlab图像处理的公路裂缝检测实现

    目录 一.简介 1案例背景 2理论基础 3程序实现 二.部分源代码 三.运行结果 一.简介 1 案例背景 随着国家对公路建设的大力投入,我国的公路通车总里程己经位居世界前列,这样进一步促进了我国经济建设的发展.随着公路的大量投运,公路日常养护和管理已经成为制约公路运营水平提高的瓶颈,特别是路面状态采集.检测维护等工作更是对传统的公路运维模式提出了挑战.路面裂缝是公路日常养护管理中最常见的路面损坏,也是影响公路状态评估和进行必要的公路维修的重要因素!.一般而言,如果路面裂缝能够在被恶化成坑槽之前得

随机推荐