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