AI 协作日志

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

# 实验一 AI协作记录

> 本记录用于整理实验过程中与 AI 协作的关键环节，重点记录问题分析、个人判断、实际测试和结果核验，而不是直接使用 AI 生成全部代码。

---

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

### 我的目标

理解 WebGL 2.0 中，从 JavaScript 中定义顶点数据到最终在 Canvas 上显示图形的完整过程，明确 Float32Array、Buffer、顶点属性、Vertex Shader、图元组装、光栅化和 Fragment Shader 各自的作用。

### 提示词

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

### AI关键回答摘要

AI 解释了 WebGL 绘制图形的基本数据流：

1. 使用 JavaScript 中的 Float32Array 保存顶点坐标。
2. 使用 gl.createBuffer() 创建缓冲对象，并通过 gl.bindBuffer() 绑定 Buffer。
3. 使用 gl.bufferData() 将顶点数据上传到 GPU。
4. 使用 gl.vertexAttribPointer() 指定顶点属性如何从当前绑定的 Buffer 中读取数据，并通过 gl.enableVertexAttribArray() 启用该属性。
5. Vertex Shader 接收顶点属性，并通过 gl_Position 设置顶点的裁剪空间位置。
6. 图元组装阶段根据 gl.drawArrays() 指定的绘制模式，将顶点组织成点、线或三角形。
7. 光栅化阶段将图元转换为片段，并对相关属性进行插值。
8. Fragment Shader 计算片段颜色，最终形成 Canvas 上的图形像素。

### 我的判断

我最初认为，定义好顶点坐标后，调用绘制函数就可以直接显示图形。通过 AI 的解释，我认识到顶点数据还需要经过 Buffer 上传、顶点属性配置和 Shader 处理等步骤。

我认为理解 Buffer 与顶点属性之间的联系尤其重要，因为即使顶点数据正确，如果属性读取方式设置错误，也可能无法得到预期图形。

### 验证方法

打开 task1.html 和 js/task1.js，依次检查顶点数组、Buffer 创建与上传、顶点属性配置、Shader 初始化以及 gl.drawArrays() 调用。

随后修改三角形的顶点坐标和 uniform 颜色，重新运行页面，观察图形形状和颜色是否发生相应变化。

### 验证结果

程序能够正常显示三角形。修改顶点坐标后，三角形的形状发生变化；修改 uniform 颜色后，三角形的整体颜色也随之变化。

通过检查代码，我确认顶点数据需要经过 Buffer 和顶点属性配置才能正确提供给 Vertex Shader。

### 修正后的结论

WebGL 绘制不是简单地将 JavaScript 数组直接显示到屏幕，而是需要经过数据上传、顶点属性读取、顶点着色、图元组装、光栅化和片段着色等步骤。各阶段共同完成从顶点数据到最终像素的转换。

---

## AI协作2：程序调试

### 现象

在完成任务5的图元方式探究时，页面能够正常显示图形，但使用 gl.LINE_LOOP 绘制后，出现了交叉的线条，而不是预期中的普通四边形轮廓。

### 我的初步判断

我最初怀疑是 WebGL 绘制出现异常，或者顶点坐标填写错误。但页面可以正常显示图形，说明程序至少已经完成了基本初始化和绘制调用。

因此，我进一步考虑问题是否与图元类型和顶点连接顺序有关。

### 给AI的提示词

我在 WebGL2 任务5中复制了任务2的四个顶点，将 gl.drawArrays() 的图元类型改成 gl.LINE_LOOP。运行后，四边形出现了交叉线条。请分析可能原因，解释顶点连接顺序如何影响结果，并告诉我怎样通过代码检查验证，不要直接重写整个程序。

### AI给出的关键建议

AI 建议重点检查以下内容：

1. 确认任务5使用的顶点坐标和顺序是否与任务2一致。
2. 检查 gl.drawArrays() 中使用的图元类型。
3. 理解 LINE_LOOP 会按照顶点给出的顺序依次连接相邻顶点，并连接最后一个顶点与第一个顶点。
4. 对比 TRIANGLE_STRIP 和 LINE_LOOP 的图元组织方式，判断交叉线条是否由顶点连接顺序造成。

### 我实际进行的测试

我检查了 task5.js 中的四个顶点，确认其顺序为左上、左下、右上、右下，并检查了绘制调用，确认使用的是 gl.LINE_LOOP。

随后，我根据顶点顺序分析线段的连接关系，并将其与任务2使用的 gl.TRIANGLE_STRIP 进行对比。

### 测试结果

任务5页面能够正常运行，但线条出现交叉。检查发现，当前顶点顺序下，LINE_LOOP 会依次连接左上、左下、右上、右下，最后回到左上，因此会产生交叉线段。

### 最终原因

问题不是 WebGL 初始化失败，而是顶点排列顺序与 LINE_LOOP 的连接规则共同造成了交叉线条。

TRIANGLE_STRIP 按照连续顶点组成三角形，而 LINE_LOOP 按照顶点顺序连接线段。相同的顶点数据采用不同图元类型时，会得到不同的图形结果。

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

我采纳了 AI 关于检查图元类型和顶点连接顺序的建议，并结合实际代码进行了核验。

本实验要求任务5复制任务2的顶点数据并改变 draw mode，因此我保留了相同的顶点数据，将交叉线条作为对照实验现象进行分析，而不是直接修改顶点顺序来消除交叉。

通过这次实验，我认识到顶点数据是否正确与最终图形是否符合预期并不是同一个问题，还需要考虑图元的组织规则。

---

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

### 我的目标

理解任务4中位置 Buffer 和颜色 Buffer 的区别，掌握如何将每个顶点的颜色传递给 Vertex Shader，并理解为什么三角形内部会出现连续的颜色渐变。

### 提示词

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

### AI关键回答摘要

AI 解释了两个属性分别承担不同的作用：

1. vPosition 保存顶点的空间坐标，每个顶点使用两个 float 表示二维坐标 x、y。
2. vColor 保存顶点颜色，每个顶点使用四个 float 表示 R、G、B、A。
3. 两个属性可以分别使用独立的 Buffer 保存，通过 gl.bindBuffer() 和 gl.vertexAttribPointer() 将数据源与相应的顶点属性关联起来。
4. gl.vertexAttribPointer() 中的 size 参数决定每个顶点读取多少个分量，因此位置属性设置为2，颜色属性设置为4。
5. Vertex Shader 通过输出变量传递顶点颜色，光栅化阶段对颜色进行插值，Fragment Shader 接收到的是插值后的颜色值。

### 对照实验

我在 task4.js 中分别创建位置 Buffer 和颜色 Buffer。

位置 Buffer 使用 vertices 数组，并将 vPosition 的每顶点读取分量数设置为2；颜色 Buffer 使用 colors 数组，并将 vColor 的每顶点读取分量数设置为4。

为了理解参数的作用，我还计划将颜色属性的读取分量数从4临时修改为3，观察输出结果，再恢复为4。

### 实际现象

在正确配置位置属性和颜色属性，并使用红色、绿色和蓝色作为三个顶点的颜色后，程序能够绘制出具有连续颜色渐变的三角形。

对于将颜色属性读取分量数改为3后的结果，需要以实际运行观察为准，并在完成测试后补充具体现象。

### 我的解释

位置 Buffer 与颜色 Buffer 保存的是不同类型的顶点信息。位置属性负责确定顶点的位置，颜色属性负责提供顶点的 RGBA 颜色。

两个属性虽然来自不同的 Buffer，但可以通过各自的顶点属性位置独立读取。由于顶点颜色在光栅化阶段进行插值，三角形内部的片段会获得不同的颜色值，因此最终显示为连续渐变，而不是只有三个纯色区域。

### 最终结论

WebGL2 可以为同一个顶点设置多个属性，并通过不同的 Buffer 和顶点属性配置分别传