【Native】乗算色・スクリーン色
最終更新: 2022年5月19日
モデルに乗算色・スクリーン色を適用することで、色合いをリアルタイムに変化させることができます。
Cubism Editor上で設定した乗算色・スクリーン色はCubism 4.2以降のCubism Native Frameworkを利用することで、特に追加のコーディングをすることなく適用されます。
Cubism Editor上での乗算色・スクリーン色の設定はEditorマニュアルの「乗算色・スクリーン色」を参照してください。
また必要に応じたコーディングを行うことでSDKから乗算色・スクリーン色を操作し、以下のような動作も可能になります。
- インタラクティブに乗算色・スクリーン色を適用する
- Cubism Editor上で設定していない乗算色・スクリーン色を適用する
- Cubism Editor上で設定した乗算色・スクリーン色を無効にする
以降はその手順の説明になります。
処理手順
以下の流れで処理を行います。
- 乗算色・スクリーン色の上書きフラグ設定
- 乗算色・スクリーン色の設定
- モデルの描画
乗算色・スクリーン色の上書きフラグ設定
まずは乗算色・スクリーン色の上書きフラグを true に設定します。デフォルトでは false になっています。
model->GetModel()->SetOverwriteFlagForMultiplyColors(true); // 乗算色の上書きフラグ model->GetModel()->SetOverwriteFlagForScreenColors(true); // スクリーン色の上書きフラグ
void SetOverwriteFlagForMultiplyColors(csmBool value) 及び void SetOverwriteFlagForScreenColors(csmBool value) はFrameworkの CubismModel クラスに定義されています。
Cubism SDK for Nativeのサンプルプロジェクトではモデルを操作するために CubismModel を基底クラスとした LAppModel クラスを定義しており、上記コードの model は LAppModel クラスです。
LAppModel クラスから CubismModel クラスの関数を呼び出すために GetModel() を仲介しています。
乗算色・スクリーン色の設定
乗算色・スクリーン色を定義し、モデルに設定します。
下記のコードでは全てのDrawableに対し、乗算色に赤、スクリーン色に緑を設定する場合の設定値です。
設定色はRGBAが使用できます。
for (Csm::csmUint32 i = 0; i < model->GetModel()->GetDrawableCount(); i++) { Csm::Rendering::CubismRenderer::CubismTextureColor multiplyColor; // 乗算色 multiplyColor.R = 1.0f; multiplyColor.G = 0.5f; multiplyColor.B = 0.5f; multiplyColor.A = 1.0f; Csm::Rendering::CubismRenderer::CubismTextureColor screenColor; // スクリーン色 screenColor.R = 0.0f; screenColor.G = 0.5f; screenColor.B = 0.0f; screenColor.A = 1.0f; model->GetModel()->SetMultiplyColor(i, multiplyColor); model->GetModel()->SetScreenColor(i, screenColor); }
乗算色・スクリーン色適用前
乗算色に赤、スクリーン色に緑を適用後
まずモデルのDrawableCountでループ処理している箇所ですが、乗算色・スクリーン色の処理は毎フレームに全てのDrawableで行われます。
Tips
今回は全てのDrawableに同じ乗算色・スクリーン色を設定していますが、Drawableのインデックスごとに異なる乗算色・スクリーン色を設定することも可能です。 引数の i はDrawableのインデックスとなります。
Tips
Cubism Editor上で設定した乗算色・スクリーン色を無効にする場合は、乗算色に0、スクリーン色に1を設定します。それぞれの初期値になります。
Csm::Rendering::CubismRenderer::CubismTextureColor multiplyColor; // 乗算色 multiplyColor.R = 1.0f; multiplyColor.G = 1.0f; multiplyColor.B = 1.0f; multiplyColor.A = 1.0f; Csm::Rendering::CubismRenderer::CubismTextureColor screenColor; // スクリーン色 screenColor.R = 0.0f; screenColor.G = 0.0f; screenColor.B = 0.0f; screenColor.A = 1.0f;
モデルの描画
model->Draw(projection);
Cubism SDK for Nativeのサンプルプロジェクトでもともと行っているモデルの Draw() 関数を呼び出すことで、Cubism Native Framework内部のレンダリング処理により乗算色・スクリーン色を含んだモデルが描画されます。
その他の関連関数
乗算色・スクリーン色の上書きフラグ取得
true はSDKで設定した色情報を優先、 false はモデルの色情報を優先となります。
csmBool GetOverwriteFlagForMultiplyColors() const; // 乗算色上書きフラグの取得 csmBool GetOverwriteFlagForScreenColors() const; // スクリーン色上書きフラグの取得
乗算色・スクリーン色の設定
上記では Rendering::CubismRenderer::CubismTextureColor を引数にした設定方法を記載しましたが、RGBAを直接設定できる関数もあります。(入力値0.0~1.0)
void SetMultiplyColor(csmInt32 index, csmFloat32 r, csmFloat32 g, csmFloat32 b, csmFloat32 a = 1.0f); // 乗算色設定 void SetScreenColor(csmInt32 index, csmFloat32 r, csmFloat32 g, csmFloat32 b, csmFloat32 a = 1.0f); // スクリーン色設定
乗算色・スクリーン色の取得
各Drawableの乗算色・スクリーン色をCubismTextureColor型で取得します。
Rendering::CubismRenderer::CubismTextureColor GetMultiplyColor(csmInt32 index) const; Rendering::CubismRenderer::CubismTextureColor GetScreenColor(csmInt32 index) const;
引数の index はDrawableのインデックスになります。
Cubism Native Frameworkの内部処理
乗算色・スクリーン色を表現するためのFrameworkの内部処理です。
以下の流れで処理を行います。
- Cubism Coreからモデルの乗算色・スクリーン色を取得
- 取得した乗算色・スクリーン色を上書きフラグで判別する
- 取得した乗算色・スクリーン色をシェーダプログラムに設定する
- フラグメントシェーダにてテクスチャカラー計算時に乗算色・スクリーン色を加える
Tips
Cubism Coreからモデルの乗算色・スクリーン色をRGBAで取得しますが、A(透明度)はCubism Editorで設定されません。
Cubism Coreからモデルの乗算色・スクリーン色を取得
Cubism CoreのAPIを用いてモデルから乗算色・スクリーン色を全Drawable分取得します。
Core::csmVector4 CubismModel::GetDrawableMultiplyColor(csmInt32 drawableIndex) const { const Core::csmVector4* multiplyColors = Core::csmGetDrawableMultiplyColors(_model); return multiplyColors[drawableIndex]; } Core::csmVector4 CubismModel::GetDrawableScreenColor(csmInt32 drawableIndex) const { const Core::csmVector4* screenColors = Core::csmGetDrawableScreenColors(_model); return screenColors[drawableIndex]; }
CoreのAPIは以下になります。
csmApi const csmVector4* csmCallingConvention csmGetDrawableMultiplyColors(const csmModel* model); // 乗算色取得 csmApi const csmVector4* csmCallingConvention csmGetDrawableScreenColors(const csmModel* model); // スクリーン色取得
CubismModelクラスの初期化時に全Drawable分全て取得し、メンバー配列に保持します。
SDK側で乗算色・スクリーン色を設定する場合は SetOverwriteFlagForMultiplyColors() 及び SetOverwriteFlagForScreenColors() にtrueを設定した上で、 SetMultiplyColor() 及び SetScreenColor() でメンバー配列を上書きします。
Tips
上記の処理を行うとそれ以降のDrawbleの色が全て上書き色情報に設定されます。
モデル本来の設定色を再度使いたい場合は、別途処理を追加する必要があります。