AI 协作日志

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

# 实验一 AI协作记录

> 使用codex协助，本记录由codex最后根据实际对话与代码核验整理；

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

### 我的目标
理解任务3的坐标分布，以及顶点数据如何通过 Buffer 和顶点属性参与绘制。

### 提示词
“任务三。坐标轴分布是什么样的。左边三角形坐标怎么填可以在左边。右边是四边形”
“TODO 3-3：绘制三角形。简单解释这里的函数含义和用法”

### AI关键回答摘要
画布中心为 (0,0)，x 负值在左，正值在右，y 向上增大。createBuffer 创建缓冲区，bindBuffer 选中它，bufferData 上传数据，vertexAttribPointer 设置读取方式，enableVertexAttribArray 启用属性，uniform4f 设置统一颜色，drawArrays 绘制。

### 我的判断
我按讲解填写两个图形，并继续询问不理解的函数。位置属性每个顶点读取 x、y 两个数；两个图形分别使用自己的 Buffer。

### 验证方法
请求 AI 检查任务3代码，核对坐标、Buffer、属性读取方式、颜色和绘制数量。

### 验证结果
代码检查确认三角形的 x 坐标为负，四边形为正；两个对象分别创建 Buffer。三角形读取3个顶点，四边形修正后读取4个顶点。对话未记录修正后的页面实测反馈。

### 修正后的结论
数据流为：坐标数组 → Buffer → 顶点属性 → 顶点着色器 → 后续图形处理与片元着色 → 画布。上传数据后，还需要设置读取规则并调用绘制命令。

---

## AI协作2：程序调试

### 现象
任务2绘制的图形有凹进去的缺口；任务3填写四边形绘制代码后，我也请求 AI 检查错误。

### 我的初步判断
任务2中我怀疑问题与 TRIANGLE_STRIP 绘制方式有关，因此发出了 drawArrays 调用。任务3当时没有确定原因，请 AI 直接检查。

### 给AI的提示词
“画出来是凹进去的图，问题出在哪（任务2 gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertexCount);”
“TODO 3-4：绘制四边形 我哪里填错了。”

### AI给出的关键建议
任务2原来沿四边形边界排列顶点，导致条带中的两个三角形重叠并留下缺口。应改为左下、右下、左上、右上。任务3四边形的 drawArrays 只读取3个顶点，应改为4个。

### 我实际进行的测试
我修改了任务2顶点顺序，把任务3四边形绘制数量由3改为4，随后请求 AI 检查任务完成情况。这里记录修改与代码核验，不把未反馈的页面效果当作实测结果。

### 测试结果
AI 读取文件确认任务2顶点顺序已修正，任务3四边形使用 TRIANGLE_STRIP 并读取4个顶点。修正后的页面效果未在对话中明确确认。

### 最终原因
任务2是顶点顺序与条带连接规则不匹配；任务3是绘制数量不足，只读取3个顶点。

### 是否采纳AI建议及理由
已采纳。建议对应代码中的具体错误，只需局部修改即可修正数据顺序和读取数量。

补充：最终检查发现任务5与任务2颜色不一致，不满足只改变绘制模式的对照要求。我修改后回复“我改好了。颜色一致”。AI 再次读取文件，确认任务5颜色为 (0.20, 0.65, 0.40, 1.0)，与任务2一致，绘制模式为 LINE_LOOP。页面效果未进一步确认。

---

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

### 我的目标
理解任务4颜色 Buffer 和 vColor 的用法，以及渐变三角形与单色三角形的区别。

### 提示词
“解释TODO 4-3：建立颜色 Buffer”
“var vColor = ... gl.vertexAttribPointer(...) gl.enableVertexAttribArray(...) 这三个怎么用”
“还是不清楚todo4流程。简要解释怎么画出这个渐变三角形的”
“之前只有一个颜色，区别是什么”

### AI关键回答摘要
颜色 Buffer 存放每个顶点的 RGBA。getAttribLocation 找到 vColor，vertexAttribPointer 设置每个顶点读取4个 float，enableVertexAttribArray 启用读取。uColor 是一次绘制共用的 uniform，vColor 是各顶点自己的属性。顶点颜色经过着色器传递，在三角形内部插值形成渐变。

### 对照实验
以之前使用 uniform4f 设置单色的任务为对照，任务4给三个顶点分别设置红、绿、蓝，并使用独立颜色 Buffer。本次进行了代码对照和原理讨论，未记录把任务4三个顶点全部设为同色的实际运行测试。

### 实际现象
代码核验确认：任务4已填写三个顶点的红、绿、蓝颜色，颜色属性每次读取4个数，并使用 TRIANGLES 绘制3个顶点。坐标也已调整到可见范围。对话未提供运行截图或明确页面观察反馈，因此渐变在这里属于预期结果，不能写为已实测现象。

### 我的解释
根据讲解整理：位置 Buffer 决定顶点在哪里，颜色 Buffer 决定对应顶点的颜色。三个角颜色不同，内部插值会形成颜色过渡；三个角颜色相同，结果仍是单色。

### 最终结论
uniform 为一次绘制提供统一颜色，顶点属性为各顶点提供颜色。颜色 Buffer 负责存储，属性设置负责读取，着色器传递颜色，插值形成渐变。