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

雨滴

如今让我们来看看若何制造雨滴的效不雅。起首我们来看一下单个的雨滴是什么样的：

如今这里产生了很多工作。

Alpha 通道变成了如许是因为我们应用了类似于文┞仿 Creative Gooey Effects 中提到的一个技巧来让雨滴粘连到一路。

色彩变成如许也是有原因的：我们应用了类似 法线贴图 的技巧来实现折射效不雅。我们将应用雨滴的色彩来获取我们经由过程雨滴看到的贴图的坐标。这是没有遮罩时它的样子：

如不雅我们想制造一个基于实际世界的效不雅，那么起首我们须要分析一下它看起来毕竟是什么样子的，如许制造出的效不雅才能显得真实。如不雅你去找一些水滴落在窗户上的图片来看(当然，你肯定已经在生活中不雅察过他们了)，你会发明因为折射，雨滴似乎会把它后面的图像高低倒置。

如今我们可以写我们的着色器了，并且可以同时应用贴图数据和雨滴的地位来翻转并扭曲雨滴后方的贴图了。

下雨过程

在创建雨滴之后，我们就可以开端对下雨进行模仿了。

在这个示例中，我把大年夜雨点和细雨点分开了。细雨点绘制在一个零丁的 canvas 上，并且没有没追踪。如许我就可以绘制上千个细雨滴并且不会让速度有任何减慢。缺点是它们都是静态的，并且因为我们每帧都在创建新雨滴，他们将会累积起来。为了修复这个问题，我们将会应用大年夜一点的雨滴。

因为大年夜雨滴是会移动的，于是我们可以应用它们来清除它们下方的细雨滴。擦除操作在 canvas 中比较麻烦：实际上我们照样要画一些器械出来，然则要应用 globalCompositeOperation='destination-out。是以，每当一个大年夜的雨滴移动，我们就会在细雨滴的 canvas 上绘制一个圆，并应用复合操作来清除这些雨滴，使效不雅加倍逼真。

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

为了把它做得更简便一点，我们要应用背景会掉焦这一事实，是以我们用了一个小尺寸的贴图，然后把它放大年夜。在 WebGL 中，贴图的尺寸会直接影响到机能。我们须要用别的一个没有掉焦的贴图来制造雨滴。模糊是一个价值很高的操作，及时的模糊处理应当尽量避免掉落——然则因为雨滴很小，我们可以把贴图也变得很小。

总结

为了制造像雨滴如许的┞锋切的效不雅，我们须要推敲很多复杂的细节。先将效不雅大年夜实际世比赛分别出来是重建任何一个效不雅的关键地点，一旦知道了它在实际世比赛是若何工作的，我们就可以把它的行动映射到虚拟世界。有了 WebGL，我们可以获得很高的机能(我们可以应用显卡的硬件加快)是以对于这类效不雅，它是一个很不错的选择。

欲望各位爱好这个实验并且受到启发!

示例(http://tympanus.net/Development/RainEffect/)

源码(http://tympanus.net/Development/RainEffect/RainEffect.zip)

　　推荐阅读

　　JavaScript错误处理和堆栈追踪浅析

有时我们会忽视缺点处理和客栈追踪的一些细节, 然则这些细节对于写竽暌闺测试或缺点处理相干的库来说是异常有效的. 例如这周, 对于 Chai 就有一个异常棒的PR, 该PR极大年夜地改良了我们处>>>详细阅读

本文标题：WebGL实现雨水特效实验

地址：http://www.17bianji.com/lsqh/34616.html

 1/2    1