WebGL已成為實驗的主題，并測試了網(wǎng)絡上可能存在的限制。幾乎每一天我們都會偶然發(fā)現(xiàn)由它驅(qū)動的宏偉解決方案。作為證據(jù)，我們已經(jīng)研究了許多實際項目。

今天我們將探討一些顯示使用著色器的好處的概念。我們將專注于GLSL。

GLSL代表圖形庫著色器語言。它是WebGL不可或缺的一部分，負責我們在野外看到的大多數(shù)令人興奮的解決方案。不辜負它的名字，它為開發(fā)人員提供了直觀操作圖形的工具。在正確的手中，它幾乎可以帶來任何想法。

Codepen已經(jīng)充滿了在著色器的幫助下創(chuàng)建的迷人項目。然而，那些表現(xiàn)出逼真效果的人是最令人印象深刻和鼓舞人心的。我們將在今天的系列中證明這一點。讓我們潛入。

使用著色器在Web設計中創(chuàng)建逼真的特效

通過NATALY樺木上2019年3月11日JavaScript，網(wǎng)頁設計

WebGL已成為實驗的主題，并測試了網(wǎng)絡上可能存在的限制。幾乎每一天我們都會偶然發(fā)現(xiàn)由它驅(qū)動的宏偉解決方案。作為證據(jù)，我們已經(jīng)研究了許多實際項目。

今天我們將探討一些顯示使用著色器的好處的概念。我們將專注于GLSL。

GLSL代表圖形庫著色器語言。它是WebGL不可或缺的一部分，負責我們在野外看到的大多數(shù)令人興奮的解決方案。不辜負它的名字，它為開發(fā)人員提供了直觀操作圖形的工具。在正確的手中，它幾乎可以帶來任何想法。

Codepen已經(jīng)充滿了在著色器的幫助下創(chuàng)建的迷人項目。然而，那些表現(xiàn)出逼真效果的人是最令人印象深刻和鼓舞人心的。我們將在今天的系列中證明這一點。讓我們潛入。

Stefan Weck的Waterdroplet WebGL著色器

Stefan Werk用他的杰作打開了我們的綜述，向每個人證明了高端技術是真正的魔力。他設法重建雨落在窗戶上（或者在我們的情況下，一個屏幕）。雨滴的行為和實現(xiàn)是如此真實，你想觸摸它們。在這里，JavaScript支持雨模擬，而WebGL著色器負責粘性效果和折射。

喬納森·布萊爾的三個js水著色器 / 大衛(wèi)·哈特利的ShaderToy編輯

也許接下來的兩個項目是在我們的集合中使用著色器的最令人印象深刻的例子。雖然每一個都強迫你的計算機滿負荷運行以應對幕后發(fā)生的一切，但是，這是值得的。每個概念，包括所有這些漣漪，小波浪和大波浪，以及變化的顏色看起來非常逼真和非常鼓舞人心。

雖然喬納森·布萊爾只重建了水面，但大衛(wèi)·哈特利通過賦予后者一個球形形狀，從而巧妙地模仿地球，使事情變得有趣。這兩個項目都令人興奮。

這個概念不負其名。這是非常現(xiàn)實的。Boris Sehovac使用了不同大小的雪花，不同的模糊程度和不同的速度來重現(xiàn)深度。更重要的是，他還嘗試通過強制合成從左到右改變方向來模擬風，反之亦然。結果，我們可以目睹某種小型暴風雪。本機WebGL著色器支持這種美麗。

Anand Davaasuren的概念

如果上一個例子給你留下了很好的印象，那么Anand Davaasuren的概念無疑會引起你的注意。解決方案基于相同的想法。下雪的效果是它的核心：雖然有一個例外。此示例使用心臟而不是雪花。因此，這個概念有一個難以抗拒的可愛氛圍。也許這不是殘酷的現(xiàn)實，但仍然，下降的效果以及心靈的行為都令人難以置信的拋光。

這是David Hartley創(chuàng)作的另一部杰作。這一次，藝術家展示了他對云和浮動行為的看法。同樣，Pixi.js支持這個宏偉的項目。在這里，相機直接穿過云層，讓您感受到這個想法的整體美感。但這對大衛(wèi)來說還不夠。他還為我們提供了一個通過移動光標來探索場景的機會。太不可思議了。