AI 协作日志

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

# 实验一 AI协作记录
> 记录本人真实AI协作过程，包含自主判断、测试核验，不只是复制AI代码
## AI协作1：理解数据流
### 我的目标
搞懂WebGL从顶点数组到屏幕像素的完整数据流，理解Buffer、attribute、着色器之间数据传递逻辑
### 提示词
解释WebGL渲染管线，从顶点数组到屏幕像素最关键的三步，还有SGA、缓存、渲染相关考点。
### AI关键回答摘要
1. 顶点处理（顶点着色器）：顶点坐标传入，完成坐标变换；
2. 图元组装：把顶点按图元模式（TRIANGLE_STRIP/TRIANGLES/LINE_LOOP）组装成三角形/线段；
3. 片元处理（片元着色器）：逐个像素计算颜色，输出到帧缓存，最终显示到屏幕。
> 补充：顶点数据要先存入Buffer，再通过attribute传入顶点着色器。
### 我的判断
这个流程可以用来理解任务2矩形、任务3三角+矩形绘制；但要注意**图元模式会直接改变绘制结果**，同样顶点，不同mode画面完全不一样，这点需要写代码验证。
### 验证方法
任务5对照实验：使用任务2同一套4个顶点，只更换drawArrays的图元模式，对比画面差异。
### 验证结果
- `TRIANGLE_STRIP`：实心填充矩形
- `LINE_LOOP`：矩形闭合边框
- `POINTS`：只显示4个顶点小点
### 修正后的结论
WebGL数据流三步不变；**顶点数据本身不变，图元组装阶段决定几何形状**，图元模式只改变顶点如何连成图元，不修改坐标。

---
## AI协作2：程序调试
### 现象
task4代码报错：`Uncaught SyntaxError: Unexpected end of input`，页面空白，无法渲染三角形。
### 我的初步判断
大概率是中文符号，或者括号、大括号没有成对闭合（之前遇到过中文逗号报错）。
### 给AI的提示词
截图报错 Uncaught SyntaxError: Unexpected end of input，帮我看render函数代码哪里出错。
### AI给出的关键建议
该报错含义：代码提前结束，缺少配对的右大括号`}`；重点检查render函数末尾、init函数末尾的`{}`配对，Notepad++可以点击大括号高亮匹配。
### 我实际进行的测试
1. 逐行检查所有逗号，确认全部是英文半角，排除中文符号；
2. 在Notepad++点击每个`{`，观察是否能高亮匹配`}`；
3. 发现render函数结尾缺少`}`，补上后刷新页面。
### 测试结果
语法错误消失，页面不再报这个错，代码可以正常运行。
### 最终原因
render函数定义的左大括号`{`，缺少对应的右闭合`}`，JS解析到文件末尾发现代码未闭合。
### 是否采纳AI建议及理由
 采纳。AI定位错误类型准确，提供的括号匹配检查方法简单高效，快速定位缺失的`}`，解决语法报错。

---
## AI协作3：顶点属性与颜色
### 我的目标
掌握**逐顶点颜色**实现方式：分开位置Buffer、颜色Buffer，理解attribute传递vPosition、vColor，以及片元插值原理（任务4）。
### 提示词
任务4逐顶点颜色，使用位置Buffer和颜色Buffer，把vPosition与vColor分别传入Vertex Shader，补顶点、RGBA颜色数组、buffer代码、绘制调用。
### AI关键回答摘要
1. 新建两组Float32Array：vertices坐标数组、colors颜色数组，每个顶点4个浮点数RGBA；
2. 创建两个独立Buffer：位置Buffer存坐标，颜色Buffer存颜色；
3. 使用`getAttribLocation`拿到vPosition、vColor地址，`vertexAttribPointer`配置，开启`enableVertexAttribArray`；
4. 顶点着色器接收vPosition、vColor，通过varying把颜色传给片元着色器；三角形内部自动插值渐变。
### 对照实验
3个顶点分别设置红、绿、蓝三色，绘制三角形。
### 实际现象
三角形三个角分别是红、绿、蓝，三角形内部颜色平滑渐变，不是单一纯色。
### 我的解释
每个顶点绑定独立颜色；光栅化阶段会在三个顶点之间做颜色插值，三角形内部每个片元自动计算中间颜色，由varying变量传递。
### 最终结论
- 顶点坐标和顶点颜色是两套独立顶点属性，需要**两个不同Buffer**保存；
- varying变量可以把顶点着色器的数据传递给片元着色器；
- 逐顶点颜色会自动插值，产生平滑渐变效果。