AI 协作日志

学生 Web 实验作品平台
学号：202412211401003 · 来源：ai-log.md
# 实验一 AI协作记录

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

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

### 我的目标
了解每个任务核心代码
### 提示词
我是初学者，请你给我总结并讲解每个任务的核心代码以及用法，我们从任务 1 开始
### AI关键回答摘要
### 任务 1 操作要求对照

1. 修改颜色：修改`gl.uniform4f(...)`的 RGBA 数值，避开红色。
2. 修改至少一个顶点坐标：改动`Float32Array`里面任意一组 x、y，三角形形状就变。
3. 代码中已经把要求的注释全部写好。
### 我的判断

### 验证方法
实操
### 验证结果

### 修正后的结论



### 我的目标
了解参数代表含义
gl.uniform4f(uColor, R,G,B,A,1.0)
### 提示词
每个参数各代表什么
### AI关键回答摘要
参数	含义	取值范围
参数 1：uniformLocation	uniform 变量的地址；由gl.getUniformLocation(program, "uColor")获取，告诉 GPU 要修改哪个着色器 uniform 变量	数字，不要手动写死
参数 2：v0(R)	红色通道 Red	0.0 ~ 1.0
参数 3：v1(G)	绿色通道 Green	0.0 ~ 1.0
参数 4：v2(B)	蓝色通道 Blue	0.0 ~ 1.0
参数 5：v3(A)	Alpha 透明度通道	0.0(完全透明) ~ 1.0(完全不透明)

### 我的判断

### 验证方法

### 验证结果

### 修正后的结论


### 我的目标
了解创建图形的代码流程
### 提示词
从任务三开始我还是不太懂这个代码流程，包括创建一个图形的代码流程，和多图形代码流程
### AI关键回答摘要
// 1. JS准备顶点数组
const vertices = new Float32Array([x,y, x,y, x,y]);

//2. 创建GPU缓冲区对象（在GPU显存，不在JS内存）
const buf = gl.createBuffer();

//3. 绑定！把buf设置为「当前正在工作」的ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, buf);

//4. 上传JS数组 → GPU显存的这个buffer里面
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

//5. 获取shader里面 in vPosition 的位置编号
const vPosition = gl.getAttribLocation(program, "vPosition");

//6. ✨重点：vertexAttribPointer，读取规则，**只作用于【当前bindBuffer绑定的那个buffer】**
gl.vertexAttribPointer(vPosition,2,gl.FLOAT,false,0,0);

//7. 启用属性，不写直接黑屏
gl.enableVertexAttribArray(vPosition);

//8. 设置uniform颜色
const uColorLoc = gl.getUniformLocation(program,"uColor");
gl.uniform4f(uColorLoc, 1,0,0,1);

//9. 真正画画！GPU按照现在全部状态渲染
gl.drawArrays(gl.TRIANGLES,0,3);

### 我的判断

### 验证方法

### 验证结果

### 修正后的结论


### 我的目标
任务五的核心代码重点是什么
### 提示词
任务五的核心代码重点是什么
### AI关键回答摘要
> 任务 5 的前提：**顶点数据完全不变，只改变 `gl.drawArrays()` 的第一个参数（图元 mode）**，对比不同图元如何解释同一组顶点。

```
// ① TODO5‑1：复制任务2的4个顶点，顶点、顺序不能改！
var vertices = new Float32Array([
    -0.6,  0.4, //0 左上
    -0.6, -0.4, //1 左下
     0.2,  0.4, //2 右上
     0.2, -0.4  //3 右下
]);

// buffer、vertexAttribPointer、enable、uniform设置全部和前面任务一样
// …省略重复缓冲区代码…

function render(vertexCount)
{
    gl.clear(gl.COLOR_BUFFER_BIT);
    if (vertexCount > 0) {
        // ② TODO5‑2：只修改第一个参数 mode！顶点数量 vertexCount保持不变=4
        gl.drawArrays(gl.LINE_LOOP, 0, vertexCount);
    }
}
```

## 📌四大核心重点

### 1. 核心思想：图形 =「顶点数据」+「图元模式 (mode)」

**顶点数组本身不改变图形；mode 规定 GPU 怎么把一串顶点组装成点 / 线 / 三角形面。**

> 
> 同一个 4 个顶点，换 mode，渲染结果完全不一样。

### 2. drawArrays 参数重点

```
gl.drawArrays(mode, start, count);
```

- `mode`：图元模式，任务 5 就是专门改这个；
- `start`：从第几个顶点开始，固定写`0`；
- `count`：使用多少个顶点，这里固定`4`，**不要改！任务 5 要求顶点数量不变**。

### 3. 各个 mode 实验现象（必背，实验报告要写）

顶点顺序：`0左上，1左下，2右上，3右下`

表格

| mode | 效果 | 核心解释 |
| --- | --- | --- |
| `gl.TRIANGLE_STRIP`(任务 2 原版) | ✅填充四边形 | 三角带，复用相邻顶点，生成 2 个三角形 (0,1,2) (1,2,3) |
| `gl.LINE_LOOP` | 空心闭合线框，**无填充** | 线图元；依次连线，最后自动从最后点连回起点；只画线，**不产生面** |
| `gl.LINE_STRIP` | 开放折线：0‑1‑2‑3，不闭合 | 依次连接顶点，不会自动闭合 |
| `gl.POINTS` | 只画出 4 个小点，无线无面 | 只渲染顶点本身，不连线、不构面 |
| `gl.TRIANGLES` | 只画前 3 个顶点的三角形，第 4 个顶点直接丢弃 | 每**3 个顶点为一组独立三角形**；4 个点只能凑一组，剩下 1 作废 |

> 
> ✨关键区分：
> 
> 
> - **三角形类图元**：`TRIANGLES / TRIANGLE_STRIP / TRIANGLE_FAN` → 可以生成填充面；
> - **线、点图元**：`LINE_STRIP / LINE_LOOP / POINTS` → **只有线条 / 点，永远没有填充**。
### 我的判断

### 验证方法

### 验证结果

### 修正后的结论


---

## AI协作2：程序调试

### 现象

### 我的初步判断

### 给AI的提示词

### AI给出的关键建议

### 我实际进行的测试

### 测试结果

### 最终原因

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

---

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

### 我的目标

### 提示词

### AI关键回答摘要

### 对照实验

### 实际现象

### 我的解释

### 最终结论