挑战任务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 无需重建。
你的浏览器不支持 HTML5 canvas。
等待运行...