噪声纹理之消融效果! 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
!消融效果dissolve
!shader
!
以上为白玉无冰使用 Cocos Creator v2.4
实现 "噪声纹理之消融效果(dissolve)"
的技术分享。欢迎分享给身边的朋友!
天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。人之为学有难易乎?学之,则难者亦易矣;不学,则易者亦难矣。
更多
转载请保留文末二维码和完整代码获取方式!
完整代码(详见readme):
https://github.com/baiyuwubing
点击“阅读原文”查看精选导航
“点赞“ ”在看” 鼓励一下▼
评论