unity片元着色器中获取屏幕坐标_Unity-Shader - 2D 精灵描边效果

最新推荐文章于 2024-10-22 13:42:36 发布

weixin_40009207

最新推荐文章于 2024-10-22 13:42:36 发布

阅读量308

点赞数

文章标签： unity片元着色器中获取屏幕坐标

本文介绍如何使用Unity实现2D精灵图描边效果，通过片元着色器判断边缘像素并应用描边，优化边缘锯齿问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

今天我们来实现一个简单的2D精灵图描边效果，效果图如下：

准备工作：

首先我们先打开unity新建一个场景，导入一个图片，并把该图片设置为Sprite类型，如图：

实现思路：

思路其实很简单，可以通过判断该像素周围是否有透明度为 0的值，如果有，则说明该像素位于边缘。

所以我们需要打开alpha blend，即： Blend SrcAlpha OneMinusSrcAlpha，并且加入渲染队列，

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

下面我们开始编写片元着色器，顶点着色器就是常规的顶点坐标变换，这里就不贴代码了，主要来看看片元着色器：

// ---------------------------【片元着色器】---------------------------
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;

    if(w == 0){
       col.rgb = _lineColor;
    }

    return col;
}

MainTexTexelSize：贴图像素尺寸大小我们可以通过该属性计算出周围（上下左右）的像素坐标，然后判断有没有透明度为0的值。如果为0就返回边框颜色。

效果如下：

虽然我们实现了该功能，但是我们仔细观察会发现边缘锯齿很严重，不平滑。我们可以做下优化，利用插值来平滑过渡，

最终完整Shader代码如下：

// ---------------------------【2D 描边效果】---------------------------

最终效果图对比：

最后

最后欢迎来我的GitHub Star，谢谢！里面有我平时学习unity shader过程中实现的一些特效demo。