AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标
搞清楚从 JavaScript 中写好顶点数组，到浏览器屏幕画出三角形整条数据流；分清 Buffer、顶点属性、着色器、光栅化各自做什么，不只是记函数调用。

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

### AI关键回答摘要
1. JavaScript 在 CPU 内存创建`Float32Array`存放顶点坐标，此时数据还没有传到显卡；
2. `createBuffer`在 GPU 显存开辟一块存储空间，`bindBuffer`把该 Buffer 设置为当前激活对象，`bufferData`把 CPU 数组拷贝到 GPU 显存；
3. `vertexAttribPointer`依靠当前绑定的 Buffer，规定顶点属性如何读取显存里的连续字节，`enableVertexAttribArray`打开该属性通道；
4. `drawArrays`发出绘制指令，GPU 依次取出每个顶点送入**顶点着色器**；
5. 顶点着色器输出裁剪空间坐标；进行图元装配，把顶点组装成三角形；
6. **光栅化**把三角形几何图形拆解成大量片元（对应潜在像素）；
7. 每一个片元送入片元着色器计算颜色，输出颜色写入帧缓冲，最终显示在 Canvas 画布上。

### 我的判断
AI 讲的整体流程逻辑通顺，但我怀疑`vertexAttribPointer`是否会直接绑定 Buffer 对象，我之前以为调用这个函数的时候要传入 buffer 变量，这点需要对照自己 task1.js 源码验证。

### 验证方法
打开 task1.html，对照 task1.js 源码逐行比对 AI 描述的每一步；查看`vertexAttribPointer`函数参数列表，看参数里有没有 buffer；阅读代码顺序：先`bindBuffer`，后`vertexAttribPointer`。

### 验证结果
1. `vertexAttribPointer`函数参数列表**不接收 buffer 对象**；它读取的是上一步`gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer)`绑定的当前 Buffer；
2. 代码流程和 AI 描述完全匹配：CPU 数组→bufferData 上传 GPU→设置读取规则→drawArrays 触发整条流水线；
3. 若忘记`enableVertexAttribArray`，属性通道关闭，图形就黑屏，这是课本也提到的坑。

### 修正后的结论
`vertexAttribPointer`本身不传入 Buffer，它依赖当前绑定状态；Buffer、属性配置、开启属性三者缺一不可。数据流动是 CPU 内存 → GPU 显存 Buffer → 顶点着色器输入 → 图元装配 → 光栅化片元 → 片元着色器输出像素颜色。
---

## AI协作2：程序调试

### 现象
任务 3 代码运行后，左侧三角形可以正常显示，但是右侧四边形完全不显示，画布只有背景色，控制台没有报错。

### 我的初步判断
猜想 1：四边形顶点坐标超出 NDC 坐标范围，跑到画布外面；
猜想 2：切换到四边形的 Buffer 之后，没有重新设置顶点属性读取规则`vertexAttribPointer`；
猜想 3：drawArrays 绘制时顶点数量参数写错。

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

### AI给出的关键建议
1. 更换新 Buffer 之后，忘记调用`vertexAttribPointer`；该函数只对**当前绑定的 Buffer 生效**，切换 Buffer 后属性不会自动更新读取源；
2. `drawArrays`第三个顶点计数参数错误，比如写成 3 而四边形实际需要 4；
3. 修改`uColor`时 Alpha 通道设置为 0，图形完全透明，肉眼看不见。
核验方法：打印顶点数量；临时给四边形写简单测试坐标；检查 uniform4f 的第四个 alpha 值。

### 我实际进行的测试
1. 在渲染函数加入`console.log(quad.length/2)`打印四边形顶点数量，控制台输出 4，顶点计数没问题；
2. 检查`gl.uniform4f`，alpha 参数写的是 1，不是透明；
3. 在绑定四边形 Buffer 的代码后，补写一行`gl.vertexAttribPointer(vPosition,2,gl.FLOAT,false,0,0)`，刷新页面。

### 测试结果
补写`vertexAttribPointer`之后，右侧四边形成功渲染出来，两个图形互不重叠，颜色区分正常。

### 最终原因
WebGL 是状态机。绑定新 Buffer 之后，顶点属性仍然沿用旧 Buffer 的读取配置，没有重新设置`vertexAttribPointer`，GPU 依旧从旧三角形 Buffer 读取数据，四边形得不到正确顶点。控制台不会抛出错误，只会不绘制图形。

### 是否采纳AI建议及理由
采纳 AI 给出的排查思路。AI 指出 3 种可能性，我通过打印、检查参数一一排除另外两个，定位真实问题；让我理解 WebGL 状态机：绑定 Buffer、属性配置、uniform 都是全局状态，切换绘制对象必须更新对应状态。
---

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

### 我的目标
理解任务 4 中两个顶点属性：位置`vPosition`每个顶点读 2 个 float，颜色`vColor`每个顶点读 4 个 float。想搞懂`vertexAttribPointer`的 size 参数如何解析 Buffer 内存，为什么两个 Buffer 互不干扰。

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

### AI关键回答摘要
1. `vertexAttribPointer`的第二个参数`size`：代表**单个顶点下，这个属性占用多少个 float**；GPU 读取缓冲区时，每读完一个顶点，就向后跳过 size 个浮点数读取下一个顶点；
2. 位置属性 size=2：每个顶点消耗 x、y 两个浮点数；
3. 颜色属性 size=4：每个顶点消耗 R、G、B、A 四个浮点数；
4. `vPosition`和`vColor`分别绑定两块不同 Buffer 对象；属性各自保存自己的读取配置（size、步长、偏移），相互独立，互不影响。

### 对照实验
保持任务 4 其他代码完全不变，将颜色属性的`vertexAttribPointer(vColor, **4**, gl.FLOAT, false, 0, 0);`中的 size 参数，临时修改为`3`，运行观察效果，之后恢复原值 4。

### 实际现象
三角形不再是平滑的红绿蓝渐变，整体颜色完全错乱，出现奇怪的杂色，没有预期色彩效果。控制台无报错。

### 我的解释
size=3 告诉 GPU 每个顶点颜色只读取 R、G、B 共 3 个 float，把下一个顶点的 R 分量错误当作当前顶点 Alpha (A)。内存解析错位，颜色 Buffer 的数据被错误解析，所以画面色彩异常。没有语法报错，属于逻辑错误。

### 最终结论
`size`决定 GPU 对缓冲区内存的解析粒度。不同顶点属性可以拥有不同 size，可以来自完全不同的 Buffer 对象。size 参数写错不会触发 JS 报错，只会渲染结果异常，这是 WebGL 开发中很隐蔽的错误；三角形内部平滑渐变来自光栅化阶段对 out/in 变量的自动插值，片元着色器拿到的不是原始顶点颜色，而是插值之后的颜色。