JOJO的奇妙变色：用HAToon2制作渐变映射式渲染

JOJO的奇妙变色：用HAToon2制作渐变映射式渲染

HAToon2是ミーフォ茜大佬的一款渲染编辑器，之前看别人配的Shader很好看就搞了一个来研究然后差点被难哭，今天又看了看然后总算找到思路了。稍微整理一下我理解的用法，出于个人爱好原因这篇总结的核心是追求画画时候爱用的渐变映射滤镜效果。涉及的概念有点多所以会比较啰嗦，此外也不保证完全正确，我是外行。

HA2的基本操作指南强推yuhao828大佬的《HAToon2初步》：https://www.bilibili.com/read/cv253693　我当初绝望之际就是被这篇教程拯救了，赞美大佬。

首先说一下渐变映射。其实PS的渐变映射和HAToon2原理正好有相似之处，即「为图像不同亮度的区域指定不同的颜色」。

渐变映射直接用虽然炫但略显单调，我个人习惯的用法是复制一层做映射后把透明度调到10-20%左右，会让整体颜色变得和谐。这次研究HA2也以此为目标。

首先讲一下界面，基本原理可以总结成一张图：

（虽然是鼓捣了半天总结出来的不过依然不敢确定对不对，毕竟我对编程一无所知对颜色只懂一点，基本是连蒙带猜，如果有大佬发现哪里错误的话欢迎指正（真的有人看吗

好的下面开始正题。

1.按钮的对应

不知道有没有人和我一样悟性低，不过一开始我最大的误区就是以为这三排按钮是三三对应的，于是在试图控制变量做实验的过程中几度陷入疯狂。而实际情况是左边三个按钮（色变换，X，Y）可以看作是独立的，右边两列按钮则是横向对应的。其实界面里标的还算清楚，是我太蠢了……

注意到这一点很重要，因为把右边这三组固定住之后，「变量」和「变化」的对应才比较好理解。不然编辑Shader的时候就只能胡搞瞎搞了。

2.按钮的功能

2.1.色变换

最左上的按钮「色变换」，yuhao828大佬讲的比较少，不过我用的时候感觉这是最重要的功能。这个按钮的作用是把编辑参数时的RGB（红/绿/蓝）模式改成HSV（色相/饱和度/明度）模式，而这，是一个非常非常重要的功能！

以非设计专业的我个人的体验来说，RGB模式实在是过于反直觉了。因为这不是那种黄+蓝=绿的自然原色混合，而是红+绿+蓝=白。作为一个普通人，即使知道原理，我也完全无法预测「这张图抽掉B通道之后是什么颜色」，因为其效果不止体现在「看起来是蓝色」的色块上，它可能会有各种奇怪的影响。所以很多常见的修图app（比如MIX）在设计那种保留/调整单色的功能时，选项也往往是赤橙黄绿青蓝紫而不是红绿蓝，因为普通人很难预测某一原色的改变对整体画面的影响。

相比之下，HSV中除了色相以外，饱和度和明度都是很容易通过直觉判断的，而色相的微调也只在左右而已。当想要设计一个特殊的调色Shader时，使用HSV可能会更顺手。对这三个数值的具体应用我们后面再讲。

2.2.X/Y

决定Shader从图片中取色的方向。实际上这俩开一个就好了，我一般开X（東郷枢大佬的TPOShader似乎也是只开了X），因为HA2里的效果是可以右键追加的，非要在一张图里实现两个方向的变换比较困难也不太有必要。在Y（或者X）的下拉菜单中选なし就好了。

然后说一下下拉菜单中的选项（对不起没有截图，如果有人看请打开自己的Generator）。

·从「照明度」到「スペキュラ」：各种和光照方向（或者镜头方向）有关的类型，适合用来制作高光、阴影或逆光效果，虽然也能对模型颜色产生影响不过这里先不讨论。

·U/V：这个实在不懂，请有能力的朋友自己研究，我一选这个模型就糊一片（。

·画面X/Y：类似于PS内蒙版的效果，直接把图案印到模型身上盖掉原有贴图。图案相对屏幕固定而不会和模型一起移动。感觉这是一个可以玩出花来的选项，比如致敬Eva动画结尾碇真嗣剪影中闪过各种画面的那一段？

·赤/绿/青：即RGB。最后六个选项是和右边的三组按钮对应的，但我觉得它们存在应该只是因为它们是颜色的固有属性……不管怎样，秉着拉黑一切RGB相关参数的宗旨我们无视这三条。

·色相/彩度/明度：即HSV。解释一下的话「色相」是颜色的本质，深红浅红都是红而不是蓝，就是因为它们具有相同的「色相」；「彩度」即中文的饱和度，是决定色彩鲜艳或黯淡的参数；「明度」是色彩的明亮程度，决定了色彩是深色还是浅色。这是我在制作调色类Shader时主要使用的几个选项。

2.3.HSV-色相/彩度/明度

在色变换按钮中将RGB切换成HSV后，右侧的三组按钮会变为：

（实际上刚切换完会卡一下，右边三个显示还是赤绿青，把H那行改成色相后底下两行会自动跟着修正过来）

这是整个编辑过程中的重点：让左侧的H/S/V固定对应右侧的色相/彩度/明度。是的，HA2确实非常自由，你可以让任何参数对应任何选项，但那样很容易导致「我用的图怎么出来这个效果」「这颜色怎么越改越离谱」，并最终进化成「我和宇宙有必然的联系吗」（x）虽然乱调参数也能制造某种美妙的随机性，但以我的体验，参数一一对应后效果更为可控，能更高效地通过修改参照图达到想要的渐变效果。

2.4.算法按钮

我对背后的代码性质的原理完全不了解，所以只能讲一点自己直觉和经验上的东西：

·置换：用B数值直接替换A数值。也就是说如果三个都选置换，出来的颜色变化就和参照图一模一样。

·加算：不理解原理，但建模中常常在sph（光泽纹理）中用到加算，效果类似于sai的「发光」或PS的「线性减淡」，简单来说就是在A的基础上以B的状态变亮，最终结果比两个颜色都浅。所以用于加算的图片本身不可以太浅，否则就白茫茫一片真干净了。一般加算的sph文件都是黑底。

·乘算：同样是sph常用的算法，但很多2D渲吃乘算吃得很厉害所以我做模型也不太用了……效果类似于PS的正片叠底，即在A的基础上以B的状态变暗。

减算和最后两个我没用过，可以有时间做实验找找规律。顺便一提，我测试效果的时候发现模型本身没有toon（我本来为了好看在PE里把toon都删了）的话在MMD里就没阴影，然后HA2上去就只剩颜色一点渐变都没，所以toon还是得有……

3.算法原理

由于本人对代码和设计一无所知所以以下完全都是基于经验的推论（和瞎猜），如果有用实属万幸如果和真实情况对不上也请不要殴打我（因为打不着

3.1.HSV的含义

先讲一下HSV的概念，此处以PS的拾色器为例。

如图所示，右边白框框里的数字就是颜色对应的各种模式（HSV/RGB/CMYK等等）。各种模式中，一组（或者一串）数字都能对应一个唯一的颜色。以HSB（也就是HSV，value和brightness的区别）为例，当拖动右侧彩虹光谱旁的光标时，H（Hue,色相）改变，从下到上的数值为从0（靠近橙的红色）到360（靠近粉的红色），当然在最上面一点又会归于0因为它们都是纯粹的红；在左边的大方框中左右拖动光标时，改变的是S（Saturation，饱和度或彩度），颜色会在苍白和鲜艳间改变；上下拖动光标时，改变的是V（Value，明度），也就是颜色的明暗。那有人（哪有人啊）可能会问了，难道方框左边的黑色和右边的黑色还不一样吗？这个就是设计上为了方便了，所以有的绘画软件直接把这玩意捏起来了，取色区域就是三角的，能得到的颜色并没有区别。

Anyway，这三个数值（我推测）就是渲染器从模型中读取的用来和参照图进行对应运算的环节。接下来我们为了方便，把HSV的算法均设置为「置换」，观察一下效果。

3.2.置换型运算

首先，准备一张图片。

这里选了一张个人修图时常用的浅粉-红-蓝渐变，左侧加一点黑色是希望模型衣服的黑色部分保持深色，亮部的粉色接近皮肤颜色，这样即使直接置换也不会违和。当然另一种方法是在sub-set里给皮肤材质上专门的渲染。图片的尺寸并不重要，因为编辑器读取的是X轴上的渐变，就算宽500高1其实也不会有区别，不过为了自己查看方便还是拉个一般通过长方形。

读入模型，先不做渲染（但是我关掉勾线上了Croquis改，Croquis改天下第一（怪叫

接下来，我们把渲染器对标的参数设置为「色相」，也就是颜色会根据不同的色相数值（在彩虹光谱条上的位置），被参照图上的颜色从左到右地替换。读入渲染。

如图所示，秒变窦尔敦（不是）。白色高光是我顺手加的先不用理，接下来根据色块一一讲解。以光谱的顺序看，最接近红色的是肩膀的橙色衣服图案，因此被替换成参照图最左侧的黑色；接下来是人物的皮肤，皮肤颜色其实本质是很浅的橙黄色，因此被替换成了参照图偏左的蓝色；人物的脸颊和下巴周围有奇怪的纹路，这是因为在贴图上我用红色在这些地方画了红晕，渲染后红色被替换为黑色，Croquis改把这种色差体现了出来；人物刘海和辫子的嫩绿色位于色谱下半部，也被参照图左半部的蓝色替换；人物的上衣、外套和头发在原图中有黑有蓝，在渲染后却被替换成相似的粉色，这是因为原本的蓝色和黑色是在同一色相值基础上通过调节饱和度和明度得到的，在对标色相值的渲染器中，位于光谱上半部的它们就一起被位于参照图右半部的粉红色替换了。

对标色相值的滤镜大概就是这样，效果很清楚，但色相值并不是一个「直觉上容易理解」的数值，对标色相后的效果往往与想要的相去甚远，调节也并不轻松，所以接下来我们试试「明度」。

（Btw，这里很好的一点是读入渲染之后只要在HA2的编辑器里修改保存，效果就可以即时反映到MMD里，调整起来非常方便

那么，将X轴对标的参数修改为明度，效果如下。

是、是JOJO的奇妙变色！面部维持肤色之后一下子就像个人了呢（x）那么我们就再次针对每个色块进行分析吧。

由于这次渲染器对标的是明度，就不能用刚才的光谱做参考了，干脆直接拉个和参照图同一尺寸的明度条（其实就是黑白渐变）。

如图所示，从左到右开始分析：人物的上衣和头发颜色最深，明度值最低，在明度条上偏左，因此被参照图对应位置的蓝色/蓝紫色置换；刘海和外套的明度不深不浅，被参照图中部的粉红色置换；皮肤的颜色最浅，被参照图最右侧的浅粉色置换，变化并不大。因此，整体效果上，人物看起来只是换了配色（就像JOJO每一卷漫画彩页里主角的配色都不同一样），但仍然正常，而不会像对标色相值的渲染器那样把整张脸变得蓝洼洼。

可以看出，对标明度的渲染器在直觉上更容易判断，因为即使是普通人也能看出颜色的深浅，进而初步规划自己想通过对标明度对颜色做的改变，比如「让深色的区域变蓝」「让小白脸维持小白脸」等等。

当然，以上仅仅是「置换」HSV数值得到的效果，如果采用其他算法又会怎样呢？

3.3.其他运算

秉着控制变量的原则，在保持对标明度的前提下，改变HSV中某一项的算法。

·色相和饱和度置换，对明度进行加算：

人物整体变亮咧！

·色相和饱和度置换，对明度进行乘算：

嗯，是热血动画决战中回忆杀的味道。

饱和度和明度不变，对色相进行乘算：

色相变起来也可以很带感嘛。

总之，在掌握HA2编辑器的基本原理后，通过控制变量摸索新的渲染就成为一种莫大的乐趣了。

4.其他技巧

4.1.滤镜程度的调节

就像在PS里修图一样，有时我们只是想用Shader大概调个色而不是把模型的原色全都盖掉。解决方法也很简单，就写在readme里——调整参照图的透明度就可以了。

将参照图的透明度减小到15%：

注意把参照图保存为png，这个格式下图片才具有透明通道。

4.2.高光和阴影的制作

这个其实应该算是HA2最基础的功能（？），就和AlternativeFull一个原理。这里使用RGB模式，对标模型的照明度，在参照图左侧涂一道，赤绿青选乘算就是阴影；在参照图右侧涂一道，赤绿青选加算就是高光。

（去掉高光添加阴影后的效果

光影的范围可以自己多实验几次。颜色方面，其实不一定要阴影用黑色高光用白色，因为乘算和加算会自然产生这些效果。以皮肤为例，个人的体会是阴影用浅粉紫色，高光用米色就足够了。当然，在RGB选项里搭配不同算法肯定能玩出更多花样来。不过我不推荐同时使用高光和阴影，效果会很不赛璐璐。

另外，在参照图左侧涂一道后选加算就是逆光效果啦。

4.3.参照图的设计

虽然叫渐变映射，不过参照图并不是必须渐变，剧变甚至不变也是可以的，颜色也不固定（比如在左边拉一个从白色到透明的渐变制造抬升曲线左端的效果）。不过参照图颜色分界太清晰的话可能会导致有颜色变化的贴图在变化处出现锯齿，需要根据实际情况调整。

5.小结

HA2确实是相当强大和灵活的一款编辑器，但也正因为它太灵活了导致我在试图通过控制变量摸索功能时痛苦挣扎了很久。能用HA2制作的渲染类型应该很多，不过我实在太喜欢渐变映射了，感谢茜大佬带来的无限的可能性。

最后，如果有人真的看到这的话，留一个复习题：想要在HA2中实现与PS相同的渐变映射效果，应当调整的参数是哪些？