WebGL已成为实验的主题，并测试了网络上可能存在的限制。几乎每一天我们都会偶然发现由它驱动的宏伟解决方案。作为证据，我们已经研究了许多实际项目。

今天我们将探讨一些显示使用着色器的好处的概念。我们将专注于GLSL。

GLSL代表图形库着色器语言。它是WebGL不可或缺的一部分，负责我们在野外看到的大多数令人兴奋的解决方案。不辜负它的名字，它为开发人员提供了直观操作图形的工具。在正确的手中，它几乎可以带来任何想法。

 

Stefan Werk用他的杰作打开了我们的综述，向每个人证明了高端技术是真正的魔力。他设法重建雨落在窗户上（或者在我们的情况下，一个屏幕）。雨滴的行为和实现是如此真实，你想触摸它们。在这里，JavaScript支持雨模拟，而WebGL着色器负责粘性效果和折射。

 

乔纳森·布莱尔的三个js水着色器 / 大卫·哈特利的ShaderToy编辑

也许接下来的两个项目是在我们的集合中使用着色器的最令人印象深刻的例子。虽然每一个都强迫你的计算机满负荷运行以应对幕后发生的一切，但是，这是值得的。每个概念，包括所有这些涟漪，小波浪和大波浪，以及变化的颜色看起来非常逼真和非常鼓舞人心。

虽然乔纳森·布莱尔只重建了水面，但大卫·哈特利通过赋予后者一个球形形状，从而巧妙地模仿地球，使事情变得有趣。这两个项目都令人兴奋。

Pixmars.v3 Shader示例由Omar Shehata撰写

由Pixi.js提供支持，Omar Shehata的这个迷人概念将通过其高度详细的雾霾效果模拟让您大吃一惊。这些烟雾弥漫着美丽的紫色和深色背景，看起来非常真实。这种行为经过深思熟虑。这个概念只是令人着迷。

BorisŠehovac降雪WebGL着色器

这个概念不负其名。这是非常现实的。Boris Sehovac使用了不同大小的雪花，不同的模糊程度和不同的速度来重现深度。更重要的是，他还尝试通过强制合成从左到右改变方向来模拟风，反之亦然。结果，我们可以目睹某种小型暴风雪。本机WebGL着色器支持这种美丽。

Anand Davaasuren的概念

如果上一个例子给你留下了很好的印象，那么Anand Davaasuren的概念无疑会引起你的注意。解决方案基于相同的想法。下雪的效果是它的核心：虽然有一个例外。此示例使用樱花花瓣而不是雪花。因此，这个概念有一个难以抗拒的可爱氛围。也许这不是现实场景，但仍然，下降的效果以及艺术表现效果都令人难以置信。

云彩着色器

这是David Hartley创作的另一部杰作。这一次，艺术家展示了他对云和浮动行为的看法。同样，Pixi.js支持这个宏伟的项目。在这里，相机直接穿过云层，让您感受到这个想法的整体美感。但这对大卫来说还不够。他还为我们提供了一个通过移动光标来探索场景的机会。太不可思议了。

14islands的火着色器

从寒冷的暴风雪和寒冷蓬松的云层到热门的东西，这是一次模拟火灾的成功尝试。14islands背后的团队使用一堆粒子和自定义着色器将这个想法变为现实。结果，我们可以看到一个小小的篝火，烟雾散发出各方面的温暖。

GLSL：Liam Egan的Chrome

Liam Egan的Chrome采用高密度液体。该项目致敬了史诗大片终结者2的一个场景，当邪恶的T-1000显示他的液态金属成分。这个概念毫无疑问是人为的。然而，行为和光泽表面看起来非常逼真。更重要的是，欢迎您通过上下移动鼠标来改变平滑参数。

马丁·拉克斯纳尔的涟漪效应

Martin Laxenaire的这个项目是实施着色器的完美例子。在这里，作者设法实现了真正的涟漪效应，使鼠标悬停时图像像窗帘一样移动。Curtains.js支持这一概念。唯一的缺点是，为网站上的每个图像提供此效果可能为时尚早，因为它仍然太臃肿，以至于低端计算机无法“消化”它。

Fabien Motte的Glitched萤火虫

Fabien Motte的项目还具有实用的解决方案。但是，我们并不是指这些明亮的萤火虫在垂直轴上乱窜。我们正在谈论偶尔会碰到屏幕的故障效应。这真是太不可思议了。由于它现在很受欢迎，这个概念可以作为您实验的完美基础。

着色器是强大的工具。虽然我们在本文中专注于现实的解决方案，但还有许多其他令人费解的概念看起来更加人为。你可以创造出完全不同的场景和作品 - 在这里你的想象力可以疯狂。

然而，强大的力量带来了巨大的责任。在进入整个着色器之前，您需要考虑几个问题。

首先，浏览器兼容性存在问题。不是每个人都能享受它的美丽。其次，并非每台计算机都可以毫不费力地处理它。这意味着着色器不是通用工具 - 至少现在还没有。