마스크 전처리 방법(Web)

[마지막 갱신일: 2019/09/03]

Live2D Cubism SDK for Web에서는 스마트폰 등으로 그리기 속도를 유지하기 위해,
모델 묘화 처리의 최초로 1매의 마스크 버퍼에 대해서 모든 마스크 형상을 묘화 하는 「전처리 방식」을 채용하고 있습니다.

원칙적인 드로잉 방법은 마스크가 필요한 Drawable을 그릴 때마다 마스크 모양을 그립니다 (그림 참조).
이 방법으로는, 고화질의 마스크의 표현이 가능합니다만, Drawable가 마스크를 필요로 할 때마다 렌더 타겟의 전환·버퍼의 클리어 등 비교적 고비용의 처리가 발생하게 됩니다.
따라서 스마트폰 등으로 그리기 속도가 저하되는 원인이 될 수 있습니다.

그러나, 미리 마스크를 준비하는 것만으로는 마스크 버퍼가 복수장 필요하게 되어, 메모리를 압박하게 됩니다.
이 점을 해결하기 위해, 1장의 마스크 버퍼에 대해서 이하의 처리를 실시하는 것으로, 마치 복수장의 마스크 버퍼를 이용하고 있는 것처럼 취급하면서, 메모리의 압박을 억제할 수 있습니다.

 

마스크 통합

미리 모든 마스크를 생성하기 때문에 동일한 마스크 지정을 받은 Drawable은 동일한 마스크 이미지를 사용하여 생성하는 매수를 줄일 수 있습니다.

이 처리는 CubismRenderer_WebGL.initialize 함수 호출에서
CubismClippingManager_WebGL.initialize 함수에 의해 수행됩니다.

 

 

색상 정보로 분리

마스크 버퍼는 통상의 텍스쳐 버퍼 등과 같이 RGBA의 영상용 배열입니다.
일반 마스크 처리에서는 이 A 채널만을 사용하여 마스크를 적용하지만 RGB 채널은 사용하지 않습니다.
거기서 RGBA로 별개의 마스크 데이터를 가지는 것에 의해 1매의 마스크 버퍼를 4장의 마스크 버퍼로서 취급할 수 있게 됩니다.

 

 

분할 분리

마스크 이미지가 4장에서는 부족해졌을 때, 마스크 버퍼를 2분할, 4분할, 9분할로 취급함으로써 마스크의 매수를 늘립니다.
색 정보로의 분할도 있으므로 4x9의 36장까지 다른 마스크를 유지할 수 있게 되어 있습니다.

또한 마스크 이미지가 부서지는 것을 방지하기 위해 마스크 적용을 받는 모든 Drawable 사각형으로 마스크를 그립니다.
이 때문에 범위의 생성과 마스크 생성, 마스크 사용으로의 매트릭스의 생성이 필요하게 됩니다.

 

 

 

직사각형 확인

마스크 생성의 첫 번째 단계에서 각 마스크에 대해 마스크 적용 대상이 모두 맞는 사각형을 확인합니다.

 

 

색분리, 분할분리를 받은 레이아웃 결정

마스크마다 소속되는 마스크 버퍼의 색채널, 분할 위치를 정합니다.

 

 

마스크 그리기, 마스크 사용의 매트릭스 생성

그리기 전에 조사한 구형 범위와 소속 장소에 근거해 마스크 생성용, 마스크 사용용의 변환 매트릭스를 준비합니다.

 

 

마스크 버퍼의 동적 크기 조정

CubismRenderer_WebGL은 런타임에 마스크 버퍼의 크기를 조정하는 API를 제공합니다.
현재, 마스크 버퍼의 사이즈는 초기치로서 256*256(픽셀)을 설정하고 있습니다만, 마스크 생성 영역을 9매로 자르는 경우,
85*85(픽셀)의 구형 영역에 묘화한 마스크 형상을, 한층 더 확대해 클리핑 영역으로서 사용합니다.
그 결과 클리핑 결과의 가장자리가 흐리거나 흘러나오는 현상이 나타납니다.
이를 해결하는 방법으로 마스크 버퍼의 크기를 프로그램 실행시 변경하는 API를 제공합니다.

예를 들어, 마스크 버퍼의 크기를 256*256 ⇒ 1024*1024로 함으로써 마스크 생성 영역을 9매로 자르는 경우, 341*341의 직사각형 영역에 마스크 형상을 그릴 수 있으므로,
클리핑 영역으로 확대하여 사용해도 클리핑 결과의 가장자리의 흐림이나 번짐을 없앨 수 있습니다.

※마스크 버퍼의 사이즈를 크게 한다 ⇒ 처리하는 픽셀이 증가하면 속도는 느려지지만, 묘화 결과는 깨끗해진다.
※마스크 버퍼의 사이즈를 작게 한다 ⇒ 처리하는 픽셀이 줄어들기 때문에 속도는 빨라지지만, 묘화 결과는 더러워진다.

 

 

© 2010 - 2022 Live2D Inc.