【shader】噪声纹理之消融溶解效果!

溶解!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)" 的技术分享。欢迎分享给身边的朋友!

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

更多

流体之 LiquidFun 流体纹理 shader
3D瞄准器
gizmo与多边形裁剪

#更多精彩
完整代码

3赞

嘟嘟嘟嘟嘟嘟嘟

有两个疑问:

  1. 这里的CCTexture我google了咋没找到资料,一般都不是用texture2D来获取像素值吗?
  2. 纹理坐标*3.0是为何?
  1. CCTextureCoccos Creator 内置的采样函数,:joy:我是参考默认材质使用的。
  2. v_uv0 是原图片的纹理坐标,一般被合图了,相对会小一点,所以在噪声纹理采样时扩大一点系数,相对效果好一点。

mark!

汪~做个记号,顺便召唤下魔猎手~

mark!!!

#mark 喵啊

感谢大佬分享

mark…

cctxture现在换成那个api了?

感谢大佬分享

那个*3.0的貌似不是合图影响的,重点是在编辑器的时候是能匹配原图的,可是运行的时候感觉UV被明显缩小了…是不是有个缩放比在引擎内部运算好了,要怎么获得这个值哦

妙啊,多谢大佬分享

mark, 学习下