【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进行。

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) // 屏幕色设置

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

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

public getMultiplyColor(index: number): CubismTextureColor
public getScreenColor(index: number): CubismTextureColor

参数index将是Drawable索引。

Cubism Web Framework的内部处理

用于表达正片叠底色和屏幕色的Framework的内部处理。
按照以下流程处理。

  • 从Cubism Core获取模型正片叠底色/屏幕色
  • 使用覆盖标志判断获取的正片叠底色/屏幕色
  • 在着色器程序中设置获取的正片叠底色/屏幕色
  • 使用标志着色器计算纹理颜色时添加正片叠底色和屏幕色
Tips

模型的正片叠底色和屏幕色是通过RGBA从Cubism Core中获取的,但在Cubism Editor中没有设置A(透明度)。

从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的所有颜色都设置在覆盖颜色信息中。
如果您想再次使用模型的原始设置颜色,您需要追加一个单独的处理。

关于本报道,敬请提出您的意见及要求。