shader 也能讓你變胖？膨脹肥胖效果！附完整項(xiàng)目！

效果

實(shí)現(xiàn)

模型的形狀一般都是由三角形圍成的，每個(gè)頂點(diǎn)一般都會(huì)有一個(gè)法線信息。

所以我們只需要把每個(gè)頂點(diǎn)的位置沿著法線方向，增加一點(diǎn)距離就可以了。

position.xyz + v_normal * fatFactor

那么在 CCC 3D 中怎么融入這個(gè)效果呢？

先找到模型的材質(zhì)，看看默認(rèn)使用的是什么effect (一般都是builtin-standard.effect)。

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

找到法線向量和計(jì)算頂點(diǎn)坐標(biāo)的地方。

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

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

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

當(dāng)然也可以定義一個(gè)肥胖系數(shù)fatFactor。

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

在外部控制這個(gè)肥胖系數(shù)，就達(dá)到了原理那個(gè)效果圖啦。

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

小結(jié)

法線向量！膨脹 ！shader ！

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

天下事有難易乎？為之，則難者亦易矣；不為，則易者亦難矣。人之為學(xué)有難易乎？學(xué)之，則難者亦易矣；不學(xué)，則易者亦難矣。

更多

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