《默特术士》周一随笔第57期：以数学为笔

我一直是个十足的数学书呆子，尤其是在色彩数学方面。我常说：“数学就是我的画笔”。在担任特效（FX）美术师期间，我利用数学来塑造和雕琢程序化纹理，比如云朵、火焰或水流，效果非常出色。

因此，本周在制作角色定制系统时，我发现自己非常熟悉的取色器（Color Picker）并不是 Unity 中自带的标准功能，我必须从零开始制作一个。今天我想分享一下它的实现过程，最后我们再回头看看老朋友：法力闪焰（Mana Flare）。




对于初学者来说，UV 本质上就是一个在两个方向上从 0 到 1 变化的颜色渐变。如果你想象给一张纸涂色并把它包裹在手臂上，UV 就是那张方形纸片。

它们有很多种表现形式，也有很多关于如何巧妙利用这些信息的技巧，但对于今天的技巧，我们只引用最常见的两种：标准（方形）和极坐标（圆形）。两者都有两个轴——x 和 y；半径和角度。

我们的角色取色器需要一个色相环，所以我们从这里开始。制作圆环最简单的方法是画一个圆，然后减去一个较小的圆。“Step”（步进）函数的作用如下：

• “超过该数值为真” - 1，白色
  
• “低于该数值为假” - 0，黑色

半径值输入到我们的 Step 函数中。减法完成后，我们得到了一个白色的圆环，现在我们可以利用 V 值。如果我们简单地让 V 值驱动色相旋转（Hue Rotation），就会得到一个完美的彩虹，并在起点处闭合。将这两者相乘，我们就大功告成了！



接下来我们需要的是饱和度/明度（SV）三角形，这是我首选的界面方案，因为它在最小的空间内提供了最大的自由度。在这里，我们将利用标准的 UV 布局。

使用同样的 Step 函数，我们可以耍点小聪明，利用 U 和 V 值共同驱动 Step，而不是使用一个常量。如果我们直接使用 U 和 V，会得到一条完美的对角线，但我们需要制作一个三角形，所以可以除以 2 来留出一些空间。在对侧和底部使用同样的技巧，将它们再次相乘，我们就得到了一个三角形。

对于颜色，实际上我们已经拥有了所需的一切。V 值从左到右，乘以我们的颜色，就得到了干净的渐变；而 U 值从下到上本身就是一个黑白渐变。两者进行线性混合，就能完美映射到我们的三角形上。

我最喜欢的一点是，这一切纯粹由数学构成，没有纹理，只有数字。这意味着它运行极快，而且非常简洁优雅。没能找到内置的组件确实让我有些意外，但从零开始构建一个也很有趣。此外，我还能够旋转色相环以匹配游戏中的元素布局，虽然是小细节，但很值得。




法力闪焰实际上是上述逻辑的自然延伸。诚然，我确实为闪焰本身使用了纹理，但仅限于运动的部分。球体的外观、平坦的液面、径向线条，都使用了上述相同的技术来创建纹理流动的形状。

我不会深入讲解所有复杂的数学细节，但即使从这张简单的拆分图中，你也能认出很多技术。这里有径向光晕（有的被压缩得更厉害），有纹理流动的圆环。主体球是一个带有菲涅尔边缘（Fresnel edge，即边缘处更亮）的圆，而表面则是另一个被压缩的圆。



这里唯一真正的难点在于让椭圆随 Y 轴高度适当地缩放，以完善视觉错觉。甚至还有一个简单的“上方/下方”Step 函数来决定法力液体是否可见，但椭圆巧妙地隐藏了过渡，所以你永远不会看到生硬的边缘。



v0.5 版本更新即将完成。你现在就可以在“实验性（Experimental）”分支中游玩最新版本！我大概会再让它稳定一周左右，以修复额外的问题并进行润色。此次更新带来了迄今为止最大的性能提升、角色定制系统、成就系统、全新的教程以及一系列生活质量（QoL）改进。

还有很多工作要做，回到实验室继续努力了！🌿
~CyanAvatar

"