挑战任务1:增加简单交互(改色)
用颜色控件修改任务3中两个对象的颜色并重新绘制,观察 uniform 的运行时更新。
说明(对应挑战任务要求)
- 哪个 JavaScript 变量发生改变:保存当前颜色的
triangleColor/quadColor。选择颜色后hexToRgb()把 "#RRGGBB" 转为 0~1 的 RGB 分量并更新这两个变量。 - 哪个 uniform 被更新:着色器中的
uColor。每次重绘前调用gl.uniform4f(uColor, r, g, b, 1.0),把新颜色传给 Fragment Shader。 - 为什么几何 Buffer 不需要重新创建:Buffer 中保存的是顶点坐标(几何数据),颜色并不在 Buffer 里,而是由 uniform 在运行时传入。只改变颜色时顶点数据没有变化,因此只需要更新 uniform、再次调用
gl.drawArrays()即可,Buffer 无需重建。
等待运行...