AI 协作日志

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

# 实验一 AI协作记录

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

---

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

### 我的目标

搞清楚从JavaScript里的一堆数字（Float32Array），怎么一步步变成屏幕上的三角形。上课听了概念，但没和具体代码对应起来，尤其是Buffer和vertexAttribPointer到底在干嘛。

### 提示词

> 从JavaScript的Float32Array到屏幕上出现一个三角形，中间发生了哪些关键步骤？请结合WebGL2解释Buffer、vertexAttribPointer、Vertex Shader、光栅化和Fragment Shader各自负责什么，不要直接修改我的代码。

### AI关键回答摘要

AI给出的完整流程是：
1. Float32Array里的数字只是CPU内存里的顶点数据
2. createBuffer + bindBuffer + bufferData 把数据上传到GPU显存
3. vertexAttribPointer告诉GPU"这串字节每2个float组成一个顶点"
4. Vertex Shader逐顶点处理，输出位置到gl_Position
5. 图元组装把3个顶点拼成三角形
6. 光栅化把三角形拆成片元（候选像素）
7. Fragment Shader算每个片元的颜色
8. 写入帧缓存显示在屏幕上

### 我的判断

AI说的大流程是对的，但我之前有两个地方一直搞混了：
1. 以为Buffer里存的是"已经算好的像素颜色"——其实不是，Buffer里存的是顶点坐标等原始数据
2. 以为vertexAttribPointer是"把数据放进Buffer"——其实不是，bufferData才是上传数据，vertexAttribPointer只是告诉GPU"这个Buffer里的数怎么读出来给Shader用"

### 验证方法

打开task1.js，按顺序逐行找代码对应：
- vertices变量 → CPU端的顶点数组
- createBuffer → 创建Buffer
- bindBuffer → 绑定当前Buffer
- bufferData → 真正上传数据
- getAttribLocation + vertexAttribPointer + enableVertexAttribArray → 连接Shader
- drawArrays → 触发绘制

### 验证结果

代码顺序和AI说的完全对应。特别是发现vertexAttribPointer确实在bufferData之后，说明它不是上传数据，而是设置读取方式。

### 修正后的结论

修正了之前的两个误解：
1. Buffer里存的是顶点坐标等原始数据，不是像素颜色
2. vertexAttribPointer不是上传数据，是告诉GPU"怎么读这个Buffer"，bufferData才是真正上传

---

## AI协作2：程序调试

### 现象

做任务3的时候，先写了三角形代码，跑出来什么都没有。然后加了四边形代码，四边形能显示（紫色正方形），但左边三角形始终不显示。

### 我的初步判断

一开始以为是三角形坐标写错了，跑到屏幕外面去了。改了好几次坐标（从-1附近改成-0.8），还是不行。又以为是两个Buffer互相影响，但AI说两个不同的Buffer不会互相影响。

### 给AI的提示词

> 下面是一段WebGL2代码。第一个图形（三角形）正常，第二个图形（四边形）没有显示。请不要重写完整程序，只列出最可能的3个原因，并告诉我应该通过什么现象、Console信息或代码检查逐一验证。

（实际调试中是反过来的：四边形正常，三角形不显示）

### AI给出的关键建议

AI建议分两步排查：
1. 先把四边形代码整个注释掉，只留三角形，看看三角形能不能单独显示——排除"后画的盖住先画的"这种可能
2. 在三角形的drawArrays前面加一个alert("三角形代码执行到了")，看看代码到底有没有执行到那一行

### 我实际进行的测试

1. 把四边形代码注释掉，只留三角形 → 还是没有三角形
2. 加了alert弹窗 → 弹窗能跳出来，说明代码执行到了drawArrays那一行
3. 最后我自己尝试把drawArrays的模式从gl.TRIANGLES改成gl.TRIANGLE_STRIP → 三角形出来了！

### 测试结果

改成TRIANGLE_STRIP后三角形正常显示。说明三角形的顶点数据、Buffer、属性设置都是对的，问题出在draw mode上。

### 最终原因

回顾代码，发现之前很可能是把gl.TRIANGLES拼写成了gl.TRIANGLE（少了个S），WebGL不认识这个模式，所以什么都不画。改成TRIANGLE_STRIP虽然能画出来，但语义上三角形应该用TRIANGLES模式，最后改回正确拼写的TRIANGLES也正常了。

另外还遇到一个Shader编译错误：页面提示"#version directive must occur on the first line of the shader"。原因是HTML里`<script>`标签后面换了一行，这个空行被算成了Shader的第一行，#version 300 es跑到了第二行。解决方法是把#version紧跟在script标签后面，不换行。

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

采纳了。AI建议的"先注释掉另一个图形，单独测试"这个排查思路很有用，帮我排除了"两个图形互相覆盖"的可能，把问题范围缩小到三角形代码本身。最后通过改draw mode定位到了拼写问题。

---

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

### 我的目标

做任务4的时候，搞不懂为什么需要两个Buffer（位置Buffer + 颜色Buffer），以及为什么位置每个顶点读2个float，颜色每个顶点读4个float。还有TODO 4-3和TODO 4-4到底有什么区别，看起来都是在操作Buffer。

### 提示词

> 在WebGL2中，位置属性vPosition每个顶点提供2个float，而颜色属性vColor每个顶点提供4个float。请从"GPU怎样按vertexAttribPointer的参数读取Buffer中连续数据"的角度解释两个属性的区别，不要只列参数定义。

### AI关键回答摘要

AI用"餐厅上菜"的类比解释：
- TODO 4-3（createBuffer + bindBuffer + bufferData）= 拿一个空箱子，把颜色数据倒进箱子里（数据搬到GPU了，但GPU不知道箱子里是什么）
- TODO 4-4（getAttribLocation + vertexAttribPointer + enableVertexAttribArray）= 给箱子贴标签，告诉GPU"这个箱子里是颜色，每顶点拿4个，送到vColor窗口"

两个步骤缺一不可：只传数据不告诉怎么读 = 白传；只告诉怎么读但没数据 = 没东西可读。

### 对照实验

按照AI的解释，我在task4.js里填了：
- 位置Buffer：vertexAttribPointer(vPosition, 2, ...) → 每顶点2个float（x, y）
- 颜色Buffer：vertexAttribPointer(vColor, 4, ...) → 每顶点4个float（R, G, B, A）

三个顶点分别设为红、绿、蓝。

### 实际现象

跑出来的三角形内部是连续的渐变色（左下偏红、右下偏绿、顶部偏蓝），而不是三个独立的纯色块。

### 我的解释

三角形内部的渐变色是光栅化阶段自动插值出来的：三个顶点分别有红、绿、蓝三种颜色，GPU在三角形内部按位置比例算出每个片元的颜色。Fragment Shader拿到的不是顶点原始颜色，而是插值之后的颜色。

这也解释了为什么需要out/in来传递颜色：Vertex Shader把每个顶点的颜色out出去，光栅化插值后，Fragment Shader再in进来，拿到的就是插值后的颜色。

### 最终结论

1. TODO 4-3 = 建Buffer、传数据（装箱子）
2. TODO 4-4 = 告诉GPU怎么读、读给谁（贴标签+开传送带）
3. 位置读2个float是因为只有x、y；颜色读4个float是因为有R、G、B、A
4. 三角形内部渐变是光栅化插值的结果，不是Fragment Shader自己算出来的
5. 两个Buffer分开管理，各自对应Shader里的一个in变量，互不干扰

---