AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标
搞明白 canvas、gl、viewport、clearColor、initShader、useProgram 都是干嘛的。

### 提示词
"viewport，clearcolor，initshader，useprogram都是干什么的"

### AI关键回答摘要
canvas 是画布，gl 是从 canvas 拿到的 WebGL 上下文，所有绘制都靠它。viewport 决定画到画布哪块；clearColor 只设背景色，真正清屏还要 gl.clear；initShader 不是 WebGL 自带的，是教程封装的函数，用来编译着色器、建 program；useProgram 是告诉 WebGL 接下来用哪个着色器。

### 我的判断
和代码里看到的结构对得上。initShader 文件里没定义却被调用，说明是外部库来的，这点 AI 说对了。

### 验证方法
F12 打开 Console 输入 typeof initShaders；把 clearColor 注释掉看背景变不变。

### 验证结果
initShaders 返回 "function"，确实来自外部库。去掉 clearColor 后背景变了，说明它只是设状态。

### 修正后的结论
这几个都是画之前的准备。真正画图形的是 drawArrays。

---

## AI协作2：程序调试

### 现象
三角形出不来，四边形直接没影。

### 我的初步判断
以为顶点坐标写错了。

### 给AI的提示词
把代码贴过去问"哪里有问题"。

### AI给出的关键建议
AI 找出四个问题：vertices 没声明；getUniform4f 应该是 uniform4f；三角形三点共线，画不出来；gl.TRIANGLES_STRIP 拼错了，应该是 gl.TRIANGLE_STRIP。

### 我实际进行的测试
一条一条改，改一处刷一次。

### 测试结果
改完前两个不报错了，三角形出来但扁得像条线，换顶点后正常。四边形改对 mode 后出现在右边。

### 最终原因
最要命的是 vertices 没定义和 getUniform4f 写错，这俩让脚本直接停。四边形不显示是 mode 拼错。三角形扁的是三点共线。

### 是否采纳AI建议及理由
采纳了。每条都在浏览器里验过，尤其 TRIANGLES_STRIP 这个拼写错误我自己看了几遍都没发现。

---

## AI协作3：顶点属性与颜色
给三角形三个顶点设不同颜色，让颜色在内部过渡。

### 我的目标
"这个怎么填"，把带 TODO 的文件贴过去。

### 提示词

### AI关键回答摘要
位置 buffer 每顶点读 2 个 float，颜色 buffer 每顶点读 4 个 float，两个都要启用。颜色是 0.0~1.0，不是 255。

### 对照实验
先只填位置，三角形是单色的；补上颜色后变成红绿蓝渐变。

### 实际现象
三个角分别是红、绿、蓝，中间是混出来的过渡色。

### 我的解释
颜色是当顶点属性传进去的，GPU 会对三个顶点的颜色做插值，每个像素拿到的是三者的加权平均。

### 最终结论
顶点属性不只有位置。位置决定形状，颜色决定每个顶点的基色，中间像素靠插值算出来。