噪声纹理之消融效果! shader 入门精要! Cocos Creator Shader !

白玉无冰

共 984字,需浏览 2分钟

 ·

2020-09-05 09:22

溶解!shader 入门实战之噪声纹理!附完整项目!

效果

原理

什么是噪声纹理?

噪声纹理的特性是不可预测性的随机。

个人理解噪声纹理就是一张图片,每个像素点颜色值(rgba)是按照一定的随机性分布的。

怎么生成噪声纹理?

  • 工具生成
  • 代码生成
  • 网上下载(这里用的噪声纹理是网上下载的)
  • 其他

怎么实现消融?

根据噪声纹理的颜色值和消融阈值(noiseThreshold)判断,当达到阈值时,丢弃(discard)该片元像素。

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

加点描边

还可以混点颜色,对阈值附近的像素点加一些颜色,就能实现燃烧效果啦。

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 入门资料可以参考这篇文章

项目代码在 2.4.x 目录下的 demo04

小结

噪声纹理 noise !消融效果 dissolveshader

以上为白玉无冰使用 Cocos Creator v2.4 实现 "噪声纹理之消融效果(dissolve)" 的技术分享。欢迎分享给身边的朋友!

天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。人之为学有难易乎?学之,则难者亦易矣;不学,则易者亦难矣。

更多




转载请保留文末二维码和完整代码获取方式!

完整代码(详见readme): 

https://github.com/baiyuwubing

点击阅读原文”查看精选导航

“点赞“ ”在看” 鼓励一下

浏览 29
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报