AI 协作日志

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

# 实验一 AI协作记录

> 请记录本人真实的AI协作过程。不要只粘贴AI生成结果，应体现自己的判断、测试和核验。

## AI协作1：理解数据流

### 我的目标
理解顶点数据如何从 JavaScript 传入 GPU，并最终在 Canvas 上形成三角形。
### 提示词
请解释 Float32Array 到屏幕三角形的数据流，以及 Buffer、Vertex Shader、光栅化和 Fragment Shader 的作用。
### AI关键回答摘要
将流程总结为：Float32Array → Buffer → 顶点属性 → Vertex Shader → 光栅化 → Fragment Shader → Canvas，并解释了每个阶段的作用。
### 我的判断
我认为解释与任务1代码的执行顺序一致，并认识到 JavaScript 数组和 GPU Buffer 不是同一份数据。
### 验证方法
在代码中依次查找数据创建、Buffer 上传、属性设置和绘制调用，并修改顶点与颜色后重新运行。
### 验证结果
修改顶点后图形形状发生变化，修改 uniform 后颜色发生变化，Console 中没有未处理错误。
### 修正后的结论
顶点数据必须先上传到 GPU Buffer，再由 vertexAttribPointer() 指定读取方式，最后经过 Shader 和光栅化形成像素。
---

## AI协作2：程序调试

### 现象
将四边形的绘制模式改为 gl.TRIANGLES 后，右侧只能显示一个三角形，无法形成完整四边形。
### 我的初步判断
由于程序能显示部分图形且 Console 没有报错，判断问题可能出在 draw mode 或绘制顶点数量
### 给AI的提示词
第二个对象只能显示一个三角形，请列出可能原因，并说明如何通过代码和运行结果进行验证。
### AI给出的关键建议
AI建议检查 draw mode、顶点数量、Buffer 绑定和 vertexAttribPointer()，并指出四个顶点应使用 TRIANGLE_STRIP。
### 我实际进行的测试
我保持顶点、颜色和 Buffer 不变，只在 gl.TRIANGLES 与 gl.TRIANGLE_STRIP 之间切换。
### 测试结果
使用 gl.TRIANGLES 时只显示一个三角形，恢复 gl.TRIANGLE_STRIP 后显示完整四边形。
### 最终原因
gl.TRIANGLES 每三个顶点组成一个独立三角形，第四个顶点无法单独组成图形。
### 是否采纳AI建议及理由
采纳，因为控制变量实验结果与 AI 的解释一致。
---

## AI协作3：顶点属性与颜色

### 我的目标
理解位置和颜色为什么需要不同的 Buffer，以及 vertexAttribPointer() 如何读取两种数据。
### 提示词
解释为什么 vPosition 每个顶点读取2个 float，而 vColor 每个顶点读取4个 float。
### AI关键回答摘要
位置数据包含 x、y，颜色数据包含 R、G、B、A，分量数量必须与数组的数据结构一致。
### 对照实验
我将 vColor 的读取数量从 4 临时改为 3，其他代码保持不变，观察后再恢复为 4。
### 实际现象
改为 3 后，顶点颜色及内部渐变与预期不一致；恢复为 4 后，红、绿、蓝渐变恢复正常。
### 我的解释
颜色数组按每四个 float 保存一个顶点颜色，改为读取三个后会造成后续数据分组错位。
### 最终结论
位置和颜色是两个独立顶点属性，应分别设置正确的 Buffer 和读取方式。AI主要帮助解释原理、检查代码并提供排错方向，最终结果实际运行验证为正确。