保姆級手把手教學，從頭開始寫！

效果

效果預覽:

前言

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

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

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

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

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

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

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

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

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

本次借鑒的源代碼如下。

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

實現(xiàn)

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

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

模版

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

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

為精靈拖一個圖片資源。

新建effect。

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

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

為精靈選擇材質。

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

基礎

接下來，開始編寫effect。

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

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

在effect中定義uniform。

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

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

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

升級

接下來我們加入跟隨鼠標變化的效果。

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

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

接著編寫腳本邏輯

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

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

小結

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

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

希望大家多多討論交流，一起學習一起成長！

更多

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

“點贊“ ”在看” 鼓勵一下▼