思路:在片元着色器中,处理像素p,针对p的上下左右四个像素采样(使用一个变量width来控制描边宽度,也就是处理上下左右多远的像素),若p本身是透明像素,则

  • 若上下左右存在非透明像素,则当前像素p返回描边颜色
  • 若上下左右都是透明像素,则返回透明即可

若 p 本身非透明像素,则返回本身颜色即可

Shader "Custom_Shader/ImageOuterOutline"
{
Properties
{
_MainTex ("Sprite Texture", 2D) = "white" {}
_OutlineWidth ("Outline Width", float) = 1
_OutlineColor ("Outline Color", Color) = (1.0, 1.0, 1.0, 1.0)
_AlphaValue ("Alpha Value", Range(0, 1)) = 0.1
[ToggleUI] _IsWhite ("IsWhite", Float) = 0
}
SubShader
{
Blend SrcAlpha OneMinusSrcAlpha

Tags
{
"Queue" = "Transparent"
}
Pass
{
ZTest Off
Blend SrcAlpha OneMinusSrcAlpha
Cull Off

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

sampler2D _MainTex;
float4 _MainTex_ST;
half4 _MainTex_TexelSize;
float _OutlineWidth;
float4 _OutlineColor;
float _AlphaValue;
float _IsWhite;

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

struct v2f
{
float4 vertex : SV_POSITION;
half2 uv : TEXCOORD0;
half2 left : TEXCOORD1;
half2 right : TEXCOORD2;
half2 up : TEXCOORD3;
half2 down : TEXCOORD5;
};

v2f vert(appdata i)
{
v2f o;
o.vertex = UnityObjectToClipPos(i.vertex);
o.uv = TRANSFORM_TEX(i.uv, _MainTex);
o.left = o.uv + half2(-1, 0) * _MainTex_TexelSize.xy * _OutlineWidth;
o.right = o.uv + half2(1, 0) * _MainTex_TexelSize.xy * _OutlineWidth;
o.up = o.uv + half2(0, 1) * _MainTex_TexelSize.xy * _OutlineWidth;
o.down = o.uv + half2(0, -1) * _MainTex_TexelSize.xy * _OutlineWidth;
return o;
}

fixed4 frag(v2f i) : SV_Target
{
const float transparent = tex2D(_MainTex, i.left).a + tex2D(_MainTex, i.right).a + tex2D(_MainTex, i.up)
.a + tex2D(_MainTex, i.down).a;
fixed4 color = tex2D(_MainTex, i.uv);

fixed4 result;
if (color.a < 0.1)
{
if (_IsWhite > 0.1)
{
//闪白
result = step(_AlphaValue, transparent) * (1,1,1,1);
}
else
{
result = step(_AlphaValue, transparent) * _OutlineColor;
}
}
else
{
if (_IsWhite > 0.1)
{
//闪白
result = (1.0, 1.0, 1.0, 1.0);
}
else
{
result = color;
}
}
return result;
}
ENDCG
}
}
}

参考:https://www.jianshu.com/p/c68a730e9a8b

Unity Shader 像素图描边的更多相关文章

  1. 关于Unity中的模型描边与Shader切换(专题二)

    模型描边 1: LOL里面的模型描边效果,点击防御塔会有描边的效果,被攻击的时候模型也要描边凸显一下2: 网上可以找到模型描边的Shader,可以直接下载使用,一组第三方的Shader, 帮我们解决了 ...

  2. Unity Shader 卡通渲染 基于退化四边形的实时描边

    从csdn转移过来,顺便把写过的文章改写一下转过来. 一.边缘检测算法 3D模型描边有两种方式,一种是基于图像,即在所有3D模型渲染完成一张图片后,对这张图片进行边缘检测,最后得出描边效果.一种是基于 ...

  3. Unity Shader 知识点总结(一)

    在学习了一段时间的Unity Shader后,打算写一些知识总结,便于今后的查找.如有错误,希望大家指出更改. 本文参照的unity入门精要一书,做一个知识归纳,如有兴趣可以看看其开源的部分,是一本比 ...

  4. 【Unity Shader】Unity Chan的卡通材质

    写在前面 时隔两个月我终于来更新博客了,之前一直在学东西,做一些项目,感觉没什么可以分享的就一直没写.本来之前打算写云彩渲染或是Compute Shader的,觉得时间比较长所以打算先写个简单的. 今 ...

  5. 【转】《Unity Shader入门精要》冯乐乐著 书中彩图

    为方便个人手机学习时候查阅,从网上转来这些彩图. 如属过当行为,联系本人删除. 勘错表 http://candycat1992.github.io/unity_shaders_book/unity_s ...

  6. Unity Shader入门精要学习笔记 - 第14章非真实感渲染

    转载自 冯乐乐的 <Unity Shader 入门精要> 尽管游戏渲染一般都是以照相写实主义作为主要目标,但也有许多游戏使用了非真实感渲染(NPR)的方法来渲染游戏画面.非真实感渲染的一个 ...

  7. Unity Shader入门精要学习笔记 - 第12章 屏幕后处理效果

    建立一个基本的屏幕后处理脚本系统 屏幕后处理,顾名思义,通常指的是在渲染完整个场景得到屏幕图像后,再对这个图像进行一系列操作,实现各种屏幕特效.使用这种技术,可以为游戏画面添加更多艺术效果,例如景深. ...

  8. Unity Shader入门精要学习笔记 - 第13章 使用深度和法线纹理

    线纹理的代码非常简单,但是我们有必要在这之前首先了解它们背后的实现原理. 深度纹理实际上就是一张渲染纹理,只不过它里面存储的像素值不是颜色值而是一个高精度的深度值.由于被存储在一张纹理中,深度纹理里的 ...

  9. Unity Shader之模板测试

    Unity Shader之模板测试 一沙一世界,一花一天堂 一.Stencil testing 渲染管线     当片段着色器处理完一个片段之后,模板测试(Stencil Test)会开始执行,和深度 ...

  10. Unity Shader入门

    Unity Shader入门 http://www.cnblogs.com/lixiang-share/p/5025662.html http://www.manew.com/blog-30559-1 ...

随机推荐

  1. 【记录】PR|一些使用技巧记录

    文章目录 [PR最重要的两个操作] 一.关键帧 1. 如何设置关键帧? 2. 应用实例 1)1s内视频从明变暗 2)1s内视频画面由大到小 二.入点.出点 [其他] PR批量调整视频效果 PR剪视频片 ...

  2. D3Shop框架介绍:一个现代化的电商系统解决方案

    D3Shop框架介绍:一个现代化的电商系统解决方案 摘要:D3Shop是一个基于.NET Core 9.0和Vben-Admin的现代化电商系统框架,采用领域驱动设计(DDD)的思想构建.本文将从整体 ...

  3. acwing 智商药

    题目链接:5046. 智商药 - AcWing题库 首先考虑dfs 不用想肯定超时 过了10/17个测试点 代码 1 #include<bits/stdc++.h> 2 3 using n ...

  4. JS/Jquery检查网络路径文件是否存在

    var url='网络文件路径'; var isExists; $.ajax(url, { type: 'HEAD', dataType: 'text', async: false, success: ...

  5. Scrum Master,这九个问题你问了吗?

    从团队技术负责人到Scrum Master或PO,我们需要从做决策转为提问题. 一.2个关于估算的问题 团队在进行项目前需要进行粗略估算,但这并不是要求团队成员一定按照估算出的结果进行. 问题一:估算 ...

  6. python库使用总结

    python库的使用 1:print(补充) 2:math 2.1:math库包括的4个数学常数 2.2math库中的函数 幂对数函数 三角曲线函数 3:字符串处理函数 补充:sorted(str) ...

  7. Istio流量控制

    Istio 是现在最热门的 Service Mesh 工具,istio 是由 Google.IBM.Lyft 等共同开源的 Service Mesh(服务网格)框架,于2017年初开始进入大众视野.K ...

  8. 从零开始学Flink:揭开实时计算的神秘面纱

    一.为什么需要Flink? 当你在电商平台秒杀商品时,1毫秒的延迟可能导致交易失败:当自动驾驶汽车遇到障碍物时,10毫秒的计算延迟可能酿成事故.这些场景揭示了一个残酷事实:数据的价值随时间呈指数级衰减 ...

  9. MySQL数据库表关系详解

    MySQL数据库表关系详解 (1)一对一 一对一关系是最好理解的一种关系,在数据库建表的时候可以将人表的主键放置与身份证表里面,也可以将身份证表的主键放置于人表里面 一对一的关系就是一种特殊的多对多的 ...

  10. C# 列表项下拉窗口宽度自适应

    /// <summary> /// 列表项下拉窗口宽度自适应 /// </summary> /// <param name="comboBox"> ...