모델의 표시 위치, 확대·축소율의 조작
업데이트: 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);