剑英陪你玩转图形学 (四)流光效果(草稿)

很多同学对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贴图的设置这里要特别说明三个地方

  1. Alpha from Grayscale 从图片的灰度生成alpha通道,直接制作alpha通道不直观,灰度图很直观。

    这个选项就是让你用一张直观的灰度图生成通道。

    你可以不用这个选项,而是自己提供一个有alpha通道的图片

  2. wrap Mode当uv超出0 1 范围是的取值方法,我们需要让这张图循环往复,就是利用wrap mode repeat来实现的。

    必须使用这个选项

  3. Format,因为这张图我们只需要一个通道,而且不适合压缩,没有比Alpha8更适合的存储格式了

    可选,只是为了节省内存容量

    ?

然后流光Shader 新手拈来,有注释的部分是在空shader基础上增加的

效果如下

拖动shader下面的拉杆就可以看到循环效果,用一个脚本去驱动这个参数做动画,就有流光效果了。

然后让我们做一点改变,动画这个东西不用脚本也能做。

因为shaderlab里面有默认参数_Time.y 他等于Time.timeSinceLevelLoad

经过Step02的修改,这个材质可以自动的动起来,不需要代码驱动。

然后我们可以再改一点点,让他变成透明的

也可以改成不受光影响的

然后,最后的一步,让我们引入过滤的概念。

加入一张过滤图,和流光图一样设置

让只在这张图白色部分叠加流光

Shader如下

对比效果如图,前排无过滤,后排有过滤

可以在线看效果http://lightszero.github.io/shader_01/shader_01.html

项目源代码在这里。

未完持续,这里的流光效果仅仅适用于2D,接下来我们要建立一个更适合3D物体的流光效果。

大家也看到了,上面的球体流光效果一塌糊涂,那么用于3D的流光效果有什么不同呢,我们慢慢往下说。

时间: 2024-12-28 01:23:17

剑英陪你玩转图形学 (四)流光效果(草稿)的相关文章

剑英陪你玩转图形学(五)focus(草稿)

今天介绍一个小效果 新手引导的时候,我们会需要一种全屏幕黑掉,只有一个区域亮起的效果 废话不多说,先看效果 http://lightszero.github.io/focuswin/focuswin.html ? 一.首先让我们来建立基本的测试环境 建立两个Quad 把Camera配置成这样 把Quad配置成这样 把QuadOver配置成这样 这时候Quad就在屏幕中心,和屏幕看起来一样高 看起来是这样的 制作这样一张png图片 再找张背景图, 然后给背景图一个unlit材质,给quad 给qu

剑英陪你玩转图形学(一)打通任督二脉

1. 这是一个尝试的系列,突发奇想觉得有声音可能会更有趣,这个系列Blog都会出视频有声版. 这个系列主要是为了玩一玩代码. 我觉得呢,写程序是一件很有意思的事情,没有必要搞得那么苦大仇深.但是,却总有那么一些人.那么一些资料,非要把写代码搞成一件高山仰止的事情,搞成是非精英屌丝不可完成的任务.搞成是非要你上辈子就注定是个屌丝,这辈子投胎转世还是个屌丝才能够从事的职业. 简单的事情复杂化,具体的东西抽象化,抽象的东西再把它神化.这就是很多资料对你所做的事,他们,只是把你的大脑搞乱,然后让你觉得,

剑英陪你玩转图形学(一)

这是一个尝试的系列,突发奇想觉得有声音可能会更有趣,这个系列Blog都会出视频有声版 大家好,我叫李剑英. 我姓李,又总是一副屌丝的样子,圈内人称李总. 不要百度搜索我的名字,你搜不到,我说的是朋友圈. ? ? 快速提高班 现在教大家一些快速提高自己业务(zhuangbi)水平的方法. 要提高自己的业务水平,第一个要诀是:忍.等到别人问你问题,不要主动去说. 问:图形学中什么最重要 标准答案:首先得轻叹一口气,注意轻叹一口气的时机非常重要,在思考两到三秒后(其实是故作姿态),然后叹一口气. 哎,

剑英陪你玩转图形学 (二)

开篇废话 今天看到蛮牛把干货区放上了主页,居然还能看到我的帖子,让我很不好意思. 各位同学对不起,我来晚了. 今天的李总是因为姓李,又总是迟到,所以叫做李总. ? 今天还是讲图形学,第一弹没有把事情讲完,仅仅是开了一个头.你不会是以为一次就能讲完吧.我这么天才的人都搞了好多年,讲一次得吃掉我一年的老本. 为人不识武藤....,骇骇,最近好像扫黄,不能说这个,大家都知道,关键是不搞软渲染,你就枉然了.软渲染我们上次已经玩过了,知道所以然,了解渲染是怎么一件事,目标就已经达到了. 渲染这条路上还有很

剑英陪你玩转图形学 (二)彩虹

1. 今天的主题是颜色 开篇废话 今天看到蛮牛把干货区放上了主页,居然还能看到我的帖子,让我很不好意思. 各位同学对不起,我来晚了. 今天的李总是因为姓李,又总是迟到,所以叫做李总. 今天还是讲图形学,为人不识武藤....,骇骇,最近好像扫黄,不能说这个,大家都知道,关键是不搞软渲染,你就枉然了.软渲染我们上次已经玩过了,知道所以然,了解渲染是怎么一件事,目标就已经达到了. 渲染这条路上还有很多东西,今天我们到unity3d里面去玩.图形相关要聊的事情太多了,从头讲到做一个引擎出来,估计这个系列

剑英陪你玩转图形学 (三)归去来

今天的主题是数学,尤其是要把向量说一说 开篇废话 王全安又进去了,最近不太好引用岛国文化来开篇,来点民族的. 恰逢中秋,让我想起了一首脍炙人口的水调歌头. 明月几时有,把酒问群友.不知这次版本,今晚能出否.我欲推倒重构,又恐项目经理,深夜对我吼.增删改代码,好像没保存….. 深呼吸,看屏幕,泪在流.不应有恨,谁没忘记存代码?人有悲欢离合,码有丢失冲突,此事古难全.但愿人长久,leader别发现. 小伙伴们中秋都是怎么过的?有没有项目经理深吼你呢? 欢迎来德云社听相声,哦不,来听李总讲故事,好像也

辛巴学院-阅微堂-剑英陪你零基础学c#系列(一)Hello World

辛巴学院:一个不花钱的攻城狮地下网络学院.辛巴学院:愿天下所有的攻城狮,都找到失散多年的荣耀石. 剑英陪你系列又来啦.剑英是一个有大爱的人,热爱每一个程序员,尤其是年轻漂亮的女程序.最近组织朋友们玩了一次即兴团体诗创作,无论怎么开头,都会走上厕所文化的道路.尤其是卫生纸的出镜率极高.这让我对这个群体的心理健康有了深深的担忧,任重而道远啊.让我们一起响应暴走九月不撸,不撸不撸,九月我不撸. 你可能已经看过了无数的Helloworld,是什么感觉呢?兴奋,失望,满足?还是已经想不起来什么感觉了?我已

辛巴学院-Unity-剑英陪你零基础学c#系列(一)Hello World

这还是草稿 辛巴学院:正大光明的不务正业.辛巴学院:攻城狮与荣耀石. 剑英陪你系列又来啦.剑英是一个有大爱的人,热爱每一个程序员,尤其是年轻漂亮的女程序.最近组织朋友们玩了一次即兴团体诗创作,无论怎么开头,都会走上厕所文化的道路.尤其是卫生纸的出镜率极高.这让我对这个群体的心理健康有了深深的担忧,任重而道远啊.让我们一起响应暴走九月不撸,不撸不撸,九月我不撸. 从Helloworld开始 你可能已经看过了无数的Helloworld,是什么感觉呢?兴奋,失望,满足?还是已经想不起来什么感觉了?我已

一个土豪玩家养十个免费玩家陪自己玩 免费游戏的关键在一个“诱”字,核心在一个“贱”字,本质是一个“骗”字

“老子玩游戏从来是不花钱的!”多年来这一直是中国玩家最引以为傲的地方,从过去的“盗版下载”到如今的“免费游戏”,始终如此,优越感秒杀美欧日韩! 可以说得益于中国独特的游戏环境,在这片土地上孕育了一批可能是世界上最抠门的玩家,“如何让中国玩家为游戏掏钱”简直是一个世界性难题!当然天才的中国运营商最终找到了为这些铁公鸡拔毛的办法. “免费游戏”模式最早出现于国内的一些私服,之后<热血传奇><传奇世界>等大型网游也开始试水,直到<征途>震撼上线,首次明确了“一个土豪玩家养十个