AI 协作日志

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

# 实验一 AI协作记录
> 请记录本人真实的AI协作过程。不要只粘贴AI生成结果，应体现自己的判断、测试和核验。
## AI协作1：理解数据流
### 我的目标
理解从 JavaScript 的 Float32Array 顶点数据，到屏幕绘制三角形的完整WebGL2图形数据流，在task1代码中定位每一步对应的代码。
### 提示词
从 JavaScript 的 Float32Array 到屏幕上出现一个三角形，中间发生了哪些关键步骤？请结合 WebGL2 解释 Buffer、vertexAttribPointer、Vertex Shader、光栅化和 Fragment Shader 各自负责什么，不要直接修改我的代码。
### AI关键回答摘要
1. 在CPU侧，JS把顶点坐标存入Float32Array；
2. 创建Buffer缓冲区，调用bufferData将顶点数据上传到GPU显存；
3. vertexAttribPointer设置GPU读取缓冲区数据的规则，并绑定到顶点着色器输入变量vPosition；
4. Vertex Shader对每一个顶点执行，输出裁剪空间坐标gl_Position；
5. 图元组装：按照指定图元类型，把顶点组装成三角形；
6. 光栅化：把三角形几何图形转换成大量片元（待渲染像素）；
7. Fragment Shader逐个片元执行，输出像素颜色，最终渲染到Canvas画布。
### 我的判断
Buffer是CPU向GPU传递顶点数据的载体；vertexAttribPointer是告诉GPU如何解析缓冲区里连续存放的浮点数。
### 验证方法
打开task1.html，对照task1.js代码，依次找到创建Buffer、bindBuffer、bufferData、getAttribLocation、vertexAttribPointer、enableVertexAttribArray、drawArrays的代码位置，一一对应AI讲解的流程。
### 验证结果
代码环节和讲解完全对应，验证成功。
### 修正后的结论
顶点数据保存在CPU内存，必须通过Buffer上传到GPU显存；vertexAttribPointer定义GPU读取数据的格式；光栅化是把几何图形转化成像素片元的核心阶段。
---
## AI协作2：程序调试
### 现象
task3绘制两个图形时，第一个三角形可以正常显示，第二个四边形无法绘制出来。
### 我的初步判断
切换绑定新Buffer之后，没有重新调用vertexAttribPointer设置顶点属性，WebGL状态机仍然指向旧缓冲区。
### 给AI的提示词
下面是一段 WebGL2 代码。第一个图形正常，第二个图形没有显示。请不要重写完整程序，只列出最可能的3个原因，并告诉我应该通过什么现象、Console 信息或代码检查逐一验证。
### AI给出的关键建议
1. 切换Buffer之后，忘记重新调用vertexAttribPointer与enableVertexAttribArray，顶点属性依旧指向旧Buffer；
2. drawArrays的顶点数量参数写错，读取顶点数量为0；
3. uniform颜色设置错误，图形颜色和画布背景颜色一致，肉眼看不见。
### 我实际进行的测试
在绘制四边形前，重新bindBuffer，设置vertexAttribPointer并启用顶点属性；核对drawArrays顶点数量；修改uColor为明显区别于背景的颜色。
### 测试结果
修改代码后，三角形、四边形都成功绘制在同一个画布，两个图形颜色不相同，互不重叠。
### 最终原因
WebGL是状态机，更换绑定的Buffer之后，顶点属性读取规则不会自动更新，必须重新配置vertexAttribPointer。
### 是否采纳AI建议及理由
采纳，AI给出的3条排查方向可以快速定位WebGL多对象绘制常见的状态问题。
---
## AI协作3：顶点属性与颜色
### 我的目标
理解位置Buffer每个顶点读取2个float，颜色Buffer每个顶点读取4个float，理解vertexAttribPointer第二个参数的作用。
### 提示词
在 WebGL2 中，位置属性 vPosition 每个顶点提供2个 float，而颜色属性 vColor 每个顶点提供4个 float。请从“GPU怎样按 vertexAttribPointer 的参数读取 Buffer 中连续数据”的角度解释两个属性的区别，不要只列参数定义。
### AI关键回答摘要
vertexAttribPointer的第二个参数，代表**单个顶点需要读取多少个连续浮点数**。
位置属性只需要x、y二维坐标，所以参数为2；颜色属性需要R、G、B、A四个通道，参数为4。GPU会按照这个数量，在缓冲区连续内存里依次取出数据送入对应的shader输入变量。
### 对照实验
将颜色Buffer的vertexAttribPointer第二个参数由4临时改为3，运行程序观察效果，之后恢复为4。
### 实际现象
参数改为3时，三角形颜色错乱，出现杂乱异常色彩；恢复为4之后，红、绿、蓝顶点的平滑渐变三角形正常显示。
### 我的解释
参数改为3，GPU读取每个顶点只拿R、G、B，跳过Alpha通道，缓冲区数据读取错位，颜色解析错误。
### 最终结论
vertexAttribPointer第二个参数定义每个顶点读取浮点数个数，参数必须和顶点数据结构严格匹配，否则GPU读取数据错位，渲染结果异常。