# 参考视频分析与渲染校准

参考文件：`e190b66033aaf54c15e0c366321c96d11c290745.MP4`

- 时长：19.0 秒
- 分辨率：2160 × 2160
- 帧率：30 fps
- 总帧数：570 帧
- 分析方式：全帧抽取，并以 5/10 fps 接触表和原尺寸关键帧复核

本文只记录可由视频确认的现象，并将面向“鼠标从边缘撕起”的设计推断单独列出。

## 视频事实

### 交互时间线

| 时间 | 参数变化 | 画面结果 |
| --- | --- | --- |
| 0.0–2.6s | `Peel` 约 `0.07 → 0.92`；`Peel dir = 204°`、`Wind = 0` | 左上角的小卷边逐渐扩大，白色背面覆盖 C/L，贴合区域保持刚性。 |
| 2.7–3.1s | 参数短暂停留 | 卷起状态保持，没有自动回弹。 |
| 3.2–5.3s | `Peel dir` 约 `204° → 248° → 174°`；`Peel ≈ 0.92` | 折线围绕贴纸旋转；到约 174° 时形成接近竖直、从左向右推进的卷边。 |
| 5.4–7.5s | `Peel` 约 `0.92 → 0.23 → 0.58`；`Peel dir ≈ 174°` | 左侧卷起先缩回到接近贴平，再恢复到中等幅度。 |
| 7.7–8.9s | `Wind` 约 `0 → 1.20`；`Peel ≈ 0.58` | 自由背片开始明显摆动。 |
| 9.0–10.5s | 参数值不再变化 | 卷边仍持续周期性起伏，说明 `Wind` 是时间驱动，而非一次性位移。 |
| 10.7–12.7s | `Peel dir` 约 `174° → 43°`；`Wind = 1.20` | 卷边由左侧转过斜向位置，在约 80–100° 时视觉上接近贴平，随后从右下侧重新出现。 |
| 12.7–14.3s | `Peel ≈ 0.58`、`Peel dir ≈ 43°` | 右侧中等卷边保持，并继续受到风动影响。 |
| 14.4–17.8s | `Peel` 约 `0.58 → 0.89 → 0.20` | 右侧背片先大幅覆盖 K/C，再收回成小卷角。 |
| 17.8–19.0s | `Peel ≈ 0.20` | 释放后保持最终状态；视频未展示直接拖拽或弹簧复位。 |

视频中的输入装置是带触点提示的参数滑杆，不是直接抓取贴纸边缘。固定可见值为 `Border = 118`、`Tilt = -3°`、`Shadow = 0.32`。

### 几何与材质

- 正面是黑色文字加厚白色刀模边；轮廓孔洞在卷起后仍被保留，说明背面与正面共享同一透明轮廓。
- 未揭起区域始终保持平面且不发生橡皮状拉伸。主要形变集中在近似直线的卷曲带和其外侧自由背片。
- 已揭起部分翻向镜头后不再显示正面印刷，而显示近白、略暖的光滑背材。
- 卷曲脊线上存在宽而柔的亮带；贴合根部有窄暗带。这两者会随折线方向旋转，属于曲面法线响应，而不是固定贴图。
- 背片会跨过正面并产生遮挡；内部透明孔洞可露出其下方内容。
- 贴纸整体、背景和镜头均保持固定，仅卷曲参数和自由背片变化。

### 阴影与照明

- 平贴部分有短距离、柔和、偏右下的接触阴影。
- 揭起部分另有动态投影；高度越大，投影位移和模糊越大。
- 最大揭起时，阴影从折线向右下延伸；主光可近似为来自左上方的面积光。
- 单一 CSS `drop-shadow` 无法同时解释贴地阴影和随高度变化的卷片投影。

## 实现推断与默认校准

以下不是视频直接给出的数值。为使不同尺寸的文字和 SVG 得到一致效果，统一以贴纸可见高度 `H` 归一化。

| 参数 | 建议默认值 | 建议范围 |
| --- | ---: | ---: |
| 卷曲半径 `R` | `0.12H` | `0.08–0.17H` |
| 180° 弯曲影响宽度 `πR` | `0.38H` | `0.25–0.53H` |
| 自由背片最大高度 | `2R ≈ 0.24H` | `0.16–0.34H` |
| 背面底色 | `#F7F5F2` | `#F2F0EC–#FCFBF8` |
| 背面粗糙度 | `0.30` | `0.20–0.45` |
| 高光亮度增量 | `0.10` | `0.06–0.16` |
| 高光宽度 | 弯曲带的 `22%` | `15–32%` |
| 折痕暗化 | `0.09` | `0.05–0.14` |
| 静态阴影偏移 | `(0.025H, 0.045H)` | 按光向等比缩放 |
| 静态阴影模糊 | `0.075H` | `0.05–0.11H` |
| 静态阴影不透明度 | `0.22` | `0.14–0.30` |
| 动态投影最大位移 | `0.25H` | `0.15–0.38H` |
| 动态投影模糊 | `0.06H + 0.55z` | 上限约 `0.24H` |
| 风动频率 | `1.3 Hz` | `0.8–1.8 Hz` |
| 风动高度振幅 | `0.035H × wind` | `0.015–0.065H × wind` |
| 风动扭转 | `2.5° × wind` | `1–5° × wind` |
| 边缘抓取热区 | `0.08H` | `0.05–0.12H` |
| 长边网格段数 | `96–128` | 最少 `64` |

### 卷曲模型

设 `n` 为揭起方向，`front` 为折线在 `n` 轴上的位置，`s` 为顶点越过折线后的弧长：

```text
a = clamp(s / R, 0, π)
n' = front - R * sin(a)
z  = R * (1 - cos(a))

if s > πR:
  n' = front + (s - πR)
  z  = 2R
```

垂直于 `n` 的切向坐标保持不变，再仅对自由背片叠加风动。变形导数用于重算法线；片元阶段按同一 alpha/SDF 丢弃正反面像素，以保留 SVG 或文字的刀模轮廓和孔洞。

建议使用 WebGL 变形网格和独立阴影 pass：第一层产生短距离接触影，第二层按顶点高度投射并扩大模糊。背面使用独立材质；不要把正面纹理简单镜像作为背面。

### 直接拖拽映射

以下交互属于产品实现推断：

1. `pointerdown` 仅在 alpha 命中且距轮廓小于抓取热区时生效。
2. 记录最近轮廓点为抓取点；拖动向量决定 `n`，折线与 `n` 垂直。
3. `peel = clamp(dragDistance / (0.65 × projectedSpan), 0, 1)`。
4. 对方向和 peel 做低通滤波，避免轮廓拐角处跳变。
5. 风动只作用于已越过折线的自由片，且在折线处使用平滑包络衰减到零。

### 释放行为

参考视频只证明“滑杆释放后保持当前位置”，没有证明真实贴纸应如何回弹。若交互目标是弹性贴纸，可采用以下默认值：

- 弹簧刚度：`210 s⁻²`
- 阻尼：`25 s⁻¹`
- 收敛时间：约 `300–450 ms`
- 最大超调：`2–5%`
- `peel < 0.18` 时吸附回平面；更大 peel 默认保持，或提供“始终回弹”选项

上述释放策略必须作为可配置行为，不能标记为参考视频原有行为。