口罩前处理方法(Web)

[最近更新时间:2019/09/03]

在 Live2D Cubism SDK for Web 中,为了保持智能手机等的绘图速度。
在模型绘制过程开始时,采用了为一个掩模缓冲区绘制所有掩模形状的“预处理方法”。

在原理绘制方法中,每次绘制需要蒙版的Drawable时,都会绘制蒙版形状(见图)。
使用这种方法,可以表达一个高清的遮罩,但是每次Drawable需要一个遮罩时,都会发生切换渲染目标、清空缓冲区等成本相对较高的处理。
因此,它可能会导致智能手机上的绘图速度降低。

但是,仅仅提前准备好掩码需要多个掩码缓冲区,这会给内存带来压力。
为了解决这个问题,可以对一个掩码缓冲区进行以下处理,以减少内存压力,同时将其视为正在使用多个掩码缓冲区。

 

面罩集成

由于所有蒙版都是预先生成的,因此接受相同蒙版指定的 Drawable 可以减少使用相同蒙版图片生成的图纸数量。

这个过程在 CubismRenderer_WebGL.initialize 函数调用中完成。
这是由 CubismClippingManager_WebGL.initialize 函数完成的。

 

 

按颜色信息分离

掩码缓冲区是一个 RGBA 视频数组,类似于普通的纹理缓冲区。
普通遮罩仅使用此 A 通道来应用遮罩,而不是 RGB 通道。
因此,通过在 RGBA 中具有单独的掩码数据,一个掩码缓冲区可以作为四个掩码缓冲区处理。

 

 

拆分分离

当 4 个掩码图片不够用时,通过2等份、4等份和9等份处理掩码缓冲区来增加掩码数量。
由于还存在按颜色信息划分的情况,因此最多可以保存36 个 4x9 的不同蒙版。

此外,为防止蒙版图片被压扁,请使用应用蒙版的所有可绘制矩形绘制蒙版。
因此,需要使用掩码生成范围、掩码和矩阵。

 

 

 

检查矩形

在蒙版生成的第一步中,对于每个蒙版,检查适合所有蒙版的矩形。

 

 

分色和分色后的布局决策

确定每个蒙版所属的蒙版缓冲区的颜色通道和分割位置。

 

 

蒙版绘制,使用蒙版生成矩阵

根据绘制前检查的矩形范围及其所属位置,准备用于掩码生成和掩码使用的转换矩阵。

 

 

掩码缓冲区的动态调整大小

CubismRenderer_WebGL 提供了一个 API 来在运行时调整遮罩缓冲区的大小。
目前,掩码缓冲区的大小设定为 256 * 256(像素)作为初始值,但如果要将掩码生成区域切割成 9 张,
在85 * 85(像素)的矩形区域内绘制的蒙版形状进一步放大,作为剪裁区域。
因此,剪裁结果的边缘会模糊或渗色。
作为解决方案,我们提供了一个 API,可以在程序执行时变更掩码缓冲区的大小。

例如,通过将遮罩缓冲区的大小从256 * 256设置为1024 *1024,如果将遮罩生成区域切成9张,则可以在341*341的矩形区域中绘制遮罩形状。
您还可以放大并将其用作剪裁区域,以消除剪裁结果边缘的模糊和渗色。

* 增加蒙版缓冲区的大小⇒如果要处理的像素数增加,速度会变慢,但绘制结果会很漂亮。
* 减少掩码缓冲区的大小⇒ 由于要处理的像素数减少了,所以速度会更快,但是绘制结果会很脏。

 

 

© 2010 - 2022 Live2D Inc.