在網頁設計中使用著色器創建逼真的特殊效果

已發表: 2020-03-11

WebGL 已成為實驗和測試 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 的項目還提供了一個實用的解決方案。然而，我們並不是指這些圍繞垂直軸混亂移動的明亮螢火蟲。我們談論的是偶爾會出現在屏幕上的毛刺效應。這太不可思議了。由於它現在很流行，這個概念可以作為你實驗的完美基礎。

扔一些陰影

著色器是強大的工具。雖然我們在本文中專注於現實的解決方案，但還有許多其他令人興奮的概念看起來更加人為。您可以創建完全不同的場景和構圖——在這裡您可以盡情發揮想像力。

然而，權力越大，責任越大。在進入整個著色器之前，您需要考慮幾個問題。

首先，瀏覽器兼容性存在問題。不是每個人都能享受它的美麗。其次，並非每台計算機都能順利處理它。這意味著著色器不是通用工具——至少現在還不是。