AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标
搞懂JS Float32Array的数据，经过哪些步骤最终绘制出三角形，理清Buffer、vertexAttribPointer、着色器、光栅化、片元着色器各自作用。
### 提示词
在屏幕上做一个三角形图案， Buffer、vertexAttribPointer、Vertex Shader、光栅化和 Fragment Shader 都是干嘛的。我需要怎么改代码，写代码
### AI关键回答摘要
1.JavaScript 里的`Float32Array`顶点数组在**CPU 内存**，GPU 不能直接读 JS 变量。
2.Buffer 是 GPU 显存里一块内存；`bufferData`把 CPU 的顶点数据拷贝上传到 GPU 显存。后续着色器读取的是这块显存里的数据，不是 JS 的 vertices 数组。
3.vertexAttribPointer（顶点属性指针）：告诉 GPU：怎么解析当前绑定的 Buffer 里的二进制字节。
4.Vertex Shader 顶点着色器（运行在 GPU，每个顶点执行 1 次）输入：从 Buffer 传过来每个顶点坐标`vPosition`。
输出：内置变量`gl_Position`，输出裁剪空间坐标，决定这个顶点画在画布哪个位置。
对三角形 3 个顶点，顶点着色器一共执行**3 次**。
5.图元组装：根据`gl.drawArrays(gl.TRIANGLES,0,3)`，把 3 个顶点组装成一个三角形面片；
6.光栅化：把几何三角形（数学三角形）转换成一堆片元 (fragment，对应屏幕潜在像素)。
三角形内部每一个像素位置都会生成一个片元，同时自动做属性插值（比如位置、颜色）。
7.Fragment Shader 片元着色器（GPU，每个片元执行 1 次）

**完整数据流**
JS Float32Array → bufferData 上传 GPU Buffer → vertexAttribPointer 解析 
→ VertexShader (每个顶点) → 图元组装 → 光栅化生成片元 → FragmentShader (每个片元) → canvas 像素。
### 我的判断
bindBuffer不是拷贝数据，只是切换当前被操作的buffer；vertexAttribPointer必须在bindBuffer之后调用，绑定的是“当前激活的buffer”。
### 验证方法
在task.js里面验证
### 验证结果
// 创建并绑定Buffer
    var vBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
// 上传数据到GPU
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 建立顶点属性与Buffer的联系
    var vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);
// 设置颜色
    var uColor = gl.getUniformLocation(program, "uColor");

### 修正后的结论
bindBuffer只是设置当前对象；vertexAttribPointer记录“此刻绑定的buffer”；drawArrays才真正启动整个图形流水线，之前都是配置阶段。

---

## AI协作2：程序调试

### 现象
绘制三角形步骤不理解
### 我的初步判断
绘制三角形步骤不理解
### 给AI的提示词
绘制这个三角形我应该怎么绘制
### AI给出的关键建议
1. 三角形顶点坐标目前`0.0,0.3 / -0.8,-0.4 /0.0,0.0`，有一部分跑到中间，会和右边四边形有重叠，需要把三角形整体**挪到画布左侧（x 全部负数区域）**。
2. 四边形顶点已经在 x=0.3~0.7（画布右侧），位置没问题。
3. 三角形图元模式：`gl.TRIANGLES`，3 个顶点。
4. 四边形用`gl.TRIANGLE_STRIP`，4 个顶点。

WebGL 裁剪空间坐标：x∈[-1,1]，y∈[-1,1]；x 负数 = 屏幕左边，x 正数 = 屏幕右边。
### 我实际进行的测试
在task3里面进行测试
### 测试结果
绘制出了三角形
### 最终原因
不理解其中的步骤
### 是否采纳AI建议及理由
已采纳理解绘制三角形的步骤
---

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

### 我的目标
理解顶点和颜色是怎么样变化的，各个元素是什么样的
### 提示词
根据这个让我理解位置属性 vPosition 每个顶点提供 2 个 float，而颜色属性 vColor 每个顶点提供 4 个 float，这两个区别
### AI关键回答摘要
位置只需要 x,y 二维坐标，2 个浮点数；颜色 RGBA 包含红、绿、蓝、透明度共 4 个分量，需要 4 个浮点数。vertexAttribPointer 的 size 参数指定每个顶点读取多少个连续 float。
### 对照实验
在task4里面将两种方法调试对比
### 实际现象
三角形颜色严重错乱，出现杂色，没有预期红‑绿‑蓝渐变；恢复回4之后，渐变恢复正常。
### 我的解释
把4改成3，GPU每读3个浮点数当作一套颜色，字节偏移错位，读取到下一个顶点的数据，颜色完全混乱。
### 最终结论
### vertexAttribPointer第二个参数，决定GPU每个顶点读取多少个浮点数作为该属性的值；位置2，RGBA颜色4，必须和存进Buffer的数据结构匹配。