AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标：
搞清楚 WebGL2 中，JS 顶点数组到屏幕渲染图形的完整数据流，理解缓冲区、顶点属性、着色器、光栅化各自的作用。

### 提示词：
从 JavaScript 的 Float32Array 顶点数组，到画布上画出三角形，WebGL2 中间完整流程是什么？解释 Buffer、vertexAttribPointer、顶点着色器、光栅化、片元着色器各自作用，不要直接修改我的代码。

### AI关键回答摘要：
1. JS 里顶点数组保存在 CPU 内存；
2. 通过`bufferData`将顶点数据拷贝到 GPU 显存的 Buffer；
3. `vertexAttribPointer`设置缓冲区数据解析规则，`enableVertexAttribArray`开启顶点属性；
4. 顶点送入顶点着色器做坐标变换；
5. 图元组装后进入光栅化，将几何图形转换成片元；
6. 片元送入片元着色器计算像素颜色，最终输出到画布。

### 我的判断
AI 描述的整体流程大体正确，但我怀疑vertexAttribPointer绑定的是当前绑定的缓冲区，需要对照 task1 代码逐行核验。

### 验证方法
打开 task1.html，对照 task1.js 和着色器代码，找到流程中每一步对应的代码；修改 JS 顶点数组，不调用 bufferData，观察画面是否变化。

### 验证结果
- Float32Array：JS 中的 vertices 数组；
- createBuffer/bindBuffer/bufferData：上传数据到 GPU 显存；
- getAttribLocation、vertexAttribPointer、enableVertexAttribArray：配置顶点属性；
- vertex-shader、fragment-shader：两段着色器。
只修改 CPU 数组而不执行 bufferData，图形不会更新，证实数据存放在 CPU、GPU 两块内存。
### 修正后的结论
完整数据流：
JS (CPU Float32Array) → bufferData 上传至 GPU Buffer → vertexAttribPointer 解析缓冲区 → 顶点着色器处理顶点坐标 → 图元组装 → 光栅化生成片元 → 片元着色器输出像素颜色 → 屏幕显示。
**修改 CPU 侧顶点数组后，必须重新调用 bufferData，GPU 才会拿到新数据。**
---

## AI协作2：程序调试

### 现象
任务 5 完整复制任务 2 的顶点和顶点顺序，仅修改 draw mode 为`gl.LINE_LOOP`，预期看到矩形边框，但渲染结果出现交叉 X 形状。

### 我的初步判断
怀疑顶点复制出错，坐标数字或者顶点顺序抄写错误，代码存在笔误。
### 给AI的提示词
WebGL 任务 5，完全复制任务 2 顶点顺序：左上、左下、右上、右下，drawArrays 使用 gl.LINE_LOOP，渲染出交叉 X 图形，帮我分析原因，不要直接改写代码
### AI给出的关键建议
1. TRIANGLE_STRIP 与 LINE_LOOP 图元组装逻辑不一样；
2. TRIANGLE_STRIP 会自动复用前两个顶点拼接三角形；LINE_LOOP 只是严格按照顶点顺序依次连线；
3. 实验要求**不能改动任务 2 顶点顺序**，即使图形怪异也是本次对照实验预期现象，不能为了画好看矩形调换顶点
### 我实际进行的测试
1. 打印 vertices 数组核对，确认顶点坐标、顺序和 task2 完全一致；
2. 切换 draw mode 为 gl.POINTS，4 个顶点正确出现在四个角落，证明顶点数据本身没问题；
3. 切回 LINE_LOOP，可以稳定复现交叉 X 图形。
### 测试结果
顶点数据本身无错误；交叉 X 不是程序 bug，是该顶点序列搭配 LINE_LOOP 的真实渲染结果。
### 最终原因
两种图元组装规则不同。同一组顶点：
TRIANGLE_STRIP：v0-v1-v2、v1-v2-v3，自动复用顶点拼成实心矩形；
LINE_LOOP：严格按顺序连线 v0→v1→v2→v3→v0，产生对角线交叉线条。
### 是否采纳AI建议及理由
采纳。保持顶点顺序不变，遵守实验 “**仅修改 draw mode，其余全部不变**” 的控制变量原则，如实记录该实验现象。
---

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

### 我的目标
理解顶点属性读取规则：位置属性每个顶点读取 2 个 float，颜色属性每个顶点读取 4 个 float；理解 vertexAttribPointer 如何读取 Buffer 中连续内存，完成对照实验。
### 提示词
WebGL2 中 vPosition 位置属性每个顶点读 2 个 float，vColor 颜色属性每个顶点读 4 个 float，请从 GPU 读取 Buffer 连续内存的角度解释 vertexAttribPointer 参数，不要只罗列参数定义
### AI关键回答摘要
vertexAttribPointer 第二个参数代表**单个顶点该属性占用浮点数个数**。位置只需要 x,y 两个分量；颜色需要 R、G、B、A 四个分量。GPU 会根据步长，在 Buffer 内存上偏移读取下一组顶点数据。参数填写错误会造成内存读取错位，颜色渲染错乱。
### 对照实验
任务 4，把颜色 Buffer 的 vertexAttribPointer 第二个参数从 4 改为 3，观察三角形渲染效果；测试完成后恢复参数为 4。
### 实际现象
参数改为 3 后，内存读取错位，三角形出现杂乱异常渐变色；恢复参数为 4 后，红、绿、蓝顶点的平滑渐变三角形恢复正常。
### 我的解释
Buffer 是一长串连续 Float32 内存。参数 4 代表每 4 个浮点数作为一个顶点的颜色；改成 3 后 GPU 读取偏移出错，读到相邻顶点的颜色数据，造成颜色错乱。位置属性填 2，代表每 2 个浮点数读取一组 x,y 坐标。
### 最终结论
vertexAttribPointer 第二个参数定义**该属性单个顶点占用浮点数数量**。同一个 Buffer 可以存放多套属性，不同顶点属性可以设置不同读取数量；参数设置错误会发生内存错位，渲染结果异常。


## AI 协作 4：挑战任务（挑战 2 索引绘制四边形）

### 我的目标

学习使用`ELEMENT_ARRAY_BUFFER`索引缓冲区和`gl.drawElements()`实现索引绘制，对比`drawArrays`，理解顶点复用原理，完成选做加分挑战。

### 提示词

WebGL2，使用 gl.ELEMENT_ARRAY_BUFFER 和 gl.drawElements 绘制四边形，写出完整 html+js，对比 drawArrays 和 drawElements 顶点复用区别。

### AI 关键回答摘要

1. drawArrays 直接顺序读取顶点数组，如果存在共享顶点，坐标数据必须重复写，占用更多显存；
2. drawElements 分为顶点缓冲区 + 索引缓冲区，顶点只存储一次，索引通过顶点编号复用顶点，减少显存开销；
3. 索引缓冲区绑定目标是`gl.ELEMENT_ARRAY_BUFFER`，索引数组一般使用 Uint16Array；
4. 四边形拆成两个三角形，索引序列`[0,1,2,0,2,3]`。

### 对照实验

1. 使用 drawArrays 绘制四边形，顶点数组需要写 6 个顶点，存在重复顶点；
2. 使用 drawElements 索引绘制，顶点数组仅保存 4 个唯一顶点，索引数组保存 6 个索引编号。

### 实际现象

两种方案画面输出完全相同，都能成功绘制蓝色实心四边形。底层存储方式不同：drawArrays 顶点数组 6 个元素；drawElements 顶点数组仅 4 个元素，额外增加索引数组。

### 我的解释

drawArrays 是平铺存储三角形顶点，重复顶点的数据会在数组内重复存放；drawElements 将唯一顶点单独保存，依靠索引编号重复引用顶点，避免顶点数据重复存储，节省内存。在模型顶点大量复用场景下优势明显。

### 最终结论

drawArrays 编码简单，但共享顶点会造成内存冗余；drawElements 依靠索引复用顶点，减少数据冗余，是复杂三维模型的标准绘制方案