AI 协作日志

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

# 实验一 AI协作记录
## AI协作1：理解数据流
### 我的目标
搞清楚从JS的Float32Array到屏幕画出三角形完整WebGL2数据流，理解Buffer、vertexAttribPointer、顶点着色器、光栅化、片元着色器各自作用。
### 提示词
从 JavaScript 的 Float32Array 到屏幕上出现一个三角形，中间发生了哪些关键步骤？请结合 WebGL2 解释 Buffer、vertexAttribPointer、Vertex Shader、光栅化和 Fragment Shader 各自负责什么，不要直接修改我的代码。
### AI关键回答摘要
1.JS把顶点数据放入Float32Array（CPU内存）；
2.创建Buffer，bufferData把数据上传GPU显存；
3.vertexAttribPointer定义GPU如何从Buffer读出数据；
4.Vertex Shader处理每一个顶点；
5.图元组装后光栅化，把三角形面片转成片元；
6.Fragment Shader计算每个片元颜色，输出到画布像素。
### 我的判断
每一步都要对应task1.js里面的代码。
### 验证方法
打开task1.js，依次寻找Buffer创建、bindBuffer、bufferData、vertexAttribPointer、drawArrays代码，对照AI说的流程核对。
### 验证结果
代码中可以找到全部对应环节；之前分不清Buffer是CPU还是GPU内存，通过代码核验明白了Buffer存储在GPU显存。
### 修正后的结论
CPU数组只是原始数据，必须通过bufferData拷贝到GPU Buffer，着色器才能访问数据。

## AI协作2：程序调试
### 现象
第一个三角形正常显示，右侧四边形图形绘制异常，只出现一部分。
### 我的初步判断
drawArrays的顶点计数参数写错。
### 给AI的提示词
WebGL2第一个图形正常，第二个图形显示不正常，列出3个最可能原因和验证方法，不要重写完整代码。
### AI给出的关键建议
1. drawArrays顶点数量参数错误；2.绑定新Buffer后没有重新调用vertexAttribPointer；3.uniform颜色更新时机错误。验证：查看drawArrays第三个参数、检查bindBuffer之后是否设置顶点属性、看控制台有无报错。
### 我实际进行的测试
把drawArrays第三个参数改成4。
### 测试结果
修改为4之后，四边形完整正常绘制。
### 最终原因
drawArrays第三个参数填写为3，四边形有4个顶点，顶点读取数量不足。
### 是否采纳AI建议及理由
采纳，AI提示的顶点计数问题与实际bug吻合，通过修改参数验证确认故障点。

## AI协作3：顶点属性与颜色
### 我的目标
理解双Buffer，位置属性读2个float，颜色属性读4个float，观察参数错误的现象。
### 提示词
WebGL2，vPosition每个顶点2个float，vColor每个顶点4个float，从vertexAttribPointer读取Buffer数据角度解释区别。
### AI关键回答摘要
vertexAttribPointer第二个参数代表**每个顶点读取多少个浮点数**。位置只需要x,y填2；颜色需要R、G、B、A共4个分量填4。填错数字GPU就会错误偏移读取Buffer里的数据，颜色乱掉。
### 对照实验
把颜色vertexAttribPointer的第二个参数从4改为3。
### 实际现象
三角形颜色完全错乱，出现奇怪杂色，不再是红‑绿‑蓝渐变。
### 我的解释
参数改为3后，GPU每个顶点只读取3个颜色浮点数，跳过A分量，读取到下一组颜色数据，数据错位。
### 最终结论
vertexAttribPointer第二个参数必须匹配该属性每个顶点占用多少个float；颜色vec4必须填4。

## AI协作4：任务5图元探究
### 我的目标
固定顶点数据不变，更换绘制图元，观察渲染结果差异。
### 我修改了什么
顶点坐标、顶点顺序、颜色全部沿用任务2，仅修改drawArrays的mode参数。
### 我原先预测
使用gl.LINE_LOOP可以画出闭合的四边形边框。
### 实际结果
画面出现蓝色闭合空心四边形线框，没有填充面。
### 原因解释
LINE_LOOP把顶点依次连线，并且自动把最后一个顶点连回第一个顶点，形成闭合轮廓；该模式只绘制线条，不会生成填充三角形面片。