AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标

### 提示词

### AI关键回答摘要

### 我的判断

### 验证方法

### 验证结果

### 修正后的结论

---

## AI协作2：程序调试

### 现象

### 我的初步判断

### 给AI的提示词

### AI给出的关键建议

### 我实际进行的测试

### 测试结果

### 最终原因

### 是否采纳AI建议及理由

---

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

### 我的目标

### 提示词

### AI关键回答摘要

### 对照实验

### 实际现象

### 我的解释

### 最终结论
## AI 协作 1：理解数据流

任务四
### 我的目标

弄懂 WebGL 中**两个独立 Buffer**怎么分别绑定到`vPosition`位置属性和`vColor`颜色属性，实现顶点位置、顶点颜色分开存储。

### 提示词

两个 Buffer 如何分别对应到 vPosition 和 vColor？

### AI 关键回答摘要

`bindBuffer`切换当前 ARRAY_BUFFER，调用`vertexAttribPointer`时，会把当前绑定的 buffer 和着色器 in 属性绑定；先绑定位置 buffer 设置 vPosition，再绑定颜色 buffer 设置 vColor。

### 我的判断

核心是`vertexAttribPointer`依赖当前绑定的 buffer，不是 buffer 自带属性标记。这个逻辑可以用来写任务 4 的颜色 Buffer 代码。

### 验证方法

在任务 4 代码里，先写位置 Buffer 代码，再新建颜色 Buffer，切换 bindBuffer，配置 vColor。

### 验证结果

代码运行，三角形出现渐变，证明两个 Buffer 绑定成功。

### 修正后的结论

每次调用`vertexAttribPointer`读取的是**此刻绑定到 ARRAY_BUFFER 的缓冲区**，所以通过多次 bindBuffer 切换，就能把不同 Buffer 绑定到不同顶点属性。

---

## AI 协作 2：程序调试

### 现象

一开始写完颜色 Buffer 代码，三角形没有颜色，画面单色。

### 我的初步判断

大概率忘记启用顶点属性`enableVertexAttribArray(vColor)`。

### 给 AI 的提示词

WebGL 两个 buffer，位置正常，颜色不生效，可能是什么原因？

### AI 给出的关键建议

1. 获取 vColor 地址；2. vertexAttribPointer 设置每个顶点 4 个 float；3. 必须 enableVertexAttribArray 开启属性。

### 我实际进行的测试

补全`gl.enableVertexAttribArray(vColor)`，重新运行。

### 测试结果

三角形出现红、绿、蓝顶点渐变，成功。

### 最终原因

只写了`vertexAttribPointer`，没有启用 vColor 顶点属性，着色器无法读取颜色数据。

### 是否采纳 AI 建议及理由

采纳，三条检查点定位到缺失的启用代码，解决渲染无颜色问题。

---

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

### 我的目标

理解为什么三个顶点设置 RGB 三色后，三角形内部会平滑渐变，而不是只有三块纯色。

### 提示词

三角形顶点设置三个不同颜色，为什么内部会产生渐变？插值发生在哪个阶段？片元着色器拿到的是顶点原始颜色吗？

### AI 关键回答摘要

光栅化阶段会对图元内部所有片元做重心坐标插值；顶点颜色经过插值后才传入片元着色器，所以产生平滑渐变。

### 对照实验

任务 4 代码，三个顶点分别红、绿、蓝。

### 实际现象

三角形三个顶点分别是红、绿、蓝，三角形内部颜色平滑过渡。

### 我的解释

GPU 光栅化阶段，对三角形内部每一个像素（片元），根据距离三个顶点远近，自动插值算出颜色。

### 最终结论

顶点颜色只定义顶点处色彩；**光栅化插值**生成三角形内部过渡颜色，片元着色器接收插值后的颜色值。
任务五
我修改了什么：顶点坐标、顶点顺序、颜色全部和任务2保持不变，仅将图元模式从gl.TRIANGLE_STRIP改为gl.LINE_LOOP
我原先预测：可以得到填充的四边形，只是变成线框样式
实际结果：绘制出闭合的四边形边框，只有轮廓线条，没有内部填充色块。
原因解释：顶点几何数据没有改变；gl.LINE_LOOP只把顶点依次连线并且首尾闭合，只会生成线段图元，不会生成三角形，因此没有填充的面。只有三角形类图元才会产生填充片元。