用 AI 制作会追光的 3D 浮雕卡

Art Nouveau card
新艺术 装饰 卡牌

你是「追光卡」视觉顾问。

我会发给你一张图片，请判断它是否适合制作成
「WebGL 实时打光的 3D 浮雕收藏卡」，
并根据这张图的真实内容给出改造方案。

【最终效果】

这张图片会被制作成一张可以实时追光的卡片。

鼠标或手机会控制光源的位置。
当光线移动时，卡片上的金属、浮雕和有光泽的细节会随之亮起。

后续还会根据原图生成法线图、高度图和粗糙度图，
所以原图需要有清楚的材质、体积和轮廓信息。

【请判断以下四点】

1. 可追光的细节

画面中是否有适合反光的金属描边、浮雕纹样、首饰、边框、
宝石、珐琅，或者其他有光泽的细节？

不要求越多越好，重点是位置清楚、主次合理。

2. 体积和明暗

主体是否有柔和、自然的明暗变化？

花瓣、人物、动物、边框和装饰物的凹凸关系是否清楚？

如果只是完全平涂的线稿，或者细节已经糊在一起，
请说明它会怎样影响浮雕效果。

3. 主体轮廓和构图

主体是否完整，轮廓是否清楚，是否能和背景区分开？

横版、竖版、方形和异形构图都可以，
不要把画面比例作为是否适合的判断标准。

4. 背景和原有光线

背景是否能衬托主体？

深色背景是加分项，但不是硬性要求。

同时检查画面中是否已经存在强烈的方向性高光、硬阴影或逆光。
如果这些固定光线会和后续的动态追光冲突，请明确指出。

【你的输出】

① 先给结论：

适合 / 需要改造 / 不适合

② 按照上面四点逐条说明理由。

③ 分别告诉我：

- 哪些内容建议保留；
- 哪些地方会影响追光效果；
- 最值得优先修改的三处。

④ 如果需要改造，请直接生成一段可以交给图生图模型的提示词。

这段提示词需要遵守：

- 保留原图的主体、关键特征、构图和重要文字；
- 只把适合反光的轮廓和装饰变成金属，不要把所有线条全部变成金线；
- 根据原图主题选择合适的材质，例如金属、珐琅、漆器、陶瓷或宝石；
- 不要固定使用景泰蓝，也不要把所有材质一次性堆进去；
- 增强浮雕层次和柔和的固有明暗；
- 不要生成强烈的方向性高光和硬阴影；
- 根据原图决定是否需要压深、简化或去除背景；
- 尽量不要改变人物面部、动物特征、文字和原有主体形状。

如果原图确实不适合做整体浮雕，请直接说明原因，
并建议是否改成「保留原图，只增加金属收藏卡边框」。

请简明扼要，不要写成长篇理论。

请前往 fal.ai 官网：https://fal.ai/

按照 fal.ai 当前的官方方式连接 fal.ai MCP，并引导我安全配置刚刚创建的 API Key。

连接完成后，请检查是否能正常调用 PATINA 模型（fal-ai/patina）：
https://fal.ai/models/fal-ai/patina

我稍后会提供一张原图，请使用这个模型生成 normal、height 和 roughness 三张材质数据图。

请使用 fal.ai 的 fal-ai/patina 模型处理这张原图。

1. 只生成下面三张数据图，并按指定名称保存：
   - card-normal.webp（normal 法线图）
   - card-height.webp（height 高度图）
   - card-roughness.webp（roughness 粗糙度图）

   请优先保存为 WebP。
   如果 PATINA 返回其他图片格式，请保存后转换为 WebP。

2. 在当前项目的 cards 文件夹中，
   为这张卡创建一个独立的子文件夹，
   把原图和三张数据图都整理进去。

3. 三张数据图生成完成后，请确认单卡文件夹中已经有原图和三张数据图，
   然后告诉我文件夹的位置和四张图片的文件名。

帮我做一个「会追光的 3D 浮雕卡片」网页，单个 HTML 文件，不要用任何
外部库或框架。

【我提供的素材】使用刚才创建的单卡文件夹中的四张图：
  原图（读取实际文件名，可能带透明通道）
  card-normal.webp（法线图）
  card-roughness.webp（粗糙度图）
  card-height.webp（高度图）

【要实现的效果】
一张卡片居中在深色页面上。鼠标就是一盏烛光：光走到哪里，那里的
金属线条就锐利地亮起来；卡片微微朝鼠标方向倾斜；卡片的影子朝
光源的反方向甩出去。点击卡片不触发任何操作。

【技术方案 · 请严格按这个做】
1. 一个透明的 WebGL2 canvas 盖在 <img> 之上，img 作为兜底。
   canvas 用 alpha:true + premultipliedAlpha:true，
   blendFunc(ONE, ONE_MINUS_SRC_ALPHA)，片元输出 col * a。
   贴图上传时要 UNPACK_FLIP_Y_WEBGL = 1。

2. 片元着色器按顺序做四件事：
   a. 高度视差：用高度图让凸起的像素随鼠标反向偏移，幅度 0.0034。
   b. 法线漫反射：法线图解到 -1..1，xy 乘以强度 1.45，
      z 用 max(z, 0.08) 兜底再归一化。光源方向由鼠标 uv 算出，
      lightZ 取 0.5。漫反射用 wrap = ndl * 0.8 + 0.2 柔化，
      漫反射强度取 0.62。
   c. 粗糙度控制高光（这是整个效果的灵魂，务必照写）：
      shininess = mix(52.0, 6.0, rough);
      spec = pow(max(dot(N, H), 0.0), shininess);
      spec *= (1.0 - rough * 0.85) * 0.46;
      也就是粗糙度越黑的地方越锐利越闪。
   d. 边缘轮廓光：侧光时给一点暖色 rim，很淡就好。

3. 光色用暖烛光 (1.0, 0.92, 0.78)，环境光用偏冷的
   (0.82, 0.83, 0.88)，环境光强度取 0.56，
   让暗部是冷的、亮部是暖的。

4. 鼠标 uv 允许越界到 -0.4 ~ 1.4，这样光能从卡片外面斜着扫进来。

5. 倾斜用 CSS 3D，不要用 WebGL 做：perspective: 1400px，
   最大倾斜 4.2 度（千万不要调大，超过 8 度就会露馅，因为贴图
   本身是平的），鼠标不动时有正弦慢摆 ±1.3 度，
   每帧缓动系数 0.055。全部在一个 requestAnimationFrame 里做，
   不要用 CSS transition（会反复卡住）。

6. 动态投影：卡片后面垫一个模糊色块，按当前倾斜量朝光源反方向
   平移，越偏越长越淡。

【手机操作】
- 使用 Pointer Events 或 touchmove，
  根据手指在卡片中的位置移动光源和控制倾斜。
- 不要使用陀螺仪，也不要请求方向传感器权限。

【其他要求】
- 尊重 prefers-reduced-motion：关掉视差和摆动。
- devicePixelRatio 上限取 1.5，避免 GPU 像素量过高。
- 卡片比例读原画的真实尺寸来定，不要写死。
- WebGL2 不可用或贴图加载失败时，保留静态原画并在页面底部提示。
- 如果原画带透明通道，不要在它后面垫矩形底色和矩形阴影，
  投影要用大范围模糊、低透明度，跟着轮廓走。

【保存配置】
- 在当前单卡文件夹中创建 card-config.json，
  保存四张素材的实际路径和本规格中的全部可调参数。
- 后续每次细调，也同步更新 card-config.json。

【完成后】
- WebGL 读取本地贴图会被浏览器的 file:// 限制拦住，
  请创建一个一键启动本地服务器的脚本。
- 启动本地预览并自动打开浏览器，
  让我检查这张卡的倾斜、凹凸、追光和反光效果。
- 告诉我预览页和 card-config.json 保存在哪里，
  以及以后怎样再次打开这个预览页。