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

업데이트： 2022/12/08

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

개요

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

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

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

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

CubismMatrix44

행렬용 배열 취득

CubismMatrix44 내의 행렬용 배열을 취득하려면 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismMatrix44::GetArray 함수
• Web(Typescript)에서는 CubismMatrix44.getAray 함수
• Java에서는 CubismMatrix44.getAray 함수

CubismMatrix44::GetArray 함수, CubismMatrix44.getAray 함수는 렌더러에 전달하는 행렬의 배열을 취득할 때 등에 사용합니다.

csmFloat32* matrixArray = cubismMatrix44->GetArray();

let matrixArray = mubismmatrix44.getAray();

float[] matrixArray = CubismMatrix.getArray();

행렬용 배열 설정

CubismMatrix44 내의 행렬용 배열을 외부에서 생성된 행렬로 덮어쓰려면 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismMatrix44::SetMatrix 함수
• Web(Typescript)에서는 CubismMatrix44.setMatrix 함수
• Java에서는 CubismMatrix44.setMatrix 함수

csmFloat32* matrixArray;

cubismMatrix44->SetMatrix(matrixArray);

let matrixArray: Float32Array;

cubismMatrix44.setMatrix(matrixArray);

CubismMatrix44 cubismMatrix44 = CubismMatrix.create();
float[] matrixArray = new float[16]

for (int i = 0; i < 16; i++) {
  matrixArray[i] = 0.5f;
}

cubismMatrix44.setMatrix(matrixArray);

표시 위치 이동

표시 위치의 평행 이동에는 다음 함수 중 하나를 사용합니다.

• Native(C++)에서는 CubismMatrix44::Translate 함수 또는 CubismMatrix44::TranslateRelative 함수
• Web(Typescript)에서는 CubismMatrix44.translate 함수 또는 CubismMatrix44.translateRelative 함수
• Java에서는 CubismMatrix44.translate 함수 또는 CubismMatrix44.translateRelative 함수

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

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

cubismMatrix44->Translate(translateX, translateY);

cubismMatrix44->TranslateRelative(translateX, translateY);

cubismMatrix44.translate(translateX, translateY);

cubismMatrix44.translateRelative(translateX, translateY);

cubismMatrix44.translate(translateX, translateY);

cubismMatrix44.translateRelative(translateX, translateY);

표시 배율 확대/축소

표시 배율을 확대하려면 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismMatrix44::Scale 함수 또는 CubismMatrix44::ScaleRelative 함수
• Web(Typescript)에서는 CubismMatrix44.scale 함수 또는 CubismMatrix44.scaleRelative 함수
• Java에서는 CubismMatrix44.scale 함수 또는 CubismMatrix44.scaleRelative 함수

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

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

cubismMatrix44->Scale(scaleX, scaleY);

cubismMatrix44->ScaleRelative(scaleX, scaleY);

cubismMatrix44.scale(scaleX, scaleY);

cubismMatrix44.scaleRelative(scaleX, scaleY);

cubismMatrix44.scale(scaleX, scaleY);

cubismMatrix.scaleRelative(scaleX, scaleY);

좌표 취득

행렬로 변환한 좌표를 취득하는 경우 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismMatrix44::TransformX 함수 또는 CubismMatrix44::TransformY 함수
• Web(Typescript)에서는 CubismMatrix44.transformX 함수 또는 CubismMatrix44.transformY 함수
• Java에서는 CubismMatrix44.transformX 함수 또는 CubismMatrix44.transformY 함수

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

csmFloat32 positionX = cubismMatrix44->TransformX(localX);
csmFloat32 positionY = cubismMatrix44->TransformY(localY);

let positionX: number = cubismMatrix44.transformX(localX);
let positionY: number = cubismMatrix44.transformY(localY);

float positionX = cubismMatrix44.transformX(localX);
float positionY = cubismMatrix44.transformY(localY);

행렬로 역변환한 좌표를 취득하는 경우는 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismMatrix44::InvertTransformX 함수 또는 CubismMatrix44::InvertTransformY 함수
• Web(Typescript)에서는 CubismMatrix44.invertTransformX 함수 또는 CubismMatrix44.invertTransformY 함수
• Java에서는 CubismMatrix44.invertTransformX 함수 또는 CubismMatrix44.invertTransformY 함수

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

csmFloat32 localX = cubismMatrix44->InvertTransformX(inputPositionX);
csmFloat32 localY = cubismMatrix44->InvertTransformY(inputPositionY);

let localX: number = cubismMatrix44.invertTransformX(inputPositionX);
let localY: number = cubismMatrix44.invertTransformY(inputPositionY);

float localX = cubismMatrix44.invertTransformX(inputPositionX);
float localY = cubismMatrix44.invertTransformY(inputPositionY);

행렬 간의 계산

행렬끼리 계산시키려면 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismMatrix44::Multiply 함수 또는 CubismMatrix44::MultiplyByMatrix 함수
• Web(Typescript)에서는 CubismMatrix44.multiply 함수 또는 CubismMatrix44.multiplyByMatrix 함수
• Java에서는 CubismMatrix44.multiply 함수 또는 CubismMatrix44.multiplyByMatrix 함수

CubismMatrix44* matrixA, matrixB;

// 다음은 모두 동일한 처리.

CubismMatrix44::Multiply(matrixA->GetArray(), matrixB->GetArray(), matrixA->GetArray());

matrixA->MultiplyByMatrix(matrixB);

let matrixA, matrixB: CubismMatrix44;

// 다음은 모두 동일한 처리.

CubismMatrix44.multiply(matrixA->GetArray(), matrixB->GetArray(), matrixA->GetArray());

matrixA.multiplyByMatrix(matrixB);

CubismMatrix44 matrixA = CubismMatrix44.create();
CubismMatrix44 matrixB = CubismMatrix44.create();

// 다음은 모두 동일한 처리

CubismMatrix44.multiply(matrixA.getArray(), matrixB.getArray(), matrixA.getArray());

matrixA.multiplyByMatrix(matrixB);

CubismModelMatrix

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

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

인스턴스 생성

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

CubismModel* cubismModel;
CubismModelMatrix* cubismModelMatrix;

cubismModelMatrix = new CubismModelMatrix(cubismModel->GetCanvasWidth(), cubismModel->GetCanvasHeight());

let cubismModel: CubismModel;
let cubismModelMatrix: CubismModelMatrix;

cubismModelMatrix = new CubismModelMatrix(cubismModel.getCanvasWidth(), cubismModel.getCanvasHeight());

// CubismModel 생성 처리는 생략
CubismModelMatrix cubismModelMatrix;

cubismModelMatrix = CubismModelMatrix.create(cubismModel.getCanvasWidth(), cubismModel.getCanvasHeight());

model3.json의 Layout 적용

model3.json은 모델의 레이아웃 정보를 기술할 수 있습니다.
이를 사용하여 모델의 위치나 확대/축소를 설정하는 경우 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismModelMatrix::SetupFromLayout 함수
• Web(Typescript)에서는 CubismModelMatrix.setupFromLayout 함수
• Java에서는 CubismModelMatrix.setupFromLayout 함수

CubismModelSettingJson* model3Json;

csmMap<csmString, csmFloat32> layout;
model3Json->GetLayoutMap(layout);

// 모델의 레이아웃을 설정.
cubismModelMatrix->SetupFromLayout(layout);

let model3Json: CubismModelSettingJson;

let layout: csmMap<string, number>
model3Json.getLayoutMap(layout);

// 모델의 레이아웃을 설정.
cubismModelMatrix.setupFromLayout(layout);

CubismModelSettingJson model3Json;
Map<String, Float> layout = new HashMap<String, Float>();
model3Json.getLayoutMap(layout);
 
// 모델의 레이아웃을 설정
cubismModelMatrix.setupFromLayout(layout);

모델 표시 위치 조작

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

// 모델의 캔버스의 상변이 인수로 지정한 Y축의 좌표가 되도록 배치. CubismModelMatrix::Bottom()과는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
void Top(csmFloat32 y);

// 모델 캔버스의 밑변이 인수로 지정한 Y축의 좌표가 되도록 배치. CubismModelMatrix::Top()과는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
void Bottom(csmFloat32 y);


// 모델 캔버스의 우변(마주 보고 우측)이 인수로 지정한 X축의 좌표가 되도록 배치. CubismModelMatrix::Left()와는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
void Right(csmFloat32 x);

// 모델 캔버스의 좌변이 인수로 지정한 X축의 좌표가 되도록 배치. CubismModelMatrix::Right()와는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
void Left(csmFloat32 x);


// 모델의 원점이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
void SetPosition(csmFloat32 x, csmFloat32 y);

// 모델 캔버스의 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다. 이를 호출하기 전에 캔버스의 높이, 폭을 설정할 필요가 있다.
void SetCenterPosition(csmFloat32 x, csmFloat32 y);


// 모델 캔버스의 Y축 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
void CenterX(csmFloat32 x);

// 모델 캔버스의 X축 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
void SetY(csmFloat32 y);

// 모델의 캔버스의 상변이 인수로 지정한 Y축의 좌표가 되도록 배치. CubismModelMatrix::Bottom()과는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
public top(csmFloat32 y): void

// 모델 캔버스의 밑변이 인수로 지정한 Y축의 좌표가 되도록 배치. CubismModelMatrix::Top()과는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
public bottom(csmFloat32 y): void


// 모델 캔버스의 우변(마주 보고 우측)이 인수로 지정한 X축의 좌표가 되도록 배치. CubismModelMatrix::Left()와는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
public right(csmFloat32 x): void

// 모델 캔버스의 좌변이 인수로 지정한 X축의 좌표가 되도록 배치. CubismModelMatrix::Right()와는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
public left(csmFloat32 x): void


// 모델의 원점이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
public setPosition(csmFloat32 x, csmFloat32 y): void

// 모델 캔버스의 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다. 이를 호출하기 전에 캔버스의 높이, 폭을 설정할 필요가 있다.
public setCenterPosition(csmFloat32 x, csmFloat32 y): void


// 모델 캔버스의 Y축 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
public centerX(csmFloat32 x): void

// 모델 캔버스의 X축 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
public setY(csmFloat32 y): void

// 모델의 캔버스의 상변이 인수로 지정한 Y축의 좌표가 되도록 배치. CubismModelMatrix.bottom()과는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
public void top(float y) {...}

// 모델 캔버스의 밑변이 인수로 지정한 Y축의 좌표가 되도록 배치. CubismModelMatrix.top()과는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
public void bottom(float y) {...}

// 모델 캔버스의 우변(마주 보고 우측)이 인수로 지정한 X축의 좌표가 되도록 배치. CubismModelMatrix.left()와는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
public void right(float y) {...}

// 모델 캔버스의 좌변(마주 보고 좌측)이 인수로 지정한 X축의 좌표가 되도록 배치. CubismModelMatrix.right()와는 공존할 수 없고, 나중에 설정된 쪽으로 덮어쓰기된다.
public void left(float y) {...}

// 모델의 원점이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
public void setPosition(float x, float y) {...}

// 모델 캔버스의 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다. 이를 호출하기 전에 캔버스의 높이, 폭을 설정할 필요가 있다.
public void setCenterPosition(float x, float y) {...}

// 모델 캔버스의 X축 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
public void centerX(float x) {...}

// 모델 캔버스의 X축이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
public void setX(float x) {...}

// 모델 캔버스의 Y축 중심이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
public void centerY(float y) {...}

// 모델 캔버스의 Y축이 인수의 좌표가 되도록 배치. 인수로 전달하는 좌표는 월드 좌표의 것으로 취급한다.
public void setY(float y) {...}

모델 표시 크기 조작

CubismModelMatrix는 모델의 종횡비를 유지하면서 확대/축소 비율을 조작할 수 있습니다.

// 모델의 종횡비를 유지한 채로 캔버스의 가로 폭을 인수로 지정한 값이 되도록 스케일시킨다.
cubismModelMatrix->SetWidth(w);

// 모델의 종횡비를 유지한 채로 캔버스의 높이를 인수로 지정한 값이 되도록 스케일시킨다.
cubismModelMatrix->SetHeight(h);

// 모델의 종횡비를 유지한 채로 캔버스의 가로 폭을 인수로 지정한 값이 되도록 스케일시킨다.
cubismModelMatrix.setWidth(w);

// 모델의 종횡비를 유지한 채로 캔버스의 높이를 인수로 지정한 값이 되도록 스케일시킨다.
cubismModelMatrix.setHeight(h);

// 모델의 종횡비를 유지한 채로 캔버스의 가로 폭을 인수로 지정한 값이 되도록 스케일시킨다.
cubismModelMatrix.setWidth(w);

// 모델의 종횡비를 유지한 채로 캔버스의 높이를 인수로 지정한 값이 되도록 스케일시킨다.
cubismModelMatrix.setHeight(h)

CubismViewMatrix

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

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

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

카메라 이동

카메라(화면)를 이동하는 경우 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismViewMatrix::AdjustTranslate 함수
• Web(Typescript)에서는 CubismViewMatrix.adjustTranslate 함수
• Java에서는 CubismViewMatrix.adjustTranslate 함수

인수에 전달하는 이동량은 스크린 좌표입니다.

cubismViewMatrix->AdjustTranslate(x, y);

cubismViewMatrix.adjustTranslate(x, y);

cubismViewMatrix.adjustTranslate(x, y);

카메라 확대/축소

카메라의 배율을 사용하여 확대/축소를 하는 경우 다음 중 하나의 함수를 사용합니다.

• Native(C++)에서는 CubismViewMatrix::AdjustScale 함수
• Web(Typescript)에서는 CubismViewMatrix.adjustScale 함수
• Java에서는 CubismViewMatrix.adjustScale 함수

제1인수, 제2인수에 전달하는 좌표를 중심으로 확대/축소합니다.

cubismViewMatrix->AdjustScale(centerX, centerY, scale);

cubismViewMatrix.adjustScale(centerX, centerY, scale);

cubismViewMatrix.adjustScale(centerX, centerY, scale);