【Web】乗算色・スクリーン色

最終更新： 2022年5月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() でメンバー配列を上書きします。