溶解！shader 入門實(shí)戰(zhàn)之噪聲紋理！附完整項(xiàng)目！

效果

原理

什么是噪聲紋理？

噪聲紋理的特性是不可預(yù)測性的隨機(jī)。

個人理解噪聲紋理就是一張圖片，每個像素點(diǎn)顏色值（rgba）是按照一定的隨機(jī)性分布的。

怎么生成噪聲紋理？

工具生成
代碼生成
網(wǎng)上下載（這里用的噪聲紋理是網(wǎng)上下載的）
其他

怎么實(shí)現(xiàn)消融？

根據(jù)噪聲紋理的顏色值和消融閾值(noiseThreshold)判斷，當(dāng)達(dá)到閾值時，丟棄(discard)該片元像素。

vec4 noise = vec4(1, 1, 1, 1);
CCTexture(textureNoise, v_uv0*3.0, noise);
if(noise.r < noiseThreshold){
  discard;
}

加點(diǎn)內(nèi)描邊

還可以混點(diǎn)顏色，對閾值附近的像素點(diǎn)加一些顏色，就能實(shí)現(xiàn)燃燒效果啦。

float t = 1.0 - smoothstep(0.0, colorWidth, noise.r - noiseThreshold);
vec3 burnColor = lerp(burnColorInner.rgb, burnColorOut.rgb, t);
o.rgb = lerp(o.rgb, burnColor.rgb,  t*step(0.0001, noiseThreshold ));

其他

shader 入門資料可以參考這篇文章。

項(xiàng)目代碼在 2.4.x 目錄下的 demo04。

小結(jié)

噪聲紋理 noise ！ 消融效果 dissolve ！shader ！

以上為白玉無冰使用 Cocos Creator v2.4 實(shí)現(xiàn) "噪聲紋理之消融效果(dissolve)" 的技術(shù)分享。歡迎分享給身邊的朋友！

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

更多

更多精彩
完整代碼

總結(jié)

以上是生活随笔為你收集整理的噪声纹理之消融效果！ shader 入门精要！ Cocos Creator Shader !的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。