汽车可视化——渲染流程介绍

﹏ヽ暗。殇╰゛Y 2022-12-27 14:14 206阅读 0赞

汽车可视化（Vehicle Visuallzation，通常也叫做汽车CG），通常指一切使用虚拟技术制作汽车影像的工作。其完整流程根据顺序大致包含3D车模建模、动画（可选）、特效（可选）、渲染、后期合成。除了HMI设计领域外，汽车可视化主要应用于产品设计、市场营销。

在HMI设计中，汽车可视化的主要目的有以下几点：

1.一个漂亮的车模可作为UI设计中部分页面的关键视觉元素，拔高UI设计的品质；

2.将某些比较专业的功能结合车模和动画进行演示，可以帮助用户快速理解并使用该功能，如变道辅助、智能远光灯；

3.将汽车的各项设置参数结合车模一起显示出来，可以让用户更加直观了解车辆状态，如胎压、悬架高度等；

4.汽车的电子手册中可以加入车模，让用户快速浏览查阅车上各部件名称及用途。

HMI汽车可视化由于呈现于UI中，其侧重点除了追求高质量的车辆造型和质感表现以外，还需要与UI界面的色彩和元素相匹配，在视觉上达到呼应和统一。

作为怿星设计中心的3D设计师，我有幸参与了一汽红旗H9、E-HS9，北汽新能源阿尔法T等项目的HMI设计。在项目中我主要负责3D车模的渲染和动画工作。在这里，我给大家简单介绍一下HMI设计中3D车模的渲染流程。

# #

## **材质指定** ##

汽车表现的核心是车漆的反射表现，表现的质量由车漆材质、灯光设置、渲染角度这三大要素共同决定。我们先来了解一下真实的车漆材质。

车漆根据分类方式不同叫法也有一些区别，我们可以根据高光的模糊程度把车漆分为高光漆、磨砂漆等。磨砂漆常出现在改装车中，并不常见于原厂车。原厂车漆的分类通常是根据车漆中是否还有金属颗粒，分为金属漆（Metallic Carpaint）和非金属漆（Unicolor Carpaint）两大类。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 1][]

从生产工艺来看，金属漆和非金属漆都含有三层，从下到上分别为底漆、色漆、清漆。底漆至于色漆下层，肉眼不可见，通常可忽略；色漆是体现真实汽车颜色的涂层；清漆覆盖于色漆上，它是保护色漆的一层透明涂层，能够产生漂亮的反射，真实世界中的车漆类似于镜面的反射就是清漆产生的。

金属漆的色漆层由于包含有很多细小的金属片（通常为铝片），导致它在视觉效果上与非金属漆的不同。金属漆有清漆产生的类似镜面的清晰高光，并且在其周围会有一片柔和的渐变高光，高光颜色一般为金属漆色漆的近似色，这也是金属漆经常被叫做变色漆的原因。近距离观察金属漆的这种渐变高光，会发现高光带有明显的颗粒感，这些细小的颗粒就是色漆层中的金属片，渐变高光就是金属片反光形成的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 2][]

我们在3D软件中调节车漆材质时，也是参考真实世界的车漆特性，模拟出车漆复杂而漂亮的光感。车漆材质调节时，需要同时调节出色漆和清漆层的材质，并通过特定的方式叠加起来。为了配合UI中的柔和、高级的微渐变和质感，车漆的清漆层通常会做一定的柔化处理，营造出一些磨砂漆的感觉。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 3][]

除车漆材质以外，车身常见的塑料、橡胶材质，需要做次表面散射（光线可以穿透到物体表面内部一定深度的现象，常见于人体皮肤、玉石、果汁等）模拟，模拟出材质的高级感。内饰的真皮材质需要制作皮纹纹理，车胎的纹理需要做置换处理等等。车辆的各项材质参数需要结合灯光经过反复的微调和优化，力求让用户“即使说不出来，也能感受得到”其材质的细节和质感，以提升整个HMI设计的质感和高级感。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 4][]

# #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 5][]

## **角度确认** ##

汽车的渲染角度根据车辆要表现的结构特征及所要展示的功能来确定。结构特征主要指车辆外观（内饰）设计中的重要造型结构，这些特征结构通常能体现车辆结构中的设计语言，或传承了车辆家族化设计的基因。调节一个好的角度，将某些结构特征优美的展现出来，是汽车渲染的重要一环。展示功能是指悬架调节、自动解锁等具体的车辆功能，为了方便展示某项特定功能，可能需要一个特定的角度来展示车辆。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 6][]

# #

## **灯光布局** ##

灯光布局是在角度确认的前提下进行的。当渲染角度确定后，车辆需要表现的结构即已确定，灯光布局的作用就是通过光源产生的高光、中间调、阴影来反应、强调车身的特征结构，并产生一定的美感。在电脑中进行虚拟灯光布局的原理，与真实世界中摄影布光所用到的原理和艺术处理是相似的。

我们首先确定主光源，主光源通常需要同时照亮车辆主体及特征结构，同时具有一定的艺术性。下面的例子中主光源为渐变面光源，照亮了车身主体，两条主要腰线通过不同的明暗强调了出来，同时为车窗玻璃加上了一层柔和好看的渐变反射，与UI视觉效果匹配。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 7][]

接下来我们给主光源没有照亮的区域来一些补光，把车辆其余重要的结构表现出来，注意补光的亮度不可过亮。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 9][]

然后，我们需要增强一些金属件的视觉效果，如车轮毂、车门下部装饰件等。我们新建一个光源，并结合3D软件做一些特殊设置，让光源只照亮这些金属件，并将这些部件单独渲染出来。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 10][]

最后，我们给车辆添加一些轮廓光、环境光，把车灯点亮，单独渲染出地面阴影。至此，灯光布局的初调步骤完成，灯光布局的精调和修改，需要结合第四步渲染输出进行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 11][]

# #

## **渲染输出** ##

根据我们对车辆渲染的灯光设置，我们可以根据实际情况（通常根据后期合成调节情况）将灯光分组，再使用分层渲染或者AOV等技术使不同组的灯光单独照射汽车并进行渲染，最后对渲染结果进行合成输出。这种方式也是专业汽车摄影中常使用的手法，即将灯光按组分类，分别照明车辆并进行拍摄，最后将不同组灯光下拍摄的车辆在PS中进行单独调节并合成，形成最终的效果。这样做的好处是我们后期可以在不重新渲染的情况下，对最终的渲染效果进行一定程度的调节和优化。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 16][]

渲染合成完成后，最终的效果可能还不能达到我们的预期，这时我们需要把渲染图放入UI界面，然后对每个图层进行检查、微调，以至于达到更好的效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 17][]

HMI设计中的汽车可视化要求把握好汽车造型设计师的设计意图，把汽车特征结构通过光影关系恰当的表现出来，并赋予一定的美感；同时需要与HMI的UI界面风格协调匹配，需要结合UE，方便用户完成各项功能。此项工作对于艺术、技术以及其他学科（物理、数学、用户体验等）方面的知识都有一定要求，是一项对综合能力要求较高的工作。

为更好的展现渲染流程，文章中部分图片来源于网络，如有侵权请联系删除，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70]: /images/20221120/0af474cda52c4dc4b3efcbd7ae502d09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201211191309496.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201211191326279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201211192658281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201211192040110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201211192713576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020121119211145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201211192209549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201211192328655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201211192355444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201211192411488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201211192429166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/2020121119250028.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201211192515362.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20201211192536609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20201211192552249.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/202012111926085.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/2020121119262615.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MzM0MDgw,size_16,color_FFFFFF,t_70