AI 协作日志

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

# 实验一 AI协作记录
---
## AI协作1：程序调试
### 现象
任务3 中，第一个图形（左侧三角形）能正常显示，第二个图形（右侧四边形）没有显示，或者颜色不对。
### 我的初步判断
我一开始以为是四边形顶点坐标写错了，或者顶点数量给错了，想着是不是 `TRIANGLE_STRIP` 的 4 个顶点顺序有问题。
### 给AI的提示词
> 下面是一段 WebGL2 代码。第一个图形正常，第二个图形没有显示。请不要重写完整程序，只列出最可能的3个原因，并告诉我应该通过什么现象、Console 信息或代码检查逐一验证。
### AI给出的关键建议
AI 列了 3 个最可能的原因：
1. 绑定第二个 Buffer 后，没有重新调用 `vertexAttribPointer`，导致 GPU 仍按旧 Buffer 的地址读数据；
2. 绘制第二个对象前没有重新设置 `uColor`，或 `getUniformLocation` 拿到的是 `null`；
3. `drawArrays` 的顶点数量或 draw mode 写错（例如四边形仍用 `TRIANGLES` 但只给了 4 个顶点，无法组成完整图形）。
并建议通过 Console 是否有 uniform 相关报错、逐个打印 Buffer 绑定顺序来验证。
### 我实际进行的测试
- 在 `task3.js` 的 `render()` 里，分别给两次绘制加了 `console.log`，打印当前 `uColor` 的值；
- 检查了第二个对象的 `vertexAttribPointer` 是否在 `bindBuffer(quadBuffer)` 之后执行；
- 把四边形绘制前的 `gl.uniform4f` 注释掉一次，看颜色是否恢复成上一个对象（紫色）。
### 测试结果
- 第二次绘制前我没有重新设置 `uColor` 时，四边形显示成了和三角形一样的颜色，Console 打印确认 uniform 位置有效、但值是上一次设置的紫色；
- 重新在第二个对象绘制前调用 `gl.uniform4f(uColor, 0.2, 0.7, 0.9, 1.0)` 后，四边形颜色正常变为浅蓝。
### 最终原因
`uColor` 是 WebGL 的**全局状态**，它不会在两次 `drawArrays` 之间自动重置。绘制第二个对象前我没有更新 uniform，导致第二个对象沿用了第一个对象的颜色。同时也确认了：绑定新 Buffer 后确实需要重新调用 `vertexAttribPointer`，这一步我代码里本来就写了，所以真正的坑在 uniform 状态。
### 是否采纳AI建议及理由
采纳。AI 把"状态未更新"列在原因里，我通过注释掉 `uniform4f` 的对照测试验证了现象，和它的判断一致。这次让我真正理解了"当前 WebGL 状态会影响后续绘制"的含义。
## AI协作2：顶点顺序
### 我的疑问
任务2 / 任务3 / 任务5 里，四边形的顶点我都写成了"左下 → 右下 → 左上 → 右上"，并且任务5 特别要求"顶点顺序不变"。我不太理解：为什么必须是这个顺序？如果换一种顺序，是不是就画不出四边形了？
### 提示词
> 在 WebGL2 中，用 gl.TRIANGLE_STRIP 画四边形时，顶点顺序为什么重要？4 个顶点是怎么组成四边形的？如果我把顺序打乱会得到什么结果？请结合 drawArrays 的解释方式说明，不要改我的代码。
### AI关键回答摘要
AI 给出了 `TRIANGLE_STRIP` 的核心规则：
- 它按我给定的顺序，**每连续 3 个顶点组成一个三角形**，所以 N 个顶点会得到 N−2 个三角形（4 个顶点 → 2 个三角形）；
- 我的顺序 `v0(左下), v1(右下), v2(左上), v3(右上)`，实际是"锯齿形"排列，两个三角形是：
  - 三角1 = v0, v1, v2（左下、右下、左上）；
  - 三角2 = v1, v2, v3（右下、左上、右上）；
- 这两个三角形共用一条对角线 v1–v2，正好拼成一个完整的四边形；
- 顺序一旦打乱，GPU 还是"每连续 3 个顶点取一个三角形"，但拼接关系变了，就可能出现三角形交叉、自交，或者根本不是四边形。
### 我的判断与验证
我原本以为顺序只是美观问题。为了验证，我在任务3 里把四边形顺序临时改成交叉排列 `v0, v1, v3, v2`（即"左下、右下、右上、左上"），其余数据不动，运行观察。
### 实际现象
改成交叉顺序后，画面里不再是规整的四边形，两个三角形发生了交叉重叠，出现了一个自交的、扭曲的形状，明显不是我想要的四边形。
### 最终结论
`TRIANGLE_STRIP` 的顶点顺序决定了 GPU 如何把顶点连成三角形，也决定了这些三角形的拼接关系。正确的"锯齿形"顺序（左下→右下→左上→右上）能让两个三角形共享一条对角线、拼成完整四边形；顺序错了，GPU 依然按"每连续 3 个顶点"取三角形，但拼出来的图形就会交叉、自交。所以任务5 要求保持顶点顺序不变，正是为了只改变 draw mode 这一个变量。
## AI协作3：图元类型的区别与使用
### 我的疑问
任务2 要求把 `gl.TRIANGLE_STRIP` 临时改成 `gl.POINTS`、`gl.LINE_STRIP`、`gl.TRIANGLES` 观察结果。我不太清楚这几种 draw mode 到底有什么区别、什么时候该用哪个，为什么同一组顶点只改一下模式，画出来的东西就差这么多。
### 提示词
> gl.POINTS、gl.LINES、gl.LINE_STRIP、gl.LINE_LOOP、gl.TRIANGLES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN 这些 draw mode 有什么区别？用同一组 4 个顶点举例分别会画出什么？各自适合什么场景？不要只列参数定义。
### AI关键回答摘要
AI 把 draw mode 分成三类：
- **点类**：`POINTS` —— 每个顶点画一个点，N 个顶点 → N 个点；
- **线类**（只描边不填充）：
  - `LINES`：每 2 个顶点一条独立线段（0-1、2-3…），奇数顶点忽略；
  - `LINE_STRIP`：顶点按顺序连成连续折线，N 个顶点 → N−1 条线段，**不闭合**；
  - `LINE_LOOP`：在 STRIP 基础上把末顶点连回首顶点，**闭合**，N 个顶点 → N 条线段；
- **三角形类**（填充）：
  - `TRIANGLES`：每 3 个顶点一个独立三角形（0-1-2、3-4-5…），多余顶点忽略；
  - `TRIANGLE_STRIP`：每连续 3 个顶点一个三角形（0-1-2、1-2-3…），N 个顶点 → N−2 个三角形，共享边、省顶点；
  - `TRIANGLE_FAN`：以第 1 个顶点为公共中心组成扇形，N 个顶点 → N−2 个三角形。
关键点：`drawArrays(mode, first, count)` 里 `count` 永远是**顶点数**，`mode` 只决定 GPU 怎么把顶点连起来。
### 我的判断与验证
我理解到核心是"同一组数据，只改连接规则"。为了验证，我在 task2 里保持 4 个顶点和顺序不变，把 `TRIANGLE_STRIP` 依次改成 `POINTS`、`LINE_STRIP`、`TRIANGLES`，各跑一次。
### 实际现象
- `POINTS`：4 个孤立点；
- `LINE_STRIP`：v0-v1-v2-v3 的连续折线（不闭合）；
- `TRIANGLES`：只画出 v0v1v2 一个三角形，第 4 个顶点被忽略；
- 改回 `TRIANGLE_STRIP`：两个三角形拼成一个完整四边形。
### 最终结论
相同顶点数据、改变 draw mode 会得到截然不同的图形，因为 draw mode 只决定 GPU 对顶点的"连接/解释方式"，顶点本身没有变。所以任务2 的对照实验和任务5 的"只改 draw mode"探究，本质都是在看同一条顶点流在不同解释下的结果。使用时按目标选：散点用 `POINTS`、描边轮廓用 `LINE_LOOP`、独立三角片用 `TRIANGLES`、连续条带/四边形用 `TRIANGLE_STRIP`。