如何实现一个可以撩的乾隆

484 阅读9分钟
原文链接: zhuanlan.zhihu.com
1735 年农历 9 月太和殿,午门响钟,阶下鸣鞭。25 岁的弘历顿觉自己脸庞异样,似千万只手拂面而过,甚至偶有痛感。即位天子,受命于天,感受竟如此真实。却不知,这股力量来自于另一个时空……


前阵子清宫剧火热,尤其是乾隆时期的后宫戏。但无论是《延禧攻略》里聂老师演绎的大猪蹄子,还是《如懿传》中霍老师呈现的忧郁迷离,都令臣妾们觉得很难撩的样子呢。

好在我们现代人,完全可以利用技术手段,在这位「十全武功」的帝王面前,毫不怯场地「指指点点」、撩上一撩!


奉上试撩地址,玩法就是指指点点啦,猛戳头部另有玄机。移动端品尝更有(所谓的)裸眼 3D 风味。

来撩朕umeecorn.com图标


或许有爱卿依然踟蹰在链接外,不敢(不屑)点进去一睹龙颜。没关系,这里有段事先撩好的小片子:

光天化日撩乾隆


如何呐,皇上有没有很中意您呢?




筹办这样一场「试撩会」,大致三步:

  1. 准备皇上靓照一张,各部位切切碎。
  2. 扔进 Live2D 里凹造型、摆 pose、打磨演技,制造一个出色的 model。
  3. 用 WebGL 来打理 model 的展现,在 web 这个戏台子上秀出皇上的风采。


Step 1 素材制作

这里选用清代宫廷画师郎世宁的画卷《心写治平》作为原材料。其中的乾隆元年肖像,刻画精细,着色饱满,可谓上佳素材。想必皇上本人对此也很满意吧。

该画卷另有后宫十二位妃子肖像,包括富察皇后、高贵妃、令妃。有兴趣的朋友可以 pick 你喜爱的小姐姐,按照本文的思路,也为她办一场个人「试撩会」。(皇阿玛:大胆!

呐,一家人最重要就是齐齐整整


开始动刀子。如下图所示,面部五官自然是要切割得明明白白,衣冠服饰也要为皇上妥善褪去,留下一张精致鹅蛋脸涂抹得清清爽爽。在 Photoshop 里切好保存成 PSD 文件即可。

皇上浑身都是宝


TIPS:

  • 运动细节较多的部位,是得再做切分的。比如眼部,至少要把睫毛、眼白、眼青分开来,以便做出眨眼、转眼珠的表情。若想眨眼眨得更加逼真,上下眼皮也可切出,进而实现眼部肌肉被带动的效果。
  • 嘴巴切出上下嘴唇不难理解,连带着上下肌肉一并切除,方便我们接下来将皇上的金口牵引得自然、丰润。口腔和牙齿需另外准备。想必天子牙口一定不错吧——上等嫩五花口腔,加一品烤瓷上排牙——这就给皇上安上!
  • 面部肌肉切得越多越细,在做各种表情时就越能做到游刃有余,比如这里切出了两片脸颊。相应地,越多的部件也越会增加后续摆弄表情的工作量。所以根据需要,在您觉得必要的部位上动刀就好。相信在座如果有精通解刨学、或从事整容业、或擅长割猪头肉的爱卿,一定更有心得,比我切得更好。
  • 衣冠的拆解,按照现实中物件的组成来做。单这帽子,就可以拆成:海龙皮帽檐,加红缨顶,加冠顶红系扣,衔大灯泡一颗(大误)——讲究!


Step 2 模型制作

到 Live2D 出场了。


Live2D 是一个将平面角色进行动画化的技术方案,通常应用于动漫、游戏的相关产品中。效果靓、无需 3D 建模、无需逐帧绘图是它的主要优点。诚然:

Live2D 并不是一种先进的技术,它产生的效果,都是用基本的平移、旋转、透明、曲面变形等操作实现的。最终的效果与贴图关系很大,而每一个动作,都需要制作师的精细调整。


官网提供了 入门教程手册,撇开中英文皆堪比机翻的问题,配合官方小视频耐心看下来,可以掌握个基本流程和操作。以下结合实际经验启禀诸位。


#1 导入部件

在 Live2D Cubism Editor 里,导入加工好的 PSD 文件,会自动生成与原图层位置结构一致的部件(Part)列表。


#2 标记网孔

网孔(Artmesh)是由顶点和线构成的三角形集合,标记在每个部件上,通过移动顶点可以使图像产生形变。标记网孔有自动和手动两种模式。由于面部表面的不规则,对于大部分部件,要采用先自动生成再手动调整的方式;对于形变精细的部件(眉毛、嘴唇),最好完全手动标记。

面部(左)及五官(右)的网孔标记。脸部针灸了解一下!


#3 设定和编辑状态

Live2D 通过参数(Parameters)存储部件的变形和位置,将其数值化。例如「左眼开闭」的参数设定为 0 ~ 1.3,0 设定为闭眼,1 设定为睁眼,1.3 是睁得更大一些。这里的 0、1、1.3,被称为关键值(Key);在关键值上通过变形、平移等操作调整出来的各部件状态集合,即为关键状态(Key Form)。

皇上龙眼(?)在关键状态间的过渡效果
皇上金口在关键状态间的过渡效果


#4 引入变形器

变形器(Deformer)是处理旋转变形和曲面变形的利器。在本例中,旋转变形作用在「歪头」和「转眉」的参数动作上;而曲面变形则主要使用在「X 轴转头」、「Y 轴转头」的动作场景下——通过扭曲曲面网格,使平面的图片在动作时呈现立体感。

面部变形器的 Y 轴动作。俯仰之间,游刃有余。
五官各部件变形器的 X 轴动作。左顾右盼,顿生光辉。


#5 制作动画

切换至 Live2D Cubism 的动画模式,通过在各关键时间帧之上拿捏动作参数,可串成丝般顺滑的动画效果。表演老师特意为皇上安排了几套动画动作(Motion)和几组表情(Expression,相当于只有一帧的动画),嘻笑怒骂间,尽显王者风流。

皇上的一颦一笑,都是有剧本的


TIP:把握好眨眼的时机、呼吸的情绪,动画便成功了一半。


#6 导出模型

以导出 2.1 版本的模型文件为例:

  • .png —— 模型纹理图片,形式类似于 CSS Sprites。
  • .moc —— 模型的实际数据文件。
  • .mtn —— 模型动画动作文件,多个。
  • .exp.json —— 模型表情文件,多个。
  • .model.json —— 模型描述文件,主要用于索引以上类型的文件,也提供一些其它信息。文件格式如下:
{
    "type": "Live2D Model Setting",
    "name": "qianlong",
    "model": "qianlong.moc",
    "textures": ["qianlong.1024/texture_00.png"],
    "hit_areas": [
        {
            "name": "head",
            "id": "D_REF_HEAD"
        },
        {
            "name": "body",
            "id": "D_REF_BODY"
        }
    ],
    "expressions": [
        {
            "name": "f01.exp.json",
            "file": "expressions/f00.exp.json"
        },
        {
            "name": "f03.exp.json",
            "file": "expressions/f01.exp.json"
        },
        ...
    ],
    "motions": {
        "idle": [
            {
                "file": "motions/m00.mtn"
            },
            {
                "file": "motions/m01.mtn"
            },
            ...
        ],
        "tap_body": [
            {
                "file": "motions/m10.mtn"
            },
            {
                "file": "motions/m11.mtn"
            },
            ...
        ]
    }
}


其中,除文件索引信息之外:

  • hit_areas 描述事件触发区域,各项中的 id 指向模型里的区域部件。区域部件需额外制作,通常做法是复制正常部件,截取其中的小块透明部分,再拉伸出区域。
  • motions 下的 idletap_body 等字段代表事件。idle 事件是模型没人理的时候自顾自做的动作;tap_[name] 事件对应 hit_areasname 区域的触发,哪里不动点哪里。


至此,乾隆 model 调教完成。


碎碎念

正所谓一千个人眼中有一千个哈利波特(莎士比亚:??),一千个人弄乾隆也会有一千种姿势(皇阿玛:大胆!x 2)——即便使用的是完全相同的素材。

换言之,建模这种事情,Live2D 并不能帮用户自动做到,它只是一个工具。最终产出的效果,除了与贴图质量相关,还更依赖于创作者对人脸、对透视、对神态、对人物性格等多维度的理解。

比较遗憾的是,未曾见到官方教程给出这方面的启示或指引,导致没有相关经验的用户,即使掌握了所有的操作,下笔时可能依然捉襟见肘。

这里呈上一个立竿见影的法子——下载 模型例子,在 Editor 里仔细观察有经验的设计师是如何处理拆分、标记、变形、动画这些事情的。再结合自己对角色的理解,相信调教出来的模型会超出您的预期。


Step 3 模型呈现

Live2D 提供了多个平台的 SDK,使用 WebGL SDK 可以在网页上秀出我们精心制作的模型。渲染一个模型的简要步骤和原理(只考虑使用的话,这段可以跳过):

1. 初始化 Live2D。

2. 载入模型,创建 Model 实例。在模型实体上关联贴图,设置显示位置与尺寸。通过 update 方法更新模型顶点,draw 方法来进行绘制。

3. 载入动作,通过 MotionQueueManager 管理 Motion 实例。以 startMotionupdateParam 来播放和更新动作。

4. 操作模型参数的三种方法:设置参数 setParamFloat、加算参数 addToParamFloat、乘算参数 multParamFloat。例如:

live2DModel.addParamFloat( "PARAM_ANGLE_X", 10, 1) // 把水平转头的参数值以 1 的权重加 10 (权重 0 至 1)

当我们想实现跟随屏幕点击事件的转头、转身、转眼珠等参数动作时,就可以在主循环里使用这种方法。

5. 模型眨眼可以通过操作参数来实现,更简单的方法则是利用 EyeBlinkMotion 创建自动眨眼的实例。

更多 API 可参考 Live2D 函数库 2.1


以上介绍只是蜻蜓点水,实际操作起来会比较繁琐,加之 WebGL SDK 代码仅有压缩版本,开发体验不甚友好。

好在,得益于开源社区的智慧—— xiazeyu/live2d-widget.js 对官方库的操作进行了封装——我们现在仅需一行代码即可呈现模型:

L2Dwidget.init({ model: { jsonPath: './model/qianlong.model.json' })


在该库基础上,我又进行了一些微小的工作:

devyumao/live2d-widget.jsgithub.com图标
  • 支持模型加载完成的回调 { model: { onload } }
  • 真正支持设备运动控制动作 { mobile: { motion: true } }
  • 修正高清材质的视图尺寸问题 { display: { superSample: 2 } }
  • 解决动画动作同默认眨眼、默认呼吸间的冲突
  • 实现动画动作与参数动作之间的顺滑过渡
  • 减小参数动作对正在播放动画的影响


希望能给您带去便利。吟吉奥义!


等皇上驾到得有耐心,加个 loading 吧


最后,附上「来撩朕」项目的地址:

devyumao/qianlonggithub.com图标


彩蛋

皇上被久撩之后,竟然会……

臣……臣惶恐!