【Web】正片叠底色/屏幕色

最終更新： 2022年5月19日

通过将正片叠底色和屏幕色应用于模型，可以实时更改色调。
通过使用Cubism 4.2或更高版本的Cubism Web Framework，无需任何追加编码即可应用Cubism Editor上设置的正片叠底色和屏幕色。
关于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的范例项目定义了一个LAppModel类，以CubismModel作为操作模型的基类，上述代码中的model就是LAppModel类。
它以getModel()为中介从LAppModel类调用CubismModel类的函数。

正片叠底色/屏幕色设置

定义正片叠底色和屏幕色，并在模型中设置它们。
在下面的代码中，它是对所有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) // 屏幕色设置

正片叠底色和屏幕色的获取

使用CubismTextureColor类型获取各Drawable的正片叠底色和屏幕色。

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()覆盖成员数组。