浙江铃声推荐联盟

雨水特效制作

网页设计自学平台2019-06-06 01:03:37



 提示点击上方"蓝色字体"可以订阅噢!


摘要 51RGB官方微信
原码下载:微信回复《rain》


大家都知道下雨特效实现的难度,很多人也想要,今天在这里介绍


入门

如果我们想制作一个基于现实世界的效果,那么首先我们需要剖析一下它看起来究竟是什么样子的,这样制作出的效果才能显得真实。如果你去找一些水滴落在窗户上的图片来看(当然,你肯定已经在生活中观察过他们了),你会发现由于折射,雨滴似乎会把它后面的图像上下颠倒。

同时你还会看到相互之间距离很近的雨滴会合并成一个——而且如果超过了一定的尺寸,它就会向下滑落,并且留下一道小小的痕迹。

为了模拟这种行为,我们必须绘制大量的雨滴,在每一帧上都更新它们的折射效果,并且要在一个合适的帧率下做这些事情,为此我们需要极好的性能———所以,为了能够使用显卡的硬件加速,我们将使用 WebGL。

WebGL

WebGL 是一个绘制 2D 和 3D 图形的 JavaScript 接口,并且允许使用 GPU 以获得更好的性能。它基于 OpenGL ES,着色器由一门叫做 GLSL 的语言写成,而不是 JS。

总之,如果你仅仅做过网页开发,那么它看起来是很难使用的——这不仅仅是一门新的语言,而且还是一个全新的概念——但是一旦你掌握了一些核心的概念,它就会变得容易不少。

颜色变成这样也是有原因的:我们使用了类似 法线贴图 的技术来实现折射效果。我们将利用雨滴的颜色来获取我们透过雨滴看到的贴图的坐标。这是没有遮罩时它的样子:

在这张图片中,我们将通过绿色通道的数据来获取 X 坐标,通过红色通道的数据来获取 Y 坐标。

现在我们可以写我们的着色器了,并且可以同时使用贴图数据和雨滴的位置来翻转并扭曲雨滴后方的贴图了。


在这篇文章中我们将仅给出一些基本的使用示例,更多深入的解析请参阅 WebGl Fundamentals 。


之后你可以尽情玩弄这些着色器以便搞明白它是怎么工作的。你可以在 ShaderToy 上找到很多很棒的着色器的例子。

雨滴

现在让我们来看看如何制作雨滴的效果。首先我们来看一下单个的雨滴是什么样的:

现在这里发生了很多事情。

Alpha 通道变成了这样是因为我们使用了类似于文章 Creative Gooey Effects 中提到的一个技术来让雨滴粘连到一起。


下雨过程

在创建雨滴之后,我们就可以开始对下雨进行模拟了。

让雨点之间相互作用是很难快速计算的——随着新的雨点的到来,运算量将会呈指数级增长——所以我们必须做一点优化。

在这个示例中,我把大雨点和小雨点分开了。小雨点绘制在一个单独的 canvas 上,并且没有没追踪。这样我就可以绘制上千个小雨滴而且不会让速度有任何减慢。缺点是它们都是静态的,而且由于我们每帧都在创建新雨滴,他们将会累积起来。为了修复这个问题,我们将会使用大一点的雨滴。

由于大雨滴是会移动的,于是我们可以利用它们来清除它们下方的小雨滴。擦除操作在 canvas 中比较麻烦:实际上我们还是要画一些东西出来,但是要使用 globalCompositeOperation='destination-out。因此,每当一个大的雨滴移动,我们就会在小雨滴的 canvas 上绘制一个圆,并使用复合操作来清除这些雨滴,使效果更加逼真。

最后,我们把所有这些绘制在一个大的 canvas 上,然后把它作为我们的 WebGL 着色器的贴图。





想认识志同道合的朋友一起学习web

加入我们的学习QQ群 19066743

丰富的学习资源,周一到周四免费直播公开课



长按图片,识别二维码即可入群




你可能感兴趣的精彩内容

微信:UI设计自学平台加关注




长按关注UI设计自学平台》


点击下方阅读原文进入51rgb官网哦!
↓↓↓