Unity-Shader - 2DSprite描边效果

实现一个简单的2D精灵图描边效果,效果如下
在这里插入图片描述
实现思路:
可以通过判断该像素周围是否有透明度为 0的值,如果有,则说明该像素位于边缘。
所以我们需要打开alpha blend,即: Blend SrcAlpha OneMinusSrcAlpha,并且加入渲染队列,

Tags{"Queue" = "Transparent"
}
Blend SrcAlpha OneMinusSrcAlpha

根据图片的Alpha值边缘判定,向内扩一段距离做边缘,颜色设置为描边颜色;
片元着色阶段,向上下左右四个方向做检测,有一个点的透明度为0,判定为边缘;

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;}

如果图片内容恰好铺满整张图,没有alpha值,方法不适用

outline

可以和原图做插值,根据边缘判断来混合线的颜色和原图颜色
完整shader如下

Shader "shader2D/outline"
{Properties{_MainTex ("Texture", 2D) = "white" {}  // 主纹理属性,用于存储2D纹理_lineWidth("lineWidth",Range(0,10)) = 1  // 线宽属性,范围在0到10之间,默认值为1_lineColor("lineColor",Color)=(1,1,1,1)  // 线的颜色属性,RGBA格式,默认为白色}SubShader{// 渲染队列采用透明Tags{"Queue" = "Transparent"}Blend SrcAlpha OneMinusSrcAlpha  // 设置混合模式为源颜色乘以源透明度减去源透明度Pass{CGPROGRAM#pragma vertex vert  #pragma fragment frag  #include "UnityCG.cginc"  // 顶点着色器输入结构体 struct VertexInput{float4 vertex : POSITION;  // 顶点坐标float2 uv : TEXCOORD0;  // 纹理坐标};// 顶点着色器输出结构体 struct VertexOutput{float2 uv : TEXCOORD0;  // 纹理坐标float4 vertex : SV_POSITION;  // 顶点坐标};VertexOutput vert (VertexInput v){VertexOutput o;o.vertex = UnityObjectToClipPos(v.vertex);  // 将顶点坐标转换到裁剪空间o.uv = v.uv;  // 传递纹理坐标return o;}sampler2D _MainTex;  // 主纹理float4 _MainTex_TexelSize;  // 主纹理的像素大小float _lineWidth;  // 线宽float4 _lineColor;  // 线的颜色fixed4 frag (VertexOutput i) : SV_Target{fixed4 col = tex2D(_MainTex, i.uv);  // 获取纹理颜色// 采样周围4个点float2 up_uv = i.uv + float2(0,1) * _lineWidth * _MainTex_TexelSize.xy;float2 down_uv = i.uv + float2(0,-1) * _lineWidth * _MainTex_TexelSize.xy;float2 left_uv = i.uv + float2(-1,0) * _lineWidth * _MainTex_TexelSize.xy;float2 right_uv = i.uv + float2(1,0) * _lineWidth * _MainTex_TexelSize.xy;// 如果有一个点透明度为0,说明是边缘float w = tex2D(_MainTex,up_uv).a * tex2D(_MainTex,down_uv).a * tex2D(_MainTex,left_uv).a * tex2D(_MainTex,right_uv).a;// 和原图做插值,根据边缘判断来混合线的颜色和原图颜色col.rgb = lerp(_lineColor,col.rgb,w);return col;}ENDCG}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/200591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

单实例应用程序

2023年12月6日,周三凌晨 什么是单实例应用程序 单实例应用程序可以确保在同一时间只有一个应用程序实例在运行。 通常情况下,当用户尝试再次启动一个已经启动过的应用程序时,操作系统会打开一个新的实例。但有些情况下,我们可能…

js中的栈(stack)和堆(heap)

什么是堆什么是栈? 程序运行时候,需要内存空间存放数据。系统划分出的两种内存空间就叫做stack(栈)和heap(堆)。 栈(stack):由操作系统自动分配内存空间,自…

透明度值和注意点

透明度 透明度分为256阶(0-255),计算机上用16进制表示为(00-ff)。透明就是0阶,不透明就是255阶,如果50%透明就是127阶(256的一半当然是128,但因为是从0开始,所以实际上是…

react项目中使用video标签设置自动播放并未及时播放解决

react项目中使用video标签设置autoplay,但是视频不会直接播放,会加载一段时间后才会自动播放。 解决: 手动调用play方法 const videoRef useRef();useEffect(() > { if(videoRef?.current){if(videoRef?.current.paused){videoRef?.current.pla…

leetcode:1422. 分割字符串的最大得分(python3解法)

难度:简单 给你一个由若干 0 和 1 组成的字符串 s ,请你计算并返回将该字符串分割成两个 非空 子字符串(即 左 子字符串和 右 子字符串)所能获得的最大得分。 「分割字符串的得分」为 左 子字符串中 0 的数量加上 右 子字符串中 1…

Android 12.0 Folder文件夹全屏后文件夹图标列表居中时拖拽app到桌面的优化

1.概述 在12.0的系统rom产品开发中,在Launcher3中在目前的产品需求开发中,对于Launcher3中的文件夹Folder的布局UI 进行了定制化的需求要求把Folder修改为全屏,然后在中间显示文件夹图标的列表,这时候如果Folder是全屏的话,如果拖拽文件夹列表中的app图标,只有拖拽 到屏…

html复习

html form表单作用是收集数据提交 input框体控件不在form不适用于表单提交 可编辑性:contenteditable 提示值消失:placeholder,value是初始数据 块标签:单独占有一个空间,独占一行,标签遵循从上到下排列。table、d…

UEC++ 探索虚幻5笔记(捡金币案例) day12

吃金币案例 创建金币逻辑 之前的MyActor_One.cpp,直接添加几个资源拿着就用 //静态网格UPROPERTY(VisibleAnywhere, BlueprintReadOnly)class UStaticMeshComponent* StaticMesh;//球形碰撞体UPROPERTY(VisibleAnywhere, BlueprintReadWrite)class USphereCompone…

【Linux知识点汇总】04 Linux软件包管理器RPM常用命令

RPM(Red Hat Package Manager)是一种用于在基于Red Hat的Linux发行版中安装、卸载、更新和管理软件包的工具 查看和显示命令 说明命令查看已安装的rpm包rpm -qa查询某个rpm包rpm -q pkg_name查看已安装rpm包提供的配置⽂件rpm -qc pkg_name查看⼀个包安…

【水】pytorch:torch.reshape和torch.Tensor.view的区别

【水】pytorch:torch.reshape和torch.Tensor.view的区别 注:本篇仅为学习笔记,请谨慎参考,如有错误请评论指出。 参考:Pytorch: view()和reshape()的区别?他们与continues()的关系是什么? 两者…

Flink流批一体计算(23):Flink SQL之多流kafka写入多个mysql sink

目录 1. 准备工作 生成数据 创建数据表 2. 创建数据表 创建数据源表 创建数据目标表 3. 计算 WITH子句 1. 准备工作 生成数据 source kafka json 数据格式 : topic case_kafka_mysql: {"ts": "20201011","id"…

JSON 语法详解:轻松掌握数据结构(上)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

postgresql-effective_cache_size参数详解

在 PostgreSQL 中,effective_cache_size 是一个配置参数,用于告诉查询规划器关于系统中可用缓存的估计信息。这个参数并不表示实际的内存量,而是用于告诉 PostgreSQL 查询规划器系统中可用的磁盘缓存和操作系统级别的文件系统缓存的大小。它用…

Lambda表达式用法汇总

Lambda表达式用法汇总 java8 中引入的 Lambda 表达式真的是个好东西,掌握之后,写代码更简洁了,码字效率也提升了不少,这里咱 们一起来看看 Lambada 表达式常见的写法,加深理解。 1、有参无返回值函数式接口 8 种写法…

【代码随想录】算法训练计划39

dp 1、62. 不同路径 题目: 求路径方案多少个 思路: 这道题就有点dp了哈 func uniquePaths(m int, n int) int {//dp,写过,代表的是多少种// 初始化dp : make([][]int, m)for i : range dp {dp[i] make([]int, n)dp[i][0] 1 // 代表到…

用友NC Cloud FileParserServlet反序列化RCE漏洞复现

0x01 产品简介 用友 NC Cloud 是一种商业级的企业资源规划云平台,为企业提供全面的管理解决方案,包括财务管理、采购管理、销售管理、人力资源管理等功能,实现企业的数字化转型和业务流程优化。 0x02 漏洞概述 用友 NC Cloud FileParserServlet接口存在反序列化代码执行漏…

response应用

文章目录 [TOC](文章目录) response说明一、response文件下载二、待补充。。。 response说明 response是指HttpServletResponse,该响应有很多的应用,比如像浏览器输出消息,下载文件,实现验证码等。 一、response文件下载 1.创建一个javaw…

springboot整合swagger

1)简介: 作为后端开放人员,最烦的事就是自己写接口文档和别人没有写接口文档,不管是前端还是后端开发,多多少少都会被接口文档所折磨,前端会抱怨后端没有及时更新接口文档,而后端又会觉得编写接…

Spark-03: Spark SQL 基础编程

目录 1.Spark SQL 简介 2.SparkSession 3.Spark SQL 数据的读写 3.1 读写 TXT 文件 3.2 读写 CSV 文件 3.3 读写 JSON 文件 3.4 读写 Parquet 文件 3.5 读写 ORC 文件 3.6 读写MySQL数据库 4.Spark SQL 语法 4.1 SQL 语法 4.2 DSL 语法 1.Spark SQL 简介 Spark SQL…

备份和恢复Linux服务器上的HTTP配置

备份和恢复Linux服务器上的HTTP配置是一项重要的任务,它可以确保您的服务器在出现故障或配置错误时能够迅速恢复正常运行。下面我们将介绍如何备份和恢复Linux服务器上的HTTP配置。 备份HTTP配置 登录到Linux服务器上,并使用root权限。 备份HTTP配置文…