Shader做剪影效果

某渣渣甩了一个需求给我,并且说我不会写。我明知是激将法,但是想想这需求也太简单了,我好像也不怎么会QAQ。为了表示我对shader的热爱,写就写。



需求是这样的:

这是一个漂亮的MM,但是渣渣不想让人知道,想把她变成影子,但是他自己又不想做多一张图片,毕竟也想影子的颜色随便改变(总之渣渣的世界借口很多就是)。

----------->------------>----------->--------->



分析下如何实现吧:

首先要把MM显示出来,因为图片除了人物,其它地方都是透明的,那么肯定要用到透明混合的。其次,要先把整个人物变成黑色,然后再上其它颜色。

为什么要变成黑色呢?

因为黑色的颜色值是(0,0,0),也就是黑色加什么颜色就等于什么颜色(0+x = x),而黑色乘上任何颜色值都等于黑色(0 * x = 0)。

为什么不白色呢?

因为白色的颜色值是(1,1,1),bralabalala............



好了,分析完了,那么就动手吧(其实实际是先动手了再分析的= =,所以说总结很重要吗!?)

Shader "CharmingShader/Cartoon001/Unlit"
{
    Properties
    {
        _MainTex("Main Tex",2D) = "white"{}
        _Tint("Color",Color) = (1,1,1,1)
    }
        SubShader
    {
        Tags{ "RenderType" = "Transparent" "Queue"="Transparent"}
        Pass
        {
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Tint;

            struct a2v
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
            };
            struct v2f
            {
                float2 uv :TEXCOORD0;
                float4 pos : SV_POSITION;
            };
            v2f vert(a2v a)
            {
                v2f f;
                f.uv = TRANSFORM_TEX(a.texcoord, _MainTex);
                f.pos = mul(UNITY_MATRIX_MVP, a.vertex);
                return f;
            }
            fixed4 frag (v2f i) :SV_Target
            {
                fixed4 col = tex2D(_MainTex,i.uv);
                fixed4 colo = col*fixed4(0, 0, 0, 1) + fixed4(_Tint.rgb,0);
                return colo;
            }
            ENDCG
        }
    }
}

代码还是很简单的,关键的代码可能就是这行

                fixed4 colo = col*fixed4(0, 0, 0, 1) + fixed4(_Tint.rgb,0);

怎么解释呢?。。。。。

其实就是,因为图片肯定是方形的(包括透明部分),不透明部分的数值相当于(x0,y0,z0,1)。

(x0,y0,z0,1)*(0,0,0,1) = (0,0,0,1) 也就相当于黑色。最后(0,0,0,1)+(_Tint.rgb,0) = (_Tint.rgb,1)也就是要上的颜色了。

对于透明部分,原始数值相当于(x1,y1,z1,0),(x1,y1,z1,0)*(0,0,0,1) = (0,0,0,0)也是透明的。

最后(0,0,0,0)+(_Tint.rgb,0) = (_Tint.rgb,0)同样也是透明的。

综上就可以达到预期的效果了。

当然笔者认为使用内置的clip函数会适用性更广点,但以上的方法更加锻炼思维能力吧(明明就自己不会QAQ)。总之,方法没有好坏,只有适不适合。

ps:眼睛看到的永远是表象,背后的事实有时候不要去了解,毕竟好看就行了。。。

时间: 2024-11-09 16:48:26

Shader做剪影效果的相关文章

Android 开发中踩过的坑之十一: 避免使用Shader做动画

进来优化内存, 发现5.0的系统上, Shader有个不算bug的小问题, Shader在绘制时, 会copy自身, 如果使用shader做动画, 就会不断的copy自身, 不断的增加使用内存. 大概2k/s的速度上涨 sdk放出的源码中有一个@hide的方法copy(), 怀疑就是它导致内存不断增长, 但是查不到调用. 解决方法也简单, gc一下, 或者避免使用shader来做动画.

用Shader做动画

上面的图片为表面着色器的输入图片,要用Shader实现动画效果. 首先,定义属性: Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _TexWidth("Sheet Width",float) = 0.0 _CellAmount("Cell Amount",float) = 0.0 _Speed("Speed",Range(0.01,32)) =

【译】Unity3D Shader 新手教程(1/6)

刚开始接触Unity3D Shader编程时,你会发现有关shader的文档相当散,这也造成初学者对Unity3D Shader编程望而却步.该系列教程的第一篇文章(译者注:即本文,后续还有5篇文章)详细介绍了Unity3D中的表面着色器(Surface Shader)的,为学习更复杂的Shader编程打下基础. 动机 如果你是刚刚接触Shader编程的新手,你可能不知道从何开始踏出Shader编程的第一步.本教程将带你一步步完成一个表面着色器(Surface Shader)和片段着色器(Fra

【OpenGL】Shader实例分析(六)- 卡牌特效

转发请保持地址:http://blog.csdn.net/stalendp/article/details/30989295 本文将介绍怎么通过alpha通道来隐藏信息,并实现卡牌特效.运行效果如下: 代码如下: Shader "stalendp/imageShine" { Properties { _MainTex ("image", 2D) = "white" {} _NoiseTex("noise", 2D) = &qu

cocos2dx 编写shader 遇到 溢出问题

在 编程语言中,不论什么 数据类型 都有 各种 的 局限,无法 表示 现实世界中的 不论什么 情况. 比如 int ,char 会 溢出,float 会 有 溢出 以及 精度 不准确的 情况. 所以 我们 在 开发 中 须要 特别 注意 这些事. 近期 须要 在 cocos2dx(2.1.4) 引擎下 用 shader 做一些 效果.遇到 一些 在 windows 上 没有问题,可是 移植到 android 就会 出问题的 现象. 记录 下来.一为  加深印象 .二为 提供 遇到 同类 问题 的

Unity3D shader简介

Unity3D shader简介 可以肯定的说Unity3D使得很多开发者开发游戏更容易.毫无疑问,shader(着色器)编码,仍有很长的路要走.shader是一个专门运行在GPU的程序,经常被神秘包围,它最终绘制3D模型的三角形.如果你想给游戏一个特殊的显示,学习如何编写shader是必要的.Unity3D使用shader做后期处理,对2D游戏也是必不可少的.这个系列的文章将逐步介绍shader编程,并面向几乎没有任何shader知识的开发者. 简介 下图大致表示了在Unity3D渲染流程中发

cocos2d-js Shader系列2:在cc.Sprite上使用Shader(黑白、灰度、造旧效果)

在Sprite中使用Shader做特殊的颜色处理比较简单,只需要把Shader程序绑定到Sprite上即可: sprite.shaderProgram = alphaTestShader; Cocos2d内置了一些Shader,详细可以看代码: 其中,CCShaderCache缓存了一些Shader实例,而GLProgram则对gl的api做了简单的封装让接口更友好. 需要注意的是,使用GLProgram编译shader程序时,cocos2d会自动加入了一些参数. _compileShader:

Shader编程学习笔记(七)—— Surface shader 1

Surface shader 本小结对Unity的Surface Shader做一个大概的了解.主要了解在Surface Shader当中比较重要的几个部分,分别是: SurfaceOutput Input lighing shadow 首先查看一下Unity的官方手册中的Writing Surface Shaders,其中描述道:如果要编写一个shader去和光进行交互是比较复杂的,因为光照会有不同的光照类型,不同的阴影选项和不同的渲染路径(包括foward和deferred renderin

Shader初学者笔记

简而言之,在渲染管道中,有两个环节是开放给我们的,即Vertex Shader(顶点着色器)和Fragment/Pixel Shader(片段着色器). shader或pipeline相关的入门资料是非常多的,但没有多少中文资料是初学者真的能看懂的.如同国内外计算机书籍的区别一样,我们从小耳濡目染了把简单事情书(fu)面(za)化.所以,建议优先读英文资料. 本篇作为学习笔记,同时也考虑如何避开繁复艰涩的弯路,真正浅显入门.于是乎,这篇从这样一个问题开始吧:上面的图我们了解到了渲染流程,那么回头