在网页设计中使用着色器创建逼真的特殊效果
已发表: 2020-03-11WebGL 已成为实验和测试 Web 上可能的极限的主题。 几乎每天我们都会偶然发现由它提供支持的宏伟解决方案。 作为证明，我们已经检查了一些实际项目。
今天我们将探索一些概念来展示使用着色器的好处。 我们将专注于 GLSL。
GLSL 代表图形库着色器语言。 它是 WebGL 不可或缺的一部分，负责我们在野外看到的大多数令人兴奋的解决方案。 名副其实，它为开发人员提供了直观地操作图形的工具。 在正确的手中，它几乎可以将任何想法变为现实。
Codepen 已经充满了在着色器的帮助下创建的迷人项目。 然而，那些表现出逼真效果的才是最令人印象深刻和鼓舞人心的。 我们将在今天的系列中证明这一点。 让我们潜入水中。
Stefan Weck 的 Waterdroplet WebGL 着色器
Stefan Werk 以他的杰作开启了我们的综述，向所有人证明了高端技术是真正的魔法。 他设法重现了落在窗户（或者在我们的例子中是屏幕）上的雨水。 雨滴的行为和实现是如此真实，以至于你想触摸它们。 在这里，JavaScript 支持雨模拟，而 WebGL 着色器负责粘性效果和折射。
Jonathan Blair 的三个 js 水着色器 / David Hartley 的 ShaderToy 编译
也许接下来的两个项目是我们收藏中使用着色器的最令人印象深刻的例子之一。 尽管每个人都迫使您的计算机满负荷运行以应对幕后发生的一切，但是，这是值得的。 每个概念，所有这些涟漪，大大小小的波浪，以及不断变化的颜色，看起来都非常逼真，非常鼓舞人心。
乔纳森·布莱尔只重建了水面，而大卫·哈特利则通过给后者一个球形来使事情变得有点有趣，从而巧妙地模仿了地球。 这两个项目都令人兴奋。
Pixijs.v3 着色器示例由 Omar Shehata 编写
由 Pixi.js 提供支持，Omar Shehata 的这个引人入胜的概念将以其对雾霾效果的高度详细模拟让您大吃一惊。 加上美丽的紫色和深色背景，这些烟雾看起来非常真实。 这种行为是经过深思熟虑的。 这个概念简直令人着迷。
Boris Šehovac 的降雪 WebGL 着色器
这个概念名副其实。 这是高度现实的。 Boris Sehovac 使用不同大小的雪花、不同程度的模糊和不同的速度来重建深度。 更重要的是，他还尝试通过强制构图从左到右改变方向来模拟风，反之亦然。 结果，我们可以目睹某种小型暴风雪。 原生 WebGL 着色器支持这种美感。
Anand Davaasuren 的概念
如果前面的例子给你留下了很好的印象，那么 Anand Davaasuren 的概念无疑会让你眼前一亮。 该解决方案基于相同的想法。 落雪效果是它的核心：尽管有一个例外。 此示例使用心而不是雪花。 结果，这个概念有一种难以抗拒的可爱氛围。 也许这不是残酷的现实，但坠落的效果和心灵的行为仍然令人难以置信。
大卫哈特利的云着色器
这是大卫·哈特利创作的又一杰作。 这一次，艺术家展示了他对云及其漂浮行为的看法。 再一次，Pixi.js 支持这个宏伟的项目。 在这里，相机穿过云层，让你感受到这个想法的整体美。 但这对大卫来说还不够。 他还为我们提供了一个通过移动光标来探索场景的机会。 简直不可思议。
14islands 的火焰着色器
从冰冻的暴风雪和寒冷的蓬松云到热的东西，这是模拟火的成功尝试。 14islands 背后的团队使用一堆粒子和自定义着色器将这个想法变为现实。 结果，我们可以看到一个小篝火，烟雾弥漫，四面八方散发着温暖。
GLSL：Liam Egan 的 Chrome
Liam Egan 的 Chrome 具有高密度的液体。 该项目有点让人想起史诗终结者 2 中的一个场景，当时邪恶的 T-1000 展示了他的液态金属成分。 毫无疑问，这个概念让人感觉是人为的。 然而，行为和光滑的表面看起来非常逼真。 更重要的是，欢迎您通过上下移动鼠标来更改平滑参数。
Martin Laxenaire 的涟漪效应
Martin Laxenaire 的这个项目是将着色器付诸实践的完美示例。 在这里，作者设法实现了真正的涟漪效应，使图像在鼠标悬停时像窗帘一样移动。 Curtains.js 支持这个概念。 唯一的缺点是，现在为网站上的每张图片提供这种效果可能还为时过早，因为对于低端计算机来说，它仍然太重，无法“消化”它。
Fabien Motte 的萤火虫
Fabien Motte 的项目还提供了一个实用的解决方案。 然而，我们并不是指这些围绕垂直轴混乱移动的明亮萤火虫。 我们谈论的是偶尔会出现在屏幕上的毛刺效应。 这太不可思议了。 由于它现在很流行，这个概念可以作为你实验的完美基础。
扔一些阴影
着色器是强大的工具。 虽然我们在本文中专注于现实的解决方案，但还有许多其他令人兴奋的概念看起来更加人为。 您可以创建完全不同的场景和构图——在这里您可以尽情发挥想象力。
然而，权力越大，责任越大。 在进入整个着色器之前，您需要考虑几个问题。
首先，浏览器兼容性存在问题。 不是每个人都能享受它的美丽。 其次，并非每台计算机都能顺利处理它。 这意味着着色器不是通用工具——至少现在还不是。