Kanzi Studio的混融原理与透明效果- 大数跨境

首页

Kanzi Studio的混融原理与透明效果

怿星科技

2018-09-27

导读：使用Kanzi Studio的混融（透明效果）原理实现透明效果的设计。

奥迪MMI系统架构总监Mathias Halliger指出：“无论是用于为驾驶人员提供必要信息，还是用于为乘客提供最先进的娱乐选择，用户界面和信息娱乐系统都已成为豪车之间的主要差别。”

由芬兰Rightware公司所推出的Kanzi软件是一款变革性的车载图形引擎和UI设计工具。一经推出，迅速得到汽车行业主要客户与合作伙伴的青睐。福特曾对Kanzi作出这样的评价：“在Kanzi出现之前，已经有数以十个为UI图形设计人员及应用开发人员打造的设计工具，即所谓的HMI设计工具。Kanzi之所以被称为“变革性”工具，是因为它贯穿了设计到开发实现的各个环节，能把99%以上的设计理念在量产产品上实现。”今天我们就为大家介绍一下如何使用Kanzi Studio的混融（透明效果）原理实现透明效果的设计。

1计算机模拟透明效果

其实质就是颜色的混合，将目标颜色（Destination Color<dest_color>）与源颜色（Source Color<src_color>）进行混合，并通过手动的方式控制两种颜色的占比，达到透明效果的设计。通过以上的方式，可得出如下方程式：

最终颜色(res_color)= src_color * A + dest_color * B

其中，上述表达式的每个颜色分量都在0.0 — 1.0之间，随后我们只需完成2个步骤，一是设定A，B的值，其次是当res_color中的某个分量超过1.0时，进行截断。

2OpenGL模拟透明效果

通过OpenGL控制混合参数A和B的值实现透明效果。首先调用glEnable(GL_BLEND)开启混融效果，其次使用glBlendFunc()或glBlendFuncSeparate()实现对混融参数A和B的控制。

⑴ glBlendFunc方法：glBlendFunc(src_Factor, dest_Factor)需要设定两个参数，src_factor与dest_factor，即A和B值，公式如下：

res_color = src_color * src_factor + dest_color * dest_factor

在OpenGL中，src_factor或dest_factor的值可以分别指定如下的枚举值：如GL_ZERO，GL_ONE，GL_SRC_ALPHA，GL_ONE_MINUS_SRC_ALPHA等。

如：glBlendFunc(GL_SRC_ALPHA，GL_ONE_MINUS_SRC_ALPHA)，即使用源颜色的alpha值进行控制，可得出如下方程式：

res_color = src_color(rgb) * src_color(alpha)+dest_color(rgb) * (1- src_color(alpha))

通过上述公式可得出，当源颜色的alpha是1.0时，最终颜色将不受目标颜色的影响，即不透明状态；当alpha是0.0时，最终颜色将完全由目标颜色决定，即完全透明。上述公式使用的参数是我们最常见的一种，通过源颜色的alpha值来控制透明效果。其余参数的使用可查阅OpenGL的官方文档。

⑵ glBlendFuncSeparate(src_RGB, src_Factor, dest_RGB, dest_Factor)方法：此方法与glBlendFunc()的区别在于多了两个参数src_RGB和dest_RGB，其意义是我们不仅能通过src或dest的Factor参数控制Alpha值的比例，还能通过设置src_RGB与dest_RGB的值，直接控制源颜色和目标颜色红黄蓝三色各自的占比。

3Kanzi模拟透明效果

在Kanzi中，通过Blend Mode来控制glBlendFunc方法的参数设置。Blend Mode有6种参数，分别对应glBlendFunc()以及其参数的选择：

Opaque：不开启混融效果；

Automatic：根据Project属性的预设值选择（Premultiplied或Non-Premultiplied），默认应该是Premultiplied；

Premultiplied：调用glBlendFunc(GL_ONE,GL_ONE_MINUS_SRC_ALPHA)；

Non-Premultiplied：调用glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA)；

Mixed：调用glBlendSeparateFunc(SRC_ALPHA,ONE_MINUS_SRC_ALPHA,ONE,ONE_MINUS_SRC_ALPHA);

Additive：调用glBlendFunc(GL_ONE,GL_ONE);

4Shader模拟透明效果

在Shader中，通过控制BlendIntensity的值实现透明效果。

当我们在Kanzi中自定义一个材质时：

当我们打开Fragment Shader的代码：

如上图所示，BlendIntensity不仅改变了alpha的值，同时还改变了rgb的值，与通过alpha改变透明效果的情况不相符。但当Blend Mode参数设置为Premultiplied或Automatic时，调用公式glBlendFunc(GL_ONE,GL_ONE_MINUS_SRC_ALPHA)，所产生的颜色结果如下所示（BS即BlendIntensity）

res_color = 1.0 * src_color + (1.0 - src_color(alpha)) * dest_color

又因为：src_color = color.rgb * BS;

最终颜色值为：

res_color = color.rgb（源颜色）* BS + (1.0 - BS*color.a) * dest_color（目标颜色）

当color.a的值为1.0时，公式就成为：

res_color = color.rgb * BS + (1.0 - BS) * dest_color

与在Blend Mode中选择Non-Premultiplied参数，并通过BlendIntensity的值来控制源颜色的alpha值计算得出的结果相同。这大概是参数被命名为Premultiplied（预乘）的由来，即提前把alpha值和目标颜色相乘。但重要前提是源颜色的alpha值必须是1.0。如若不是，dest_color做乘法后的值以及最终的颜色得值都将有偏差。

综合上述，如能确定源颜色的alpha通道值为1.0，选择Blend Mode为Premultiplied参数，并在Shader中使用如下方程式：