一步步掌握Shader水波纹效果

水波纹效果是许多游戏和交互式应用中常见的视觉元素，它Neng为用户带来geng加沉浸的体验。在本篇文章中，我们将深入探讨如何使用Shader实现水波纹效果，从基础的静态圆环到动态的水波纹，一步步带你掌握这一技术。

在开始之前，我们需要了解一些基础概念。我们需要一个“水面”载体，这里我们使用Three.js的Shader材质来实现。加载一张图片作为背景，模拟水面。

import * as THREE from "three";
import BGImage from "../assets/bg.png";
export class Experience {
  private readonly scene: THREE.Scene;
  private readonly camera: THREE.OrthographicCamera;
  private readonly renderer: THREE.WebGLRenderer;
  private readonly bgTexture = new THREE.TextureLoader.load;
  // 省略部分代码...
  private createPlane {
    const geometry = new THREE.PlaneGeometry;
    this.planeMaterial = new THREE.ShaderMaterial({
      transparent: true,
      side: THREE.DoubleSide,
      uniforms: this.uniforms,
      vertexShader: /*glsl*/ `
        varying vec2 vUv;
        void main {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4;
        }
      `,
      fragmentShader: /*glsl*/ `
        varying vec2 vUv;
        uniform sampler2D uTexture;
        void main {
          gl_FragColor = texture2D;
        }
      `,
    });
    this.plane = new THREE.Mesh;
    this.scene.add;
  }
}

上述代码创建了一个简单的平面并使用Shader材质显示背景图片。

水波纹是一圈圈扩散的，我们先从“画个圈圈”开始练手，搞个黑色圆环放在水面上。

varying vec2 vUv;
uniform vec2 uResolution;
uniform float uAspect;
uniform sampler2D uTexture;
void main {
  vec4 originalColor = texture2D;
  vec2 center = vec2;
  float radius = 0.3;
  float thickness = 0.05;
  // 计算当前像素到圆心的距离
  float dist = length;
  // 用 step 函数“切出”圆环
  float ring = step - step;
  // 混合颜色：圆环部分显示黑色，其他部分显示原图
  gl_FragColor = mix, ring);
}

这段代码在水面上绘制了一个静态的黑色圆环。

刚才的圆环在非1:1屏幕上会变成椭圆，我们需要“矫正”坐标。

vec2 correctedPos = vUv - center;
correctedPos.x *= uResolution.x / uResolution.y; // 按屏幕宽高比调整x轴
float dist = length;

通过上述代码，我们Ke以确保圆环在任意屏幕比例下保持圆形。

现在圆环是静态的，我们要让它变成“涟漪”。核心是用正弦函数模拟波动，扰动纹理坐标，让颜色跟着“晃”。

float waveFreq = 10.0; // 波纹密度
float wave = sin; // 正弦函数产生周期性波动
float ripple = wave * 0.5 + 0.5; // 把波动范围从映射到
// 让波纹沿圆心向外扩散
vec2 rippleDir = normalize; 
vec2 distortedUV = vUv + rippleDir * ripple * 0.05; 
vec4 rippleColor = texture2D; 
// 圆环部分显示波纹效果，其他部分显示原图
gl_FragColor = mix;

这段代码通过正弦函数模拟波动，并扰动纹理坐标，实现了动态的水波纹效果。

现在波纹是固定大小的，我们要让它像真实水波一样，点击后从中心慢慢放大。

uniform float uTime; 
uniform float uClickTime; 
float radius =  * speed; 
// 省略部分代码...

通过计算点击后的时间差，并乘以扩散速度，我们Ke以实现波纹随时间扩散的效果。

真实水波会越扩散越弱，Zui后消失。我们给波纹加个淡出效果，让它扩散到一定范围后慢慢变回原图。

float fadeStart = 0.5; 
float fadeEnd = 0.7; 
float fade = smoothstep; 
// 波纹颜色随半径增大逐渐变回原图颜色
rippleColor = mix;
gl_FragColor = mix;

这段代码实现了波纹的淡出效果，使其geng加自然。

通过本文的学习，你Yi经掌握了如何使用Shader实现水波纹效果。从静态圆环到动态水波纹，再到添加淡出效果，每一步dou让你geng接近真实的水波效果。希望你Neng将这些技术应用到你的项目中，为用户带来geng加丰富的视觉体验。