自動車UX向上：Qt、Figma、サードパーティ製3Dエンジンの組み合わせ

過去5年ほどの間に、自動車の消費者たちは、反応が良く直感的な2Dコントロールだけでなく、車両に乗り込んだ際に機能的でスムーズな3Dグラフィックにも対応することを期待していることが明らかになりました。単純なシートコントロールから、車両のリアルタイムセンサーデータによって駆動される複雑なADASの場面まで、3Dインターフェースは、エンドユーザーが車両の状態や周囲の環境との位置関係を理解する上で非常に重要です。リビアン(Rivian)やトヨタなどの企業は、かつてはビデオゲーム開発にのみ使用されていた3Dエンジンを活用することで、ドライビング体験を向上させています。 自動車のユーザー体験にゲーミフィケーションを導入したことで、ハードウェアにも大きな変化がもたらされ、多くの車では現在、車両センサーデータを3Dで処理および視覚化するためにGPUの処理能力が必要となっています。しかし、自動車の3Dレンダリングがすべてではありません。例えば、リビアンのセルシェーディングによる3Dは、同社の牧歌的なキャッチフレーズ「いつまでも冒険心を忘れない」を想起させる遊び心のあるものです。フォードは、車両モードやトラックモードを視覚化し、レトロ調のクラスターまで作成するために3Dを使用することで、マスタングのユーザー体験を向上させています。

Qt Quick 3D

言うまでもなく、自動車業界における3Dレンダリングは、プレミアムブランドにとって「あればいい」オプションから「なくてはならない」機能へと変化しています。Qtチームは、この業界のニーズを認識しており、数年前からQtユーザーインターフェイスに3Dを追加できるようにしてきました。最近では、Qt Quick 3Dで対応しています。Qt Quick 3Dは、最小限のコードで3Dレンダリングのパワーをアプリケーションにシームレスに導入し、複雑なグラフィックAPIを習得することなく、2Dインターフェイスを没入感のある体験に変えることができます。ユーザーは、Qt QuickのシンプルなAPIを活用して、Qtの特長であるクロスプラットフォームの互換性を維持しながら、素晴らしいビジュアライゼーションや魅力的なユーザーインターフェイスを作成することができます。Qtは、Qt Design Studio（下図）で3D開発を可能にし、プロジェクトをQt Creatorにエクスポートしてビルドとデプロイを行います。

Qt Quick 3Dは組み込みデバイス上で優れたパフォーマンスを発揮し、UnrealやUnityなどの他の主流ゲームエンジンと同等のビジュアル品質を実現しています。以下の各画像でレンダリングされているエンジンが、Qt、Unity、Unrealのどれであるか、当ててみてください。

サードパーティ製3Dエンジン統合

Qtではよく聞かれる質問として、「サードパーティ製の3DエンジンをQtアプリケーションに統合するにはどうすればよいか？」というものがあります。Qt 6では、Qt ActivityViewのようなAPIがリリースされ、Qtはこのようなアーキテクチャを容易に実現できるよう支援しています。 Soheil Armin（Qt for Android AutomotiveのR&Dマネージャー）は最近、このAPIについて次のように説明しました。

ActivityViewモジュールの革新的な新しいバックエンドであり、Android Automotiveのユーザーインターフェース開発を大幅に前進させます。AOSPが提供する従来のJava APIの限界を乗り越え、この先進的なバックエンドにより、サードパーティのAndroidアプリをQt Quickアプリケーションに直接、スムーズに統合できるようになります。これにより、Qt for Android Automotiveのユーザーインターフェースに新たなレベルの柔軟性がもたらされます。」 Soheilのブログ投稿に触発され、この新しいAPIを試して、外部の3DレンダラーをQt 2Dインターフェイスに統合するのがどれほど簡単（または難しい）か見てみることにしました。

このプロジェクトの始まりはFigmaで、2Dアセットが作成されました（Shawn Dorseyとの共同作業に感謝します）。

ご覧の通り、右側の3Dシーンの画面領域を確保するために特別な配慮がされています。ここからは、プロジェクトのエクスポートをQt Design Studioで開くことで、Qt Bridge for Figmaプラグインを使用してFigmaのデザインからQMLコードを自動生成するだけです。

この時点で、自分の快適ゾーンから抜け出し、Unity IDEに切り替える必要がありました。多くの優れたYouTubeクリエイターの助けを借りて、次のシーンを作成することができました。

このプロジェクトは、スタンドアロンAPKとして、com.qt.MoonLanderという適切な名前で、AAOSデバイスにビルドおよびインストールされました。

ここから、上記のQt Design Studioからプロジェクトを取り出し、Qt Creatorで開きました。

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
    }
}

これだけです。ActivityViewは、QMLオブジェクトと同様にシンプルで使いやすく、画面上でも同様に配置することができます。 ご覧の通り、packageNameはどのようなものでもよく、Unreal Engineのシーンでも構いません。Screen01 qmlオブジェクトをUnityのアクティビティビューの子要素にすることで、そのオブジェクトが最前面に表示されるようになります。ここから、Qt CreatorからAndroid APKに署名、ビルド、デプロイを行い、Android Automotive OS 14エミュレータイメージに展開しました。以下がその成果です。シンプルで美しいです。

このビデオをご覧になると、上部と下部のバーが早くロードされ、車両のシーンがロードされた後にオーバーランドコントロールがきれいにフェードインするのに気づくかもしれません。これは、Qt for Android Automotiveのより強力なAPIをもう一つ紹介するために、意図的に含めたデザイン上の決定です。AndroidBroadcastReceiver QML Typeです。インテントは、アプリケーション間で情報を簡単に通信できる、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;
    }
}

また、Qtは、CAN、MQTT、Qt Remote Objectsなど、自動車グレードのIPCプロトコルを含む、多数のクロスプラットフォーム対応の既製統合機能も提供しています。

ビジュアルと安全性を両立

自動車のディスプレイに印象的な3Dビジュアルを統合するには、安全性を考慮しながら慎重にバランスを取る必要があります。自動車の安全基準であるISO 26262では、異なるASIL評価のコンポーネント間の干渉を排除することが求められています。一方で、リッチなグラフィックはドライバーの理解を深め、プレミアムな体験を生み出すことができますが、重要な情報の確実な伝達を決して損なってはなりません。速度計や警告通知などの安全上重要な要素は、装飾的な視覚要素が機能しなくなった場合でも、確実にレンダリングされる必要があります。適切に設計されたシステムでは、これらの領域間に適切な分離が実装され、グラフィカルな機能が車両の主要な安全機能に干渉しないようにします。この微妙なバランスにより、メーカーは消費者が期待する「感動」と、規格要件が求める「信頼性」の両方を実現することができます。最終的には、視覚的に魅力的で機能的に妥協のないインターフェイスが生まれます。

Qt Safe Renderer は、ASIL 評価の安全要件と豊かなユーザー体験のギャップを埋める重要なミドルウェアとして機能します。CRC チェックや UI watchdog などの機能を備えたモニターレンダラーアーキテクチャを実装することで、Qt は、インフォテインメントシステムに問題が発生した場合でも、重要な車両情報が確実に表示されるようにします。以下に、このようなアーキテクチャの実例を紹介します。

ご覧の通り、Qt Safe Rendererは「安全ではない」ドメイン内にコンテンツのレンダリングに使用できますが、ASIL評価を受けたマイクロコントローラやセーフコアなどの「安全な」ドメインからそのコンテンツを監視することができます。このコンテンツは、上図のように他のハイエンドなビジュアルと組み合わせることで、視覚的に素晴らしいだけでなく安全なアーキテクチャを実現することができます。

ご質問やご意見はありますか？ ぜひお聞かせください。原文著者の連絡先は taylor.fouts@qt.io です。Qt Group日本オフィス宛のお問合せはこちらです。

このプロジェクトの全ソースコードは、こちらでご覧いただけます： https://github.com/tbfouts/QtAndroidActivityView3D