AI 协作日志

学号：202412211401007 · 来源：ai-log.md

# 实验三 AI协作与核验记录

## 协作1：矩阵与变换次序（Task B）

### 我的目标和预先预测
- 正方形初始中心 C=(0.50, 0.25, 0)。
- 预测 R·T（世界原点旋转）：先平移到 C，再绕画布原点旋转，正方形会绕原点做圆周运动（公转）。
- 预测 T·R（对象中心旋转）：先在局部原点旋转，再整体平移到 C，图形在 C 点原地转动（自转）。
- 预测原因：列向量体系下矩阵从右向左执行，右边先作用于点。

### 关键提示词（原文）
> WebGL gl-matrix 列向量 R*T 与 T*R 矩阵乘法顺序，变换效果区别

### AI建议摘要
- 列向量约定：M = A·B 表示先执行 B，再执行 A。
- R·T：先平移到 C，再绕世界原点旋转 → 公转。
- T·R：先局部旋转，再平移到 C → 自转。
- 缩放同理：要绕自身中心缩放，顺序应为 T(C)·S，先缩放再平移。

### 我的计算或测试方法
1. 在 task-b.html 中选择旋转模式，初始中心设为 (0.50, 0.25)。
2. 分别切换"世界原点 · R×T"和"对象中心 · T×R"，调整角度观察轨迹。
3. 手动代入点 P=(1,0,0,1) 验证：Rz(90°) 后应为 (0,1,0,1)。

### 实际结果与证据
- 世界原点模式：正方形绕画布原点画大圆，符合公转预期。
- 对象中心模式：正方形在 (0.5, 0.25) 位置原地转动，符合自转预期。
- 数值检验面板中 rotateZ 测试通过（✓）。

### 采纳、拒绝或修正的结论
- 采纳 AI 建议的矩阵顺序规则。
- 修正点：最初误把矩阵顺序写成 R·T 是先 R 后 T，实际列向量下是先右后左，重新核对后修正代码。

---

## 协作2：故障诊断与修复（Task C 暂停后时间跳变）

### 错误现象、触发步骤
- 动画运行中点击暂停，等待 2~3 秒后再点继续，画面突然跳一大段，而不是从暂停处平滑继续。

### 我先检查了什么
1. rAF 是否被重复创建，导致多个循环叠加。
2. running 标志是否正确切换。
3. elapsed 时间累加逻辑——是否在暂停期间仍然累加。

### 关键提示词（原文）
> webgl requestAnimationFrame 暂停恢复动画时间突然跳跃怎么修复

### AI列出的候选原因
1. 暂停时没有停止累加 elapsed，时间一直在走。
2. dt 计算没有考虑暂停间隔，恢复后第一帧 dt 特别大。
3. 切换后台标签页后 rAF 暂停，回来时 dt 累积过大。

### 我逐项测试的结果
- 候选1：检查代码，发现暂停时 dt=0 占位，根本不累加，但恢复后第一帧 dt 会很大。
- 候选2：确认！暂停期间 lastMs 一直被更新（因为 tick 还在跑，只是不累加 elapsed），恢复时 dt 应该正常。
- 候选3：切换后台标签后再回来，dt 会非常大，导致突然跳变。

### 真正原因、修改位置和复测结论
- 真正原因：没有对 dt 做上限限制，切换后台标签或暂停恢复后第一帧 dt 可能很大。
- 修改位置：app.js 的 tick() 函数，加入 `if(dt > 0.1) dt = 0.1;` 限制最大帧间隔 0.1 秒。
- 复测：暂停任意时长后恢复，动画从暂停位置继续，无跳变；切换后台标签页再回来也不会突然跳一大段。

---

## 协作3：方案比较与实现核验（Task E PNG截图黑图问题）

### 待解决的具体设计问题
- WebGL Canvas 调用 toBlob 时，有时候得到的是黑色空白图，两种实现方案对比。

### 关键提示词（原文）
> webgl canvas.toBlob 得到黑色截图 两种实现方案对比 重绘缓冲

### 两种方案及取舍依据
| 方案 | 做法 | 优点 | 缺点 |
|------|------|------|------|
| 方案1 | 直接调用 toBlob | 代码简单 | 可能拿到已被清空的绘制缓冲，得到黑图 |
| 方案2 | 先手动调用 draw() 重绘一帧，再立即 toBlob | 保证缓冲中有最新画面，截图稳定 | 多一次绘制调用，开销极小 |

### 我最终采用的实现
- 采用方案2：在 savePNG() 中先调用 this.draw()，再执行 toBlob。
- 同时 Graphics 构造时已设置 `preserveDrawingBuffer: true`，进一步保证缓冲不被提前清除。

### 测试与反思
- 多次测试暂停/运行状态下截图，PNG 都包含正确的背景色和图形。
- 反思：preserveDrawingBuffer 虽然能解决大部分情况，但主动重绘一次再截图是更稳妥的做法，不依赖浏览器内部缓冲策略。

---

## 其他使用AI的记录
- 协助生成圆的48段三角形扇面顶点代码，自行核对圆周角计算是否正确。
- 核对鼠标坐标转世界坐标的公式，验证 800×600 画布点击中心确实得到 (0,0)，点击左上 (200,150) 约为 (-0.667, 0.5)。
- 确认 triangle01 三角波公式：`1 - |1 - 2*phase|`，验证 t=0/0.25/0.5/0.75/1 输出为 0/0.5/1/0.5/0。