AI 协作日志

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

# 实验一 AI协作记录

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

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

### 我的目标
学会 WebGL 基础绘制流程，掌握顶点数据上传 GPU、缓冲区、着色器、drawArrays 的完整数据流，修改顶点与颜色参数，渲染一个三角形
### 提示词
帮我完成 WebGL 任务 1，写三角形顶点，设置颜色，给出可运行完整代码，解释 WebGL 从 JS 数据到画面的数据流
### AI关键回答摘要
1. 在 JS 中用 Float32Array 存放顶点坐标，坐标范围 - 1~1；
2. 完整流程：创建 Buffer→绑定 Buffer→上传顶点数据→获取顶点属性地址→开启属性→设置 uniform 颜色→调用 drawArrays；
3. drawArrays 触发 GPU 执行着色器，顶点着色器处理位置，片元着色器填充颜色。
### 我的判断
AI 给出的流程顺序符合 WebGL 状态机逻辑，但最初给出的`let`声明变量，在这份老式`"use strict"`模板里可能存在语法问题，需要替换为`var`。顶点坐标排布需要合理，防止图形超出画布
### 验证方法
复制代码，把`let`改成`var`，打开网页，修改顶点坐标、颜色数值观察图形变化
### 验证结果
修改 var 之后代码无报错，成功渲染三角形；改动顶点会改变三角形位置形状，修改 uniform4f 的值会改变整体颜色
### 修正后的结论
WebGL 绘制的核心数据流：JS 构造顶点数组→存入 GPU 缓冲区→顶点着色器读取位置→光栅化生成片元→片元着色器输出颜色；WebGL 是状态机，绘制时使用当前绑定的缓冲区和 uniform 参数
---

## AI协作2：程序调试

### 现象
初始代码顶点数组为空，没有绘制调用，画布清空后看不到图形；要求只用 4 个顶点绘制实心四边形
### 我的初步判断
需要填写 4 组顶点坐标，选择合适图元；4 个顶点想要拼成实心四边形适合 TRIANGLE_STRIP 三角带模式
### 给AI的提示词
帮我完成 WebGL 任务 2，填写 4 个顶点数据，使用 TRIANGLE_STRIP 模式绘制完整四边形，补全 drawArrays 代码并给出可运行的完整代码
### AI给出的关键建议
1. TRIANGLE_STRIP 可以用 4 个顶点拼接两个三角形组成四边形，顶点顺序采用左上、右上、左下、右下；
2. 顶点坐标控制在 - 1~1 之间；
3. 可以切换 POINTS、LINE_STRIP、TRIANGLES 等多种图元做对比
### 我实际进行的测试
1. 填入 4 组顶点，补全 TRIANGLE_STRIP 绘制代码；
2. 临时更换不同图元模式，分别观察渲染效果。
### 测试结果
TRIANGLE_STRIP 成功渲染实心四边形；POINTS 只显示 4 个顶点；LINE_STRIP 画出不闭合折线；TRIANGLES 在 4 顶点下无法形成完整实心四边形。
### 最终原因
图元模式决定顶点如何被组装成基础图形。TRIANGLE_STRIP 依次复用相邻顶点生成三角形，节省顶点数量。
### 是否采纳AI建议及理由
采纳。顶点排布和绘图模式选择符合实验需求，多模式对照帮助理解不同图元的差异
---

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

### 我的目标
在同一张画布上先后绘制两个独立图形，每个图形使用独立 Buffer、不同颜色，理解多次绘制的状态切换。
### 提示词
补全 task3.js，左侧放三角形，右侧放四边形，各自独立 Buffer，颜色不一样，给出完整代码。
### AI关键回答摘要
1. 三角形、四边形分开定义顶点数组；
2. 每个图形都要独立创建 Buffer，一套 Buffer 对应一组顶点；
3. 每次绘制前绑定对应缓冲区、设置 uColor 颜色，再调用 drawArrays；三角形用 TRIANGLES，四边形用 TRIANGLE_STRIP。
### 对照实验
只写一个 Buffer、只设置一次颜色，尝试一次性画出两个图形
### 实际现象
单 Buffer 方案无法实现，只能画出最后一组图形；必须每绘制一个物体，重新绑定对应数据、更新颜色
### 我的解释
WebGL 绘制会使用当前激活的缓冲区与着色器 uniform 状态。多物体渲染需要**依次切换状态、分批绘制**，也就是多次 drawArrays
### 最终结论
多物体绘制不是一次性上传所有数据，而是循环 “绑定数据→设置着色器参数→绘制” 的流程