[Native] Multiply Color/Screen Color

Updated: 05/19/2022

By applying Multiply Color and Screen Color to the model, tints can be changed in real time.
Multiply Color and Screen Color set in Cubism Editor are applied without any additional coding by using Cubism Native Framework in Cubism 4.2 or later.
See the “Multiply Color/Screen Color” page in the Editor manual for details on setting the Multiply Color and Screen Color in the Cubism Editor.
Also, by coding as needed, it is possible to manipulate Multiply Color and Screen Color from the SDK and perform the following operations.

  • Apply Multiply Color and Screen Color interactively.
  • Apply Multiply Color and Screen Color settings that have not been set in the Cubism Editor.
  • Disable Multiply Color and Screen Color set in the Cubism Editor.

The following is an explanation of the procedure.

Procedures

The process is as follows.

  • Overwrite flag settings for Multiply Color and Screen Color
  • Multiply Color and Screen Color settings
  • Model drawing

Overwrite flag settings for Multiply Color and Screen Color

First, set the overwrite flag for Multiply Color and Screen Color to true. The default is false.

model->GetModel()->SetOverwriteFlagForMultiplyColors(true); // Multiply color overwrite flag
model->GetModel()->SetOverwriteFlagForScreenColors(true); // Screen color overwrite flag

void SetOverwriteFlagForMultiplyColors(csmBool value) and void SetOverwriteFlagForScreenColors(csmBool value) are defined in the Framework’s CubismModel class.
The Cubism SDK for Native sample project defines the LAppModel class with CubismModel as the base class to manipulate models, and the model in the above code is the LAppModel class.
GetModel() is used as an intermediary to call functions of the CubismModel class from the LAppModel class.

Multiply Color and Screen Color settings

Define Multiply Color and Screen Color and set them to the model.
The code below shows the set values for setting the Multiply Color to red and the Screen Color to green for all Drawables.
RGBA can be used for the setting color.

for (Csm::csmUint32 i = 0; i < model->GetModel()->GetDrawableCount(); i++)
{
  Csm::Rendering::CubismRenderer::CubismTextureColor multiplyColor; // Multiply color
  multiplyColor.R = 1.0f;
  multiplyColor.G = 0.5f;
  multiplyColor.B = 0.5f;
  multiplyColor.A = 1.0f;
  Csm::Rendering::CubismRenderer::CubismTextureColor screenColor; // Screen color
  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);
}


Before applying Multiply Color and Screen Color

After applying red to Multiply Color and green to Screen Color

First of all, for the loop process performed by the DrawableCount of the model, the Multiply Color and Screen Color processing is performed by all Drawables every frame.

Tips

In this case, the same Multiply Color and Screen Color are set for all Drawables, but it is possible to set different Multiply Color and Screen Color for each Drawable index. The argument i is the index of the Drawable.

Tips

To disable the Multiply Color and Screen Color set in the Cubism Editor, set 0 for the Multiply Color and 1 for the Screen Color. This will be the initial value of each.

Csm::Rendering::CubismRenderer::CubismTextureColor multiplyColor; // Multiply color
multiplyColor.R = 1.0f;
multiplyColor.G = 1.0f;
multiplyColor.B = 1.0f;
multiplyColor.A = 1.0f;
Csm::Rendering::CubismRenderer::CubismTextureColor screenColor; // Screen color
screenColor.R = 0.0f;
screenColor.G = 0.0f;
screenColor.B = 0.0f;
screenColor.A = 1.0f;

Model drawing

model->Draw(projection);

By calling the Draw() function of the model originally performed in the Cubism SDK for Native sample project, the model including Multiply Color and Screen Color will be drawn by the rendering process inside Cubism Native Framework.

Other Related Functions

Obtain overwrite flag for Multiply Color and Screen Color

 True gives priority to the color information set by the SDK,and false gives priority to the color information of the model.

csmBool GetOverwriteFlagForMultiplyColors() const; // Get multiply color overwrite flag.
csmBool GetOverwriteFlagForScreenColors() const; // Get screen color overwrite flag.

Multiply Color and Screen Color settings

The above describes how to set RGBA using Rendering::CubismRenderer::CubismTextureColor as an argument, but there is also a function that allows you to set RGBA directly. (Input value 0.0–1.0)

void SetMultiplyColor(csmInt32 index, csmFloat32 r, csmFloat32 g, csmFloat32 b, csmFloat32 a = 1.0f); // Multiply color setting
void SetScreenColor(csmInt32 index, csmFloat32 r, csmFloat32 g, csmFloat32 b, csmFloat32 a = 1.0f); // Screen color setting

Obtain Multiply Color and Screen Color

Get the Multiply Color and Screen Color of each Drawable with the CubismTextureColor type.

Rendering::CubismRenderer::CubismTextureColor GetMultiplyColor(csmInt32 index) const;
Rendering::CubismRenderer::CubismTextureColor GetScreenColor(csmInt32 index) const;

The argument indexis the index of the Drawable.

Internal processing of Cubism Native Framework

This is the Framework’s internal process for representing Multiply Color and Screen Color.
The process is as follows.

  • Get Multiply Color and Screen Color of the model from Cubism Core
  • Determine the acquired Multiply Color and Screen Color by the overwrite flag.
  • Set the acquired Multiply Color and Screen Color to the shader program.
  • Add Multiply Color and Screen Color when calculating texture color in the fragment shader.
Tips

Get the model’s Multiply Color and Screen Color from Cubism Core in RGBA, but A (transparency) is not set in the Cubism Editor.

Get Multiply Color and Screen Color of the model from Cubism Core

Get Multiply Color and Screen Color from the model for all Drawables using Cubism Core’s API.

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’s API is as follows.

csmApi const csmVector4* csmCallingConvention csmGetDrawableMultiplyColors(const csmModel* model); // Get multiply color.
csmApi const csmVector4* csmCallingConvention csmGetDrawableScreenColors(const csmModel* model); // Get screen color.

At initialization of the CubismModel class, all Drawables are retrieved and held in a member array.
To set Multiply Color and Screen Color on the SDK side, set SetOverwriteFlagForMultiplyColors() and SetOverwriteFlagForScreenColors() to true and then override the member arrays with SetMultiplyColor() and SetScreenColor().

Tips

When the above process is performed, all subsequent Drawable colors will be set to the overwritten color information.
If you want to use the model’s original color settings again, you must add a separate process.

Please let us know what you think about this article.