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

[最后更新 2022/05/19]

通过将正片叠底色和屏幕色应用于模型,可以实时更改色调。
通过使用 Cubism 4.2 或更高版本的 Cubism Web 框架,无需任何额外编码即可应用 Cubism Editor 上设定的正片叠底色和屏幕色。
关于 Cubism Editor 上的正片叠底色和屏幕色的设定,请参阅Editor手册中的“正片叠底色和屏幕色”。
另外,通过根据需要进行编码,可以从SDK中操作正片叠底色和屏幕色,也可以进行如下操作。

  • 交互式应用正片叠底色/屏幕色
  • 应用未在 Cubism Editor 上设定的正片叠底色/屏幕色
  • 禁用Cubism Editor上的正片叠底色/屏幕色设定

以下是该过程的说明。

 

处理程序

按照以下流程处理。

  • 正片叠底色/屏幕色覆盖标志设定
  • 正片叠底色/屏幕色设定
  • 模型图

 

正片叠底色/屏幕色覆盖标志设定

首先,将正片叠底色/屏幕色覆盖标志设定为真。默认值为false。

public setOverrideFlagForMultiplyColors (value: boolean) 和 public setOverrideFlagForScreenColors (value: boolean)  在Framework的 CubismModel 类中定义。

Cubism SDK for Web 示例项目定义了一个 LAppModel 类,以 CubismModel 作为操作模型的基类,上面代码中的模型就是 LAppModel 类。
它调解 getModel () 从 LAppModel 类调用 CubismModel 类的函数。

 

正片叠底色/屏幕色设定

定义正片叠底色和屏幕色并在模型中设定它们。
在下面的代码中,它是设定红色为正片叠底色,绿色设定为所有Drawables的屏幕色时的设定值。
RGBA 可用作设定颜色。

 

在应用正片叠底色/屏幕色之前

 

应用红色作为正片叠底色和绿色作为屏幕色后

 

首先,循环处理是由模型的Drawable Count进行的,但是正片叠底色和屏幕色处理是由所有Drawable每帧进行的。

Tips

这次为所有Drawable设定了相同的正片叠底色和屏幕色,但也可以为每个Drawable索引设定不同的正片叠底色和屏幕色。
参数 i 是Drawable 索引

 

Tips

要使Cubism Editor上设定的正片叠底色/屏幕色无效,请将正片叠底色设定为 0,将屏幕色设定为 1。这将是每个的初始值。

 

 

模型图

通过调用模型的draw()函数,由Cubism Web Framework内部的渲染过程绘制出包含正片叠底色和屏幕色的模型。
在 Cubism SDK for Web 示例项目中也调用了此函数。

 

其他相关功能

获取正片叠底/屏幕色覆盖标志

 true 优先考虑 SDK 中设定的颜色信息, false 优先考虑模型的颜色信息。

 

 

正片叠底色/屏幕色设定

上面描述了以 cubismrenderer.CubismTextureColor 作为参数的设定方法,但也有可以直接设定 RGBA 的函数。(输入值 0.0 ~ 1.0)

 

 

 

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

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

参数索引 将是可绘制索引

 

Cubism Web Framework的内部处理

表示正片叠底色和屏幕色是Framework的一个内部过程。
按照以下流程处理。

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

 

Tips

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

 

从 Cubism Core 获取模型正片叠底色/屏幕色

使用 Cubism Core 的 API 从模型中获取所有 Drawable 的正片叠底色和屏幕色。

 

Core的API如下。

当 CubismModel 类初始化时,所有的 Drawable 都被获取并存储在成员数组中。
在 SDK 端设定正片叠底色和屏幕色,在 setOverrideFlagForMultiplyColors() 和 setOverrideFlagForScreenColors() 中设定为 true,然后用 setMultiplyColor() 和 setScreenColor() 覆盖成员数组。

 

Tips

进行上述处理时,之后的Drawble的所有颜色都设定在覆盖颜色信息中。
如果您想再次使用模型的原始设定颜色,您需要追加一个单独的过程。

© 2010 - 2022 Live2D Inc.