角度可视化

1 / 15

📝 练习目标

练习着色器中常用的数学基础积木。

💡 💡 教程内容

练习着色器中常用的数学基础积木。

概览

  • 用极角作为渐变因子。

学习目标

  • 理解效果背后的数学

前置知识

  • uv-coordinates

关键概念

  • 角度来自 atan(y, x)
float a = atan(p.y, p.x);
  • 把角度归一化到 [0,1] 并作为插值因子。
float t = (a + PI) / (2.0 * PI);

如何实现(步骤)

  • 居中坐标:p = vUv - 0.5
  • 角度:a = atan(p.y, p.x)
  • 归一化:t = (a + PI) / (2*PI)
  • t 混合颜色。

自检

  • 是否能无错误编译?
  • 输出是否符合目标?
  • 关键数值是否在 [0,1]

常见坑

  • 如果画面全黑,检查遮罩/因子是否一直为 0。

GLSL 代码编辑器

正确代码预览

当前代码预览