渐变的立方体

本节我们把“颜色随位置变化”的思路扩展到 3D：使用 法线（normal） 来区分立方体的不同面。法线描述了表面的朝向，是光照、边缘检测等效果的基础数据。

目标

• 理解法线的含义：垂直于表面的单位向量
• 在着色器中使用 normal（并通过 varying 传递到片元阶段）
• 利用法线的 y 分量对“顶部/底部/侧面”做分类着色

现象与解释

以立方体为例：

• 顶面法线大致指向 +Y，即 (0, 1, 0)
• 底面法线大致指向 -Y，即 (0, -1, 0)
• 侧面法线与 Y 轴近似垂直，因此 y 分量接近 0

因此我们可以在片元着色器中用 vNormal.y 判断当前片元属于哪个面。

为什么使用阈值而不是等号

从理论上看，可以判断 vNormal.y == 1.0（顶面）与 vNormal.y == -1.0（底面）。但在实际渲染中，浮点精度与插值会带来误差，因此用阈值更稳健，例如：

• vNormal.y > 0.99 认为是顶面
• vNormal.y < -0.99 认为是底面

动手练习

• 把阈值从 0.99 改成 0.9 或 0.8，观察被“误判”的面积如何变化
• 把侧面颜色改成根据 vNormal.xz 变化的渐变，看看法线能表达哪些方向信息

小结

你已经学会了使用法线来区分表面朝向。下一节我们将引入 uniform，让着色器随时间变化，进入“动画”的世界。