AI 协作日志

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

# 实验一 AI协作记录

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

## AI协作1：理解数据流
### 我的目标
理解从JS的Float32Array到屏幕绘制三角形的完整WebGL2数据流，找到task1代码中每一步对应的环节。
### 提示词
从 JavaScript 的 Float32Array 到屏幕上出现一个三角形，中间发生了哪些关键步骤？请结合 WebGL2 解释 Buffer、vertexAttribPointer、Vertex Shader、光栅化和 Fragment Shader 各自负责什么，不要直接修改我的代码。
### AI关键回答摘要
1. JS：CPU中Float32Array存放顶点坐标；
2. Buffer：GPU显存，用来存放顶点数据；
3. bufferData：把CPU顶点数据上传到GPU；
4. vertexAttribPointer：定义如何从Buffer中读出数据映射到顶点着色器in变量；
5. Vertex Shader：逐个顶点执行，输出裁剪空间坐标gl_Position；
6. 图元组装：3个顶点拼成三角形；
7. 光栅化：把三角形几何图形拆成一个个片元（像素候选）；
8. Fragment Shader：每个片元执行，输出像素颜色，最终写到画布。
### 我的判断
AI描述的管线顺序和实验文档给出的数据流一致，但一开始我分不清Buffer是在CPU还是GPU内存。
### 验证方法
对照task1.html和task1.js逐行定位每一步代码，在浏览器运行观察三角形。
### 验证结果
代码顺序完全匹配描述；修改顶点数组后，必须调用bufferData上传，GPU才会更新图形，证明Buffer存储在GPU显存。
### 修正后的结论
Buffer是GPU显存对象，CPU数组和GPUBuffer相互独立；vertexAttribPointer只是**读取规则**，不会拷贝数据。完整数据流：JS顶点数据 → TypedArray → GPU Buffer → 顶点属性 → Vertex Shader → 图元组装 → 光栅化 → Fragment Shader → Canvas像素。

---

## AI协作2：TRIANGLE_STRIP绘制四边形
### 我的目标
学会使用TRIANGLE_STRIP图元，按指定顶点顺序（左上→左下→右上→右下）构建四边形，理解三角形条带的顶点组装规则。
### 提示词
WebGL2，4个顶点，顺序左上、左下、右上、右下，使用gl.TRIANGLE_STRIP绘制四边形。解释TRIANGLE_STRIP是怎么用4个顶点拼出2个三角形形成矩形。
### AI关键回答摘要
1. TRIANGLE_STRIP是三角形条带模式；
2. 顶点序列 v0,v1,v2,v3，会生成两组三角形：(v0,v1,v2)、(v1,v2,v3)；
3. 顶点顺序不能乱，如果顺序颠倒会出现面片翻转、图形错乱；
4. 4个顶点刚好拼出两个相邻三角形，合并成一个实心四边形。
### 我的判断
一开始以为4个顶点需要4个点单独组成两个三角形，不清楚顶点复用规则。
### 验证方法
运行task2代码，观察绿色四边形；修改顶点顺序，观察图形扭曲。
### 验证结果
按左上、左下、右上、右下顺序，成功绘制填充四边形；调换顶点顺序会图形出错。
### 修正后的结论
TRIANGLE_STRIP会复用前两个顶点，新增一个顶点就生成新三角形；顶点顺序直接决定图形能否正常渲染。

---

## AI协作3：多次绘制与Buffer切换
### 我的目标
学习在同一个画布绘制多个几何体，理解多个Buffer、切换绑定、修改uniform颜色实现不同物体色彩。
### 提示词
WebGL2在同一个画布绘制两个不重叠图形，需要创建两个buffer，每次绘制前绑定对应buffer，设置vertexAttribPointer，修改uniform颜色，两次drawArrays。解释这个流程的原理。
### AI关键回答摘要
1. 每个Buffer保存一套顶点数据在GPU显存；
2. ARRAY_BUFFER是**全局绑定点**，同一时间只能绑定一个Buffer；
3. vertexAttribPointer不是绑定Buffer，而是告诉属性：从当前绑定的Buffer读取顶点；
4. uniform变量在drawArrays生效前设置，一次draw调用期间uniform值保持不变；
5. 绘制顺序：清屏 → 绑定物体A的Buffer，设置属性、颜色 → drawArrays画A → 绑定物体B的Buffer，更新属性、更新颜色 → drawArrays画B。
### 我的判断
一开始以为vPosition绑定死某个Buffer，现在才明白vPosition只是读取规则，靠bindBuffer切换数据源。
### 验证方法
运行task3，观察左右两个不同颜色图形；注释掉修改uColor代码，两个图形会变成同一种颜色。
### 验证结果
代码成功画出左侧三角形、右侧四边形；不修改uColor时两者颜色一致，证明uniform在draw前生效。
### 修正后的结论
bindBuffer切换GPU数据源，vertexAttribPointer配置读取规则；uniform在绘制前更新，用来给单次绘制设置全局着色器参数，实现多物体多颜色渲染。


---

## AI协作4：逐顶点颜色与属性插值
### 我的目标
理解双Buffer（位置+颜色）、顶点属性传递、varying变量插值原理，实现彩色渐变三角形。
### 提示词
WebGL2，两套Buffer，一套存顶点坐标vPosition，一套存顶点颜色vColor。顶点着色器定义in vPosition,in vColor，out aColor；片元着色器in aColor。解释varying变量插值原理，为什么三角形内部会出现平滑颜色渐变。
### AI关键回答摘要
1. 位置Buffer、颜色Buffer相互独立，分别保存顶点坐标、每个顶点对应的RGBA颜色；
2. getAttribLocation获取vPosition、vColor两个属性位置，分别开启属性数组；
3. varying变量（out/in配对）由顶点着色器输出；光栅化阶段GPU自动在图元内部做线性插值；
4. 每个片元得到插值后的颜色，再送入片元着色器，最终画面产生平滑渐变。
### 我的判断
一开始以为颜色只在顶点生效，片元只能取顶点原色，不明白渐变怎么产生。
### 验证方法
运行task4，观察三角形三个顶点红、绿、蓝，中间平滑过渡；修改顶点颜色数值，渐变跟着变化。
### 验证结果
三个顶点颜色不同，三角形内部自动渐变；修改任意顶点颜色，插值结果同步变化。
### 修正后的结论
顶点属性是**按顶点输入**，varying变量在光栅化阶段自动插值，不是每个像素单独设置颜色，GPU自动计算图元内部每个片元的颜色。

---

## AI协作5：图元模式对照实验
### 我的目标
理解图元模式的作用，相同顶点数据更换draw mode观察不同渲染结果，区分LINE_STRIP、LINE_LOOP、POINTS、TRIANGLES、TRIANGLE_STRIP。
### 提示词
WebGL2，4个顶点不变，更换drawArrays的图元模式。解释gl.LINE_STRIP、gl.LINE_LOOP、gl.POINTS、gl.TRIANGLES、gl.TRIANGLE_STRIP各自的组装规则和画面效果。
### AI关键回答摘要
1. gl.POINTS：把每个顶点单独渲染成点；
2. gl.LINE_STRIP：顶点依次连成折线，首尾不闭合；
3. gl.LINE_LOOP：在LINE_STRIP基础上，自动把最后一点连回起点，闭合轮廓；
4. gl.TRIANGLES：每3个顶点独立组成三角形；
5. gl.TRIANGLE_STRIP：三角形条带，新增顶点和前两个顶点构成新三角，4顶点生成2个三角拼成四边形。
### 我的判断
顶点数据本身不携带绘制类型，图元模式是告诉GPU“怎么解释顶点序列”。
### 验证方法
运行task5，切换不同draw mode，保持顶点不变，观察画面变化。
### 验证结果
顶点不变，仅仅修改图元模式，画面从实心四边形，切换为闭合框、开放折线、4个点、单个三角形。
### 修正后的结论
顶点存储几何位置，图元模式定义GPU的图元组装规则，这是WebGL基础管线重要一步，光栅化前完成。