Immersive Banner — 沉浸式 WebGL Banner 生成器

生成带深度感的沉浸式 Banner，单文件 HTML，零外部依赖。

核心特效

工作流程

Phase 1: 需求确认

向用户确认以下信息（如已提供则跳过）：

1. 图片来源：用户提供图片路径 / URL / 使用内置程序生成的 demo 场景
2. Banner 用途：首页 hero、产品展示、活动页、纯展示 demo 等
3. 标题/副标题：Banner 上显示的文字（可选）
4. 色调偏好：暗色/亮色/跟随图片（默认暗色）
5. 输出路径：默认 ~/Desktop/banner-output/
6. 特效偏好：全部启用 / 选择性启用（默认全部）

Phase 2: 场景构建

根据用户需求，生成单文件 index.html，包含以下模块：

2.1 WebGL Depth Displacement Engine

// 核心 shader 结构
precision mediump float;
varying vec2 v_uv;
uniform sampler2D u_image;     // 原图
uniform sampler2D u_depth;     // 深度图（灰度）
uniform vec2 u_mouse;          // 鼠标位置 -1..1
uniform float u_intensity;     // 位移强度
uniform float u_time;          // 动画时间
uniform float u_focusBlur;     // 对焦模糊度 0-1
uniform float u_scrollY;       // 滚动偏移

void main() {
  float depth = texture2D(u_depth, v_uv).r;
  // 鼠标驱动位移
  vec2 disp = u_mouse * depth * u_intensity * 0.003;
  // 呼吸动效
  disp += vec2(sin(u_time * 0.5 + v_uv.y * 3.0), cos(u_time * 0.4 + v_uv.x * 3.0)) * 0.001 * depth;
  vec4 color = texture2D(u_image, v_uv + disp);
  // 对焦模拟 + 暗角
  gl_FragColor = color;
}

2.2 自动深度图生成

如果用户没有提供深度图，从原图自动生成：

1. 亮度提取：0.299R + 0.587G + 0.114B
2. 高斯模糊：box blur，半径 = min(w,h) / 60
3. 中心偏移：中心 = 近（亮），边缘 = 远（暗）
4. 归一化：映射到 0-255

注意：自动生成的深度图是近似的。如果用户追求精确效果，建议使用 MiDaS / Depth Anything 生成真实深度图。

2.3 粒子系统

粒子属性：
- 位置 (x, y)
- 速度 (vx, vy) + 布朗运动扰动
- 旋转 + 旋转速度
- 透明度 + 衰减
- 形状：圆形（余烬）/ 椭圆（花瓣）/ 菱形
- 颜色：暖色系 6 种随机

2.4 UI 层

• Banner 标题/副标题（CSS animation fadeUp）
• 右上角控制面板（实时调节各特效参数）
• 底部 badge

2.5 图片加载

支持三种方式：

1. 拖拽上传：拖入图片自动加载
2. 文件选择：点击按钮选择
3. 内置 Demo：程序化生成夜景场景（星空+山脉+月亮+萤火虫）

Phase 3: 定制与增强

根据用户具体需求，可以增加以下增强项：

只在用户明确要求时添加增强项，默认不加。

Phase 4: 输出与验证

1. 输出单文件 index.html 到指定路径
2. 自动在浏览器中打开预览
3. 告知用户如何调整参数

技术约束

• 单文件：所有 CSS/JS 内联，无外部依赖
• WebGL 1.0：兼容性最广
• 性能：requestAnimationFrame，粒子数 ≤ 200
• 图片格式：支持 jpg/png/webp，通过 FileReader 读取为 dataURL
• 深度图：灰度图，白=近（位移大），黑=远（位移小）

示例用法

用户：帮我做个 banner，用这张图 ~/Desktop/hero.jpg
→ 读取图片，自动生成深度图，输出带全部特效的 index.html

用户：做个暗色系的产品展示 banner，标题"New Collection"
→ 使用内置 demo 场景 + 自定义标题

用户：做个 banner，只要粒子效果和视差，不要深度位移
→ 选择性启用特效