AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标

刚拿到实验框架，整体不清楚整套实验该如何下手，想搞懂WebGL2完整的绘制流程

### 提示词

帮我分析一下这个实验怎么做，中间有什么步骤

### AI关键回答摘要

JavaScript里的顶点数据存放在CPU内存，GPU不能直接访问。需要创建Buffer，通过bufferData把数据上传到GPU显存；vertexAttribPointer设置数据解析方式，建立缓冲区和着色器输入的映射；顶点着色器处理每个顶点；之后经过图元组装，光栅化生成大量片元并做属性插值；片元着色器计算每个像素颜色输出到画布。

### 我的判断

图形渲染是一条完整流水线，并不是定义完数组就可以绘图。Buffer上传、配置顶点属性映射是CPU向GPU传递数据的关键，也是写代码时容易忽略的地方。

### 验证方法

对照现有代码，在js和html中找到AI提到的各个环节对应的代码片段，梳理完整的数据流向。

### 验证结果

代码和描述的流程能够一一对应：定义顶点数组、创建绑定Buffer、上传数据、配置并开启顶点属性，最后调用drawArrays执行绘制，着色器代码定义在html内。

### 修正后的结论

CPU端JS的数据无法直接被GPU使用，必须完成Buffer上传和顶点属性映射配置，才能正常渲染图形，缺少任意步骤绘制都会失败。

---

## AI协作2：程序调试

### 现象

任务二修改代码后网页运行时，一直显示正在运行，迟迟没有图像出现。

### 我的初步判断

可能是绘制的代码出错，怀疑drawArrays调用存在问题，也猜测顶点数据配置存在异常。

### 给AI的提示词

做任务二时，运行时图形没有显示。请帮我排查出问题。

### AI给出的关键建议

1. 检查`drawArrays`传入的图元模式是否与顶点数据适配；
2. 检查`drawArrays`第三个参数，即待绘制顶点数量是否正确；
3. 确认顶点Buffer绑定、顶点属性配置已经完成，状态栏辅助判断顶点数据是否加载成功。

### 我实际进行的测试

观察页面状态栏显示“已读取顶点数据，请继续补全 drawArrays”，说明顶点数据已经正常加载，if分支可以进入。查看`drawArrays`调用语句，我错误把第三个顶点数量参数硬编码写为3，任务2四边形需要4个顶点进行绘制。修改第三个参数为`vertexCount`，保存代码后刷新页面。

### 测试结果

修正`drawArrays`的顶点计数参数后，四边形正常渲染显示。

### 最终原因

`drawArrays`内部参数错误。虽然可以进入绘制分支，但绘制顶点数量写成3，仅读取前3个顶点。对于`TRIANGLE_STRIP`，3个顶点只能绘制一个三角形，无法生成四边形，页面没有出现完整图形。

### 是否采纳AI建议及理由

采纳AI的建议。AI提醒我重点检查drawArrays的传入参数，定位到顶点计数参数设置错误。本次调试认识到drawArrays第三个参数代表顶点的个数，不是数组中浮点数的数量，必须和当前图元需要的顶点数目匹配。

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

## 我的目标

实现任务4顶点颜色时，颜色渲染效果和预期不符，想找到问题所在。

### 提示词

任务4是颜色与预期不符，请帮我分析问题出现在哪里。

### AI关键回答摘要

需要留意`vertexAttribPointer`的size参数。位置数据每个顶点只有x、y两组数值，size为2；颜色包含RGBA四组数值，size应为4。GPU会依据size移动读取指针，一旦设置不一致，缓冲区数据读取就会错位，颜色渲染异常。

### 对照实验

将颜色缓冲区size参数临时改为3，观察画面表现，实验结束恢复为4。

### 实际现象

size改为3，三角形颜色混乱，没有产生平滑渐变；恢复参数为4，正常的顶点插值渐变效果出现。

### 我的解释

size设置错误，GPU读取每个顶点颜色时没有读取完整的RGBA数据，读取指针发生偏移，后续顶点获取到错误缓冲区内容。

### 最终结论

多套顶点缓冲区开发时，`vertexAttribPointer`的size要匹配对应属性的数据长度，参数不匹配会造成缓冲区读取偏移，引发渲染错误。