保姆級手把手教學(xué)，從頭開始寫！

效果

效果預(yù)覽:

前言

感謝大家的觀看，感謝大家的點(diǎn)贊留言分享支持，感謝3D折紙效果的實(shí)現(xiàn)(視頻+文字)中老板們的贊賞支持，非常感謝。

時常有人問我怎么學(xué)習(xí)shader，其實(shí)白玉無冰學(xué)的也很淺，推薦幾個曾經(jīng)用過的在線學(xué)習(xí)網(wǎng)站。

• https://thebookofshaders.com/
• https://webglfundamentals.org
• https://learnopengl-cn.github.io/

里面有自帶環(huán)境編輯，在線編寫代碼，邊學(xué)邊做。

了解了一些概念(頂點(diǎn)著色器/片元著色器/uniform/glsl語法/內(nèi)置函數(shù)/uv坐標(biāo))后，參考Cocos官方文檔和論壇帖子。

看看Cocos內(nèi)置的effect語法怎么寫的，動手改改其中的幾個數(shù)值，看看效果。

在有需求要做的時候，網(wǎng)上搜一搜，大部分效果都能搜到，剩下的就是借鑒搬運(yùn)了。

這次我們來講講如何把搜到的shader化為己有，在Cocos中實(shí)現(xiàn)其中的效果。

本次演示使用Cocos Creator 3.1.0版本，看完后，相信大家可以在其他任意版本都可移植！

本次借鑒的源代碼如下。

https://github.com/akella/webgl-mouseover-effects/blob/master/js/step1.js

實(shí)現(xiàn)

本次實(shí)現(xiàn)分以下三步：

• 創(chuàng)建模版
• 基本實(shí)現(xiàn)
• 腳本控制

模版

新建場景，在場景中添加一個2D的sprite節(jié)點(diǎn)，刪除3d相機(jī)燈光。

拖入圖片資源，類型Type改為sprite-frame，去掉自動合圖Packable(方便uv計(jì)算)。

為精靈拖一個圖片資源。

新建effect。

查找模版builtin-sprite，并拷貝到剛剛創(chuàng)建的effect。

新建材質(zhì)matertial，并選擇剛剛創(chuàng)建的effect，勾上USE TEXTURE。

為精靈選擇材質(zhì)。

看到圖片，完成模版創(chuàng)建！

基礎(chǔ)

接下來，開始編寫effect。

我們先處理uniform部分，看看源頭有幾個uniform。

參考builtin-standard.effect中定義uniform的部分。

在effect中定義uniform。

寫完后可以在編輯的材質(zhì)中看到剛才定義的屬性。

接著就是抄一下片元著色器部分，大部分語法都是通用的。

在編輯器中改改參數(shù)，可以看到初步效果。

升級

接下來我們加入跟隨鼠標(biāo)變化的效果。

首先新建一個腳本，添加一個節(jié)點(diǎn)掛載這個腳本。

在腳本中添加一個精靈屬性，并綁定場景中的精靈。

接著編寫腳本邏輯

• 添加鼠標(biāo)監(jiān)聽事件
• 鼠標(biāo)坐標(biāo)轉(zhuǎn)換
• 處理uniform變量傳遞(數(shù)值邏輯參考源文件)
• resolution 是高寬比
• uMouse 是鼠標(biāo)以左上角為原點(diǎn)，相對寬高歸一化的值

最后再隨便寫一個按鈕，切換精靈的圖片，就達(dá)到最終的效果啦。

小結(jié)

完整代碼工程：https://github.com/baiyuwubing/cocos-creator-examples/tree/master/awesome-shader

以上為白玉無冰使用 Cocos Creator 3.1.0 實(shí)現(xiàn) "搬運(yùn)鼠標(biāo)懸停圖片的shader" 的技術(shù)分享。

希望大家多多討論交流，一起學(xué)習(xí)一起成長！

更多

3D折紙  漸變色文字3.0  水排序效果   轉(zhuǎn)向行為AI     折紙效果

“點(diǎn)贊“ ”在看” 鼓勵一下▼