AI 协作日志

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

# 实验二 AI协作记录（请据实际情况填写）
## AI 协作环节 1・Koch 分形算法实现

### 任务目标与初始思路

完成实验 Task-B 的 Koch 雪花绘制，核心是计算线段向外凸起的第三个顶点 R。最初的思路是：对线段 PQ 的向量进行 60° 旋转得到凸起顶点；因为基础三角形是逆时针排列，直觉上认为向量左转 + 60° 会朝向轮廓外侧。但不确定绕行方向和旋转方向的对应关系，担心方向写反会导致分形向内凹陷，需要明确逆时针轮廓的边对应的正确旋转角度。另外对分形层级与线段数量的对应关系存疑，想验证 level=3 时线段总数为 192 的推导是否正确。

### 向 AI 提问的核心问题

基础三角形顶点按逆时针顺序排列，沿线段 A 到 B 的方向行进，要让分形凸起在轮廓外侧，向量 PQ 应该旋转 + 60° 还是 - 60°？请讲清楚背后的几何原理，不要直接给出完整的 Koch 实现代码。另外请说明分形 level=3 时，线段总数为什么是 192 条。

### AI 给出的核心思路

1. 对于逆时针绕行的多边形外轮廓，沿 A→B 方向前进时，外侧在行进方向的右侧，因此需要将 PQ 向量向右旋转 60°（即旋转角为 - 60°）；若使用 + 60° 左转，顶点会落入多边形内部，分形会向内凹。
2. 分形每升一级，每条线段会被拆分为 4 条更短的线段；初始三角形有 3 条边，因此总线段数公式为\(3 \times 4^{level}\)。level=3 时，\(3 \times 4^3 = 3 \times 64 = 192\)。
3. 验证建议：可以先输出单个线段的三个关键点坐标，分别代入两种旋转矩阵计算 R 点，通过坐标位置判断内外侧，再代入完整代码绘图验证。

### 验证过程与实测结果

1. 先按照初始直觉编写 + 60° 旋转矩阵代码，运行后观察画面：所有分形的三角凸起都朝向雪花内部，整体呈现向内凹陷的效果，和标准 Koch 雪花形态不符。
2. 将旋转角度修改为 - 60°（即右转 60°），重新运行代码：所有分形尖角均朝向外侧，雪花轮廓形态正确。
3. 逐层级统计渲染的线段数量：level=0 时为 3 条，level=1 时为 12 条，level=2 时为 48 条，level=3 时为 192 条，level=4 时为 768 条，和公式计算结果完全一致。

### 采纳情况与最终结论

部分采纳 AI 结论。旋转方向的判断结论正确，但没有直接复用 AI 给出的完整线段拆分函数，而是自主实现了线段三等分点计算，仅参考了旋转矩阵的数学表达式。
结论：逆时针排列的轮廓线段 A-B，要实现向外凸起的分形，必须对向量执行 - 60° 右转；线段总数公式\(3 \times 4^n\)经过实际渲染统计验证，结果准确。

## AI 协作环节 2・画布鼠标坐标映射调试

### 故障现象描述

在开发 Task-D 的鼠标交互绘制功能时，出现坐标映射错误：鼠标点击画布上半区域，图形会绘制在画布下半部分；点击下半区域，图形出现在上半部分，Y 轴方向完全反向，所有点、线、图形都呈现上下镜像的效果。（该故障为调试过程中人为引入，用于验证排查流程）

### 初步排查方向

猜想 1：鼠标事件使用了 clientX/Y，没有减去画布在页面中的偏移量，导致坐标原点错误？
猜想 2：canvas 元素的 CSS 显示尺寸和实际像素尺寸不一致，造成坐标缩放比例错误？
猜想 3：WebGL 的 NDC 坐标系 Y 轴方向与浏览器画布 Y 轴方向相反，代码中缺少 Y 轴翻转的转换步骤？

### 向 AI 提问的核心问题

WebGL2 中通过鼠标点击在 canvas 上绘制图形，出现点击位置和绘制位置上下颠倒的问题，clientX/clientY 转 NDC 坐标时 Y 轴方向错误，有哪些排查方向？请给出分步验证的步骤，不要直接给出完整代码。

### AI 建议与逐项验证

1. 验证鼠标坐标到画布像素坐标的转换：通过 getBoundingClientRect () 获取画布位置，用 clientX/Y 减去 left/top 得到画布内像素坐标，打印数值验证是否随鼠标位置正确变化。✅测试：打印 xCanvas、yCanvas 数值，鼠标移动时数值同步变化，范围与画布尺寸匹配，该环节无问题。
2. 检查画布实际像素尺寸：对比 canvas.width/height 和 CSS 设置的宽高，确认是否存在缩放导致的坐标偏差。✅测试：两者数值一致，无缩放问题。
3. 确认 NDC 坐标系的 Y 轴方向：WebGL 的 NDC 坐标 Y 轴向上，原点在中心；而浏览器画布 Y 轴向下，原点在左上角，必须通过公式`yNDC = 1 - 2 * yCanvas / canvas.height`做 Y 轴翻转。❌排查发现代码中缺少该翻转步骤，是故障的根本原因。

### 根本原因与修复验证

根本原因：浏览器画布的 Y 轴原点在左上角、方向向下，而 WebGL 的 NDC 坐标系 Y 轴原点在中心、方向向上，两者方向相反，代码未做 Y 轴翻转转换，导致坐标上下颠倒。
修复：补充 Y 轴翻转代码`const yNDC = 1 - 2 * yCanvas / canvas.height;`。
验证结果：点击画布四个角点，图形绘制位置与鼠标点击位置完全重合；点、线段、矩形等绘制工具均正常，坐标映射准确。

## AI 协作环节 3・主题作品方案设计

### 主题与预期效果

实验 Task-E 选定主题为**绽放**。预期效果：复用已实现的 Koch 雪花分形和旋转动画能力，新增额外几何元素模拟绽放的视觉效果，支持鼠标交互控制图案位置，全部通过 WebGL 绘制实现，不使用 CSS 图片资源。需要对比两套不同的实现方案，选出更符合实验要求的方案。

### 向 AI 提问的两套方案咨询

基于 WebGL2 和 Koch 雪花实现 “绽放” 主题，设计两套差异化的实现方案，分别说明图元规模、实现难度、代码可解释性，不需要提供完整可运行代码，用于方案对比和实验选型。

### 方案对比与选型理由

> 
> 方案一：分形花瓣递进绽放
> 核心思路：在 Koch 雪花的每个端点处继续递归生成分支结构，模拟花瓣层层绽放的效果，通过分形层级控制绽放程度。

- 特点：视觉层次丰富，花瓣细节多；但分形嵌套会导致顶点数量随层级指数级增长，性能开销大；递归逻辑复杂，调试难度高；新增代码与原有 Koch 代码高度耦合，难以区分复用部分和新增部分。
- 选型结果：不采纳。

> 
> 方案二：核心雪花 + 辐射光效绽放
> 核心思路：以 Koch 雪花作为花朵核心主体，外围新增闭合环形光圈、放射状直线辐条、辐条末端光点三类几何元素，模拟光芒向外绽放的效果；交互上通过滑块控制分形层级与缩放大小，按钮控制旋转启停，新增鼠标点击移动图案中心的功能。

- 特点：图元数量可控，性能稳定；新增的环形、射线、光点三类几何模块边界清晰，和原有 Koch 代码完全分离，容易定位和说明；交互逻辑简单直观，能够很好地复用实验 B、C 的已有能力。
- 选型结果：采纳该方案。

选型理由：本实验更看重代码的可解释性、模块的可区分度，而非单纯的视觉效果。方案二可以清晰划分复用代码和新增几何 / 交互部分，满足 Task-E 要求的 “至少新增两类几何、新增一类交互” 的硬性指标，也便于实验报告的阐述。

### 实现与测试结果

实现上，复用了 Task-B 的 Koch 分形生成函数、线段拆分逻辑，复用了 Task-C 的 requestAnimationFrame 旋转动画框架。
新增内容：①外围环形光圈；②径向放射辐条；③辐条端点光点。
新增交互：鼠标点击画布转换为 NDC 坐标，实时修改图案的中心偏移量。
测试结果：调整分形层级滑块，雪花复杂度同步变化；旋转开始 / 暂停按钮功能正常；鼠标点击画布任意位置，图案中心移动到对应位置；复位按钮可恢复所有初始状态。
配套编写了简短的设计说明，满足主题作品的验收要求。

## 其他 AI 辅助记录

使用工具：豆包 AI

1. 开发 Task-A 到 E 各模块时，咨询 AI 梳理各任务的开发要点，区分哪些数据需要存入 GPU 顶点缓冲区，哪些属于每帧更新的 Uniform 变量。
提问关键词：`webgl实验taskC，顶点缓冲区数据和uniform变量的区别，requestAnimationFrame动画循环的注意事项`
2. 完成实验思考题 A-D 时，向 AI 咨询问题的核心原理，再结合自己编写的代码进行理解和整理，形成实验报告内容，未直接复制 AI 生成的答案。