效果: 图左:一道金光闪过,瞬间灰飞烟灭 图右:燃烧效果,先过渡到黄色,然后渐渐过渡到黑色,最后消失殆尽. 这是游戏中常见的效果,各位可以想想自己玩过的游戏. 手头正在玩的,梦三国手游,死亡的时候就是溶解消失. 代码有注释: Shader "Custom/Dissolve" { Properties { _MainTex("main tex",2D) = ""{} _DissolveTex("dissolve tex",2D)…

溶解效果在游戏中是很常见的,比如在一些神话或者魔法世界中,一些NPC角色在剧情需要时候会身体会渐渐的消失掉.甚至有一些更炫的,比如用火焰喷射器把目标燃尽.这些都可以用到溶解效果.这篇文章主要是讲解一下比较基础的溶解效果如何实现,实现的方法并不唯一,本篇只是其中一种思路. 原理 既然想让角色的身体一块块渐渐消失,不妨就让角色身体上相应的部位不进行渲染(或者改成透明,我们这里选择前者).那根据什么来判断身体的哪一部分需要被溶解呢,这时候就需要一张额外的贴图或者利用角色纹理贴图的Alpha通道(本篇选…

这里通过 “是否丢弃像素”的2种方法,写2个shader,效果是一样的,也提到了,丢弃某个像素的3种方式. 是否丢弃: 1.通过脚本控制shader变量判断当前是否丢弃像素,需要额外脚本: 2.shader根据当前时间控制是否丢弃某个像素,不需要额外脚本. 丢弃方法: 1.通过clip函数进行丢弃像素: 2.通过discard丢弃像素: 3.通过设置alpha变量为0丢弃像素. 1)DissolveOne.shader通过脚本控制 Shader "Unlit/DissolveOne"…

转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如以下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChan…

pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: true }); document.body.appendChild(app.view); // Create background image const background = PIXI.Sprite.from('/moban/bg_grass.jpg'); background.width…

效果: 思路: 1.算出正确的uv去采样过滤图,上一篇文章说的很明白了.Shader实例:NGUI图集中的UISprite正确使用Shader的方法 2.用当前血量占总血量的百分比来设置shader中的变量,来控制血条的裁剪. 实际操作中,在shader中声明一个uniform float _Factor 然后在C#脚本中,对这个变量进行设置,结果发现,界面上不能实时响应这个值,进行正确的裁剪. 那么我只好牺牲color的一个分量,比如设置g分量,shader中用g分量的值来对血条进行裁剪.最终…

unity3D 涂涂乐使用shader实现上色效果 之前我博文里面发过一个简单的通过截图方式来实现的模型上色方法,但是那个方法不合适商用,因为你需要对的很准确才可以把贴图完美截取下来,只要你手抖了一下就会发现贴歪了.那么有没有更好的方法来实现这个效果呢,这就需要使用Shader的方式来实现这个效果. 刚好看到了一篇有关于涂涂乐原理的实现方法,EsayAR的官方案例里面就是使用的这个方法,EsayAR的官方案例其实基本完成这个涂涂乐的效果在看过涂涂乐原理,结合案例的是用Vuforia实现的一个效果…

http://gad.qq.com/article/detail/28346 描边效果是游戏里面非常常用的一种效果,一般是为了凸显游戏中的某个对象,会给对象增加一个描边效果.本篇文章和大家介绍下利用Shader实现描边效果,一起来看看吧. 最近又跑回去玩了玩<剑灵>,虽然出了三年了,感觉在现在的网游里面画面仍然算很好的了,剑灵里面走近或者选中NPC的一瞬间,NPC就会出现描边效果,不过这个描边效果是渐变的,会很快减弱最后消失(抓了好久才抓住一张图....) 还有就是最常见的LOL中的塔,我们把…

pixijs shader 制作百叶窗效果 直接贴代码了 const app = new PIXI.Application({ transparent: true }); document.body.appendChild(app.view); // Create background image const background = PIXI.Sprite.from('/moban/bg_grass.jpg'); background.width = app.screen.width; bac…

补充 float4 fixed4 _Time 1: float4是内置向量 (x, y, z, w); float4 a; 访问单独成员a.x, a.y, a.z, a.w;2: fixed4 是内置向量(r, g, b, a); fixed4 c; color.r, color.g, color.b, color.a;3: float3是内置向量(x, y, z);4: fixed3 是内置向量(r, g, b);5: float2 是内置向量(x, y);6: _Time: 自场景加载开始所…

效果: 变灰,过滤,流光 都是UI上常用效果. 比如: 1.按钮禁用时,变灰. 2.一张Icon要应付圆形背景框,又要应付矩形背景框.就要使用过滤的方式来裁剪. 避免了美术提供两张icon的麻烦,又节省了内存. 3.流光,呃……,策划就是要,你能怎么办. 实践: NGUI把要用到的图片做成了图集,它会记录每一张小图的信息. 包括:每一张小图在这张图集里面的位置,长,宽,padding,border.等等. 使用时只是采样这张小图所在区域,然后显示在UI的mesh上. 如果我们用这张小图的texc…

效果: 序列帧图片网上随便找的,质量不是很好,重点不是它,不要在意. 思路: 1.之前都是在一张面片上直接映射一张纹理,IN.uv的范围是0~1 现在要映射一张纹理上的一小块区域,就要用这块区域的uv去采样后映射到面片. 所以:x方向,IN.uv.x/列数,范围变化到0~(1/列数) 同理:y方向,IN.uv.y/行数,范围变化到0~(1/行数) 2.根据时间驱动,加上当前sprite的偏移量 uv.x = cellX + SpriteColumnIndex*1.0 / _Column; uv.…

效果: 案例:新仙剑,王者之剑. 在切换场景的时候,就会有这样的全屏扭曲效果. 思路: 1.用GrabPass抓屏到一张纹理中. 2.进行扭曲,绘制到UGUI的Image上. 准备: 去官网下载Unity内置Shader,当前最新版本:builtin_shaders-5.3.1f1 http://unity3d.com/cn/get-unity/download/archive 里面有Image用的默认Shader:Sprites-Default 我们要在这个shader的基础上加上扭曲效果.…

准备: 1.一张背景图 2.一张流光图 3.一张过滤图 like this: 效果: 代码: Shader "Custom/2d_flow" { Properties { _MainTex("main tex",2d) = ""{}//主贴图 _FlowTex("flow tex",2d) = ""{}//流光图 _MaskTex("mask tex",2d) = ""…

准备: 1.一段小视频 2.一张电视机贴图 3.一张过滤图 效果: 让视频内容只在电视机屏幕区域显示 Shader代码:有注释 Shader "Joe/old_tv" { Properties { _MainTex("main tex", 2d) = ""{}//主贴图 _TVTex("TV tex",2d) = ""{}//屏幕内容 _TVMask("TV mask",2d) = &q…

前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大家带来的是图片的马赛克效果,这种效果你们应该很熟悉了,比如看到一些较污的新闻,关键的地方总是有这万恶的马赛克挡着,咱们今天就来剖析一下这马赛克到底是撒东西,是一个什么原理: 大家看看这张图,这就是马赛克的效果,整个图就是一颗颗很大的像素点构成的,当然这里说的像素点指的不是一像素,而是一个像素点可能是…

//预览图 //原理 一个摄像机CullingMask设置只可见"Distortion"的Layer(需要自己手动加),输入到一张RenderTexture,其实就是用于确定哪里要扭曲. 另外一个摄像机CullingMask设置成对除了"Distortion"的Layer可见,并挂上后期效果脚本. //Shader代码 Shader "Hidden/Distortion" { Properties { _MainTex ("Textur…

透明效果 透明效果一般有两种实现方法: 第一种,使用透明度测试(Alpha Test) 第二种,使用透明度混合(Alpha Blending) 透明度测试和透明度混合机制: 透明度测试(Alpha Test):只要一个片元的透明度不满足条件(小于某阀值),那么它对应的片元就会被舍弃.被舍弃的片元将不会再进行任何处理,也不会对颜色缓冲产生任何影响:否则,就按照普通的不透明物体处理,即进行深度测试.深度写入.透明度测试不需要关闭深度写入. 透明度混合(Alpha Blending):使用当前片元的透…

在上一篇文章中,一起学习了通过设定画笔风格来实现图形变换,没读过的朋友可以点击下面链接: http://www.cnblogs.com/fuly550871915/p/4886455.html 是不是觉得自己学到的知识更多了呢?那么再多学一点总没坏处.在本篇文章中,将会一起学习通过给画笔设定Shader属性,实现图形变换.并带领读者一起实现两个实际例子,图片渲染器和线性渲染器.有没有发现我们的画笔特别强大呢??确实,我们曾经给它设置过颜色矩阵属性,设置过xfermode风格属性,现在又来设定Sh…

http://blog.sina.com.cn/s/blog_89d90b7c0102vfqz.html 球面贴图一般用于环境反射,如下图(左边为球面贴图,右边为正常贴图),一个镜面水晶球在这只猫的前方,而这只猫也正看着这个水晶球,效果是这只大头猫的头变的更大了. 原理: 1.将顶点转换到摄像机空间 2.根据该顶点的摄像机[入射向量 I ]和[法线向量N]计算[反射向量R] 3.将[反射向量R]与[摄像机向量(0,0,1)]相加,计算出[过渡向量m] 4.求[过渡向量m]单位向量,再将值映射为u…

转发请保持地址:http://blog.csdn.net/stalendp/article/details/40859441 AngryBots是Unity官方的一个非常棒的样例.非常有研究价值. 曾经研究的时候.因为其内容丰富,一时间不知道从哪入手写文章分析. 这一段时间研究shader技术比較多一些,就从shader的这一方面開始吧.首先分析当中的一个屏幕特效:当主角受到攻击时会出现的全屏效果(postScreenEffect).效果例如以下: 事实上这是一种的Bloom效果,相关文件有:M…

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

屏幕后效果指的是,当前整个场景图已经渲染完成输出到屏幕后,再对输出的屏幕图像进行的操作. 在Unity中,一般过程通常是: 1.建立用于处理效果的shader和临时材质,给shader脚本传递需要控制的参数和变量 2.利用OnRenderImage函数抓取当前屏幕渲染纹理 OnRenderImage(RenderTexture source, RenderTexture destination){  } 第一个参数为处理前纹理,第二个为最终显示纹理 3.在OnRenderImage函数中调用Gr…

关于屏幕后效果的控制类详细见之前写的另一篇博客: https://www.cnblogs.com/koshio0219/p/11131619.html 这篇主要是基于之前的控制类,实现另一种常见的屏幕后效果——边缘检测. 概念和原理部分: 首先,我们需要知道在图形学中经常处理像素的一种操作——卷积. 卷积操作的实质在于,对于图像中的每个像素与其周围的像素进行的重新融合计算行为,以得到不同的像素处理效果,例如锐化图像,模糊图像,检测边缘等. 卷积操作通过不同的像素融合算法能得到各不相同的效果,这主…

Unity内置的雾效需要在每个shader中分别编写,造成了极大的不便.这里利用屏幕后处理产生可单独控制且自由度更高的雾效. 屏幕后雾效的本质在于,通过深度纹理重构出每个像素在世界空间中的位置,根据得到的世界坐标计算出雾效系数,最后利用雾效系数与雾的颜色相乘并与原始颜色进行插值运算得出最终效果. float3 afterFog=f*fogColor+(1-f)*origColor; 上面的插值运算中f代表雾效系数, 它有多种计算方法: 1.线性运算: f=(dmax-Abs(z))/dmax-d…

速度映射图主要是为了得到每个像素相对于前一帧的运动矢量,其中一种方法是使用摄像机的深度纹理来推导. 推导过程如下: 先由深度纹理逆推出NDC(归一化的设备坐标)下的顶点坐标,利用VP矩阵(视角*投影矩阵)的逆矩阵反向变换出每个像素在世界空间中的位置, 再利用世界空间下的坐标与前一帧的VP矩阵顺向变换出前一帧的NDC坐标,利用NDC下前一帧和相当帧的坐标差来确定速度的方向, 最后利用速度的方向对纹理采样的结果进行加权平均并多次绘制,以达到带有物体运动方向的模糊效果. 基于这一原理,需要准备的要素有…

景深效果的原理是,在摄像机的近裁剪平面和远裁剪平面之间可以设置一个焦距,在这个距离所在的平面上的物体最为清晰,而这个距离之前或之后的物体成像是一种模糊状态(根据距离逐渐模糊,最终达到最为模糊的状态). 在shader中,需要一张清晰的场景图和一张模糊的场景图,可以通过每个像素相对焦距的距离来判定这个像素最终的清晰程度.在清晰图和模糊图之间做关于深度变化的插值运算. 关于摄像机的近裁剪平面和远裁剪平面,可以直接在Camera组件的属性面板中调节(默认的远裁剪平面距离是1000): 模糊图可以直接采…

Bloom的原理很简单,主要是提取渲染图像中的亮部区域,并对亮部区域进行模糊处理,再与原始图像混合而成. 一般对亮部进行模糊处理的部分采用高斯模糊,关于高斯模糊,详见之前的另一篇博客: https://www.cnblogs.com/koshio0219/p/11152534.html 计算方法: 总共需要用到4个Pass,它们的顺序如下: Pass 1:得到纹理的亮度值(灰度值),由此计算出亮部区域,传递给一个临时的新纹理,这里叫_Bloom Pass 2,3:单独对_Bloom进行高斯模糊(…

高斯模糊是图像模糊处理中非常经典和常见的一种算法,也是Bloom屏幕效果的基础. 实现高斯模糊同样用到了卷积的概念,关于卷积的概念和原理详见我的另一篇博客: https://www.cnblogs.com/koshio0219/p/11137155.html 通过高斯方程计算出的卷积核称为高斯核,一个5*5的高斯核对它进行权重归一化如下: 0.0030 0.0133 0.0219 0.0133 0.0030 0.0133 0.0596 0.0983 0.0596 0.0133 0.0219 0.…

水流的模拟主要运用了顶点变换和纹理动画的结合: 顶点变换中,利用正弦函数模拟河流的大致形态,例如波长,振幅等. 纹理动画中,将纹理坐标朝某一方向持续滚动以形成流动的效果. 脚本如下: Shader "MyUnlit/ScrollWater" { Properties { _MainTex ("Texture", 2D) = "white" {} _Color(,,,) //控制水流波动的幅度,也就是三角函数中的振幅(值域范围) _Magnitud…