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

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

GLSL代表圖形庫(kù)著色器語(yǔ)言。它是WebGL不可或缺的一部分，負(fù)責(zé)我們?cè)谝巴饪吹降拇蠖鄶?shù)令人興奮的解決方案。不辜負(fù)它的名字，它為開(kāi)發(fā)人員提供了直觀操作圖形的工具。在正確的手中，它幾乎可以帶來(lái)任何想法。

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

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

通過(guò)NATALY樺木上2019年3月11日J(rèn)avaScript，網(wǎng)頁(yè)設(shè)計(jì)

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

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

GLSL代表圖形庫(kù)著色器語(yǔ)言。它是WebGL不可或缺的一部分，負(fù)責(zé)我們?cè)谝巴饪吹降拇蠖鄶?shù)令人興奮的解決方案。不辜負(fù)它的名字，它為開(kāi)發(fā)人員提供了直觀操作圖形的工具。在正確的手中，它幾乎可以帶來(lái)任何想法。

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

Stefan Weck的Waterdroplet WebGL著色器

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

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

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

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

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

Anand Davaasuren的概念

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

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