1735 年农历 9 月太和殿,午门响钟,阶下鸣鞭。25 岁的弘历顿觉自己脸庞异样,似千万只手拂面而过,甚至偶有痛感。即位天子,受命于天,感受竟如此真实。却不知,这股力量来自于另一个时空……
前阵子清宫剧火热,尤其是乾隆时期的后宫戏。但无论是《延禧攻略》里聂老师演绎的大猪蹄子,还是《如懿传》中霍老师呈现的忧郁迷离,都令臣妾们觉得很难撩的样子呢。
好在我们现代人,完全可以利用技术手段,在这位「十全武功」的帝王面前,毫不怯场地「指指点点」、撩上一撩!
奉上试撩地址,玩法就是指指点点啦,猛戳头部另有玄机。移动端品尝更有(所谓的)裸眼 3D 风味。
来撩朕umeecorn.com或许有爱卿依然踟蹰在链接外,不敢(不屑)点进去一睹龙颜。没关系,这里有段事先撩好的小片子:
如何呐,皇上有没有很中意您呢?
筹办这样一场「试撩会」,大致三步:
- 准备皇上靓照一张,各部位切切碎。
- 扔进 Live2D 里凹造型、摆 pose、打磨演技,制造一个出色的 model。
- 用 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 轴转头」的动作场景下——通过扭曲曲面网格,使平面的图片在动作时呈现立体感。
#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
下的idle
、tap_body
等字段代表事件。idle
事件是模型没人理的时候自顾自做的动作;tap_[name]
事件对应hit_areas
中name
区域的触发,哪里不动点哪里。
至此,乾隆 model 调教完成。
碎碎念
正所谓一千个人眼中有一千个哈利波特(莎士比亚:??),一千个人弄乾隆也会有一千种姿势(皇阿玛:大胆!x 2)——即便使用的是完全相同的素材。
换言之,建模这种事情,Live2D 并不能帮用户自动做到,它只是一个工具。最终产出的效果,除了与贴图质量相关,还更依赖于创作者对人脸、对透视、对神态、对人物性格等多维度的理解。
比较遗憾的是,未曾见到官方教程给出这方面的启示或指引,导致没有相关经验的用户,即使掌握了所有的操作,下笔时可能依然捉襟见肘。
这里呈上一个立竿见影的法子——下载 模型例子,在 Editor 里仔细观察有经验的设计师是如何处理拆分、标记、变形、动画这些事情的。再结合自己对角色的理解,相信调教出来的模型会超出您的预期。
Step 3 模型呈现
Live2D 提供了多个平台的 SDK,使用 WebGL SDK 可以在网页上秀出我们精心制作的模型。渲染一个模型的简要步骤和原理(只考虑使用的话,这段可以跳过):
1. 初始化 Live2D。
2. 载入模型,创建 Model
实例。在模型实体上关联贴图,设置显示位置与尺寸。通过 update
方法更新模型顶点,draw
方法来进行绘制。
3. 载入动作,通过 MotionQueueManager
管理 Motion
实例。以 startMotion
、updateParam
来播放和更新动作。
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 } }
- 解决动画动作同默认眨眼、默认呼吸间的冲突
- 实现动画动作与参数动作之间的顺滑过渡
- 减小参数动作对正在播放动画的影响
希望能给您带去便利。吟吉奥义!
最后,附上「来撩朕」项目的地址:
devyumao/qianlonggithub.com彩蛋
皇上被久撩之后,竟然会……
臣……臣惶恐!