AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标
搞清楚从JavaScript里的Float32Array顶点数据，到屏幕上显示出三角形的完整数据流，理解Buffer顶点属性着色器、光栅化每个环节分别做什么。
### 提示词
JavaScript的Float32Array绘制三角形，中间发生了哪些关键步骤？请结合WebGL2解释 Buffer，vertexAttribPointer，Vertex Shader，光栅化和Fragment Shader各自负责什么，不要直接修改我的代码。
### AI关键回答摘要
1. 首先在 JavaScript 端用 Float32Array 准备顶点坐标，数据存在 CPU 内存中。
2. 创建 Buffer 对象，通过 bindBuffer 绑定到当前上下文，再用 bufferData 把 CPU 内存的顶点数据拷贝到 GPU 显存的 Buffer 里。
3. 调用 vertexAttribPointer 定义读取规则：告诉 GPU 从当前绑定的 Buffer 里，每个顶点取几个数值、什么类型、步长是多少，对应到顶点着色器的哪个输入属性。
4. enableVertexAttribArray 开启这个属性通道，GPU 才能读取。
5. drawArrays 触发绘制：顶点逐个进入 Vertex Shader 执行，输出裁剪坐标。
6. 图元组装阶段把顶点连成三角形，再经过光栅化把几何三角形转换成大量的片元（fragment），同时对顶点属性做插值。
7. 每个片元送入 Fragment Shader，计算出最终像素颜色，写入帧缓冲，最终显示到 Canvas 上。
### 我的判断
一开始我以为bufferData传数据到GPU之后，着色器会自动识别和读取数据，忽略了vertexAttribPointer的作用。
### 验证方法
对照 task1.js 的代码，逐行找到 AI 说的每个步骤对应的代码行，标记出每一步的位置。
### 验证结果
Float32Array——顶点数据定义
createBuffer、bindBuffer、bufferData——数据上传GPU
vertexAttribPointer + enableVertexAttribArray——建立属性读取规则
drawArrays——绘制
注释掉vertexAttribPointer后，图形就无法显示，说明它不是多余的，是必须的读取规则定义。
### 修正后的结论
Buffer只是GPU里存储数据的内存，本身不包含读信息功能；vertexAttribPointer才是建立Buffer内存和着色器输入属性之间映射的关键，它定义了读取的分量数、步长、偏移量，两者必须配合才能正确读取顶点数据。
---

## AI协作2：程序调试

### 现象
任务3中，左侧的三角形能正常显示，但右侧的四边形不显示，画面只有一个蓝色三角形，控制台没有报错。
### 我的初步判断
颜色和白色背景一样所以看不见
### 给AI的提示词
下面是一段 WebGL2 代码。第一个图形正常，第二个图形没有显示。列出最可能的 3 个原因，并告诉我应该通过什么现象、Console 信息或代码检查逐一验证。
### AI给出的关键建议
1. 绘制第二个图形前，没有重新 bindBuffer 到四边形对应的缓冲区，GPU 仍然读取三角形的 Buffer，用 3 个顶点去画四边形，导致显示异常或不显示。
2. 切换 Buffer 之后，没有重新调用 vertexAttribPointer 设置顶点属性读取规则，顶点属性指针仍然指向旧的 Buffer 结构。
3. drawArrays 的最后一个参数（顶点数量）写错了，比如四边形还是写了 3，只绘制了前三个顶点。
### 我实际进行的测试
检查 drawArrays 参数，确认四边形写的是 4，排除数量错误。
在绘制四边形前加上gl.bindBuffer绑定四边形的 Buffer，运行后还是不显示。
在bindBuffer之后再加上gl.vertexAttribPointer重新设置属性读取规则，运行后四边形正常出现。
删掉vertexAttribPointer这行，四边形又消失了，确认这是核心原因。
### 测试结果
加上重新设置vertexAttribPointer的代码后，右侧橙色四边形正常显示，两个图形左右分布不重叠。
### 最终原因
WebGL是状态机，vertexAttribPointer设置的顶点属性读取规则是全局状态，只会指向最后一次绑定的Buffer。切换到新的Buffer后，如果不重新设置读取规则，GPU仍然按照旧的规则去读新的Buffer，数据读取错位，导致图形无法正确渲染。
### 是否采纳AI建议及理由
采纳。因为AI给出的三个原因优先级很合理，按照顺序排查很快定位到了问题。说明了状态会持续影响后续的绘制，切换数据后必须手动更新对应的状态。
---

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

### 我的目标
理解为什么位置属性vPosition每个顶点用2个float，颜色属性vColor每个顶点4个float，GPU是怎么根据vertexAttribPointer的参数从连续的Buffer里读取数据的。
### 提示词
在WebGL2中，为什么位置属性vPosition每个顶点提供2个 float，而颜色属性vColor每个顶点提供4个 float。
### AI关键回答摘要
ertexAttribPointer的第二个参数表示每个顶点的该属性包含多少个分量。GPU 读取 Buffer 时，会按照这个分量数为步长，从连续的内存里逐个顶点读取数据。
位置属性 size=2：每个顶点读取 2 个 float，分别作为 x、y，后续 z 补 0、w 补 1 送入 vec4 类型的 vPosition。
颜色属性 size=4：每个顶点读取 4 个 float，分别作为 R、G、B、A，直接送入 vec4 类型的 vColor。
两个属性各自绑定独立的 Buffer，各自有独立的读取指针，互不干扰。如果 size 参数写错，GPU 读取的内存位置就会错位，出现数据错乱。
### 对照实验
把颜色属性的vertexAttribPointer中第二个参数从4改成3，保持其他代码不变，运行观察效果。
### 实际现象
三角形颜色错乱，出现了异常的杂色、半透明区域，和预期效果不同。改回4之后，颜色渐变恢复正常。
### 我的解释
Buffer 里的数据是连续排列的一维字节流。当颜色的size设为3时，GPU每个顶点只读取3个float，下一个顶点的读取位置就会往前错位1个float，读到了上一个顶点的 Alpha 分量，导致每个顶点的颜色值都不对，最终画面颜色混乱。说明size参数直接决定了读取的步长，是数据正确解析的关键。
### 最终结论
vertexAttribPointer的size参数定义了每个顶点对应属性的分量数量，GPU以此为步长在Buffer的连续内存中顺序读取。不同属性的分量数不同（位置2个、颜色4个），就需要分别设置对应的 size，一旦写错就会造成内存读取错位，渲染结果异常。