不好意思,我膨脹了! shader 入門精要! Cocos Creator 3D Shader !


不好意思,我膨脹了! shader 入門精要! Cocos Creator 3D Shader !

shader 也能讓你變胖?膨脹肥胖效果! 附完整項目!

效果

實現

模型的形狀一般都是由三角形圍成的,每個頂點一般都會有一個法線信息。

所以我們只需要把每個頂點的位置沿着法線方向,增加一點距離就可以了。

position.xyz + v_normal * fatFactor

那么在 CCC 3D 中怎么融入這個效果呢?

先找到模型的材質,看看默認使用的是什么effect (一般都是builtin-standard.effect)。

拷貝一份 effect 開始編寫 (這里拷貝的是builtin-standard.effect)。

找到法線向量和計算頂點坐標的地方。

加上法線方向的位移即可。

return cc_matProj * (cc_matView * matWorld) * vec4(In.position.xyz + v_normal*0.05, In.position.w);

最后選擇我們寫好的 builtin-standard-fat.effect ,就可以看到效果啦。

當然也可以定義一個肥胖系數fatFactor

  uniform lamyoung_com {
    float fatFactor;
  };
  //In.position.xyz + v_normal * fatFactor

在外部控制這個肥胖系數,就達到了原理那個效果圖啦。

this.modelComponent.getMaterial(0).setProperty('fatFactor', 0.1 * slider.progress);

小結

法線向量! 膨脹 !shader

以上為白玉無冰使用 Cocos Creator 3D v1.1.2 實現 "shader 膨脹效果(fat)" 的技術分享。歡迎分享給身邊的朋友!

天下事有難易乎?為之,則難者亦易矣;不為,則易者亦難矣。人之為學有難易乎?學之,則難者亦易矣;不學,則易者亦難矣。

更多

3D霧
噪聲紋理之消融效果
流體之 LiquidFun 流體紋理 shader

█ 原創文章導航 █

原文鏈接
完整代碼(見readme)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM