沉浸式 WebGL Banner 生成

要解决什么问题

首页 Hero、活动页或产品展示里，静态大图往往缺少纵深与动效，滚动时也没有「镜头在场景里移动」的感觉。若自己搭 WebGL 管线、深度图与粒子，通常要拆多文件、引库，还要处理加载与参数调试。这个技能的目标是：产出单文件 index.html，内联 CSS/JS，零外部依赖，在浏览器里直接预览带深度位移的 Banner。

技能如何工作

流程分四段：先确认图片来源（路径/URL/内置 demo）、用途、标题与色调、输出路径和特效开关；再构建场景。

核心特效在 fragment shader 与 Canvas 2D 上实现：

• Depth Map Displacement：灰度深度图控制像素位移，参数 displacement 约 0–80（默认 30）
• Parallax Scrolling：滚动由 scrollY 驱动微量偏移，parallaxStrength 0–50（默认 20）
• Focus Pull Animation：加载约 2.5s，前景模糊过渡到主体清晰
• Floating Particles：Canvas 粒子布朗运动，particleCount ≤ 200

未提供深度图时，会从原图做亮度提取、box blur、中心近/边缘远偏移并归一化——这是近似深度；UI 含标题动画、右上角实时参数面板、拖拽/选文件/内置夜景 demo 三种加载方式。用户明确要求时才加音频响应、陀螺仪、多图切换等增强项。

适用边界

• 约束为 WebGL 1.0、requestAnimationFrame，粒子数建议 ≤ 200
• 图片经 FileReader 转 dataURL，支持 jpg/png/webp
• 深度语义：白=近（位移大），黑=远（位移小）；追求真实几何深度应自备 MiDaS / Depth Anything 等生成的深度图，而非仅依赖自动生成