AI 协作日志

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

# 实验三 AI协作记录

**AI工具：** DeepSeek 

## 协作1：矩阵和变换次序 (Task B)
- **我自己的预测：** 
  理论上，平移和旋转顺序不同，结果肯定不一样。如果先平移再旋转，图形应该会绕世界中心画圆；如果先旋转再平移，图形应该在自己中心原地打转。但是在写代码时，到底该写 `R * T` 还是 `T * R` 直接把我搞晕了，而且怎么填都没反应。
- **AI工具与原始提示词：** 
  - 工具：DeepSeek
  - 提示词：“在WebGL的列向量模式下，要实现一个物体绕世界原点公转和绕自身中心自转，Model矩阵的乘法次序分别应该怎么写？为什么？我被 R*T 和 T*R 搞混了。”
- **AI的建议：** 
  AI告诉我，因为列向量是右乘先执行，所以绕世界原点公转应该写成 `R * T(C)`（先把物体平移到C，再绕原点转）；绕自身中心自转要写成 `T(C) * R`。
- **本人计算、运行与证据：** 
  我在 `task-b.html` 里把这两个乘法写进了 `bItem()` 函数。当 pivot 选 `world` 时写 `X.multiply(Rm, X.T(cx, cy))`，切到 `self` 时写 `X.multiply(X.T(cx, cy), Rm)`。运行后，正方形真的一个绕着画面中心画大圆公转，另一个在自己的位置原地打转。右侧的矩阵数值检验也都打了绿勾。
- **采纳或修正结论：** 
  完全采纳。我发现自己之前预测的是对的，只是把数学公式和代码的乘法顺序记反了。这验证了我对“矩阵乘法不满足交换律”的直观理解。

## 协作2：实际故障排查与代码环境问题 (Task A/C/D)
- **错误现象与重现步骤：** 
  做实验时遇到了好几个问题：
  1. 写代码时按 `Shift+Alt+F` 想自动排版，结果 VS Code 弹窗提示 `There is no formatter for 'javascript' files installed.` 没法排版。
  2. 做 Task D 时，找到了 `TODO D-01`，但不知道该写在哪个大括号里，导致生成的对象参数总是不对。
  3. 测试时选了“三角形”，但界面上死活找不到设置角度的地方。
  4. **最崩溃的是：在 Task D 点击生成圆时，提示框显示坐标明明是左上角（如 `-1.77, 0.99`），但图形偏偏生成在右下角（反向）！**
- **我先检查了什么：** 
  对于坐标反向，我一开始以为是公式算错了，反复修改 `addFromMouse` 里的正负号，结果不是上下反就是左右反。我按 F12 打开了控制台，发现没有任何报错。后来我甚至怀疑是 `gl-matrix.js` 库被改了，或者投影矩阵写错了，但对比后发现都没问题。
- **AI工具与原始提示词：** 
  - 工具：DeepSeek
  - 提示词：“vscode 格式化 javascript 弹出 There is no formatter 怎么解决？”、“D-01 应该写在哪一行后面？”、“Task D 缺少了角度设置吗？”以及“为什么坐标算出来是负数，图形却画在相反方向？”
- **AI建议的候选原因与测试：** 
  - 针对 VSCode，AI让我点弹窗里的 `Install Formatter...` 安装 Prettier 插件，还特别提醒我**千万别格式化 `common/` 文件夹**，不然会和老师原版不一致。
  - 针对 D-01，AI指导我写在 `selectOptions()` 函数里，替换掉原来的 return。
  - 针对角度设置，AI告诉我这不是 Bug，下拉框选“沿世界X轴”时角度是固定的，必须切到“自定义角度”，输入框才会显示。
  - 针对最诡异的坐标反向，AI帮我逐行检查了代码，最后确认这是框架底层的渲染坐标系翻转导致的。
- **实测结果、修复与复测：** 
  我装了 Prettier，代码整洁多了；改了 `selectOptions()`，参数快照成功，旧对象也能保留自己的运动；切到自定义角度后，斜向移动正常。针对坐标反向，我采纳了 AI 给出的“魔法打败魔法”方案：在 `transforms.js` 的 `T` 函数里，把平移的 Y 轴取反（`[x, -y, z]`），并在 `modelFor` 的缩放中心里抵消掉这个负号。重新运行后，点击左上角，图形终于老老实实生成在左上角了！

## 协作3：设计方案比较 (Task E)
- **我考虑的两种实现：** 
  在实现 Task E 的截图功能（`savePNG`）时，我考虑了两个方案：
  方案一：用 `canvas.toDataURL('image/png')`。
  方案二：用 `canvas.toBlob(callback, 'image/png')` 配合 URL 下载。
- **AI工具与原始提示词：** 
  - 工具：DeepSeek
  - 提示词：“WebGL canvas 截图用 toDataURL 和 toBlob 有什么区别？哪个性能更好？怎么触发下载？”
- **对比、取舍与原因：** 
  AI 解释说 `toDataURL` 是同步操作，图片大了会卡顿，而且生成的 base64 字符串很长；`toBlob` 是异步的，不阻塞线程，配合 `createObjectURL` 实现下载更优雅。因为框架里已经开启了 `preserveDrawingBuffer: true`，所以不会黑屏。
- **实际实现及核验：** 
  我使用了 `toBlob`。并且在截图前，主动调用了一次 `this.draw()` 确保缓冲是当前帧。点击保存后，成功下载了 PNG 图片，打开看图形和背景都在，没有全黑，画布尺寸也完全正确。清屏和调整画布宽高的功能也都测试正常。