丰富汽车用户体验：结合Qt、Figma和第三方3D引擎

꧁白杨树下꧂

于 2025-03-06 13:40:45 发布

阅读量90

点赞数

分类专栏： QtBlog 文章标签： qt

原文链接：https://www.qt.io/blog/combining-qt-and-third-party-3d-engines

版权

QtBlog 专栏收录该内容

344 篇文章

订阅专栏

Enriching Automotive UX: Combining Qt, Figma and Third-Party 3D Engines

丰富汽车用户体验：结合Qt、Figma和第三方3D引擎

March 05, 2025 by Taylor Fouts | Comments

2025年3月5日，泰勒·富茨发表|评论

Over the past 5 years or so it has become abundantly apparent that automotive consumers expect that when they enter their car they are greeted by 2D controls that are not only responsive and intuitive, but also by 3D graphics that are functional and fluid. From simple seat controls, to the complexities of ADAS scenes driven by real time vehicle sensor data, three-dimensional interfaces are paramount in assisting end users to understand their vehicle's status and its location on the roadway with respect to its surroundings. Companies like Rivian and Toyota are leveling up their driving experience by leveraging 3D engines that were once delegated to strictly video game development. The introduction of gamification to the automotive user experience has also caused a seismic shift in hardware, with many cars now requiring the GPU compute power to process vehicle sensor data and visualize it in 3D as well. However, 3D rendering in automotive is not all strictly business; for example, Rivian's cel-shaded take on 3D is a playful one that hearkens back to their idyllic tagline: "Keep the world adventurous forever". Ford is enhancing their user experience in the Mustang by using 3D to visualize vehicle modes, track mode, and even to create retro-inspired clusters.

在过去5年左右的时间里，很明显，汽车消费者希望当他们进入汽车时，他们会看到不仅反应灵敏、直观的2D控制，而且功能强大、流畅的3D图形。从简单的座椅控制到由实时车辆传感器数据驱动的ADAS场景的复杂性，三维界面在帮助最终用户了解其车辆的状态及其在道路上相对于周围环境的位置方面至关重要。像Rivian和丰田这样的公司正在通过利用曾经被严格委托给视频游戏开发的3D引擎来提升他们的驾驶体验。将游戏化引入汽车用户体验也导致了硬件的巨大转变，许多汽车现在需要GPU计算能力来处理车辆传感器数据，并将其以3D形式可视化。然而，汽车中的3D渲染并不都是严格意义上的业务；例如，Rivian对3D的凯尔特阴影处理是一种俏皮的方式，让人想起他们田园诗般的口号：“让世界永远充满冒险精神”。福特正在通过使用3D来可视化车辆模式、赛道模式，甚至创建复古风格的集群，来增强他们在野马中的用户体验。

Qt Quick 3D

Needless to say, 3D rendering in automotive has gone from a "nice-to-have" option to a prerequisite feature for any premium brand. The team at Qt recognizes this industry requirement and has been enabling customers to enhance their Qt user interfaces with 3D for a number of years, most recently with QtQuick3D. Qt Quick3D seamlessly brings the power of 3D rendering to your applications with minimal code, letting you transform 2D interfaces into immersive experiences without learning complex graphics APIs. Users can leverage Qt Quick's simple APIs to create stunning visualizations and engaging UIs while still maintaining the cross-platform compatibility Qt is known for. Qt enables 3D development with their Qt Design Studio (pictured below) which exports projects to Qt Creator for building and deploying.

不用说，汽车中的3D渲染已经从“锦上添花”的选择变成了任何高端品牌的必备功能。Qt的团队认识到了这一行业需求，多年来一直在让客户用3D增强他们的Qt用户界面，最近一次是用QtQuick3D。Qt Quick3D以最少的代码将3D渲染的力量无缝地带到应用程序中，无需学习复杂的图形API即可将2D界面转换为沉浸式体验。用户可以利用Qt Quick的简单API来创建令人惊叹的可视化和引人入胜的UI，同时仍然保持Qt众所周知的跨平台兼容性。Qt通过其Qt设计工作室（如下图所示）支持3D开发，该工作室将项目导出到Qt Creator进行构建和部署。

QtQuick3D is performant on embedded devices and has a visual fidelity similar to that of other mainstream game engines like Unreal and Unity. Can you guess which engine is rendered in each image below (Qt, Unity or Unreal)?

QtQuick3D在嵌入式设备上表现出色，其视觉保真度与虚幻和Unity等其他主流游戏引擎相似。你能猜出下面每张图片中渲染的是哪个引擎（Qt、Unity还是虚幻引擎）吗？

bd_unreal_new

3rd Party 3D Engine Integration

第三方3D引擎集成

An oft-asked question here at Qt is: "how can I integrate a 3rd-party 3D engine into my Qt application?". Qt helps to enable and even facilitate these type of architectures rather easy as of Qt 6, with the release of APIs like Qt ActivityView. Soheil Armin, R&D Manager, Qt for Android Automotive recently described the API as: "a transformative new back-end for the ActivityView module, significantly advancing user interface development on Android Automotive. Moving beyond the limitations of traditional Java APIs offered by AOSP, this advanced back-end enables fluid integration of third-party Android apps directly into the Qt Quick applications. This brings a new level of flexibility to Qt for Android Automotive user interfaces." Inspired by Soheil's blog post, I decided to test out this new API and see just how easy (or difficult) it might be to integrate an external 3D renderer into my Qt 2D interface.

Qt经常被问到的一个问题是：“如何将第三方3D引擎集成到Qt应用程序中？”。Qt有助于启用甚至促进这些类型的架构，就像Qt 6一样，随着Qt ActivityView等API的发布，这些架构变得相当容易。Android Automotive Qt的研发经理Soheil Armin最近将API描述为：“ActivityView模块的一个变革性的新后端，极大地推进了Android Automotion的用户界面开发。超越了AOSP提供的传统Java API的限制，这种先进的后端使第三方Android应用程序能够直接流畅地集成到Qt Quick应用程序中。这为Android AutomotiveQt用户界面带来了新的灵活性。”受Soheil博客文章的启发，我决定测试这种新的API，看看将外部3D渲染器集成到我的Qt 2D界面中有多容易（或困难）。

The genesis of this project began in Figma, where the 2D assets were created (Special thanks to Shawn Dorsey for the collaboration here):

该项目的起源始于Figma，在那里创建了2D资产（特别感谢Shawn Dorsey在这里的合作）：

As you can see above, there is special consideration given to leaving screen real estate for my 3D scene to the right. From here, it was as simple as using the Qt Bridge for Figma plugin to autogenerate my QML code from my Figma design by opening the project export in Qt Design Studio:

正如你在上面看到的，有一个特别的考虑，就是把屏幕空间留给右边的3D场景。从这里开始，它就像使用Qt Bridge for Figma插件一样简单，通过在Qt design Studio中打开项目导出，从Figma设计中自动生成QML代码：

At this point, I needed to switch out of my comfort zone and over to the Unity IDE. With the help of a number of excellent YouTube creators, I was able to create the following scene:

此时，我需要从我的舒适区切换到Unity IDE。在许多优秀的YouTube创作者的帮助下，我能够创建以下场景：

This project was then built and installed to my AAOS device as a standalone APK aptly named: com.qt.MoonLander.

然后，这个项目被构建并安装到我的AAOS设备上，作为一个名为com.qt.MoonLander的独立APK。

From here, I took the project from Qt Design Studio above and opened it in Qt Creator:

从这里开始，我从上面的Qt Design Studio中获取了这个项目，并在Qt Creator中打开了它：

To embed the Unity apk inside of my Qt application, I added the following code to my App.qml file:

为了将Unity apk嵌入我的Qt应用程序中，我在App.qml文件中添加了以下代码：

ActivityView {
    id: activityView

    // package name of APK for 3D scene
    packageName: "com.qt.MoonLander"
    anchors.fill: parent

    // entry point for 2D Figma UI from Design Studio
    Screen01 {
        id: mainScreen
        anchors.centerIn: parent
    }
}

That's it. The ActivityView is as simple and easy to use as any QML object and can be arranged on a screen in much the same way. As you can see, the packageName could be anything, even an Unreal Engine scene. Making the Screen01 qml object a child of the Unity activity view assures it is on the foreground. From here, I signed, built and deployed the Android APK from Qt Creator to my Android Automotive OS 14 Emulator image. Here it is in all it's beautiful simplicity:

就是这样。ActivityView和任何QML对象一样简单易用，可以以几乎相同的方式排列在屏幕上。如您所见，packageName可以是任何东西，甚至是虚幻引擎场景。将Screen01 qml对象设置为Unity活动视图的子对象，可以确保它位于前台。从这里开始，我签署、构建并部署了Qt Creator的Android APK到我的Android Automotive OS 14模拟器映像中。这就是它美丽的简单之处：

https://vimeo.com/1062573449

You may notice when you watch this video that the top and bottom bar load early while the overlanding controls fade in nicely only after the vehicle scene is loaded. This was an intentional design decision that I selfishly included to show one more powerful API from Qt for Android Automotive: AndroidBroadcastReceiver QML Type. Intents are a longstanding Android interprocess communication protocol that enable you to easily communicate information between applications. To enable this synchronization across domains was also extremely simple with the help of the aforementioned QML API:

可能会注意到，当观看此视频时，顶部和底部栏会很早加载，而重叠控件只有在加载车辆场景后才能很好地淡入淡出。这是一个有意的设计决定，自私地将其包括在内，以展示Qt为Android Automotive提供的一个更强大的API：AndroidBroadcastReceiver QML Type。Intents是一种历史悠久的Android进程间通信协议，能够轻松地在应用程序之间传递信息。在上述QML API的帮助下，实现跨域同步也非常简单：

// Add a new AndroidBroadcastReceiver for Unity splash complete
AndroidBroadcastReceiver {
    id: unitySplashReceiver
    AndroidIntentFilter {
        actions: [
            "com.qt.UNITY_SPLASH_COMPLETE" // The action we defined in Unity
        ]
    }

    onReceived: function(intent) {
        // Check for and log the timestamp extra if it exists
        if (intent.extras.hasOwnProperty("timestamp")) {
            console.log("Unity splash completed at:", intent.extras.timestamp);
        }

        // Inform the 2D UI that the Unity splash screen is complete
        // and now the controls can be shown
        mainScreen.splashScreenComplete = true;
    }
}

Note that Qt provides ready-made, cross-platform integrations with a number of automotive-grade IPC protocols including: CAN, MQTT, Qt Remote Objects and more.

请注意，Qt提供了与许多汽车级IPC协议的现成跨平台集成，包括：CAN、MQTT、Qt远程对象等。

Questions or thoughts? Let's talk! Please reach out to me: taylor.fouts@qt.io

问题或想法？我们谈谈！请联系我：taylor.fouts@qt.io

The full source code for this project can be found here: https://github.com/tbfouts/QtAndroidActivityView3D

此项目的完整源代码可以在这里找到：https://github.com/tbfouts/QtAndroidActivityView3D