使用着色器在Web设计中创建逼真的特效

善微科技 2019 03月12日 发布

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


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


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


Codepen已经充满了在着色器的帮助下创建的迷人项目。然而,那些表现出逼真效果的人是最令人印象深刻和鼓舞人心的。我们将在今天的系列中证明这一点。让我们潜入。


使用着色器在Web设计中创建逼真的特效

通过NATALY桦木上2019年3月11日JavaScript,网页设计

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


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


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


Codepen已经充满了在着色器的帮助下创建的迷人项目。然而,那些表现出逼真效果的人是最令人印象深刻和鼓舞人心的。我们将在今天的系列中证明这一点。让我们潜入。




Stefan Weck的Waterdroplet WebGL着色器

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



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

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


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



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



Anand Davaasuren的概念

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




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


如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.com/news/480.html