cocos shader 水面扭曲效果

最新推荐文章于 2024-08-15 17:20:34 发布

飞猪001

最新推荐文章于 2024-08-15 17:20:34 发布

阅读量859

点赞数

分类专栏： cocos shader 文章标签： shader glsl creator

本文链接：https://blog.csdn.net/m0_63275099/article/details/121313856

版权

这篇博客介绍了如何利用噪声纹理和uv差值来创建动态的图片扭曲效果。通过在fragment shader中应用噪声纹理，结合时间变量cc_time，调整扭曲速度和强度，实现了随时间变化的扭曲动画。代码示例展示了在Cocos Creator中如何设置effect，包括属性定义、顶点着色器和片段着色器的编写，以达到扭曲图片的目的。

摘要由CSDN通过智能技术生成

1.效果

2.原理

利用噪声纹理对需要一个色值对需要扭曲的图片进行添加uv差值。利用effect的内置函数cc_time当时间线，来达到动态的效果。

3.代码

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        alphaThreshold: { value: 0.5 }
        noisetex: { value: white }
        warpSpeed: {
          value: 0.1,
          editor: { 
            tooltip: '扭曲动画的速度',
            range: [0.0,1.0]
          }
        }
        warpStrength: {
          value: 0.03,
          editor: { 
            tooltip: '扭曲的强度',
            range: [0.0,0.5]
          }
        }
}%


CCProgram vs %{
  precision highp float;

  #include <cc-global>
  #includ