Deformer Introduction

Ulysses Wu edited this page Sep 16, 2018 · 3 revisions

AUTHOR: MS@wzhgba
Original Link

Live2D Cubism Modeler是一个2D角色建模工具。使用这个软件创建的角色模型能够被方便地摆出不同的表情和动作,因此迅速受到了ACG行业的关注。角色模型之所以能够被摆放成不同的动作,是因为Live2D系列软件巧妙地利用了坐标变换的方法来改变图像元件的形状。本文档将进一步介绍Live2D Cubism Modeler的坐标变换原理。

[TOC]

概述

Live2D提供了两种坐标变换工具,分别是旋转变换(Rotation)和曲面变换(Curved Serface)。旋转变换的原理较为简单,本文不再进行介绍。曲面变换将是接下来要重点介绍的内容。

图1

图1 两种变换工具

界面

对一个图像元件创建支持曲面变换的坐标系以后,可以看到下图所示的控制界面。

图2

图2 坐标系的控制界面

如果你尝试过操作这些控制点,会发现它们都可以用来改变图像元件的形状。而且,红颜色的控制点的含义更容易理解,因为它们描述的都是线性变换,包括旋转、缩放和平移,这和我们平常所使用的图像编辑工具中的操作形式是一致的。灰色的控制点用于描述贝塞尔曲面,即一系列贝塞尔曲线相互交织而形成的表面。参数控制点直接确定贝塞尔曲线方程形式,然后得到坐标系的表面顶点位置。采样控制点要求解一个经过该点的贝塞尔方程,然后在解出的曲线上得到坐标系的表面顶点位置。

Live2D系列软件的坐标变换,就原理层面,可以分为两个阶段:

  1. 通过贝塞尔曲面来得到一组网格顶点。
  2. 通过网格中的每个四边形来锁定图片元件顶点相对于网格的位置。

接下来的两个章节将分别介绍这两个阶段。

贝塞尔曲面

在讲解贝塞尔曲面之前,不得不提一下贝塞尔曲线。贝塞尔曲线是一种用数学公式来描述曲线的方法,在矢量绘图领域经常使用三次贝塞尔曲线,就连Live2D Cubism也不例外。下图展示了三次贝塞尔曲线方程和坐标系控制界面的关系。

图3

图3 三次贝塞尔曲线

如果在0.0~1.0之间等间距取值并代入曲线方程,就能得到一系列顶点。事实上,图3中的坐标系边界顶点就是通过这种方式得到的。

贝塞尔曲线也是可以加权混合的,通过权值的变化,我们可以生成一条形状介于两条贝塞尔曲线之间新曲线。所谓贝塞尔曲面,就是让四边形中彼此相对的两条贝塞尔曲线进行加权混合,而这两条生成曲线的交点就构成了曲面上的点。这正是我们在界面中看到的网格的由来。

四边形与顶点锁定

现在我们来关注网格中的单个四边形。如果要让图像元件的顶点随着整个表面的变化而移动位置,就必须找到一种相对性的坐标表示法。在下图中,通过求解顶点Q在四边形P1P2P3P4中的相对坐标(e,f),我们才有可能在四边形的形状发生改变时计算出新的Q点位置。

图4

图4 四边形中的定位

我们可以利用参数e和f列出一些方程(它们的取值范围是0.0~1.0):

Px = f * P1 + (1 - f) * P2
Pz = f * P4 + (1 - f) * P3
Py = e * P3 + (1 - e) * P2
Pw = e * P4 + (1 - e) * P1

Q是线段PyPw和PxPz的交点,且它是一个已知量,因此存在以下关系:

Cross(PxQ, PxPz) = Cross(Q- f * P1 - (1 - f) * P2, f * (P4 – P1) + (1 - f) * (P3 – P2)) = 0
Cross(PyQ, PyPw) = Cross(Q- e * P3 - (1 - e) * P2, e * (P4 – P3) + (1 - e) * (P1 – P2) = 0

两个方程,两个未知数,所以(e,f)是能够解出来的。一旦图像元件和坐标系关联成功,Live2D软件的内部就会使用相对坐标来描述顶点和子坐标系曲面点的位置。这时候,只要坐标系顶点的位置发生变化,其每个四边形内部的图像元件顶点也跟着移动。

如果坐标系形状发生变化,只要把四边形内部的图像元件的相对坐标(e,f)重新代入Px、Py、Pz、Pw的公式,然后求解直线PxPz与PyPw的交点,就能得到图像元件顶点在移动后的位置。

总结

结合贝塞尔曲面生成的网格,和基于四边形中的相对定位方法,Live2D实现了简单易用且自由度很高的几何变形工具,以至于我们能够创建出线性变换(旋转、缩放、平移)所达不到的扭曲效果。

但总的来看,这种方法并不深奥。这也带来一种潜在的可能性,即开发者们可以制作一套第三方的角色建模软件来实现开源的Live2D替代品,或是制作一套第三方的SDK来扩展Live2D模型的应用范围。

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.