[Web] Multiply Color/Screen Color

[Last updated on 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 on Cubism Editor are applied by using Cubism Web Framework after Cubism 4.2 without any additional coding.
For details on setting the Multiply Color and Screen Color in the Cubism Editor, please refer to “Multiply Color/Screen Color” in the Editor manual.
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 that have not been set on the Cubism Editor.
  • Disable Multiply Color and Screen Color set on Cubism Editor.

The following is an explanation of the procedure.

 

Procedures

The process is as follows.

  • Override flag setting for Multiply Color and Screen Color
  • Multiply Color and Screen Color settings
  • Model drawing

 

Override flag setting for Multiply Color and Screen Color

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

public setOverrideFlagForMultiplyColors(value: boolean) and public setOverrideFlagForScreenColors(value: boolean) are defined in the Framework's CubismModel class.

The Cubism SDK for Web sample project defines the LAppModel class with CubismModel as the base class to manipulate models, and 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.

 

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 on the Cubism Editor, set 0 for the Multiply Color and 1 for the Screen Color. It will be the initial value of each.

 

 

Model Drawing

By calling the model's draw() function, the model is drawn including Multiply Color and Screen Color by the internal rendering process of Cubism Web Framework.
This function is also called in the Cubism SDK for Web sample project.

 

Other Related Functions

Get 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.

 

 

Multiply Color and Screen Color settings

The above describes the setting method with cubismrenderer.CubismTextureColor as an argument, but there is also a function that can set RGBA directly. (Input value 0.0–1.0)

 

 

 

Obtain Multiply Color and Screen Color

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

The argument index is the index of the Drawable.

 

Internal processing of Cubism Web 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 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's API is as follows.

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 setOverrideFlagForMultiplyColors() and setOverrideFlagForScreenColors() to true and then override the member arrays with setMultiplyColor() and setScreenColor().

 

Tips

When the above process is performed, all subsequent Drawble 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.

© 2010 - 2022 Live2D Inc.