AI 协作日志

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

# 实验一 AI协作记录

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

## AI协作1

## 任务3，同一画布绘制多个图元
1.提示词：在同一个canvas上绘制三角形和四边形，使用不同buffer、不同uniform颜色
2.AI回答：WebGL一次drawArrays只能绘制一组图元。画多个物体要：多次创建buffer，依次bindBuffer/bufferData，设置vertexAttribPointer，修改uniform颜色，多次调用drawArrays。每次绘制前更新uColor，就能给不同物体不同颜色。注意变量名要和getAttribLocation/getUniformLocation返回的变量一致，名字写错会报变量未定义。
3.自己理解：render函数每次都会clear画布，然后按顺序绘制。先画三角，再画矩形。
4.操作：定义两组Float32Array顶点数组；分别创建buffer，填充顶点数据；设置vPosition属性；设置uColor；调用drawArrays。
5.现象：画布出现红色三角形、黄色四边形，两个图形分开。
6.结论：多次调用drawArrays就可以在同一张画布绘制多个几何体。每次绘制前，可以修改uniform变量，实现不同颜色。每个几何体可以使用独立缓冲区保存顶点。

---

## AI协作2

## 任务4 顶点颜色插值varying
1. 提示词：实现三角形顶点颜色渐变，使用attribute顶点颜色，varying传递颜色
2. AI回答：
uniform是全局统一值，整个图形同一个颜色。attribute是每个顶点各自携带的数据。varying变量可以把顶点着色器的数据传递到片元着色器，GPU自动在图元内部插值，实现平滑渐变。
需要两套缓冲区：坐标buffer、颜色buffer；颜色使用RGBA四通道。顶点着色器将vColor赋值给varying变量fColor，片元着色器读取fColor输出颜色。
3. 自己理解：
每个顶点可以带独立颜色，三角形内部像素的颜色由三个顶点颜色插值算出。
4. 操作：
定义vertices顶点坐标数组；定义colors数组，每个顶点4个浮点数RGBA。创建颜色buffer，上传颜色数据；获取vColor属性位置，设置vertexAttribPointer(...,4,...)，开启属性数组。调用drawArrays绘制三角形。
5. 现象：三角形三个角分别红、绿、蓝，内部颜色平滑过渡。
6. 结论：varying变量用于顶点到片元的数据插值，实现渐变效果。


---

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

### 我的目标

### 提示词

### AI关键回答摘要

### 对照实验

### 实际现象

### 我的解释

### 最终结论