AI 协作日志

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

# 实验一 AI协作记录
> 请记录本人真实的AI协作过程。不要只粘贴AI生成结果，应体现自己的判断、测试和核验。
## AI协作1：理解数据流
### 我的目标
搞懂WebGL绘制图形完整数据流：顶点数组→缓冲区buffer→着色器，理解CPU和GPU数据传递过程，完成任务1三角形绘制。
### 提示词
帮我写task1的WebGL代码，use strict模板，init和render分开，修改顶点坐标，更换三角形颜色。
### AI关键回答摘要
1. JS里Float32Array存顶点，在CPU内存；
2. createBuffer、bindBuffer、bufferData把顶点上传到GPU缓冲区；
3. getAttribLocation拿到顶点属性地址，vertexAttribPointer设置读取规则，enable开启属性；
4. drawArrays触发GPU执行着色器，完成绘制。
### 我的判断
AI给出的流程顺序符合WebGL规范，但需要手动验证每一步作用，不能直接复制就认为正确。
### 验证方法
逐行注释代码，依次注释掉buffer创建/绑定/上传/属性启用，观察画布渲染变化。
### 验证结果
- 注释bufferData：没有顶点上传，画布空白；
- 注释enableVertexAttribArray：顶点属性关闭，图形不显示；
- 修改Float32Array顶点数值，图形位置形状跟着改变。
### 修正后的结论
CPU只负责准备顶点数据，必须通过Buffer上传到GPU；drawArrays才会触发真正绘制，前面代码都是配置GPU。

---
## AI协作2：程序调试
### 现象
任务2复制顶点后，换成gl.TRIANGLE_STRIP画四边形，图形显示异常，面片扭曲。
### 我的初步判断
怀疑着色器代码出错，或者缓冲区数据没正确上传。
### 给AI的提示词
task2使用TRIANGLE_STRIP绘制四边形，图形扭曲，帮我检查顶点顺序。
### AI给出的关键建议
TRIANGLE_STRIP对顶点顺序很严格，顺序应该是左上、左下、右上、右下；顶点顺序错乱会造成三角面片翻转，图形破碎。
### 我实际进行的测试
1. 修改顶点顺序，按照AI推荐顺序填写顶点；
2. 分别切换`gl.POINTS`/`gl.LINE_STRIP`/`gl.TRIANGLES`对照测试；
3. 观察不同图元模式渲染效果。
### 测试结果
顶点顺序修正后，TRIANGLE_STRIP成功绘制实心矩形；不同图元模式，相同顶点渲染结果完全不同。
### 最终原因
顶点排布顺序错误，TRIANGLE_STRIP组装三角形规则：每新增1个顶点，和前两个顶点组成三角形，乱序造成面片重叠翻转。
### 是否采纳AI建议及理由
采纳。AI指出的顶点顺序问题和我的测试现象吻合，调整顶点顺序后程序正常渲染，理解了条带图元的顶点排布要求。

---
## AI协作3：顶点属性与颜色
### 我的目标
学习多顶点属性（位置+颜色），实现每个顶点独立颜色，三角形内部平滑渐变，完成任务4。
### 提示词
基于模板写task4，分开位置buffer和颜色buffer，三个顶点设置不同RGBA颜色，着色器传递颜色插值。
### AI关键回答摘要
1. 需要两套独立buffer，分别存放顶点坐标、顶点颜色；
2. 顶点着色器定义in接收vPosition、vColor，out输出颜色给片元着色器；
3. WebGL光栅化阶段自动对顶点之间的颜色插值，三角形内部产生平滑混色。
### 对照实验
1. 三个顶点分别设置红、绿、蓝；
2. 关闭颜色属性，改为uniform单色，对比两种效果。
### 实际现象
开启顶点颜色后，三角形三个角分别为红、绿、蓝，中间颜色平滑过渡；使用uniform时整个三角形只有单一颜色，没有渐变。
### 我的解释
uniform是全局统一变量，整个图元同一种颜色；顶点属性是每个顶点携带独立数据，光栅化会在片元之间插值，实现渐变效果。两套buffer需要分别绑定、设置vertexAttribPointer。
### 最终结论
顶点属性可以同时携带位置、颜色等多组数据；顶点颜色插值是GPU光栅化自动完成，不需要手动计算中间颜色。