在Qt Design Studio中使用3D图形和视觉效果

Working with 3D graphics and visual effects in Qt Design Studio

在Qt Design Studio中使用3D图形和视觉效果

November 24, 2022 by Matteo Capelletti | Comments

​2022年11月24日，Matteo Capelletti |评论

To build delightful automotive experiences, designers need advanced tools enabling the creation of outstanding graphical user interfaces with minimal time and effort. Qt Design Studio includes all the resources to easily create stunning UI applications that include state-of-the-art 3D graphics and run with optimal performance on any embedded system.

​为了打造令人愉悦的汽车体验，设计师需要先进的工具，以最少的时间和精力创建出色的图形用户界面。Qt Design Studio包含所有资源，可轻松创建令人惊叹的UI应用程序，其中包括最先进的3D图形，并在任何嵌入式系统上以最佳性能运行。

The modern in-car experience is increasingly drifting towards the use of 3D graphics to enhance the in-vehicle experience. Surround-view monitors, parking assistants and navigation systems for head-up displays are just a few examples of applications that rely intensively on 3D graphics. These advanced driver-assistance systems (ADAS) are becoming more common as they widely extend the driver's situational awareness through realistic renderings of the car in its real-time surroundings. In all of these cases, the so-called “digital twin” has become a popular way of visualizing the vehicle’s status and performance inside the car by means of advanced 3D graphics.

现代车内体验越来越倾向于使用3D图形来增强车内体验。全景监视器、停车辅助系统和平视显示器的导航系统只是高度依赖3D图形的应用程序的几个例子。这些先进的驾驶员辅助系统（ADAS）正变得越来越普遍，因为它们通过汽车在实时环境中的真实渲染来广泛扩展驾驶员的情景感知。在所有这些情况下，所谓的“数字孪生”已经成为一种流行的方式，通过先进的3D图形来可视化汽车内部的状态和性能。

Let's look together at how such great 3D graphics become part of the UI applications powering the modern car's digital cockpit.

让我们一起来看一下，如此出色的3D图形是如何成为为现代汽车数字驾驶舱提供动力的UI应用程序的一部分的。

3D-enhanced HUD navigation system
3D增强HUD导航系统

3D Design and UI creation

3D设计和UI创建

To begin with, 3D models are created in a 3D content creation tool such as Blender, Maya or 3ds Max. The 3D car model can include animations for turning on and off the lights, opening and closing doors etc. With current state-of-the-art graphics tools and abilities, the quality of such 3D images can be incredibly good, to the point that it may be hard to distinguish them from a high-resolution picture or video of a real object.

首先，3D模型是在3D内容创建工具（如Blender、Maya或3ds Max）中创建的。3D汽车模型可以包括用于打开和关闭灯光、打开和关闭车门等的动画。使用当前最先进的图形工具和功能，此类3D图像的质量可以非常好，以至于很难将它们与真实物体的高分辨率图片或视频区分开来。

But in themselves, such 3D designs are just images and to drive meaningful in-car experience they should become part of a UI application, whose behavior is interconnected to other functions, services and sensors linking the visuals to the world. This is what happens in Qt Design Studio.

但就其本身而言，此类3D设计只是图像，为了推动有意义的车内体验，它们应该成为UI应用程序的一部分，其行为与其他功能、服务和传感器相互连接，将视觉效果与世界联系起来。这就是Qt Design Studio中发生的事情。

In Qt Design Studio, each component of the 3D model can be connected to data coming from car's sensors. In this way, the lights of the 3D model in my car's UI turn on when the real car’s lights are turned on, and similarly doors may open and close. The behavior of the 3D model appearing in the UI is now connected to the functioning of the real car. In a more sophisticated ADAS application, we see the 3D car model on the road with other 3D rendered cars and possibly pedestrians around it, in a 3D representation that mirrors the actual situation of the car.

在Qt Design Studio中，3D模型的每个组件都可以连接到来自汽车传感器的数据。这样，当真实汽车的灯光打开时，我汽车UI中的3D模型的灯光就会打开，类似地，车门也会打开和关闭。UI中出现的3D模型的行为现在与真实汽车的功能相关。在一个更复杂的ADAS应用程序中，我们看到道路上的3D汽车模型，以及其他3D渲染的汽车和周围的行人，以反映汽车实际情况的3D表示。

Outrun ADAS scene
其他ADAS场景

Through data binding, Qt Design Studio enables the connection of the design with the real world. Here the UI application comes to life from the visuals coming from the design and the data coming from the car’s sensors.

通过数据绑定，Qt Design Studio实现了设计与现实世界的连接。在这里，UI应用程序通过来自设计的视觉效果和来自汽车传感器的数据而变得生动起来。

Design and Development

设计开发

When the 3D graphics assets are imported in Qt Design Studio, no detail is lost, and the design remains intact and looks exactly the same as in the 3D content creation tool.

当在Qt Design Studio中导入3D图形资产时，不会丢失任何细节，并且设计保持完整，看起来与3D内容创建工具中的完全相同。

In Qt Design Studio, technical artists have all the tools to transform the visual content (designs, prefabs, textures, light) into a real UI application by adding states, transitions and property bindings to it.

在QtDesignStudio中，技术艺术家拥有所有的工具，通过向其添加状态、过渡和属性绑定，将视觉内容（设计、预制、纹理、灯光）转换为真实的UI应用程序。

All these operations can be implemented visually by clicking and dragging properties onto the model, without the need to write a single line of code. However, it is beneficial to know that, at every time of the process, the UI that is being created in Qt Design Studio is also automatically converted into QML code. At any point, the user is free to choose whether to change the UI visually or by editing the code. The two representations are synced in real-time so that any change made to one representation is immediately reflected in the other one. The possibility to work on code paves the way for the backend developers, who can use the same tool as the designers to work on other aspects of the UI, like data integration and testing.

所有这些操作都可以通过单击属性并将其拖到模型上以可视化方式实现，而无需编写一行代码。然而，知道在过程的每个时候，在QtDesignStudio中创建的UI也会自动转换为QML代码，这是非常有益的。在任何时候，用户都可以自由选择是以视觉方式还是通过编辑代码来更改UI。这两个表示实时同步，以便对一个表示所做的任何更改立即反映在另一个表示中。编写代码的可能性为后端开发人员铺平了道路，他们可以使用与设计人员相同的工具来处理UI的其他方面，如数据集成和测试。

This possibility for designers and developers to work together on the same tool ensures that not only the compelling appearance of the UI is preserved from prototyping to deployment, but also that the user experience is optimized in the backend and corresponds to what the UX designers had originally planned. 

设计人员和开发人员在同一工具上合作的这种可能性不仅确保了UI从原型设计到部署的引人注目的外观，而且还确保了用户体验在后端得到优化，并符合UX设计人员最初的计划。

Creating the wow factor

创造惊喜因素

Powerful 3D graphics have a wealth of important automotive use cases and increase the prestige of a car brand. Qt Design Studio offers full support to physically based rendering (PBR) for full compatibility with standard material models. Adherence to the PBR standard substantially simplifies the task of importing 3D assets in that it ensures that the model will look in Qt Design Studio exactly the same as in the content creation tool, without the need to create custom shaders for different surface types. PBR also enables access to thousands of 3D models available online that can be used and customized according to the UI application's needs. But there is more to it. 

强大的3D图形具有丰富的重要汽车使用案例，并提高了汽车品牌的声誉。Qt Design Studio完全支持基于物理的渲染（PBR），以与标准材质模型完全兼容。遵守PBR标准大大简化了导入3D资源的任务，因为它确保了模型在Qt Design Studio中的外观与内容创建工具中的外观完全相同，而无需为不同的曲面类型创建自定义着色器。PBR还允许访问数千个在线可用的3D模型，这些模型可以根据UI应用程序的需要使用和定制。但还有更多。

Light, shadows and reflections are essential to creating a realistic 3D scene. Qt Design Studio offers several types of light, including Image Based Lighing with HDR maps, for photorealistic rendering. In addition, the availability of Global Illumination allows to model indirect lighting and to make the scene even more realistic. 

光线、阴影和反射对于创建逼真的3D场景至关重要。Qt Design Studio提供了几种类型的灯光，包括基于图像的照明和HDR贴图，用于照片级真实感渲染。此外，“全局照明”（Global Illumination）的可用性允许对间接照明进行建模，并使场景更加逼真。

Post-processing effects add the final touch to the 3D model and scenes. Qt Design Studio has 21 post-processing effects to choose from – with more planned for future releases. Blur, depth of field, anti-aliasing, tone mapping are just some of the readily available effects (3D Effects | Qt Design Studio Manual 3.8.0). Post-processing effects can easily be added via drag-and-drop to make a 3D scene more immersive and add a cinematic touch to the full UI.

​后期处理效果为3D模型和场景添加了最终触感。Qt Design Studio有21种后期处理效果可供选择，并计划在未来发布更多效果。模糊、景深、抗锯齿和色调映射只是一些现成的效果（3D效果| Qt Design Studio手册3.8.0）。可以通过拖放轻松添加后期处理效果，使3D场景更具沉浸感，并为整个UI添加电影般的触感。

Finally, particle effects are excellent for creating eye-catching animations that simulate fluid and air flows inside and outside the car. Particles can be used for stunning animations involving morphing, sparks, dust and smoke. External weather conditions that may adversely affect driving – such as rain, wind or snow – can also be effectively represented through particle effects.

最后，粒子效果非常适合创建引人注目的动画，模拟汽车内外的流体和空气流动。粒子可以用于令人惊叹的动画，包括变形、火花、灰尘和烟雾。可能对驾驶产生不利影响的外部天气条件（如雨、风或雪）也可以通过粒子效应有效地表现出来。

Qt Design Studio is optimized for creating particle effects in embedded environments, where processing power may be limited – as in the devices used in cars. 

Qt Design Studio是为在嵌入式环境中创建粒子效果而优化的，在嵌入式环境下，处理能力可能会受到限制——比如在汽车中使用的设备中。

https://play.hubspotvideo.com/29ef5b90-01a4-43eb-bb23-f90223726d3a

Particles effect modeling the in-car ventilation in the Outrun demo

在Outrun演示中模拟车内通风的粒子效果