Unity3D —— NGUI染色遮罩Shader

简述:
遮罩的意思是指对原图被遮住的部分进行一定的处理,这里使用最简单的处理就是染色,所以我们需要创建一个遮罩层,通常使用另一个图片来作为遮罩层,也就是mask图。


一、mask图的作用:

跟UITexture使用的图片尺寸大小必须一致,将原图中需要被遮住(染色)的部分的位置在mask图中对应位置用纯色(例如:绿色(三原色的一种))涂满,学过flash动画的应该知道遮罩动画的原理,mask图其实就是一个遮罩层。


二、shader的实现思路:

其实就是获取原图 UITexture 上的每个像素点,然后根据坐标位置去获取 mask 图 UITexture 对应位置上指定颜色值的有无,然后乘以透明度(.a 属性),例如:mask 图为绿色,这获取 mask 图像素点的 .g 属性值,加入不为 0,则该像素点要染色,否则则不染色,具体该像素点要染成什么颜色可以通过变量传给 shader 。


三、实例:

下面是一个染色 shader 的代码:

Shader "Micro/TransparentMasked" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_MaskTex ("Base (RGB)", 2D) = "white" {}
		_MyColor ("MyColor", Color) = (0,0,1,1)
	}
	
	Category
	{	
		Tags {"Queue"="Transparent" "IgnoreProjector"="True"}
		Lighting Off
		ZWrite On
		Blend One Zero
		SubShader {
			Pass {
				CGPROGRAM
				#pragma vertex vert_img
				#pragma fragment frag
	
				#include "UnityCG.cginc"
	
				uniform sampler2D _MainTex;
				uniform sampler2D _MaskTex;
				float4 _MyColor;
	
				float4 frag(v2f_img i) : COLOR 
				{
					float4 layer = tex2D(_MainTex, i.uv);					
					float4 mask = tex2D(_MaskTex, i.uv);
									
					float4 returnColor = layer;

					float gValue = max(0 ,mask.g - mask.b) * mask.a;

					returnColor = (returnColor * (1 - gValue)) + (_MyColor * returnColor) * gValue;

					returnColor.a = layer.a;
					return returnColor;
				}
				ENDCG
			}
		}
	}
}

1.输入声明:

首先是输入的声明,这里我们需要明确进行此操作所需的输入有:原图(Texture)、遮罩图(Texture)、目标染色色值(float4),即可声明如下:

				uniform sampler2D _MainTex;
				uniform sampler2D _MaskTex;
				float4 _MyColor;

2.处理函数:

关键部分在于每个像素点处理函数部分代码:

float4 frag(v2f_img i) : COLOR 
				{
					float4 layer = tex2D(_MainTex, i.uv);					
					float4 mask = tex2D(_MaskTex, i.uv);
									
					float4 returnColor = layer;

					float gValue = max(0 ,mask.g - mask.b) * mask.a;

					returnColor = (returnColor * (1 - gValue)) + (_MyColor * returnColor) * gValue;

					returnColor.a = layer.a;
					return returnColor;
				}

3.源码解析:

接下来我们进行逐句解析:

  • 首先,我们需要将两张图片传入到shader中,用两个float4四元矩阵layer和mask来保存图片数据,每个像素点的数据都是一个float4值,即表示(r,b,g,a)——>(红,绿,蓝,透明度),其中layer是原图层,mask为遮罩层;
  • 通过float gValue = max(0 ,mask.g - mask.b) * mask.a;获得该像素点是否染色的状态;
  • 计算每个像素点染色之后的结果returnColor = (returnColor * (1 - gValue)) + (_MyColor * returnColor) * gValue;,计算得到每个像素点的输出值;
  • 透明度与原图保持一致returnColor.a = layer.a;

四、Unity实践:

  • 1.新建一个 Shader 文件,步骤:在 Project 窗口中 右键->Create->Shader,内容为上边的源码,命名为MaskColor.shader
    MaskColor

  • 2.导入两张图片,原图和 mask 图:
    原图和mask图

  • 3.新建一个材质球,步骤:在 Project 窗口中 右键->Create->Material,取名为选中 MaskColor.mat,选中次材质球,将其Shader修改为我们刚刚创建的 MaskColor.shader
    MaskColor.mat
    假如一切正常,更改后选中该材质球,在Inspecteor窗口查看其属性可以看到:
    属性

  • 4.将 Avatar.png 拖入到材质球的第一个 Texture 中,将 Avatar_mask.png 拖入到材质球的第二个 Texture 中,修改 MyColor 的色值,这个色值就是我们的遮罩目标染色值,可以在预览窗口看到染色结果:

  • 5.为了更加直观地观察到染色结果,可以使用 NGUI 在场景中创建一个 UITexture,将 MaskColor.mat 拖到其 Material 属性中,即可在 Game 视窗中看到结果:

  • 6.加入要动态修改染色的颜色,通过代码对 MyColor 属性进行赋值:

    using UnityEngine;
    using System.Collections;
    
    public class TestColor : MonoBehaviour {
        public UITexture texture;
        // Use this for initialization
        void Start () {
            //染成紫色
            texture.material.SetColor ("_MyColor", new Color(0.619f, 0.431f, 0.717f));
        }
    }
    

    得到新的染色结果:

    最终资源文件结构:

补充:

其实,Shader 中的图片也是可以通过代码动态替换的,将散图放在 Resources 文件夹下,然后通过 Resources.Load(资源路径); 进行动态获取,然后通过材质的方法 material.SetTexture 进行赋值。

相关推荐
<p> <strong><span style="font-size:20px;color:#FF0000;">本课程主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者</span></strong> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">1. 包含:<span style="color:#FFFF00;background-color:#FF0000;">项目源码、</span><span style="color:#FFFF00;background-color:#FF0000;">项目文档、数据库脚本、软件工具</span>等所有资料</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">2. 手把手的带你从零开始部署运行本套系统</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">3. 该项目附带的源码资料可作为毕设使用</span></strong></span> </p> <p> <span style="color:#FF0000;"><strong><span style="font-size:18px;">4. 提供技术答疑和远程协助指导</span></strong></span><strong><span style="font-size:18px;"></span></strong> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>项目运行截图:</strong></span> </p> <p> <strong><span style="font-size:18px;">1)系统登陆界面</span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241015433522.png" alt="" /><br /> </span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">2)学生模块</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241015575966.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">3)教师模块</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016127898.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">4)系统管理员</span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016281177.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><img src="https://img-bss.csdn.net/202002241016369884.png" alt="" /></span></strong> </p> <p> <strong><span style="font-size:18px;"><br /> </span></strong> </p> <p> <strong><span style="font-size:18px;"><strong><span style="font-size:18px;">更多Java毕设项目请关注我的毕设系列课程 <a href="https://edu.csdn.net/lecturer/2104">https://edu.csdn.net/lecturer/2104</a></span></strong></span></strong> </p> <p> <strong><span style="font-size:18px;"><br /> </span></strong> </p>
<p> 课程演示环境:Windows10  </p> <p> 需要学习<span>Ubuntus</span>系统<span>YOLOv4-tiny</span>的同学请前往《<span>YOLOv4-tiny</span>目标检测实战:训练自己的数据集》 <span></span> </p> <p> <span> </span> </p> <p> <span style="color:#E53333;">YOLOv4-tiny</span><span style="color:#E53333;">来了!速度大幅提升!</span><span></span> </p> <p> <span> </span> </p> <p> <span>YOLOv4-tiny</span>在<span>COCO</span>上的性能可达到:<span>40.2% AP50, 371 FPS (GTX 1080 Ti)</span>。相较于<span>YOLOv3-tiny</span>,<span>AP</span>和<span>FPS</span>的性能有巨大提升。并且,<span>YOLOv4-tiny</span>的权重文件只有<span>23MB</span>,适合在移动端、嵌入式设备、边缘计算设备上部署。<span></span> </p> <p> <span> </span> </p> <p> 本课程将手把手地教大家使用<span>labelImg</span>标注和使用<span>YOLOv4-tiny</span>训练自己的数据集。课程实战分为两个项目:单目标检测(足球目标检测)和多目标检测(足球和梅西同时检测)。<span></span> </p> <p> <span> </span> </p> <p> 本课程的<span>YOLOv4-tiny</span>使用<span>AlexAB/darknet</span>,在<span>Windows10</span>系统上做项目演示。包括:<span>YOLOv4-tiny</span>的网络结构、安装<span>YOLOv4-tiny</span>、标注自己的数据集、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计<span>(mAP</span>计算<span>)</span>和先验框聚类分析。 <span> </span> </p> <p> <span> </span> </p> <p> 除本课程《<span>Windows</span>版<span>YOLOv4-tiny</span>目标检测实战:训练自己的数据集》外,本人推出了有关<span>YOLOv4</span>目标检测的系列课程。请持续关注该系列的其它视频课程,包括:<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:训练自己的数据集》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:人脸口罩佩戴识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:中国交通标志识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测:原理与源码解析》<span></span> </p> <p> <span> <img alt="" src="https://img-bss.csdnimg.cn/202007061503586145.jpg" /></span> </p> <p> <span><img alt="" src="https://img-bss.csdnimg.cn/202007061504169339.jpg" /><br /> </span> </p>
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页