第9.2章：2D波纹扭曲着色器

波纹扭曲效果是2D游戏中常见的动态视觉效果，常用于水面扰动、魔法阵、冲击波等场景。本章将详细介绍如何实现各种波纹扭曲效果。

🎯 学习目标

理解波纹扭曲的数学原理
掌握径向和线性扭曲技术
学会创建动态波纹动画
理解多层波纹叠加效果

💡 波纹扭曲原理

数学基础

波纹扭曲通过修改UV坐标实现：

// 径向波纹
float distance = length(uv - center);
float wave = sin(distance * frequency - time * speed) * amplitude;
vec2 distortedUV = uv + normalize(uv - center) * wave;

视觉效果分析

1	原始纹理 → 计算距离 → 生成波形 → UV偏移 → 扭曲效果 texture distance wave offset distorted

🔧 基础波纹效果

1. 简单径向波纹

CCEffect %{
  techniques:
  - name: simple-ripple
    passes:
    - vert: ripple-vs:vert
      frag: ripple-fs:frag
      properties: &props
        mainTexture:    { value: white }
        waveCenter:     { value: [0.5, 0.5], editor: { type: vec2 } }
        waveAmplitude:  { value: 0.02, range: [0, 0.1] }
        waveFrequency:  { value: 10.0, range: [1, 50] }
        waveSpeed:      { value: 5.0, range: [0, 20] }
        waveRange:      { value: 0.5, range: [0.1, 2] }
}%

CCProgram ripple-vs %{
  precision highp float;
  #include <cc-global>
  
  in vec3 a_position;
  in vec2 a_texCoord;
  
  out vec2 v_uv;
  
  vec4 vert() {
    v_uv = a_texCoord;
    return cc_matViewProj * vec4(a_position, 1);
  }
}%

CCProgram ripple-fs %{
  precision highp float;
  #include <cc-global>
  
  uniform sampler2D mainTexture;
  uniform vec2 waveCenter;
  uniform float waveAmplitude;
  uniform float waveFrequency;
  uniform float waveSpeed;
  uniform float waveRange;
  
  in vec2 v_uv;
  
  vec4 frag() {
    vec2 uv = v_uv;
    
    // 计算距离中心的距离    float distance = length(uv - waveCenter);
    
    // 波纹范围限制
    float rangeFactor = 1.0 - smoothstep(0.0, waveRange, distance);
    
    // 波形计算
    float wave = sin(distance * waveFrequency - cc_time.x * waveSpeed) * waveAmplitude * rangeFactor;
    
    // UV扭曲
    vec2 direction = normalize(uv - waveCenter);
    vec2 distortedUV = uv + direction * wave;
    
    // 纹理采样
    vec4 color = texture(mainTexture, distortedUV);
    
    return color;
  }
}%