AI 协作日志

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

# \# 实验一 AI协作记录

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

# \### 我的目标

# 理解从JS Float32Array到屏幕三角形完整WebGL2数据流，理清Buffer、vertexAttribPointer、顶点着色器、光栅化、片元着色器各自作用。

# \### 提示词

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

# \### AI关键回答摘要

# 1.JS在CPU内存创建Float32Array存放顶点；2.createBuffer创建GPU缓冲区对象；bindBuffer绑定目标；bufferData把CPU数据上传GPU显存；3.getAttribLocation拿到shader属性位置；vertexAttribPointer设置如何从当前绑定Buffer读取数据，每个顶点读取几个分量、类型、步长偏移；enableVertexAttribArray开启属性；4.VertexShader逐个顶点执行；5.图元组装，光栅化把图元转为大量片元，对out输出变量插值；6.FragmentShader逐个片元执行输出像素颜色，写入framebuffer最终显示到canvas。

# \### 我的判断

# 概念大致看懂，但对vertexAttribPointer绑定“当前绑定buffer”这点一开始理解模糊。

# \### 验证方法

# 打开task1.html对照task1.js逐行比对AI描述，找到每一步对应的代码。

# \### 验证结果

# 确认：bindBuffer之后调用vertexAttribPointer，是将当前绑定ARRAY\_BUFFER和vPosition属性关联；不是buffer和属性永久绑定。

# \### 修正后的结论

# vertexAttribPointer不是绑定buffer对象ID，而是使用此刻\*\*正在被bindBuffer绑定\*\*的那个Buffer作为数据源，这点是多Buffer切换时容易踩坑点。

# 

# \## AI协作2：程序调试

# \### 现象

# task3中三角形绘制正常，第二个四边形黑屏不显示。

# \### 我的初步判断

# 可能顶点数量写错，或者忘记enableVertexAttribArray，或者buffer没有bind。

# \### 提示词

# 下面是一段 WebGL2 代码。第一个图形正常，第二个图形没有显示。请不要重写完整程序，只列出最可能的3个原因，并告诉我应该通过什么现象、Console 信息或代码检查逐一验证。

# \### AI建议

# 1.切换新buffer后没有重新调用vertexAttribPointer；2.drawArrays顶点计数参数错误；3.uniform位置获取失败或者没有enableVertexAttribArray；验证方法：console打印属性location看是否‑1；检查drawArrays第三个参数；确认bindBuffer在vertexAttribPointer之前。

# \### 我的测试

# 人为制造错误：注释掉四边形部分的gl.vertexAttribPointer调用，复现黑屏；打印vPositionLoc不为‑1；drawArrays顶点数是4没问题。

# \### 测试结果

# 复现：绑定新Buffer后，没有重新执行vertexAttribPointer，属性仍然读取旧Buffer，数据错乱，四边形无法绘制。

# \### 最终原因

# 更换buffer之后，没有重新调用vertexAttribPointer建立属性读取配置。

# \### 是否采纳及理由：采纳，AI指出的第一条就是本错误根源，验证复现该现象。

# 

# \## AI协作3：顶点属性Buffer读取参数

# \### 我的目标

# 理解位置属性读2个float，颜色属性读4个float，vertexAttribPointer如何读取buffer内连续数据。

# \### 提示词

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

# \### AI关键回答摘要

# vertexAttribPointer第二个参数为每顶点分量计数。GPU遍历顶点：每读取N个float作为该顶点属性值；位置每个顶点2个float(x,y)；颜色每个顶点4个float(RGBA)。两个buffer独立，各自bind之后设置自己的分量数量。若分量数目与数据实际不符，会错位读取后面内存，颜色错乱。

# \### 对照实验

# task4把颜色vertexAttribPointer第二个参数从4改为3运行。

# \### 实际现象

# 三角形颜色完全错乱，顶点颜色读取错位，A分量读取相邻内存数据，渐变颜色完全不对。恢复4之后渐变正常。

# \### 我的解释

# 参数3告诉GPU每个顶点只取3个float，RGBA中A分量会读取下一个顶点R值，内存读取错位，颜色出错。

# \### 最终结论

# vertexAttribPointer第二个参数定义每个顶点从buffer读出多少个浮点数作为该属性输入，必须和数据存储格式严格匹配，否则内存读取错位渲染异常。