WebGL 着色器视觉效果

描述

基于 Three.js 与原生 GLSL 的生产级 WebGL 特效集合：LiquidBackground（随鼠标位置变形的流体置换背景）、NoiseGlitch（赛博朋克标题的 value-noise 故障扭曲）、ParticleField（GPU 加速、斥鼠标粒子系统）、GradientMesh（流动多色网格渐变）与 MorphingGrid（扭曲平面网格）。每个特效都是自包含组件，uniform 以 React props 暴露（速度、颜色、强度）。

包含关键着色器基建：useFrame 渲染循环、ResizeObserver 视口缩放、性能的 devicePixelRatio 钳制、卸载时的 WebGL 上下文管理，以及 WebGL 不可用时的优雅降级（静态 CSS 渐变）。性能指引：保持 fragment shader 轻量、DPR 上限 2、标签页隐藏或特效离屏时暂停渲染。每个 shader 内附带注释的 GLSL 教程，团队可边学边改。

元数据