2020 原創精選! shader | 挖洞 | 流體 | 3D | 繩子紋理 | 四叉樹 | 數學 樣樣都有!


總能找到對你有幫助的~

前言

白玉無冰寫文已經一年多了,從原來的翻譯文到後來的研究筆記文,一路走來,有些不錯的文章整理推薦給大家。

注意!大部分文章是研究筆記,出於興趣愛好,學習記錄的一些想法。並未在實際項目中使用過(當然有些被粉絲使用到項目中),需要大家認真考量哈。

但是總能找到一些對大家遊戲開發有幫助的地方,希望能給大家帶來新思路,新想法。

點擊對應標題可以直達文章哦~

整理

主要分爲以下幾大類:

  • shader
  • 物理挖洞
  • 物理流體
  • 物理粒子
  • 繩子紋理
  • Cocos 3D
  • 拋物線
  • 多邊形裁剪與gizmo
  • 其他

shader

玩轉入門 shader , 一些效果展示。

入門資料整理+閃白特效

這篇文章整理了一些入門 Cocos Creator shader 的參考資料,引入了一個攻擊閃白效果。

3D玩水

介紹了用 sin 函數模擬水滴落水的效果。

頂點動畫之旗子

把一張圖分割多個頂點,使用 mesh 並計算相應的紋理座標,最終實現一個頂點動畫效果。

使用卷積實現各種濾鏡效果

使用卷積濾鏡實現 模糊、銳化、浮雕 等各種效果。

漸變效果 shader

把兩種圖片混色,實現漸變效果。

分形着色器!數學之美!

感受數學公式帶來的 shader

shader 動畫之 loading

單純的用 shader 寫一個動畫!視頻講解!

shader 動畫之旗子/水紋波浪 !

巧用渲染模式平鋪(TILED)和 sin 實現頂點動畫。

兩種方法實現亮度/飽和度/對比度的調整

uniform 方案和 assembler 方案的實現。需要注意的是 drawcall 數量並不是越少越好,最佳性能往往是 CPUGPU 負載均衡的結果。

噪聲紋理之消融效果!

溶解!shader 入門實戰之噪聲紋理!

膨脹肥胖效果!

沿着法線向量膨脹!

物理挖洞

講述了物理挖洞的實現過程,從原來的鏈條到後來的多邊形,再到3D視覺效果,最後到分塊,層層遞進,建議按順序閱讀,含一些視頻講解。

物理挖洞之鏈條!實現!(含視頻講解)

物理挖洞之鏈條!優化!(含視頻講解)

物理挖洞之多邊形!實現!

物理挖洞之多邊形!填坑!

物理挖洞之3D效果!

物理挖洞之分塊!合集!

物理流體

實現水連結效果。

歡樂水杯的流體實現

shader + camera 實現流體效果 !視頻講解!

物理粒子

隱祕的物理粒子系統與渲染 !

cocos Q彈起來!物理流體之 LiquidFun 流體紋理 shader !

繩子紋理

講述了應用 Sprite 渲染模式 Meshcc.Graphics ,實現畫線紋理的操作。不過還是推薦使用 cc.meshRenderer 去實現哈。

初探精靈中的網格渲染模式 !

畫線紋理1 之基礎實現

畫線紋理2 之連接優化

畫線紋理3 之紋理移動

Cocos 3D

3D搖桿控制器一種簡單實現!

座標轉換!旋轉!跳躍!不停歇!

瞄準器!3D入門實戰!拇指射箭!

瞄哪打哪!超簡單的射線檢測!

初探霧效果!shader 源碼分析與講解!

隨便講講霧的原理以及舊版本的使用霧的方法。

拋物線

拋物線運動可以看成是多個方向的勻加速直線運動。

高拋平拋發射

已知初速度大小,起點終點位置,如何按預期軌跡行動呢?

拋物線的瞄準線的繪製!

給平拋高拋發射添加一個瞄準線!

拇指投籃

3D 中拋物線的計算

多邊形裁剪與gizmo

一種替換 cc.mask 的方案,減少 draw call。還介紹了配合插件gizmo的使用。

使用 mesh 實現多邊形裁剪圖片

介紹了 mesh 相關的參數與使用,多邊形分割算法等。

gizmo 插件入門

mesh 實現多邊形裁剪圖片進一步操作優化,在編輯器用鼠標拖動頂點編輯多邊形形狀!

多邊形裁剪與Gizmo!新版!

支持縮放旋轉,支持合圖,支持gizmo添加節點和調整位置,支持順時針逆時針。

其他

雷達圖的一種實現!

支持定義任意多個屬性值,簡單好用!

貪喫蛇移動的思考與實現!

搖桿與蛇移動的結合!

物體隨機飛濺運動!

大量物體以隨機初速度的飛濺運動!正態分佈的飛濺運動!

javascript 中的三位一體

介紹了 JS 中的類型轉換和比較。

圖片/文字 的漸變色實現!

支持 SpriteLabel!參數可調!

2D實現背景圖3D滾動效果(透視)

戰鬥地面效果!在 2D 中實現有縱深感(透視)的捲動效果。當然也可以直接用3D節點。這裏提供一個思路供大家參考參考。

四叉樹與碰撞檢測

四叉樹與引擎內置碰撞檢測的結合運用。

代碼

項目工程可以在github上找到

  • https://github.com/baiyuwubing
  • https://gitee.com/lamyoung  (同步github,國內這個可能快一點)

B站視頻:

  • https://space.bilibili.com/1756070/video

qq加油羣 (羣文件有一些📚書籍資料)

  • 859642112

微信視頻號:

後語

感謝大家一直以來的陪伴(分享/點贊/在看/留言/讚賞),白玉無冰才能一路輸出,希望能幫助大家一起成長學習!

點擊閱讀原文”查看精選導航

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


本文分享自微信公衆號 - 白玉無冰(lamyoung-com)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章