【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で行われます。
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の色が全て上書き色情報に設定されます。
モデル本来の設定色を再度使いたい場合は、別途処理を追加する必要があります。