【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로 이루어집니다.

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

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()로 멤버 배열을 덮어씁니다.