AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标
理解"从 JavaScript 的 Float32Array 到屏幕上出现一个三角形"的完整数据流，并能在 task1.html 和 js/task1.js 中逐一找到对应代码。

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

### AI关键回答摘要
数据流大致为：顶点数据（Float32Array）→ 创建并绑定 Buffer → bufferData 上传到 GPU → vertexAttribPointer 建立"顶点属性与 Buffer"的对应关系 → enableVertexAttribArray 启用属性 → drawArrays 触发绘制 → Vertex Shader 逐顶点设置 gl_Position → 图元组装（TRIANGLES, 0, 3 表示取前3个顶点组成1个三角形）→ 光栅化生成片元 → Fragment Shader 计算每个片元颜色 fColor = uColor → 写入 Canvas 像素。另外解释了为什么 JS 中 vertexAttribPointer 的 size 填 2 仍能填充 Shader 里的 vec4 vPosition：没读到的分量会自动补默认值（z 补 0、w 补 1），所以坐标仍然有效。

### 我的判断
我之前不理解两个点：一是 Shader 里声明的是 vec4，JS 却只传 2 个数；二是 drawArrays 第三个参数到底表示什么。听完解释后我理解：size=2 只是"从 Buffer 每顶点读几个分量"，其余分量由 GPU 补默认值；第三个参数是"顶点数量"而不是 float 数量。

### 验证方法
打开 task1.html 和 js/task1.js，把 AI 提到的每个环节与代码逐项对照：Shader 定义、initShaders、createBuffer/bindBuffer/bufferData、vertexAttribPointer、drawArrays。随后修改了一个顶点坐标和颜色，重新运行观察。

### 验证结果
修改顶点后三角形形状发生明显变化，修改颜色后显示为蓝色三角形；说明顶点数据确实经 Buffer 上传、由 vertexAttribPointer 读取并驱动绘制。对照代码后确认每个环节都真实存在。运行初期用 file:// 直接打开时 Console 出现安全警告（详见AI协作2）。

### 修正后的结论
数据流各环节与代码一一对应；size=2 与 vec4 不冲突是因为缺省分量补齐；drawArrays 第三个参数是顶点数。之后改用本地 HTTP 服务器运行，以得到干净的控制台。

---

## AI协作2：程序调试

### 现象
任务3中三角形正常显示，但四边形不完整（缺失一部分）。Console 无任何报错，说明这是逻辑错误而非语法错误。

### 我的初步判断
我一开始猜测是第二个 Buffer 的绑定顺序不对，或者 uniform 颜色没有在绘制前更新，导致四边形没有被正确绘制。

### 给AI的提示词
> 下面是一段 WebGL2 代码。第一个图形（三角形）正常，第二个图形（四边形）不完整/缺失。请不要重写完整程序，只列出最可能的3个原因，并告诉我应该通过什么现象、Console 信息或代码检查逐一验证。

### AI给出的关键建议
列出最可能的三类原因并给出验证方法：
1. `gl.drawArrays` 的第三个参数是"顶点数量"而不是 float 数量，先核对四边形那次调用的顶点数；
2. `vertexAttribPointer` 必须在 `bindBuffer(目标Buffer)` 之后调用，否则属性仍指向旧 Buffer；
3. `uColor` 必须在对应 `drawArrays` 之前设置，否则两个图形可能同色或漏色。
并提示：TRIANGLE_STRIP 用 4 个顶点可组成 2 个三角形拼成四边形，顶点数若少于 4 会缺一部分。

### 我实际进行的测试
我先核对第二次 `drawArrays` 的参数：`gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)`。随后人为把顶点数从 4 改为 3 复现问题，刷新观察：四边形右下部分缺失（只画出左上、左下、右上组成的 1 个三角形）。再把顶点数改回 4，刷新后四边形恢复完整。

### 测试结果
把顶点数改为 3 时四边形缺失，改回 4 时完整；两种情况下 Console 均无报错，证明问题出在 drawArrays 的顶点数量上。

### 最终原因
`gl.drawArrays(gl.TRIANGLE_STRIP, 0, count)` 的第三个参数是顶点数量。四边形需要 4 个顶点由 TRIANGLE_STRIP 组成 2 个三角形；写成 3 时只组出 1 个三角形，所以四边形缺了一块。

### 是否采纳AI建议及理由
采纳。按"先核对参数 → 人为制造错误复现 → 对照正确版本"的路径，迅速定位到顶点数量问题；验证修复后四边形完整，证明排错思路有效。

---

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

### 我的目标
理解为什么位置属性 vPosition 每个顶点读 2 个 float、颜色属性 vColor 每个顶点读 4 个 float，以及两个 Buffer 如何分别对应到这两个属性。

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

### AI关键回答摘要
vertexAttribPointer 的 size 参数决定了 GPU 在读取"当前绑定的 Buffer"时，每个顶点连续取多少个分量赋给该属性：位置是 x、y，所以是 2；颜色是 R、G、B、A，所以是 4。每个属性会记住"调用 vertexAttribPointer 那一刻绑定的 Buffer"，因此只要先绑定位置 Buffer 并调用 vPosition，再绑定颜色 Buffer 并调用 vColor，两者就各自读取各自的数据。

### 对照实验
按实验要求，把颜色属性的 vertexAttribPointer 第二个参数从 4 临时改成 3：gl.vertexAttribPointer(vColor, 3, gl.FLOAT, false, 0, 0)。

### 实际现象
把 size 改成 3 后，三角形顶点的红绿蓝对应关系被打乱：顶部顶点仍偏红，左下顶点变成品红（约 1,0,1），右下顶点变成黑色（约 0,0,0）。这是因为每个顶点只读取 3 个分量后，颜色数据被整体错位读取——后面的顶点会读到前一个顶点剩余的 A 分量和下一个顶点的 R 分量。改回 4 后恢复为三个顶点红绿蓝、内部平滑渐变。

### 我的解释
三角形内部出现连续渐变，是因为光栅化阶段 GPU 会对顶点属性做线性插值，Fragment Shader 拿到的 aColor 已经是插值后的颜色，而不是某个顶点的原始颜色。

### 最终结论
size 决定每个顶点从 Buffer 读取的分量个数（位置2、颜色4）；两个 Buffer 通过先后"绑定 + vertexAttribPointer"分别对应 vPosition 与 vColor；顶点颜色插值发生在光栅化阶段，Fragment Shader 得到的是插值后的颜色。