Vitens的专栏

Unity中用Shader实现的UI特效在UGUI中的RawImage中运行良好,但是在Image中运行就奇奇怪怪的原因以及解决办法.

效果如下原理：倒影区域也用图片本体，做个镜像翻转（RectTransform中的scale的Y设为-1），然后shader对图片进行处理，达到一个透明度Y方向上渐变的效果。实现：因为是UGUI上使用，推荐直接在内置的UI-Default.shader中进行修改（官网可以下载）。要达到Y方向上的透明度渐变，可以使用UV坐标中的v作为变化因子，通过一个衰减曲线达到效果，我这里采用的指数函数（Pow），关键代码其实就下面这一句，如下：color.a...

问题描述：在3D场景中使用Spine模型(2D), 因为Spine需要像Billboard类似的处理,永远是垂直与相机的, 所以一般情况下2D模型能正常显示且前后的阻挡关系也是没有问题的,如下图所示,一切都很美好.（这里用一个四边形，图中的福字表示2D模型）可是如果后面蓝色的格子比较高,或者2D角色本身也比较高,那么就会出现模型穿插的问题,如下图所示:如果吧2D模型竖立起来,前后关系肯定是没有问题的,所以也能避免模型穿插的问题,可是就没有Billboard效果,圆形的福字已经被压扁了,如下图:

环境光接触过光照模型的小伙伴肯定对环境光不陌生,比如phong光照模型,渲染结果就是下面几项的线性叠加:环境光+漫反射+高光而一般情况我们在Shader中计算环境光也是简单的不能再简单了,直接可以从Unity的宏定义中拿到环境光颜色值: UNITY_LIGHTMODEL_AMBIENT.xyz他的定义是这样的#define UNITY_LIGHTMODEL_AMBIENT (glstate_lightmodel_ambient * 2)接下来就是设置环境光并进行测试.设置通过Window-

shader中使用模型坐标参与计算，就得注意批处理的影响，比如在场景中某个材质的物体出现一个的时候，表现正常，但是一旦再出现第二个，两个物体的表现就变成玄学了（不是自己预期的那样），一旦由隐藏掉另外一个，剩下的另一个由正常了。当然这肯定不是玄学，得分析分析其中的原因。做一个简单的测试，使一个正方体上半部分显示绿色，下半部分显示红色：shader中在fragment中通过模型坐标Y的大小来决定颜色是红是绿：fixed4 frag (v2f i) : SV_Target{ if(i.model

效果如下：原理:以常见的普通正方形小方块表现的马赛克为例,首先将图片进行格子划分为N*N个小方块.然后每个小方块的颜色则取该方块中心点位置的颜色值.代码上的目标就是某个小块内的uv值都修改为本小块的中心点的uv值.关键代码：i.uv.x = round(i.uv.x / _Factor) * _Factor;i.uv.y = round(i.uv.y / _Factor) * _Factor;round(x) 四舍五入, 为了让周围的像素取中心点的颜色值. _Factor范围大小的参数,表

效果如下:Unity中的聚光灯SpotLight，可以用作手电筒，射灯等类似的效果，比如这样的但是如果想把光束的效果做出来，就超出了SpotLight的能力范围了，本篇就为了记录一下一种简单的实现光束效果的办法。（不会用到体积光复杂的计算，当然局限性也很大，适合于要求不是很高的场景）原理：准备好一个锥体模型，半透明着色，并处理好边缘的虚化。1.椎体网格，就是光束的样子，用来模拟光束的体积感2.开始编写shader，简单的输出颜色即可，不需要纹理也不需要计算UV，因为是模拟光，就普通的半

之前写过一篇，方形头像和圆形头像的过度效果，Unity随记(三) 方形头像与圆形头像的切换过度效果.当时采用的就是从中心点(0.5,0.5)为圆心,通过控制半径的长度和方形头像进行剪切的操作,文章:但是如果需要对icon进行圆角处理,则需要换个方式了,不然会显得比较生硬,对比图如下:这里采用的是四个角都用一个小圆来进行对边角的裁剪处理(真正的圆角处理不知道是不是这样,不过现在这样的效果看起来已经满足需求了).如下图所示:参考右上角的小圆,仅仅找到蓝色部分,将蓝色部分的Alpha设为0使其透明不显示

效果如下：或者只显示线框，如下：注意此效果仅仅针对部分模型生效，比如unity内置的立方体Cube,因为采用的实现方式比较依赖顶点UV值。实现思路：通过UV值判断，处在立方体边的边缘附近（接近0和接近1的部分）的部分可见，而其他部分透明度设为0，作为不可见部分，而具体要怎么判断是否在边附近。要从内置的cube顶点参数来找线索了，如果仅仅是为了显示一个立方体模型的话，用八个顶点就够了，也就是说立方体的每个角就一个顶点，一个面两个三角形就总共十二个三角形就搞定，的确，如果自己手动尝试构造一个立方

先上效果图：静态对比图：简单实现思路，从两点出发，一个是去掉绚丽的颜色（变灰处理咯），一个是贴上大理石纹理（看起来更像石头点）。第一步（变灰处理）float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));col.rgb = lerp(col.rgb, float3(grey, grey, grey), _StatueDegree);...

先上效果图2D版本：3D版本：小蓝在小红濒死状态下补上了致命一击，人物变成黑色剪影效果，场景配合变成黄白交替闪烁，再配合一个慢动作就是上面的这个简单的场景击杀效果(因为是战斗场景和人物同时做出一个整体的配合表现击杀的效果，暂时就取个这个名字吧~)实现思路在击杀时刻，调用SetReplacementShader方法，将人物的shader临时替换成黑色剪影效果的渲染方式，场景的shade...

先上效果图小蓝吧小红逼到了墙角乱砍一番，受击效果与濒死效果就是如图所示，简单的实现则是通过颜色叠加的方式，在最终的颜色值上叠加上白色与红色，然后代码控制简单的交替变化。所以在shader方面仅仅只用进行一个颜色的加法操作即可：fixed4 frag(v2f i) : SV_Target{ fixed4 col = tex2D(_MainTex, i.uv) * _Tint; //受击...

#pragma shader_feature 和 #pragma multi_compile相似，起作用就是在一个shader脚本中支持多个版本的分支选择，和C#里面使用的宏定义差不多，使得shader代码的编辑更加高效（不用因为一点处理分支不一样而编写多个shader,只用使用这个方式，同一个shader中就可以支持多个分支，unity会自动编译出多个对应分支处理的shader,这就是变种数的体...

先上效果图这应该不太陌生的吧，这就是雨松大牛Unity3D研究院里面的头像效果，最开始逛他的文章就发现这个效果有点意思，于是自己动手在Unity里面实现一个类似的效果。其实关键就两步操作，1.实现图片的圆形裁剪，2.控制图片的旋转圆形裁剪要做圆形裁剪，首先想到的就是用Shader来处理了，通过图片的UV值可以明确的知道，裁剪后的圆的圆心处的UV值其实是（0.5,0.5）,而左下角的值是（...

GUP Instancing技术，在模型的批处理上相当有用，比如地形上大量的草，树等，当然对于这部分可以直接静态合批处理成一整个网格，但是顶点数目又会有65000个的限制。这时候GPU Instancing就有一定的优势（关键还支持材质球上属性的差异性，比如官网的例子中就提供了颜色值的差异性）。官网地址：https://docs.unity3d.com/Manual/GPUInstancing...

在Shader纹理采样的运用中，灵活的对UV进行操作可以达到很多种很棒的效果，今天就来介绍一种简单的动画效果帧动画。效果图：用到的示例图：关键点就是对纹理采样中的缩放（Tiling）与偏移（Offset）的理解，如图：正常情况下的采样效果：帧动画要求每次只显示一小张图，然后练习跳转显示后续的图，所以每次UV的范围就不能在默认的0-1的范围。如给定的这张图，宽为2，高为3，u的范围（Tiling的X...

3.The Graphics Processing Unit GPU实现的渲染管线的流程: 绿色可编程,黄色只可配置,蓝色是不可操作的. 可编程阶段:Shaders are programmed using C-like shading languages such as HLSL, Cg, and GLSL. These are compiled to a machine...

5.Shading Basics  5.1Shading Models其实就是多次差值计算的使用,就是CG语言中的lerp函数. dot对两个单位向量使用的结果是获得两个向量的夹角的cos值.其中的n,l,都是单位向量, dot(n,l)求得cos值,因为l的大小为1,所以在n上面的投影值为就是cos值, 而 l + r 所得到的向量方向与n方向一样,大...

两天前有个朋友想要弄个给图片加阴影的效果找我帮忙,刚开始比较纳闷图片加阴影,怎么个加法,当他发了张图瞬间就懂了,效果是这样的:原理就是简单的一个UV小幅度的偏移采样得到影子然后和原始UV采样的结果叠加在一起(影子在后面原图在前面)就OK了.(纹理的wrapMode需要设置为Clamp)完整的Shader:Shader "Custom/ImageShadow"{ Prope...

通过对纹理采样的Shader学习，明白了几点：1.  _MainTex_ST  :这个是纹理名 + _ST的float4变量,其实就是Unity为我们提供好的直接获取到的UV的缩放与偏移值，刚好四个值，凑成一个float4：2.顶点UV值的获取：在unitycg.cginc中的appdata_full中的texcoord.xy, 如果需要支持光照贴图，光照贴图的uv存在texcoord1.xy中：...