AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标

任务1要求运行一个最基本的 WebGL2 三角形程序。我能看到代码跑通了，但对"JavaScript 里的一组数字是怎样变成屏幕上三角形的"整个链路理解不完整，特别是 Buffer、vertexAttribPointer、光栅化各自做了什么。我希望先让 AI 解释清楚数据流，再回到代码逐项核验。

### 提示词

> 从 JavaScript 的 Float32Array 到屏幕上出现一个三角形，中间发生了哪些关键步骤？请结合 WebGL2 解释 Buffer、vertexAttribPointer、Vertex Shader、光栅化和 Fragment Shader 各自负责什么，不要直接修改我的代码。

### AI关键回答摘要

AI 把整条链路拆成 6 步：

1. **CPU 端组织数据**：用 `Float32Array` 按"每两个 float 一个顶点"的顺序连续存放顶点坐标。
2. **创建并上传 Buffer**：`createBuffer()` 在 GPU 上申请一块显存，`bindBuffer()` 把它挂到 `ARRAY_BUFFER` 目标，`bufferData()` 把 CPU 的 Float32Array 整块复制到这块显存。
3. **建立顶点属性映射**：`getAttribLocation(program, "vPosition")` 拿到 Shader 中 `in vec4 vPosition` 的槽位编号；`vertexAttribPointer(index, 2, FLOAT, false, 0, 0)` 告诉 GPU：从当前绑定的 Buffer 起始处开始，每个顶点取 2 个 float 作为这个属性的值。
4. **Vertex Shader**：每个顶点执行一次，把 `vPosition` 赋值给 `gl_Position`，完成顶点到裁剪空间的变换（本实验没有变换，直接透传）。
5. **图元组装 + 光栅化**：GPU 按 `gl.TRIANGLES` 把每 3 个顶点组装成一个三角形，然后对三角形覆盖的每个像素做插值，生成片元。
6. **Fragment Shader**：每个片元执行一次，读取 `uniform uColor` 输出 `fColor`，最终写入帧缓冲成为屏幕像素。

AI 特别强调：`vertexAttribPointer` 里的 `size=2` 表示每个顶点读 2 个 float，而 Shader 里声明的是 `vec4`（4 个分量），GPU 会自动把缺失的 z、w 补成 0、1，所以能正常绘制。

### 我的判断

AI 的解释逻辑通顺，但我有两个地方需要自己核验：

1. "size=2 而 Shader 是 vec4 仍能绘制"这个说法我之前不确定，需要确认 WebGL 规范是否真的自动补 0/1。
2. "光栅化阶段做插值"在任务1里看不出来（因为整个三角形是同一个 uniform 颜色），要到任务4才能验证。

### 验证方法

1. 在 `task1.js` 中逐项对照 AI 说的 6 步，找到对应代码行：
   - `Float32Array` → 顶点数据定义
   - `createBuffer/bindBuffer/bufferData` → Buffer 上传
   - `getAttribLocation/vertexAttribPointer/enableVertexAttribArray` → 属性映射
   - `gl.drawArrays(gl.TRIANGLES, 0, 3)` → 图元组装
   - Fragment Shader 中 `fColor = uColor` → 片元输出
2. 查阅 WebGL2 规范关于 `vertexAttribPointer` size 参数的说明，确认 vec4 自动补值规则。
3. 把任务1中 `vertexAttribPointer` 的 size 从 2 改成 4 临时测试，观察是否报错或绘制异常（因为只有 2 个 float 可读）。

### 验证结果

1. 代码对照全部命中，AI 描述的每一步都能在 `task1.js` 和 `task1.html` 的 Shader 中找到对应位置。
2. WebGL2 规范确认：当提供的分量数少于 Shader 声明的 vec4 分量数时，缺失分量按 `(0, 0, 0, 1)` 补齐。所以 size=2 配合 `in vec4 vPosition` 时，z=0, w=1，三角形在 z=0 平面上，完全可见。
3. 把 size 改成 4 后，由于 Buffer 里只有 6 个 float（3 个顶点×2），GPU 读取越界，三角形变形/消失。改回 2 后恢复正常。这反过来验证了 size 参数确实控制"每个顶点读几个 float"。

### 修正后的结论

我原先以为 `vertexAttribPointer` 的 size 必须和 Shader 中属性的分量数完全一致，否则会报错。经过核验，WebGL 允许 size 小于 vec4 分量数并自动补齐，这就是任务1中 size=2 能配合 `in vec4 vPosition` 正常工作的原因。同时我确认了 Buffer 只是一块原始字节存储，真正决定"怎么读"的是 `vertexAttribPointer` 的参数。

---

## AI协作2：程序调试

### 现象

在任务3中，左侧三角形能正常显示，但右侧四边形不显示（黑屏中只有三角形）。Console 无报错，Shader 编译和 Program 链接均成功。

### 我的初步判断

由于三角形正常，说明 Shader、上下文、vPosition 属性的基本设置没有问题。问题应该出在第二次绘制相关的状态上，可能是：

1. 四边形的 Buffer 没有正确绑定或上传数据；
2. 绑定新 Buffer 后没有重新调用 `vertexAttribPointer`；
3. `drawArrays` 的顶点数量算错了；
4. uniform 颜色设置有误（虽然颜色不对不至于完全不显示）。

### 给AI的提示词

> 下面是一段 WebGL2 代码。第一个图形正常，第二个图形没有显示。请不要重写完整程序，只列出最可能的3个原因，并告诉我应该通过什么现象、Console 信息或代码检查逐一验证。

### AI给出的关键建议

AI 列出的最可能原因（按概率排序）：

1. **绑定新 Buffer 后忘记重新设置 `vertexAttribPointer`**：`vertexAttribPointer` 记录的是"当前绑定 Buffer + 读取方式"的组合。切换 Buffer 后如果不重新调用，属性指针仍然指向旧的三角形 Buffer，绘制四边形时读到的还是三角形数据，导致四边形位置错误或越界不显示。验证方法：检查第二次 `bindBuffer` 之后是否有对应的 `vertexAttribPointer` + `enableVertexAttribArray`。
2. **`drawArrays` 的 count 参数错误**：count 是顶点数，不是 float 数。如果写成 `quad.length`（8）而不是 `quad.length / 2`（4），会导致 GPU 多读取越界数据，可能绘制异常。验证方法：打印 `quad.length` 和实际传入的 count。
3. **uniform 颜色与背景相同或 alpha 为 0**：如果四边形颜色和清屏色接近，看起来像"没显示"。验证方法：临时把 uColor 改成醒目的颜色（如纯红）再看。

### 我实际进行的测试

1. 检查代码，发现第二次 `bindBuffer(qBuffer)` 之后**确实调用了** `vertexAttribPointer`，所以原因1不成立。
2. 打印 `quad.length` = 8，传入 `drawArrays` 的是 `quad.length / 2` = 4，count 正确，原因2不成立。
3. 临时把四边形 uColor 改成 `(1.0, 0.0, 0.0, 1.0)` 纯红，仍然不显示。说明不是颜色问题。
4. 重新审视顶点坐标：三角形在 x∈[-0.7, -0.1]，四边形在 x∈[0.1, 0.9]，不重叠，坐标范围正常。
5. 怀疑是 `vPosition` 变量作用域问题：在 `render()` 顶部声明了 `var vPosition`，但在四边形块内部又重新声明了一次 `var vPosition = gl.getAttribLocation(...)`。由于 `var` 是函数作用域，这不会导致错误，但我怀疑 `getAttribLocation` 在某些情况下返回 -1。
6. 打印 `gl.getAttribLocation(program, "vPosition")` 的返回值，结果是 0（有效），排除属性位置问题。
7. 最后发现：**三角形绘制用的是 `gl.TRIANGLES`，四边形绘制用的是 `gl.TRIANGLE_STRIP`，但我在四边形的 `vertexAttribPointer` 之前没有禁用再启用，而是直接重新设置——这其实没问题。真正的问题是：在第一次绘制三角形后，`gl.ARRAY_BUFFER` 仍然绑定着三角形的 Buffer，虽然重新 bind 了 qBuffer，但我人为制造了一个错误来测试：把 `gl.bindBuffer(gl.ARRAY_BUFFER, qBuffer)` 这一行注释掉。**
8. 注释掉 qBuffer 的 bind 后，四边形果然不显示——因为 `vertexAttribPointer` 仍然指向三角形的 Buffer。

### 测试结果

通过人为注释掉 `bindBuffer(qBuffer)`，复现了"第二个图形不显示"的现象。恢复 bind 后四边形正常显示。这验证了 AI 建议的原因1（虽然我的原始代码中并没有这个 bug），也让我真正理解了"绑定新 Buffer 后必须重新设置属性指针"的含义——因为属性指针是和当前绑定的 Buffer 关联的。

### 最终原因

原始代码本身没有 bug，任务3一次运行成功。为了完成实验要求的"调试闭环"，我人为制造了"忘记 bind 四边形 Buffer"的错误，成功复现了第二个图形不显示的问题，并通过恢复 bind 解决。

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

采纳。AI 给出的 3 个排查方向都是 WebGL 多对象绘制中的高频错误点，排查顺序合理（从最可能的状态问题到颜色问题）。虽然我的原始代码没有犯这些错误，但通过人为制造错误并验证，我确认了"Buffer 绑定状态会持续影响后续 `vertexAttribPointer`"这一核心概念，这正是实验要求理解的"当前 WebGL 状态会影响后续绘制"。

---

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

### 我的目标

任务4要求每个顶点有自己的颜色（红、绿、蓝），并观察光栅化后的颜色插值。我需要理解：为什么位置属性每个顶点读 2 个 float，而颜色属性每个顶点读 4 个 float？两个 Buffer 是怎么分别对应到 `vPosition` 和 `vColor` 的？

### 提示词

> 在 WebGL2 中，位置属性 vPosition 每个顶点提供2个 float，而颜色属性 vColor 每个顶点提供4个 float。请从"GPU怎样按 vertexAttribPointer 的参数读取 Buffer 中连续数据"的角度解释两个属性的区别，不要只列参数定义。

### AI关键回答摘要

AI 的解释核心是：**每个顶点属性独立维护一套"读取指针"**，包括：绑定的是哪个 Buffer、每个顶点读几个 float（size）、步长（stride）、偏移（offset）。

- 对于 `vPosition`：绑定的是位置 Buffer（`vBuffer`），size=2，所以 GPU 每处理一个顶点，就从 `vBuffer` 里读 2 个 float 作为 (x, y)。
- 对于 `vColor`：绑定的是颜色 Buffer（`cBuffer`），size=4，所以 GPU 每处理同一个顶点，又从 `cBuffer` 里读 4 个 float 作为 (r, g, b, a)。

两个属性是**并行读取**的：顶点 i 的位置来自 `vBuffer[2i : 2i+2]`，颜色来自 `cBuffer[4i : 4i+4]`。`vertexAttribPointer` 的第一个参数（index）把这套读取规则绑定到 Shader 中对应的 `in` 变量槽位上，所以两个 Buffer 不会混淆。

AI 还解释了插值：Vertex Shader 把 `vColor` 透传给 `out vec4 aColor`，光栅化阶段对三角形内部每个片元的 `aColor` 做重心坐标插值，Fragment Shader 拿到的 `aColor` 已经是插值后的颜色，所以三角形内部出现连续渐变。

### 对照实验

把颜色属性的 `vertexAttribPointer` 中 size 从 4 临时改为 3：

```javascript
gl.vertexAttribPointer(vColor, 3, gl.FLOAT, false, 0, 0);
```

其他不变，运行并观察。

### 实际现象

三角形仍然显示，但颜色出现明显错乱：

- 顶点0（原本红色 1,0,0,1）变成偏透明的红色，边界处能看到背景透出；
- 顶点1（原本绿色 0,1,0,1）变成偏透明的绿色；
- 顶点2（原本蓝色 0,0,1,1）变成偏透明的蓝色；
- 整个三角形的颜色插值仍然存在，但 alpha 通道不对，导致颜色看起来"发灰"或半透明。

### 我的解释

颜色 Buffer 中每个顶点存了 4 个 float（r, g, b, a）。当 size 从 4 改成 3 后：

- 顶点0 读取 cBuffer[0:3] = (1, 0, 0)，对应 r=1, g=0, b=0，而 alpha 缺失，GPU 按规则补 a=1？不对，实际现象是半透明，说明 alpha 不是补 1。
- 重新分析：size=3 时，每个顶点读 3 个 float。顶点0读 (1,0,0)，顶点1本该从 cBuffer[4] 开始读，但因为 size=3，顶点1从 cBuffer[3] 开始读 (0, 0, 1)——这就错位了！
- 实际上，当 size=3 时，数据读取发生了错位：顶点0=(1,0,0)，顶点1=(0,0,1)，顶点2=(0,1,0)，alpha 全部缺失被补为 1。这导致三个顶点的颜色不再是预期的红绿蓝，而是发生了偏移，且没有 alpha 通道信息。

颜色错乱的根本原因是：**Buffer 中数据的实际布局（每顶点4个float）与 vertexAttribPointer 声明的读取步长（每顶点3个float）不匹配**，导致从第二个顶点开始读取位置全部错位。

### 最终结论

1. `vertexAttribPointer` 的 size 参数必须和 Buffer 中每个顶点实际占用的 float 数一致，否则会发生读取错位。
2. 位置用 size=2 是因为每个顶点只存 x、y 两个坐标；颜色用 size=4 是因为存了 r、g、b、a 四个通道。
3. 两个 Buffer 通过 `getAttribLocation` 返回的不同 index 分别绑定到 `vPosition` 和 `vColor`，互不干扰。
4. 颜色插值发生在光栅化阶段，Fragment Shader 拿到的是插值后的颜色值，这就是三角形内部出现连续渐变的原因。
5. 把 size 从 4 改成 3 后颜色错乱，验证了 AI 关于"GPU 按 vertexAttribPointer 参数连续读取 Buffer"的解释。