今天写shader流光效果，shader代码少了个括号，unity shader compiler卡死且不提示原因
好在找到了原因，shader&代码如下，原理是提高经过的颜色亮度
void surf(Input IN, inout SurfaceOutputStandard o) {
// Albedo comes from a texture tinted by color
fixed2 scrolledUV = IN.uv_MainT
fixed xScrollValue = 5 * _T
fixed yScrollValue = 5 * _T
scrolledUV += fixed2(xScrollValue, 0);
fixed4 c = tex2D(_MainTex, IN.uv_MainTex);// *_C
fixed4 d = tex2D(_FlowTex, scrolledUV);
//if (d.a == 1) {
if(d.a & 0.5) {
o.Albedo = c.
o.Albedo = c.rgb + float3(d.a,d.a,d.a);
// Metallic and smoothness come from slider variables
o.Metallic = _M
o.Smoothness = _G
o.Alpha = c.a;
阅读(...) 评论()在unity中使用shader制作流光效果
我的图书馆
在unity中使用shader制作流光效果
流光，关键在于流动。从画法的角度看，流光效果的成本很低，一张流光图，一张过滤图，一个渲染遍，即可实现效果。但是效果很令人印象深刻。你跟随着这篇东西去一步步操作，就能得到一些实际可用的Shader。在开始写一个简单的流光效果之前，我们先普及一些shader的知识这是一个新建的shader，我只是添加了一些注释接下去，我们要在此基础上，一步步修改加上流光的效果。这里我们使用 surfaceshader，surfaceshader是unity的一个特别设计。他是pixelshader的一部分，准确的说，前半部分。Surfaceshader自动生成一个传统的vertexshader和pixelshader，根据你所指定的光照模型。因为大部分的shader并不干涉光照模型，而只是在像素阶段做一些叠加、混合什么的。Surfaceshader巧妙的让你可以只关心这一部分，学习的时候，只关注一部分，恰恰是个优点。随便准备两张图片，一张底图，一张流光图这里顺便给出一个快速制作流光图的ps操作方法。1、弄一个黑色的背景2、使用渐变工具其中logo01是底图，无所谓用什么东西，最好选择一张比较暗的图，我们准备采用加法让他变亮，暗一点效果更明显。我们想使用flow图的alpha通道，flow图延x方向运动，循环往复。至少要让flow图的一个半边全黑，因为加法全黑等于没加。当使用这半边时完全不加亮Flow贴图的设置这里要特别说明三个地方Alpha from Grayscale 从图片的灰度生成alpha通道，直接制作alpha通道不直观，灰度图很直观。
这个选项就是让你用一张直观的灰度图生成通道。你可以不用这个选项，而是自己提供一个有alpha通道的图片wrap Mode当uv超出0 1 范围是的取值方法，我们需要让这张图循环往复，就是利用wrap mode repeat来实现的。
必须使用这个选项Format，因为这张图我们只需要一个通道，而且不适合压缩，没有比Alpha8更适合的存储格式了
可选，只是为了节省内存容量
然后流光Shader 新手拈来，有注释的部分是在空shader基础上增加的稍微解释一下原理，把一张贴图的四个顶点的uv连成一个红框，是这样的。把每个顶点的uv.x /2 是这样的对uv.x 再加上同一个值是这样的我们就是要用加上的这个值，对这个红框做动画效果如下拖动shader下面的拉杆就可以看到循环效果，用一个脚本去驱动这个参数做动画，就有流光效果了。然后让我们做一点改变，动画这个东西不用脚本也能做。因为shaderlab里面有默认参数_Time.y 他等于Time.timeSinceLevelLoad经过Step02的修改，这个材质可以自动的动起来，不需要代码驱动。然后我们可以再改一点点，让他变成透明的也可以改成不受光影响的附注：本人大部分出自《剑英陪你玩转图形学》，作者李剑英
TA的最新馆藏
喜欢该文的人也喜欢unity中使用shader实现流光效果 - 游戏开发，移动开发技术干货分享 - 泰课在线 - 国内专业的Unity在线学习平台|Unity3d培训|Unity教程|Unity教程 Unreal 虚幻 AR|移动开发|美术CG|UI平面设计|前端开发 - Powered By EduSoho很多同学对shader的了解简直令人发指，不得不承认我之前的文章很失败，没有达到指引效果。
经过我深深的反思，本系列设定起点还是太高，仅仅着眼于本质不能让很多同学收获学习图形学的实效。
我已经反省过了，让这个系列更贴近初学者，你跟随着这篇东西去一步步操作，就能得到一些实际可用的Shader。
还是使用Unity作为测试工具，因为用他的人的确很多。
在这个小白丛生的圈子里说到图形学，大部分人都告诉你shader，我对此早已吐槽无力。
也只好放弃、随他去吧。该说的话之前的系列已经讲的很多，现在就从一个常用效果说起。
先介绍一个蛮常用的效果
从画法的角度看，流光效果的成本很低，一张流光图，一张过滤图，一个渲染遍，即可实现效果。
但是效果很令人印象深刻。
流光效果可用于2D或者3D。
用于3D的比如角色盔甲上流动的光斑
用于2D的例子比如在按钮上弄个飘过的亮光
比如炉石的卡牌
这些都是流光效果。其中炉石的卡牌流光效果比较复杂，多层、带过滤、多种流动形式。
其实两张图的shader，我们在《剑英陪你玩转图形学二》中已经展示了几个。而流光，关键在于流动。
在开始写一个简单的流光效果之前，我们先普及一些shader的知识
这是一个新建的shader，我只是添加了一些注释
接下去，我们要在此基础上，一步步修改加上流光的效果。这里我们使用 surfaceshader，surfaceshader是unity的一个特别设计。
他是pixelshader的一部分，准确的说，前半部分。
Surfaceshader自动生成一个传统的vertexshader和pixelshader，根据你所指定的光照模型。
因为大部分的shader并不干涉光照模型，而只是在像素阶段做一些叠加、混合什么的。
Surfaceshader巧妙的让你可以只关心这一部分，学习的时候，只关注一部分，恰恰是个优点。
随便准备两张图片，一张底图，一张流光图
这里顺便给出一个快速制作流光图的ps操作方法。看图就懂。
其中logo01是底图，无所谓用什么东西，最好选择一张比较暗的图，我们准备采用加法让他变亮，暗一点效果更明显。
我们想使用flow图的alpha通道，flow图延x方向运动，循环往复。至少要让flow图的一个半边全黑，因为加法全黑等于没加。
当使用这半边时完全不加亮
Flow贴图的设置这里要特别说明三个地方
Alpha from Grayscale 从图片的灰度生成alpha通道，直接制作alpha通道不直观，灰度图很直观。
这个选项就是让你用一张直观的灰度图生成通道。
你可以不用这个选项，而是自己提供一个有alpha通道的图片
wrap Mode当uv超出0 1 范围是的取值方法，我们需要让这张图循环往复，就是利用wrap mode repeat来实现的。
必须使用这个选项
Format，因为这张图我们只需要一个通道，而且不适合压缩，没有比Alpha8更适合的存储格式了
可选，只是为了节省内存容量
然后流光Shader 新手拈来，有注释的部分是在空shader基础上增加的
稍微解释一下原理，
把一张贴图的四个顶点的uv连成一个红框，是这样的。
把每个顶点的uv.x /2 是这样的
对uv.x 再加上同一个值是这样的
我们就是要用加上的这个值，对这个红框做动画
拖动shader下面的拉杆就可以看到循环效果，用一个脚本去驱动这个参数做动画，就有流光效果了。
然后让我们做一点改变，动画这个东西不用脚本也能做。
因为shaderlab里面有默认参数_Time.y 他等于Time.timeSinceLevelLoad
经过Step02的修改，这个材质可以自动的动起来，不需要代码驱动。
然后我们可以再改一点点，让他变成透明的
也可以改成不受光影响的
然后，最后的一步，让我们引入过滤的概念。
加入一张过滤图，和流光图一样设置
让只在这张图白色部分叠加流光
Shader如下
对比效果如图，前排无过滤，后排有过滤
可以在线看效果
项目源代码在这里
这里的流光效果仅仅适用于2D，接下来我们要建立一个更适合3D物体的流光效果。
大家也看到了，上面的球体流光效果一塌糊涂，那么用于3D的流光效果有什么不同呢，我们慢慢往下说。
2D的流光效果（或者说简单面片，uv均匀分布）直接用UV扰动即可，而3D模型的UV很多情况下分布的一塌糊涂，尤其是接近球体的模型
从uv这个角度考虑会进入一个死胡同，流光是一种反射，一种环境反射。那么自然是适合用一张cubemap，用法线去采样了。
这样做自然没有问题，用cubemap当然没问题，或者可以用更加节省的方式，极坐标贴图。
Cubemap是用六张贴图围成一个盒子，极坐标贴图是只用一个圆形贴图。
可是，流光效果只是简单的光亮，使用平面贴图还是环境贴图其实没有什么区别
我们只需要他按照法线分布，产生一种在模型表面移动的效果
准备一张自循环贴图
用于复杂的模型时效果更好
最后给3D流光加上过滤功能的shader我就不提供了，大家自己研究一下吧。
阅读(...) 评论()后使用快捷导航没有帐号？
只需一步，快速开始
&加载中...
查看: 8983|回复: 29
地面裂痕流光教程
TA的其他好贴
马上注册，加入CGJOY，让你轻松玩转CGJOY。
才可以下载或查看，没有帐号？
0.jpg (1.24 MB, 下载次数: 503)
15:45 上传
/ u0 O8 I% I$ s( }2 w
下面开始教程；
先找到一个地面贴图和裂痕贴图，（后面我会放出源文件，里面会有这两张贴图）。创建合成& o' I7 A# r# z& f0 r
1.jpg (40.14 KB, 下载次数: 477)
15:45 上传
% S7 F, h3 E1 ], P$ q% y$ {
首先我找的那个裂痕贴图颜色有点暗，这里我稍微处理了一下
2.jpg (26.13 KB, 下载次数: 448)
15:45 上传
3.jpg (33.6 KB, 下载次数: 455)
15:45 上传
然后我又用做了一个圆形贴图（有的这种贴图的同学可以直接用）- H+ _$ }( z&&Q. W, }
4.jpg (106 KB, 下载次数: 444)
15:45 上传
然后把裂痕那一层复制一张放到圆形贴图上面) K& n+ E& d, E
5.jpg (93.82 KB, 下载次数: 460)
15:45 上传
然后把上面那个裂痕贴图的叠加模式改为stencil Alpha
6.jpg (26.93 KB, 下载次数: 449)
15:45 上传
4 a. a6 ?& A2 ^, q( H
接着给圆形贴图K一个缩小放大的动画，然后可以再给缩放调节一下曲线先快后慢（这样更有节奏）
7.jpg (17.8 KB, 下载次数: 449)
15:45 上传
想要效果更好的同学可以再给圆环那个贴图加一个扭曲（我这里加了一个DE插件里的水波扭曲）
了看下现在的效果' E; A- }- G0 ?7 |5 \* v
8.jpg (278.64 KB, 下载次数: 468)
15:45 上传
% k! A; W&&z2 [) d: \+ k. L
然后把制作好的这个流光合并在一起9 x2 `; L+ i7 x
9.jpg (54.77 KB, 下载次数: 441)
15:45 上传
$ B3 W. u# H# q8 o3 d
然后把流光这一层的叠加模式改为ADD
10.jpg (86.84 KB, 下载次数: 455)
15:45 上传
( i8 H) I( a. S' H5 k' d/ `8 y
然后再给流光那一层加一个glow（辉光）增加光感2 ]5 j$ D* S/ b2 B% P7 u
11.jpg (99.42 KB, 下载次数: 445)
15:45 上传
然后再制作一个圆形贴图) j3 A5 E$ B7 y7 Q
12.jpg (26.08 KB, 下载次数: 442)
15:45 上传
然后吧圆形贴图 放到裂痕那个图层的下面地面那层的上面，当做光晕来用（然后跳一个裂痕的叠加模式就好了）。
13.jpg (73.67 KB, 下载次数: 446)
15:45 上传
! o. K$ W% e8 A; |
好了 看下效果吧
如何让别人关注你？
太感谢了，十分感谢，谢谢
本楼回复(<span id="dp_count_)
如何让别人关注你？
？？？为什么和我写的那个教程一模一样啊？？？{:soso_e132:}
是同一个教程&
本楼回复(<span id="dp_count_)
如何让别人关注你？
本楼回复(<span id="dp_count_)
如何让别人关注你？
雪兔 发表于
？？？为什么和我写的那个教程一模一样啊？？？
是同一个教程
本楼回复(<span id="dp_count_)
如何让别人关注你？
本楼回复(<span id="dp_count_)
如何让别人关注你？
本楼回复(<span id="dp_count_)
如何让别人关注你？
豌豆哥。。。unity3d的话&&地面流光演怎么做？
本楼回复(<span id="dp_count_)
如何让别人关注你？
你这个教程的源文件和贴图在哪里？不是说有的么？& & 有的话给我发一份，，谢谢
本楼回复(<span id="dp_count_)
如何让别人关注你？
{:soso_e179:}{:soso_e179:}&&谢谢啦！！
本楼回复(<span id="dp_count_)
如何让别人关注你？
Powered by}