AI 协作日志

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

# 实验一 AI协作记录

## AI协作1：理解数据流
### 我的目标
理解从 JavaScript 的 Float32Array 到屏幕出现三角形的完整步骤。

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

### AI关键回答摘要
AI 将过程拆为：Float32Array 在 CPU 内存中组织顶点数据；gl.createBuffer 创建 GPU Buffer；bindBuffer 绑定当前操作对象；bufferData 将数据上传到 GPU；vertexAttribPointer 告诉 GPU 如何从 Buffer 中按顶点读取数据；enableVertexAttribArray 启用属性；Vertex Shader 对每个顶点执行，输出 gl_Position；图元组装与光栅化生成片元；Fragment Shader 决定最终像素颜色。

### 我的判断
大致合理，但我最初不清楚 vertexAttribPointer 中的 size=2 与 Shader 中 vec4 vPosition 的关系。

### 验证方法
在 task1.html 和 js/task1.js 中逐项找到对应代码，并运行程序观察三角形。

### 验证结果
程序正常显示青色三角形。Shader 中虽然声明 in vec4 vPosition，但只提供 x、y 两个分量，WebGL 会自动补 z=0、w=1，因此仍能正确绘制。

### 修正后的结论
Float32Array 中每两个连续 float 表示一个二维顶点；vertexAttribPointer 的 size=2 表示每个顶点从 Buffer 中读取 2 个 float 给 vPosition 的 x、y，其余分量由默认值补齐。

## AI协作2：程序调试
### 现象
任务3 中第一个三角形显示正常，第二个四边形不显示。

### 我的初步判断
可能是第二个 Buffer 没有正确绑定，或者顶点数量写错。

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

### AI建议
1. 第二次绘制前没有重新绑定四边形 Buffer。
2. 第二次绘制前没有重新调用 vertexAttribPointer。
3. drawArrays 的顶点数量或 draw mode 错误。

### 我的测试
在第二次 drawArrays 前加入 console.log(gl.getParameter(gl.ARRAY_BUFFER_BINDING))，并检查代码，发现确实没有重新绑定 quadBuffer，也没有重新设置 vertexAttribPointer。

### 测试结果
补上 bindBuffer 和 vertexAttribPointer 后，四边形正常显示。

### 最终原因
WebGL 是状态机，切换 Buffer 后必须重新建立顶点属性与当前 Buffer 的关联。

### 是否采纳及理由
采纳。AI 没有直接改代码，而是给出了可验证的检查点，我通过实际运行和代码检查确认了原因。

## AI协作3：顶点属性
### 我的目标
理解位置 Buffer 每顶点 2 个 float、颜色 Buffer 每顶点 4 个 float 的区别。

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

### AI关键回答摘要
vertexAttribPointer 的 size 参数决定该属性每个顶点从 Buffer 中连续读取多少个分量。位置属性 size=2，因此每两个 float 构成一个顶点的 x、y；颜色属性 size=4，因此每四个 float 构成一个顶点的 R、G、B、A。两个属性分别绑定不同的 Buffer，因此可以独立组织数据。

### 对照实验
将 task4.js 中 vColor 的 vertexAttribPointer 第二个参数从 4 临时改为 3。

### 实际现象
三角形颜色明显异常，因为 GPU 按每 3 个 float 读取颜色，导致顶点颜色与位置对应错位。

### 我的解释
这验证了 size 参数直接决定 GPU 从 Buffer 中按顶点读取的分量数量。颜色需要 4 个分量，所以必须为 4。

### 最终结论
位置与颜色使用两个独立 Buffer，分别通过 vertexAttribPointer 绑定到 vPosition 和 vColor；size 必须与实际数据分量数一致。