【Web】 곱하기 색・스크린색

업데이트: 2022/05/19

모델에 곱하기 색·스크린색을 적용함으로써 색조를 실시간으로 변화시킬 수 있습니다.
Cubism Editor상에서 설정한 곱하기 색·스크린색은 Cubism 4.2 이후의 Cubism Web Framework를 이용하는 것으로, 특별히 추가의 코딩을 하지 않고 적용됩니다.
Cubism Editor상에서의 곱하기 색·스크린색의 설정은 Editor 매뉴얼의 「곱하기 색・스크린색」을 참조해 주십시오.
또한 필요에 따라 코딩을 함으로써 SDK에서 곱하기 색·스크린색을 조작하여 다음과 같은 동작도 가능합니다.

  • 인터랙티브에 곱하기 색·스크린색을 적용한다
  • Cubism Editor에서 설정하지 않은 곱하기 색·스크린색 적용
  • Cubism Editor에서 설정한 곱하기 색·스크린색을 비활성화

이후는 그 순서의 설명입니다.

처리 절차

이하의 흐름으로 처리를 실시합니다.

  • 곱하기 색·스크린색의 덮어쓰기 플래그 설정
  • 곱하기 색·스크린색의 설정
  • 모델 그리기

곱하기 색·스크린색의 덮어쓰기 플래그 설정

우선은 곱하기 색·스크린색의 덮어쓰기 플래그를 true로 설정합니다. 디폴트는 false입니다.

model.getModel().setOverrideFlagForMultiplyColors(true); // 곱하기 색의 덮어쓰기 플래그
model.getModel().setOverrideFlagForScreenColors(true); // 스크린색의 덮어쓰기 플래그

public setOverrideFlagForMultiplyColors(value: boolean) 및 public setOverrideFlagForScreenColors(value: boolean)는 Framework의 CubismModel 클래스에 정의되어 있습니다.

Cubism SDK for Web의 샘플 프로젝트에서는 모델을 조작하기 위해 CubismModel을 기본 클래스로 한 LAppModel 클래스를 정의하고 있으며, 위 코드의 model은 LAppModel 클래스입니다.
LAppModel 클래스로부터 CubismModel 클래스의 함수를 호출하기 위해서 getModel()을 중개하고 있습니다.

곱하기 색·스크린색의 설정

곱하기 색과 스크린색을 정의하고 모델에 설정합니다.
아래의 코드에서는 모든 Drawable에 대해 곱하기 색에 빨간색, 스크린색에 녹색을 설정하는 경우의 설정값입니다.
설정 색상은 RGBA를 사용할 수 있습니다.

for (let i = 0; i < model.getModel().getDrawableCount(); i++)
{
  let multiplyColor: CubismTextureColor = new CubismTextureColor(); // 곱하기 색
  multiplyColor.R = 1.0;
  multiplyColor.G = 0.5;
  multiplyColor.B = 0.5;
  multiplyColor.A = 1.0;
  let screenColor: CubismTextureColor = new CubismTextureColor(); // 스크린색
  screenColor.R = 0.0;
  screenColor.G = 0.5;
  screenColor.B = 0.0;
  screenColor.A = 1.0;
  model.getModel().setMultiplyColor(i, multiplyColor);
  model.getModel().setScreenColor(i, screenColor);
}


곱하기 색·스크린색 적용 전

곱하기 색에 빨간색, 스크린색에 녹색을 적용한 후

우선 모델의 DrawableCount로 루프 처리하고 있는 곳인데, 곱하기 색·스크린색의 처리는 매 프레임에 모든 Drawable로 이루어집니다.

Tips

이번에는 모든 Drawable에 동일한 곱하기 색·스크린색을 설정하고 있지만, Drawable의 인덱스마다 다른 곱하기 색·스크린색을 설정할 수도 있습니다.
인수의 i는 Drawable의 인덱스입니다.

Tips

Cubism Editor에서 설정한 곱하기 색과 스크린색을 비활성화하려면 곱하기 색으로 0, 스크린색으로 1을 설정합니다. 각각의 초기값이 됩니다.

let multiplyColor: CubismTextureColor = new CubismTextureColor(); // 곱하기 색
multiplyColor.R = 1.0;
multiplyColor.G = 1.0;
multiplyColor.B = 1.0;
multiplyColor.A = 1.0;
let screenColor: CubismTextureColor = new CubismTextureColor(); // 스크린색
screenColor.R = 0.0;
screenColor.G = 0.0;
screenColor.B = 0.0;
screenColor.A = 1.0;

모델 그리기

model.draw(projection);

모델의 draw() 함수를 호출하면, Cubism Web Framework 내부의 렌더링 처리에 의해 곱하기 색·스크린색을 포함한 모델이 렌더링 됩니다.
이 함수는 Cubism SDK for Web의 샘플 프로젝트에서도 호출됩니다.

그 외 관련 함수

곱하기 색·스크린색의 덮어쓰기 플래그 취득

 true는 SDK로 설정한 색 정보를 우선,false는 모델의 색 정보를 우선합니다.

public getOverrideFlagForMultiplyColors(): boolean // 곱하기 색 덮어쓰기 플래그 취득
public getOverrideFlagForScreenColors(): boolean // 스크린색 덮어쓰기 플래그 취득

곱하기 색·스크린색의 설정

위에서는 cubismrenderer.CubismTextureColor를 인수로 설정하는 방법을 설명했지만 RGBA를 직접 설정할 수 있는 함수도 있습니다. (입력값 0.0~1.0)

public setMultiplyColorByRGBA(index: number, r: number, g: number, b: number, a = 1.0) // 곱하기 색 설정
public setScreenColorByRGBA(index: number, r: number, g: number, b: number, a = 1.0) // 스크린색 설정

곱하기 색·스크린색 취득

각 Drawable의 곱하기 색·스크린색을 CubismTextureColor형으로 취득합니다.

public getMultiplyColor(index: number): CubismTextureColor
public getScreenColor(index: number): CubismTextureColor

인수의 index는 Drawable의 인덱스입니다.

Cubism Web Framework의 내부 처리

곱하기 색·스크린색을 표현하기 위한 Framework의 내부 처리입니다.
이하의 흐름으로 처리를 실시합니다.

  • Cubism Core로부터 모델의 곱하기 색·스크린색을 취득
  • 취득한 곱하기 색·스크린색을 덮어쓰기 플래그로 판별한다
  • 취득한 곱하기 색·스크린색을 셰이더 프로그램으로 설정한다
  • 프래그먼트 셰이더에서 텍스쳐 컬러 계산 시에 곱하기 색·스크린색을 더한다
Tips

Cubism Core로부터 모델의 곱하기 색·스크린색을 RGBA로 취득하는데, A(투명도)는 Cubism Editor로 설정되지 않습니다.

Cubism Core로부터 모델의 곱하기 색·스크린색을 취득

Cubism Core의 API를 이용해 모델로부터 곱하기 색·스크린색을 모든 Drawable만큼 취득합니다.

public getDrawableMultiplyColor(drawableIndex: number): CubismTextureColor {
  const multiplyColors: Float32Array = this._model.drawables.multiplyColors;
  const index = drawableIndex * 4;
  const multiplyColor: CubismTextureColor = new CubismTextureColor();
  multiplyColor.R = multiplyColors[index];
  multiplyColor.G = multiplyColors[index + 1];
  multiplyColor.B = multiplyColors[index + 2];
  multiplyColor.A = multiplyColors[index + 3];
  return multiplyColor;
}

public getDrawableScreenColor(drawableIndex: number): CubismTextureColor {
  const screenColors: Float32Array = this._model.drawables.screenColors;
  const index = drawableIndex * 4;
  const screenColor: CubismTextureColor = new CubismTextureColor();
  screenColor.R = screenColors[index];
  screenColor.G = screenColors[index + 1];
  screenColor.B = screenColors[index + 2];
  screenColor.A = screenColors[index + 3];
  return screenColor;
}

Core의 API는 다음과 같습니다.

multiplyColors: Float32Array; // 곱하기 색 취득
screenColors: Float32Array; // 스크린색 취득

CubismModel 클래스의 초기화 시에 모든 Drawable만큼 취득해, 멤버 배열에 유지합니다.
SDK 측에서 곱하기 색·스크린색을 설정하는 경우는 setOverrideFlagForMultiplyColors() 및 setOverrideFlagForScreenColors()에 true를 설정한 다음, setMultiplyColor() 및 setScreenColor()로 멤버 배열을 덮어씁니다.

Tips

상기의 처리를 실시하면 그 이후의 Drawble의 색이 모두 덮어쓰기 색 정보로 설정됩니다.
모델 본래의 설정색을 다시 사용하고 싶은 경우는 별도 처리를 추가할 필요가 있습니다.

이 기사가 도움이 되었나요?
아니요
이 기사에 관한 의견 및 요청사항을 보내 주시기 바랍니다.