AI 协作日志

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

# 实验三 AI协作记录（请学生在实际完成实验后填写）

> 教师参考代码包不包含虚构的AI协作过程。学生提交时需填写真实工具、提示词、独立测试与结论。

## AI协作1：矩阵和变换次序
我自己的预测：
刚开始学习齐次矩阵变换，我以为代码书写的先后顺序，就是物体实际执行变换的顺序。写Task‑B公转自转功能，我把multiply(T,R)用来实现绕世界原点公转，运行后正方形只会原地自转，不会绕画布原点转圈。我了解列向量模式矩阵变换顺序会反转，但分不清glMatrix的multiply(A,B)哪个变换先执行，自己猜测参数写反，但不能确定。
- AI工具与原始提示词：
 豆包     glMatrix multiply(A,B) 矩阵乘法顺序，平移旋转，公转自转，为什么结果不一样
- AI的建议：
1. glMatrix.mat4.multiply(A,B)等价数学A × B，第二个传入的矩阵B先执行变换，A后执行。
2. 公转（绕世界原点）：multiply(R,T)，先平移物体位置，再绕世界原点旋转。
3. 自转（对象自身）：multiply(T,R)，物体先在局部原点旋转，再平移到画布位置。
4. 区分齐次坐标w=1点、w=0方向向量，平移不会改变方向向量。
- 本人计算、运行与证据：
修改bItem函数multiply的两个入参，切换下拉pivot参数world/self，观察正方形运动轨迹；同时查看页面输出矩阵文本，运行页面5组矩阵单元测试。world模式正方形绕画布原点转圈，self模式原地自转，全部测试项通过。
- 采纳或修正结论：
采纳AI对矩阵运算顺序的讲解，修正代码矩阵相乘参数。理解列向量右乘优先，Task‑B平移、旋转、缩放全部功能正常。

## AI协作2：实际故障排查
- 错误现象与重现步骤：
Task‑D鼠标点击画布创建对象，鼠标点击位置和生成物体位置对不上。点击画布中心，物体不在中心；点击画布下方，物体跑到画面上方；非正方形画布水平方向也会偏移。控制台无报错，对象可以正常创建，只是坐标映射出错。
重现步骤：打开task‑d.html，点击画布像素中心位置，生成物体偏离点击的位置。
- 我先检查了什么：
1. 打印getBoundingClientRect，确认可以拿到画布left、top位置。
2. u、v归一化计算可能出错。
3. 浏览器鼠标Y轴向下，WebGL世界Y轴向上，怀疑没有做Y轴翻转。
4. 实验文档提到画布宽高比aspect，猜测X坐标没有乘aspect造成水平偏移，自己无法拼出完整转换公式。
- AI工具与原始提示词：
豆包   WebGL canvas鼠标坐标转世界坐标，Y轴颠倒，点击位置物体生成位置不对，aspect宽高比
- AI建议的候选原因与测试：
候选原因：
1. 没有Y轴翻转处理，浏览器与WebGLY轴方向相反；
2. X坐标没有乘以画布宽高比aspect；
3. u、v归一化计算错误；
4. 直接把clientX、clientY当做世界坐标。
测试建议：打印u、v、cx、cy中间变量观察数值，定位错误点。
- 实测结果、修复与复测：
打印中间变量，发现cy正负颠倒，cx缺少aspect相乘。修复addFromMouse内部坐标转换代码，正确计算u、v、aspect、cx、cy。
复测：800×600画布点击中心(400,300)，对象生成在世界坐标(0,0)；各个点击位置物体坐标都匹配。Task‑D多对象创建、参数快照功能全部正常。

## AI协作3：设计方案比较
- 我考虑的两种实现：
本处针对Task‑E的PNG截图导出功能。
方案A：截图按钮触发时，先主动调用this.draw()重绘画布，再调用toBlob导出图片。
方案B：不执行draw重绘，直接调用toBlob，依靠浏览器保留WebGL绘制缓冲。
- AI工具与原始提示词：
豆包   WebGL2 canvas.toBlob截图，preserveDrawingBuffer，截图前draw重绘和直接截图两种方案对比，学生实验哪个更合适
- 对比、取舍与原因：
方案A
优点：不依赖preserveDrawingBuffer配置；浏览器丢弃缓冲也能得到完整画面；切换标签页截图不会黑屏，实验提交可靠性高；本实验图形不多，额外绘制性能开销很小。
缺点：截图操作会额外执行一次绘制函数。
方案B
优点：代码行数更少，不需要额外draw调用。
缺点：强依赖浏览器缓冲状态；浏览器会自动释放WebGL缓冲，很容易导出黑色空白PNG，实验验收有失败风险。
取舍：选择方案A。实验作业正确性优先级高于代码简短，规避黑屏风险。
- 实际实现及核验：
修改savePNG函数，函数开头执行this.draw()，再执行toBlob下载PNG。
核验：正常截图图片与画布画面完全一致；切换浏览器标签页返回再截图也不会黑屏；Task‑E画布设置、清空画布等其余功能不受改动。

其他AI使用记录：Challenge‑C1选做加分题
C1故障排查：点击图形物体无法选中，总是新建对象
- 错误现象与重现步骤：
开发Challenge‑C1，预期点击图形选中物体、点击空白创建对象；实际点击已绘制图形不会选中，直接新建对象，控制台无语法报错，UI按钮正常。
- 我先检查了什么：
核对HTML按钮id与JS；检查class类大括号配对，之前粘贴代码出现过大括号错位；怀疑拾取pickObjectByMouse没有运行；猜测removeEventListener删除监听失效。
- AI工具与原始提示词：
 豆包   JS addEventListener使用箭头匿名函数，removeEventListener为什么删不掉监听，两套click事件同时运行
- AI建议的候选原因与测试：
匿名箭头函数每次生成全新函数对象，removeEventListener无法移除旧监听，新旧两套click事件同时执行。
给出两套思路：①频繁绑定解绑监听；②保留一套监听，布尔标记，函数内部分支处理。
- 实测结果、修复与复测：
放弃绑定解绑监听方案；App构造函数增加this.isChallengeMode = false；challenge页面开启标记；删除canvas相关add/removeEventListener代码；在addFromMouse开头增加拾取判断，命中物体直接return阻止新建对象。
复测：点击图形正常选中，点击空白新建对象；修改单对象速度、删除、取消选择全部可用；task‑a~e不受任何影响。

C1实现方案比较
- 我考虑的两种实现：
方案 A：给 canvas 绑定两套 click 监听；challenge 页面删掉旧监听，注册全新拾取优先的点击事件。
方案 B：保留原来的鼠标点击监听，增加一个布尔模式标记。
- AI工具与原始提示词：豆包  做 WebGL 拾取选中，页面之间复用同一个 canvas，两种点击处理怎么选择，优缺点对比
- 对比、取舍与原因：
- 方案 A（替换监听）
优点：逻辑看上去分离，C1 代码独立。
缺点：JS 匿名箭头函数无法 removeEventListener，会残留旧事件，出现重复执行 bug；维护麻烦，切换页面容易监听堆积。
方案 B（标记 + 分支）
优点：只使用一套 DOM 监听，不会产生事件堆积；task‑a~e 完全复用原有逻辑，不需要改动页面绑定；模式切换安全稳定。
缺点：同一个函数里面 if 分支变多，代码可读性稍微下降。
取舍：选择方案 B，避开匿名监听删除的 JS 陷阱，保证必做题代码完全不受 C1 加分代码干扰，这对于实验项目很重要，不能改坏前面已经完成的 A‑E 任务。
- 实际实现及核验： 使用this.isChallengeMode标记。
1. challenge 页面开启标记，点击优先执行包围盒拾取；命中物体 return 阻止新建对象；空白位置继续创建对象。
2. 普通 task 页面标记关闭，直接跳过拾取逻辑，沿用 D/E 原来鼠标点击创建对象全部旧逻辑。
3. 核验：
①C1 功能：选中物体、修改单对象速度、单独删除对象、取消选择全部可用；使用简化二维包围盒拾取。
②打开 task‑a、b、c、d、e，原有全部功能和修改之前一模一样，没有引入副作用。