05：kanzi渲染效果之能耗折线图制作
其他/设计爱好者/5天前/331浏览
版权
05：kanzi渲染效果之能耗折线图制作
1、概述
本文档详细讲解如何在 Kanzi 中实现一个等宽、无闪烁、无黑边、可实时交互的车载 HMI 折线图效果，包含完整的模型制作规范、Shader 代码原理解析、Kanzi 工程设置步骤。
1.1 最终效果
- 折线粗细完全均匀，旋转 / 移动相机不闪烁
- 折线交接处平滑无缺口、无黑边
- 底部填充区域颜色渐变自然，和线条完美衔接
- 30 个 A 值实时控制折线形状，交互流畅
- 适配车载深色 UI，视觉质感优秀
1.2 建模步骤
第一步：建模（分「线条层」+「填充层」，同属一个模型）
- 制作核心折线线条层（对应起伏线条）
- 新建矩形：X轴尺寸为0，Y轴尺寸为2（对应2单位线宽），矩形中心位于Y=0位置（即Y轴范围为-1至+1），平面朝向+Z方向，分段设置为1x1。
- 复制矩形：将上述矩形复制29个，得到共计29个完全相同的矩形，所有矩形均放置在X=0的位置，X坐标保持固定，不得在X轴方向拉开间距。
- 注意规则：相邻矩形的重合顶点，禁止进行焊接、优化或合并操作。例如，第1个矩形的右侧2个顶点与第2个矩形的左侧2个顶点，即便坐标完全一致，也需保持4个独立顶点，不可合并为2个。
- 制作半透填充层（对应蓝色填充区域）
- 新建填充矩形：同样创建29个矩形，与线条层的29个矩形一一对应，所有填充矩形均堆放在X=0的位置。
- 设置填充矩形尺寸：每个填充矩形的上边缘与线条层对应矩形的下边缘（Y=-1位置）对齐，下边缘延伸至Y=-241位置（与Shader中的MAX LINE HEIGHT 241完全对应），X轴宽度仍保持为0。
- 注意规则：与线条层要求一致，相邻填充矩形的重合顶点，禁止进行焊接、合并操作。
- 合并为最终模型
选中所有线条层矩形和填充层矩形，执行对象连接并删除冗余的操作，将所有矩形合并为一个模型。重点注意：合并完成后，绝对禁止执行「优化」操作，绝对禁止焊接重合顶点。
第二步：UV设置（需创建2套UV标签）
为模型添加2套UV标签，第一套命名为「UV0」（对应Shader的kzTextureCoordinate0），第二套命名为「UV1」（对应Shader的kzTextureCoordinate1），两套标签分开设置，具体要求如下：
- 第一套UV（UV0标签，核心作用：为每一段分配唯一ID，确保Shader可识别）
- U轴（X方向）：从第1段到第29段，U值从0均匀递增至1。示例：第1段所有顶点U值=0；第2段所有顶点U值=1/29（约0.034）；第3段所有顶点U值=2/29（约0.069）……第29段所有顶点U值=1。同一分段内，所有顶点（包括线条层和填充层对应顶点）的U值必须完全一致。
- V轴（Y方向）：为每一段分配唯一且不重叠的V值，V值必须与Shader中的offsets数组完全对应。示例：若Shader中第1段offset=0.0，则第1段所有顶点V值=0.0；第2段offset=0.03，则第2段所有顶点V值=0.03……以此类推，同一分段内所有顶点的V值必须完全一致，且不得与其他分段的V值重叠。
- 第二套UV（UV1标签，核心作用：区分每一段的左右/上下，实现旋转和抗锯齿效果）
- U轴（X方向）：每个矩形（无论属于线条层还是填充层），左侧2个顶点的U值=0.0，右侧2个顶点的U值=1.0，无中间过渡值，左右顶点严格区分。
- V轴（Y方向）：每个矩形，上边缘2个顶点的V值=1.0，下边缘2个顶点的V值=0.0，矩形会自动实现线性过渡，无需额外调整。示例：线条层矩形上边缘（Y=+1）的顶点V值=1.0，下边缘（Y=-1）的顶点V值=0.0；填充层矩形上边缘（Y=-1）的顶点V值=1.0，下边缘（Y=-241）的顶点V值=0.0。
第三步：顶点色设置（Shader通过顶点色区分线条层和填充层）
为模型添加一个顶点颜色标签，按照以下规则为所有顶点上色，每个顶点仅允许一个颜色通道为100%，绝对禁止多通道混合：
- 线条层所有顶点：蓝色通道（B）设置为100%，红色通道（R）、绿色通道（G）均设置为0。
- 填充层所有上边缘顶点（与线条层下边缘对齐的顶点行）：红色通道（R）设置为100%，绿色通道（G）、蓝色通道（B）均设置为0。
- 填充层所有下边缘顶点（最底部的顶点行）：绿色通道（G）设置为100%，红色通道（R）、蓝色通道（B）均设置为0。
第四步：导出FBX（适配Kanzi的设置要求）
- 选中已完成的模型，执行文件导出操作，选择FBX格式，版本选择FBX2020及以下版本，以保证最佳兼容性。
- 导出设置调整：仅勾选「几何体」「顶点颜色」「UV」「平滑组」四项，其他选项（如摄像机、灯光、动画等）全部关闭。
- 坐标轴设置：选择Y轴向上，与Kanzi的坐标轴设置保持一致，禁止翻转坐标轴。
- 重点注意：绝对禁止勾选「优化顶点」「焊接重合顶点」选项，否则会导致独立顶点被合并，模型功能失效。
- 尺寸要求：不提前对模型进行缩放，保持原始尺寸，导出单位选择厘米即可，后续可在Kanzi中进行二次尺寸调整。
模型资源：
参考附件：Linefill.fbx
1.3 Shader 代码原理解析
1.3.1 核心设计思路
- 模型只提供基础形状：所有矩形堆在原点，不做任何变形
- Shader 负责动态生成效果：运行时识别每一段、拉开 X 轴间距、计算旋转、控制线宽
- 屏幕空间线宽：彻底解决透视畸变、粗细不均问题
- 预乘 Alpha：彻底解决抗锯齿黑边问题
1.3.2 顶点着色器详解
1）核心配置区
这里定义了整个效果的「尺寸规矩」，所有计算都基于这些数值，保证模型和 Shader 严丝合缝。
2）输入输出变量
in是从模型拿数据，uniform是从 Kanzi 面板拿可调节参数，out是把计算好的信息传给片元着色器。
3）精准段识别（核心功能）
这就像给每一段发了一个「身份证号」（UV0.V），Shader 通过比对身份证号，精准知道当前顶点属于哪一段。
4）屏幕空间等宽线（核心技术，解决粗细不均 + 闪烁）
- 直接在屏幕像素级别计算线宽，不管模型离相机多远、角度怎么变，线在屏幕上永远是固定像素宽度
- 同时计算线段在屏幕上的垂直方向，线宽永远垂直于线段，保证等宽
1.3.3 片元着色器详解
1）屏幕空间抗锯齿（解决闪烁）
- 直接用模型 UV 做抗锯齿，相机移动时采样点跳变，会出现闪烁问题
- 现在采用顶点传递的线宽边缘信息做抗锯齿，和相机位置无关，边缘永远平滑稳定
2）预乘 Alpha（解决黑边）
- 使用预乘 Alpha：先把颜色和 Alpha 乘一遍，再混合，消除黑边问题
Shader代码：
详见附件：
SimpleLineGraph.vert.txt
SimpleLineGraph.frag.txt
2、Kanzi 工程设置步骤
第一步：导入 FBX 模型
- 把导出的 FBX 文件Import到Kanzi工程中
- 为模型增加切线空间
第二步：创建材质并创建Material Type
- 新建Material Type命名为SimpleLineGraph
- 双击打开材质编辑器，复制顶点和片元着色器代码
- 点击Sync With Uniforms，同步生成材质内对应名称、类型的属性
第三步：把材质赋给模型
- 选中场景里的折线模型
- 右侧属性面板找到Material属性
- 把刚才创建的SimpleLineGraph材质拖进去赋给模型
- 实时预览，调整 A 值和颜色值就可以看到折线动态效果了！
五、总结
本套 Kanzi 车载折线图方案，专为车规级 HMI 场景深度定制，在车载嵌入式低算力环境下具备性能优势，同时兼顾落地易用性与效果稳定性。
一、核心性能优势
- 极致轻量化，GPU 负载极低：单 Mesh + 单材质仅需 1 个 DrawCall 完成折线 + 填充的全量渲染，单模型仅 200 + 顶点，内存占用为 KB 级。
- 零运行时开销，无卡顿风险：运行时仅需每帧传递 30 个 float 数值，无 Mesh 重建、无堆内存分配、全程零 GC，CPU 开销几乎为 0，完美符合车规级功能安全的实时性要求。
- 启动速度拉满：仅依赖单 FBX 模型 + 单 Shader，无任何插件冗余依赖，配车载启动快速响应的硬性要求。
二、落地与效果核心优势。
- 模型制作简单：所有矩形初始堆放在原点，无需复杂变形、布线操作，制作门槛极低，修改维护便捷。
- 效果稳定可靠：采用屏幕空间等宽线 + 预乘 Alpha 技术，彻底解决了折线粗细不均、交接处缺口黑边、相机移动闪烁等问题，全视角下效果一致。
- 交互响应流畅：通过 30 个 A 值即可实时控制折线形状，无额外计算开销，数值修改即时生效，交互响应无延迟。
- 可扩展性极强：可基于现有框架快速扩展折线动画、触摸交互、多色分段折线、阈值预警变色等车载 HMI 常用功能，无需重构核心逻辑。
0
Report
声明
收藏
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
You may like
相关收藏夹
Log in
推荐Log in and synchronize recommended records
收藏Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share
3