모델의 표시 위치, 확대·축소율의 조작

[마지막 갱신일: 2020/01/30]

Live2D는 그리기에 다각형을 사용하고 있기 때문에, 그릴 때 3DCG와 같이 행렬을 사용하고 있습니다.
이 기사에서는 Cubism SDK 샘플 프로그램에서 행렬을 다루는 방법을 설명합니다.
행렬 자체에 대한 설명은 다루지 않습니다.

 

개요

Cubism SDK에서 행렬 계산을 하려면 CubismMatrix44 또는 이를 상속한 클래스를 사용합니다.

CubismMatrix44 내부에 4*4 행렬용의 배열을 보관 유지하고 있습니다.
배열의 요소 순서는 OpenGL을 준수합니다.

CubismMatrix44나 그 계승한 클래스에서는, 회전이나 Z축의 이동이나 확대·축소율 조작에 대응하고 있지 않습니다.

그러나 렌더러에 전달할 때 GMatrix44로 변환되는 경우 타사 행렬 계산 라이브러리에서 처리할 수 있습니다.

 

CubismMatrix44

행렬의 배열 얻기

CubismMatrix44 내의 행렬에 대한 배열을 얻으려면 Native에서는 CubismMatrix44::GetArray(), Web에서는 CubismMatrix44.getAray()를 사용합니다.

CubismMatrix44::GetArray(), CubismMatrix44.getAray()는, 렌더러에 건네주는 행렬의 배열을 취득할 때 등에 사용합니다.

 

 

행렬에 대한 배열 설정

CubismMatrix44의 행렬에 대한 배열을 외부에서 생성된 행렬로 덮어쓰려면 Native에서는 CubismMatrix44::SetMatrix()를, 웹에서는 CubismMatrix44.setMatrix()를 사용합니다.

 

 

표시 위치 이동

표시 위치를 병렬로 이동하려면 Native에서는 CubismMatrix44::Translate() 또는 CubismMatrix44::TranslateRelative()를, Web에서는 CubismMatrix44.translate()를 사용하거나 CubismMatrix44.translateRelative()를 사용합니다.

인수로 설정하는 좌표는 모두 스크린 좌표계가 됩니다.

CubismMatrix44::Translate(), CubismMatrix44.translate()는 현재 좌표를 인수로 덮어씁니다.
CubismMatrix44::TranslateRelative(), CubismMatrix44.translateRelative()는, 현재의 좌표로부터 인수의 분만큼 상대적으로 평행 이동시킵니다.

 

 

표시 배율 확대/축소

표시 배율을 확대하려면 Native에서는 CubismMatrix44::Scale() 또는 CubismMatrix44::ScaleRelative()를, Web에서는 CubismMatrix44.scale() 또는 CubismMatrix44.scaleRelative()를 사용합니다.

CubismMatrix44::Scale(), CubismMatrix44.scale()은 현재 표시 배율을 인수로 덮어씁니다.
CubismMatrix44::ScaleRelative(), CubismMatrix44.scaleRelative() 는 현재 표시 배율을 인수 값으로 상대적으로 배율을 설정합니다.

표시 배율을 1로 설정하면 모델의 원래 크기가 됩니다.

 

 

좌표 획득

행렬로 변환한 좌표를 취득하는 경우, Native에서는 CubismMatrix44::TransformX(), CubismMatrix44::TransformY()를, Web에서는 CubismMatrix44.transformX(), CubismMatrix44.transformY()를 사용합니다.

로컬 좌표계의 모델의 정점 좌표로부터 화면상의 위치를 취득하는 경우 등에 사용합니다.

 

행렬로 역변환한 좌표를 취득하는 경우는, Native에서는 CubismMatrix44::InvertTransformX(), CubismMatrix44::InvertTransformY()를, Web에서는 CubismMatrix44.invertTransformX(), CubismMatrix44.invertTransformY()를 사용합니다.

충돌 판정 등, 화면의 좌표계에 입력된 좌표로부터 모델의 로컬 좌표계에서의 좌표를 취득할 때에 사용합니다.

 

 

행렬 간의 계산

행렬을 계산하려면 Native에서는 CubismMatrix44::Multiply(), CubismMatrix44::MultiplyByMatrix()를, Web에서는 CubismMatrix44.multiply(), CubismMatrix44.multiplyByMatrix()를 사용합니다.

 

 

CubismModelMatrix

CubismMatrix44를 상속받은 클래스입니다.
모델 좌표의 설정을 목적으로 하고, 표시 위치를 변이나 중심점으로부터 설정할 수 있거나, 높이나 폭에 의해 표시 배율을 조작할 수 있습니다.

Cubism SDK 샘플에서는 Cubism 모델의 캔버스 높이를 화면 전체에 표시합니다.

 

인스턴스 생성

CubismModelMatrix는 인스턴스 생성 시 모델의 캔버스 크기를 설정해야 합니다.

 

 

model3.json의 Layout 적용

model3.json은 모델의 레이아웃 정보를 설명할 수 있습니다.
여기를 사용하여 모델의 위치나 확대 축소를 설정하는 경우, Native에서는 CubismModelMatrix::SetupFromLayout()를, Web에서는 CubismModelMatrix.setupFromLayout()를 사용합니다.

 

 

모델 표시 위치 조작

CubismModelMatrix에서는 캔버스의 각 변이나 중심 등을 기준으로 좌표를 설정할 수 있습니다.

 

 

모델 표시 크기 조작

CubismModelMatrix는 모델의 종횡비를 유지하면서 스케일링 비율을 조작할 수 있습니다.

 

 

 

 

CubismViewMatrix

CubismMatrix44를 상속받은 클래스입니다.
카메라의 위치 변경이나 줌 등에 의한 이용을 목적으로 하고 있습니다.

Cubism SDK 샘플에서는 그리기 범위의 크기에서 행렬을 만듭니다.

CubismViewMatrix 내에서 다루는 변환 행렬은 평행 투영을 가정합니다.

 

카메라 이동

카메라(화면)를 이동하는 경우 Native에서는 CubismViewMatrix::AdjustTranslate()를 사용하고 Web에서는 CubismViewMatrix.adjustTranslate()를 사용합니다.
인수에 전달하는 이동량은 화면 좌표입니다.

 

 

카메라 확대/축소

카메라의 배율을 사용하여 확대축소를 하는 경우, Native에서는 CubismViewMatrix::AdjustScale()을, Web에서는 CubismViewMatrix.adjustScale()를 사용합니다.
제1 인수, 제2 인수에 건네주는 좌표를 중심으로 확대축합니다.

© 2010 - 2022 Live2D Inc.