ngui 图片变灰Shader

最新推荐文章于 2020-09-10 00:51:05 发布
最新推荐文章于 2020-09-10 00:51:05 发布
阅读量765 收藏 1
点赞数
文章标签： 图片 ngui shader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lly707649841/article/details/78836844
版权

原理

将彩色图片映射到灰度的的一个过程，我们一般使用的颜色值一般rgb32位每个八位的，在shader里面颜色被转换到[0-1]范围。根据人们的经验得到一个转换的比例是R:0.3 G:0.6 B:0.1 这个大概就是这个范围得到转换效果还不错。（有大神说过图像学第一定律就是看上去是对的，那它就是对的）

关键代码

fixed4 frag(v2f IN) : SV_Target
{
    fixed4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
    fixed valuergb = color.r * 0.3 + color.g * 0.6 + color.b * 0.1;
    color.rgb = valuergb;
    return color;
}

效果图

对于这个效果用在游戏ui上面还是不错的
这里写图片描述

NGUI

对于ui我们用的是NGUI 打开NGUI 的UIWidget 发现NGUI的作者已经为自定义材质留好了接口，我们要改的是图片那么打开UISprite找到重写的这个方法加入自己的代码

/// <summary>
    /// Custom material associated with the widget, if any.
    /// </summary>

    public virtual Material material
    {
        get
        {
            return mMat;
        }
        set
        {
            if (mMat != value)
            {
                RemoveFromPanel();
                mMat = value;
                MarkAsChanged();
            }
        }
    }
     //uisprint更改
    /// <summary>
    /// Material comes from the base class first, and sprite atlas last.
    /// </summary>

    public bool isGray = false;
    protected Material grayMat;
    public override Material material
    {
        get
        {
            if(isGray)
            {
                if(grayMat == null)
                {
                    grayMat = new Material(Shader.Find("Unlit/Transparent ColoredGray"));
                }
                return grayMat;
            }
            else
            {
                var mat = base.material;
                if (mat != null) return mat;
                return (mAtlas != null ? mAtlas.spriteMaterial : null);
            }

        }
        set
        {
            base.material = value;
        }
    }

同时我们看到NGUI在Scroll View下面有一个裁剪效果而这个效果是替换了shader的也就是说我们要使得NGUI正常运行的话需要更改相关的shader。查看代码和NGUI自带shader复制4份，在每一个片段着色器进行一个灰度转换。注意shader的名称被裁减的是前面加了Hidden的

//Shader "Hidden/Unlit/Transparent ColoredGray 1"
fixed4 frag (v2f IN) : SV_Target
{
   fixed4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
   col.rgb = col.r*0.3+col.g*0.6+col.b*0.1;
    return col;
}

这里写图片描述
这里写图片描述

最终效果图

这里写图片描述

最后附上全部更改的Shader

其实就是加上了一句而且其他的都没有动
col.rgb = col.r*0.3+col.g*0.6+col.b*0.1;

Shader "Unlit/Transparent ColoredGray"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
    }

    SubShader
    {
        LOD 200

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "DisableBatching" = "True"
        }

        Pass
        {
            Cull Off
            Lighting Off
            ZWrite Off
            Fog { Mode Off }
            Offset -1, -1
            Blend SrcAlpha OneMinusSrcAlpha

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

            // Unity 4 compatibility
            #ifndef UNITY_VERTEX_INPUT_INSTANCE_ID
            #define UNITY_VERTEX_INPUT_INSTANCE_ID
            #define UNITY_VERTEX_OUTPUT_STEREO
            #define UNITY_SETUP_INSTANCE_ID(v)
            #define UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(i)
            #define UnityObjectToClipPos(v) mul(UNITY_MATRIX_MVP, v)
            #endif

            sampler2D _MainTex;
            float4 _MainTex_ST;

            struct appdata_t
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
                fixed4 color : COLOR;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                half2 texcoord : TEXCOORD0;
                fixed4 color : COLOR;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            v2f o;

            v2f vert (appdata_t v)
            {
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.texcoord = v.texcoord;
                o.color = v.color;
                return o;
            }

            fixed4 frag (v2f IN) : SV_Target
            {
               fixed4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
               col.rgb = col.r*0.3+col.g*0.6+col.b*0.1;
                return col;
            }
            ENDCG
        }
    }

}

Shader "Hidden/Unlit/Transparent ColoredGray 1"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
    }

    SubShader
    {
        LOD 200

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "DisableBatching" = "True"
        }

        Pass
        {
            Cull Off
            Lighting Off
            ZWrite Off
            Offset -1, -1
            Fog { Mode Off }
            Blend SrcAlpha OneMinusSrcAlpha

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

            // Unity 4 compatibility
            #ifndef UNITY_VERTEX_INPUT_INSTANCE_ID
            #define UNITY_VERTEX_INPUT_INSTANCE_ID
            #define UNITY_VERTEX_OUTPUT_STEREO
            #define UNITY_SETUP_INSTANCE_ID(v)
            #define UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(i)
            #define UnityObjectToClipPos(v) mul(UNITY_MATRIX_MVP, v)
            #endif

            sampler2D _MainTex;
            float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);
            float2 _ClipArgs0 = float2(1000.0, 1000.0);

            struct appdata_t
            {
                float4 vertex : POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                float2 worldPos : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            v2f o;

            v2f vert (appdata_t v)
            {
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.color = v.color;
                o.texcoord = v.texcoord;
                o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
                return o;
            }

            half4 frag (v2f IN) : SV_Target
            {
                // Softness factor
                float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;

                // Sample the texture
                half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
                col.rgb = col.r*0.3+col.g*0.6+col.b*0.1;
                col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);
                return col;
            }
            ENDCG
        }
    }


}


Shader "Hidden/Unlit/Transparent ColoredGray 2"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
    }

    SubShader
    {
        LOD 200

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "DisableBatching" = "True"
        }

        Pass
        {
            Cull Off
            Lighting Off
            ZWrite Off
            Offset -1, -1
            Fog { Mode Off }
            Blend SrcAlpha OneMinusSrcAlpha

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

            // Unity 4 compatibility
            #ifndef UNITY_VERTEX_INPUT_INSTANCE_ID
            #define UNITY_VERTEX_INPUT_INSTANCE_ID
            #define UNITY_VERTEX_OUTPUT_STEREO
            #define UNITY_SETUP_INSTANCE_ID(v)
            #define UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(i)
            #define UnityObjectToClipPos(v) mul(UNITY_MATRIX_MVP, v)
            #endif

            sampler2D _MainTex;
            float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);
            float4 _ClipArgs0 = float4(1000.0, 1000.0, 0.0, 1.0);
            float4 _ClipRange1 = float4(0.0, 0.0, 1.0, 1.0);
            float4 _ClipArgs1 = float4(1000.0, 1000.0, 0.0, 1.0);

            struct appdata_t
            {
                float4 vertex : POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                float4 worldPos : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            float2 Rotate (float2 v, float2 rot)
            {
                float2 ret;
                ret.x = v.x * rot.y - v.y * rot.x;
                ret.y = v.x * rot.x + v.y * rot.y;
                return ret;
            }

            v2f o;

            v2f vert (appdata_t v)
            {
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.color = v.color;
                o.texcoord = v.texcoord;
                o.worldPos.xy = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
                o.worldPos.zw = Rotate(v.vertex.xy, _ClipArgs1.zw) * _ClipRange1.zw + _ClipRange1.xy;
                return o;
            }

            half4 frag (v2f IN) : SV_Target
            {
                // First clip region
                float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;
                float f = min(factor.x, factor.y);

                // Second clip region
                factor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;
                f = min(f, min(factor.x, factor.y));

                // Sample the texture
                half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
                col.rgb = col.r*0.3+col.g*0.6+col.b*0.1;
                col.a *= clamp(f, 0.0, 1.0);
                return col;
            }
            ENDCG
        }
    }


}


Shader "Hidden/Unlit/Transparent ColoredGray 3"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
    }

    SubShader
    {
        LOD 200

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "DisableBatching" = "True"
        }

        Pass
        {
            Cull Off
            Lighting Off
            ZWrite Off
            Offset -1, -1
            Fog { Mode Off }
            //ColorMask RGB
            Blend SrcAlpha OneMinusSrcAlpha

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

            // Unity 4 compatibility
            #ifndef UNITY_VERTEX_INPUT_INSTANCE_ID
            #define UNITY_VERTEX_INPUT_INSTANCE_ID
            #define UNITY_VERTEX_OUTPUT_STEREO
            #define UNITY_SETUP_INSTANCE_ID(v)
            #define UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(i)
            #define UnityObjectToClipPos(v) mul(UNITY_MATRIX_MVP, v)
            #endif

            sampler2D _MainTex;
            float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);
            float4 _ClipArgs0 = float4(1000.0, 1000.0, 0.0, 1.0);
            float4 _ClipRange1 = float4(0.0, 0.0, 1.0, 1.0);
            float4 _ClipArgs1 = float4(1000.0, 1000.0, 0.0, 1.0);
            float4 _ClipRange2 = float4(0.0, 0.0, 1.0, 1.0);
            float4 _ClipArgs2 = float4(1000.0, 1000.0, 0.0, 1.0);

            struct appdata_t
            {
                float4 vertex : POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                half4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                float4 worldPos : TEXCOORD1;
                float2 worldPos2 : TEXCOORD2;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            float2 Rotate (float2 v, float2 rot)
            {
                float2 ret;
                ret.x = v.x * rot.y - v.y * rot.x;
                ret.y = v.x * rot.x + v.y * rot.y;
                return ret;
            }

            v2f o;

            v2f vert (appdata_t v)
            {
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.color = v.color;
                o.texcoord = v.texcoord;
                o.worldPos.xy = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;
                o.worldPos.zw = Rotate(v.vertex.xy, _ClipArgs1.zw) * _ClipRange1.zw + _ClipRange1.xy;
                o.worldPos2 = Rotate(v.vertex.xy, _ClipArgs2.zw) * _ClipRange2.zw + _ClipRange2.xy;
                return o;
            }

            half4 frag (v2f IN) : SV_Target
            {
                // First clip region
                float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;
                float f = min(factor.x, factor.y);

                // Second clip region
                factor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;
                f = min(f, min(factor.x, factor.y));

                // Third clip region
                factor = (float2(1.0, 1.0) - abs(IN.worldPos2)) * _ClipArgs2.xy;
                f = min(f, min(factor.x, factor.y));

                // Sample the texture
                half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
                col.rgb = col.r*0.3+col.g*0.6+col.b*0.1;
                col.a *= clamp(f, 0.0, 1.0);
                return col;
            }
            ENDCG
        }
    }


}
乐游_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
unity黑白滤镜_Unity NGUI图片去色黑白效果
weixin_39746869的博客
12-20 364
在做项目的时候。我们经常要用到禁用为灰色的效果。比如 我们要做 图鉴 我们已有的装备物品为彩色。没有的为灰色。在我们设置UISprite或者UITesture的颜色时。会发现，效果不好还会被图片本身的颜色影响。如下而我们需要的是这样的效果这时。就需要我们写Shader来弄了。Unity中搜索 ：Transparent Colored打开该shader 搜索 函数fixed4 frag (v2f i...
【Unity&Shader】关于变灰Shader的探究
BuladeMian的博客，菜得抠脚，菜得真实
12-23 3698
NGUI实现图集变灰功能 Unity3D开发（二）：NGUI之UIButton"禁用"状态时置灰 http://bbs.9ria.com/thread-434334-1-1.html 这篇资料对于Unity使用NGUI实现图集变灰的教程写得很详细 Unity 5.5.0f3,NGUI为最新版本 找到NGUI--Resources--Shaders--
NGUI配合shader，把精灵图片置灰
linxinfa的专栏
01-27 777
方法一 图集的材质球的shader使用下面的shader脚本 Shader "Unlit/Transparent Colored (AlphaClip_r) " { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _AlphaTex ("Trans (A)", 2D) = "white...
可以使图片变灰色的Shader
06-29
这个shader是自己简单写的，上次给美即做的一个程序用到了，所以在这里分享给大家，可以帮你的图片颜色去掉色彩变成黑白照。
收集的一些别人写的Shader，用于颜色变灰，图片模糊
keren2的博客
08-09 728
// Unity built-in shader source. Copyright © 2016 Unity Technologies. MIT license (see license.txt) Shader “UI/Default-Gray” { Properties { [PerRendererData] _MainTex(“Sprite Texture”, 2D) = “white” {...
ngui点击图片产生水波Shader
03-27
在这个案例中，我们关注的是如何创建一个水波扩散的Shader，当用户点击图片时，这个效果会在图片上模拟水波纹的动态传播。 1. **创建Shader** 在Unity中，我们需要创建一个新的Shader，选择“Create > Shader > ...
unity ugui/ngui图片抖动shader
03-27
在这个场景中，"图片抖动shader"是一个特定的Shader应用，用于实现图片的动态抖动效果，增加视觉吸引力或模拟某些特殊情境，如紧张、不稳定或振动。 首先，我们来理解一下如何通过UV偏移实现图片抖动。在3D图形学中...
Ngui横向渐变
06-12
标题中的“Ngui横向渐变”指的是Unity游戏开发中NGUI（Unity3D的一个用户界面系统）新增的特性，即实现界面元素的横向渐变效果。这种效果在UI设计中非常常见，可以用于按钮、背景、进度条等多种元素，使得视觉效果...
NGUI Shader替换包
11-04
本知识点将深入探讨如何在NGUI中实现“置灰处理”效果，以及涉及到的Shader替换。 "置灰处理"通常用于在游戏或应用中表示某个元素不可交互或被禁用。在视觉上，这通常是通过降低颜色饱和度或转换为灰度来实现的。在...
Unity 实用插件NGUI 3.8.2和Shader Forge 1.26及1.27
10-03
在这个主题中，我们将关注两个重要的Unity插件：NGUI（Next-Gen UI）3.8.2和Shader Forge，以及它们的功能和应用。 **NGUI 3.8.2** NGUI是Unity早期的一款高级用户界面系统，它为开发者提供了创建精美、动态和响应...
NGUI可用----边缘高光
09-12
Unity3D使用NGUI上的UITexture使用界面高光特效以及特效控制C#代码
NGUI下alpha通道的分离与合并shader及Uipanel softclip问题解决
05-08
解决Unity下NGUI下alpha通道的分离与合并的shade 在Uipanel softclip 下裁剪的问题。下载之后解压，里面有shader和脚本扩展器，直接放到unity里面就可以用了，简单方便。不需要任何技术。
Unity NGUI 滑动列表渐变缩放，偏移，渐变 Demo
01-03
Unity NGUI 滑动列表渐变缩放，偏移，渐变 Demo 博客地址：https://blog.csdn.net/qq_30259857/article/details/79562652
NGUI ,渐变
04-10
在Unity游戏开发中，NGUI（Next-Generation User Interface）是一个流行且强大的用户界面系统，它为2D和3D游戏提供了丰富的UI解决方案。NGUI的主要目标是简化UI设计过程，提供高性能的交互元素，并支持复杂的UI动画...
[Shader]对NGUI的UISprite和UITexture进行裁剪
04-03
本篇文章将详细讲解如何利用Shader技术对NGUI的UISprite和UITexture进行裁剪，以实现遮罩效果。 首先，我们需要理解Shader的基本概念。Shader是图形处理器（GPU）上运行的程序，用于控制场景中的像素表现。在Unity...
Unity3D使用shader实现灰图
yuxikuo_1的专栏
04-25 7029
猴子原创，欢迎转载。转载请注明： 转载自Cocos2D开发网–Cocos2Dev.com，谢谢！ 原文地址: http://www.cocos2dev.com/?p=596 昨晚看到群里问到2DSprite怎么变成灰白图，晚上看了下，修改shader是最方便的。 下面是Sprites-Gray.shader的实现，请放入自己工程：
Shader 边缘发光、变灰、高亮着色器
蛰伏--当你不够强大时，就不要放弃努力
12-20 3736
//转自omuying 变灰： Shader "Custom/GreyShader" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} } SubShader { Tags { "RenderType"="Opaque" } LOD 200 CGPROGRAM #pragma surface s
UGUI-图片黑白Shader
sally7²⁰²¹
05-22 1530
Shader： // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "UI/Default Grey" { Properties { [PerRendererData] _MainTex ("...
NGUI扩展之 图片置灰
zebin的博客
09-10 721
在属性 面板添加一个小功能，置灰属性。 设计思路很简单， 就是通过勾选或者不勾选，实现置灰 或者不置灰。 包括对scroview的置灰等等… 实际上，在NGUI中 所有需要渲染的 物体 都继承自 wight, 而编辑器 部分则 作用于它。 在UIWidgetInspector 中。 这个脚本作用于 UIWidget， 而我们 知道所有需要渲染的元素都继承自 UIWidget 包括sprite 可以找到这个， DrawInspectorProperties 画属性面板的 属性，我们就可以在里面进行 画
ngui 3.11.2
最新发布
12-17
NGUI 3.11.2 是一个用于Unity游戏开发的插件。NGUI全称为Next-Gen UI，是一种用于创建高性能用户界面的工具。NGUI 3.11.2是其3.11系列的一个版本。 NGUI提供了一套强大的工具和组件，以简化开发人员创建游戏界面的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值