主要观点：通过 WebGL 着色器在网站中添加有趣视觉效果，但它与 CSS 原生不集成，此文展示了绕过此限制从 CSS 影响 WebGL 图形的方法。
关键信息：

• WebGL 着色器由浏览器在 GPU 上运行，用于图形渲染，如渲染四边形。
• 目标是使 WebGL 球体的颜色能根据网站样式动态变化，如切换暗模式等。
• WebGL 不关心 CSS，其着色器不会响应 CSS 变化，需从 JavaScript 设置 uniform 变量来传递数据。
• 从 CSS 获取颜色时，直接获取自定义 CSS 属性值有弊端，从渲染元素的 CSS 属性（如color）获取更可靠，可实时更新。
• 该方法还能响应 CSS 过渡，可直接针对<canvas>元素获取颜色，甚至使用多个颜色属性。
  重要细节：
• 着色器中vPosition是变化变量，在真实中应避免在着色器中使用过多if/else分支。
• 通过uniform4f方法从 JavaScript 设置 uniform 变量，需将颜色值转换为 0 到 1 之间的浮点数。
• 解析rgb或rgba格式颜色的parseRGBA函数实现，使用正则匹配。
• 附录中提到对于新的颜色模型如oklch()，可创建新<canvas>元素转换为 RGB，但速度较慢。