AI 摘要：本文通过实例展示如何将 GSAP 动画库与 WebGL 着色器（Shaders）结合，以构建沉浸式网页交互视觉。作者从基础的 HTML 布局与 Three.js 场景搭建开始，逐步扩展至通过 GSAP 动画驱动着色器 uniform 参数，实现包括灰阶渐变、点击波纹、鼠标揭示遮罩、点击与按压的流体扭曲、以及基于滚动的动态模糊等复杂 GPU 动效。文章强调 JavaScript 动画时间线与 GLSL 实时渲染逻辑的联动，让网站视觉能以自然、物理感与交互性呈现。

1. 基础设置与 HTML/CSS 结构
• 构建页面容器与隐藏溢出内容，准备 GSAP Draggable 和 ScrollTrigger 绑定。
• 在 Three.js 环境中创建 Stage 类，负责 Renderer、Camera、Scene 管理。
• 使用 GSAP ticker 同步渲染循环，实现动画与渲染一致更新。

2. WebGL Stage 与平面载入
• 使用 TextureLoader 创建平面 (PlaneGeometry)，加载 DOM 中的图片纹理。
• 将 DOM 元素与 Canvas 中的物体同步，通过正交相机的坐标转换函数转换屏幕坐标到世界坐标。
• 替换标准材质为 ShaderMaterial，导入自定义 vertex/fragment shader。

3. 点击波纹与灰阶渐变效果（Ripple + Grayscale）
• 使用 GSAP Observer 监听点击事件。
• 点击后修改 shader uniform uGrayscaleProgress 在彩色与灰阶之间平滑过渡。
• 添加鼠标点击点 uMouse uniform，使过渡从点击中心扩散。
• 加入顶点波动（Ripple）动画，在 vertex shader 中用正弦函数生成波形变形。
• 结合 GSAP Timeline 同步控制灰度和波纹周期。
• 管理多平面状态，实现点击切换与反向第二动画效果。

4. 纹理遮罩揭示（Texture Reveal Mask Effect）
• 引入双纹理 (uTexture, uTextureBack) 并使用 uMixFactor 控制混合。
• 通过鼠标 hover 事件，使用 Raycaster 定位交互对象。
• 在 fragment shader 中基于鼠标坐标生成圆形遮罩，平滑混合两张纹理。
• 悬停时 reveal 动画开启，离开时渐出还原。

5. 点击按压揭示（Click & Hold Mask Reveal）
• 通过 GSAP Observer 监听 onPress/onRelease/onMove，管理按压持续状态。
• 使用异步 Timeline 表现“按住充能—释放复位”的动画逻辑。
• shader 中使用噪声函数 (noise) 与 uTime 动态扰动 mask，制造液态波动感。
• 实现交互中的纹理扭曲、流动与时间关联视觉。

6. 动态模糊轮播（Dynamic Blur Effect Carousel）
• 结合 GSAP Draggable 与 ScrollTrigger 使轮播支持拖动与滚动同步。
• 计算每个平面到屏幕中心的距离，根据距离动态更新 uBlurAmount。
• 在 shader 中使用多重 Kawase 模糊算法，混合多层模糊采样和平滑区间。
• blur 与 scroll 动态联动，创造景深般的焦点模糊效果。

7. 总结与启发
• GSAP 为动画时序与交互逻辑提供流畅控制。
• Shaders 提供像素级视觉自由度与 GPU 实时渲染性能。
• 在 Web 前端中实现生动视觉，展现设计与技术融合的趋势。