WebGL のロード時間と市場投入までの時間を短縮

Marxent が Unity のプロフェッショナルサービスによってアプリケーションのパフォーマンスを最適化した方法

Marxent:Unity プロフェッショナルサービスのケーススタディ

2 つの高機能なソフトウェアプログラムと多種多様なブラウザ技術を合わせて最高のユーザー体験を作り出すにはどうすればよいのか?Marxent は世界トップクラスの開発者チームの総力を結集してウェブ用の 360 度 3D のインテリアデザインのツールを最適化し、それを使って客や店員が自分たちで高度なビジュアライゼーションを行ったり、それを変更したりできるようにしました。さらに Unity プロフェッショナルサービスを活用して、より良い製品をより早く市場に届けられるようになりました。

Beck と Barry Besecker は 2011 年に Marxent をスタートさせ、最先端の 3D 技術を活用することによって、小売業者、特に個人住宅向けの家具やインテリアを専門とする業者の売り上げを増やし、返品を減らす手伝いをしました。当初、Besecker 兄弟はワンオフの AR、VR アプリケーションを作成しましたが、パフォーマンスの向上や、統合型のコンテンツ管理を実現する必要性に迫られ、OpenGL を Unity のリアルタイムエンジンに切り替えました。その結果、Marxent® 3D Cloud プラットフォームは業界の最先端を行くソリューションとなり、同社は現在、オムニチャネル 3D デザインとビジュアライゼーションの分野で世界をリードする企業となっています。

  • プロジェクト

    迅速でインタラクティブなビジュアライゼーションがインテリアデザインの売り上げを増やし、返品を減らす

  • 目標

    種々のブラウザ環境でのアプリのロード時間を最適化

  • プラットフォーム

    WebGL、iOS、Android

  • チームメンバー

    80

  • 場所

    オハイオ州、マイアミズバーグ – オースティン・ランディング

Unity のリアルタイムエンジンはなくてはならない要素です

Marxent の 3D Room Designer は、ブラウザーベースのインテリアデザインツールです。このツールは、高機能な 3D 環境内で、消費者や販売店員がさまざまな家具、色、壁、寸法を自由に組み合わせることができるというものです。シンプルでレスポンシブなインターフェースを通じて、消費者は実際の見た目を確認しながら家具を組み合わせたり、予算を見積もったりすることができます。Unity のリアルタイムエンジンは、このツールの重要なコンポーネントとなっています。

Marxent では、WebGL を実装した最新の 3D Room Designer でデモを行っていた際、新規のクライアントからロード時間が長すぎることを指摘されました。Marxent のエンジニアはアプリケーション全体に対して大規模な最適化を行ったばかりだったのですが、この問題の原因は明らかになりませんでした。しかし、エンジニアたちは消費者により良いエンドユーザー体験を提供し、売り上げを伸ばすために、引き続き問題の解決に取り組みました。

当時彼らは、Unity リアルタイムエンジンについての深い見識がなく、WebAssembly のような、ときに特異な現象をもたらすコードフォーマットがある場合に、レンダリングプログラムがどのように動作するかについてあまり理解していませんでした。そこで Marxent は Unity プロフェッショナルサービスに連絡し、原因究明と問題解決のための支援を要請しました。Unity のコードと Marxent のコード、さらには .dll やフレームワークの構造を調べて、起動やロード時間(特に WebGL プラットフォームでの動作)に悪影響を与えているものは何なのかを明らかにしてもらうことにしたのです。

その成果は以下のとおりです。

  • 3D プログラムの速度と効率性を高めることで顧客体験が改善
  • Unity プラットフォームを取り扱う社内スタッフの専門スキルが向上
  • ともに世界トップクラスのソフトウェア企業としての、2 社間の提携関係が強化

目標: ロード時間の短縮

3D Room Designer のフロントエンドは、ネイティブな HTML と JavaScript でビルドされ、後者は外部の JavaScript の呼び出しを通じて Unity WebGL Player とやり取りします。それをパワーアップするのが Marxenta が作り管理する一連のライブラリで、ライブラリはすべての Marxent® 3D Cloud アプリケーションの間でシェアされます。

Marxent の開発者からプロジェクトのアーキテクチャ、システム、開発プロセス、セットアップ、ライブラリについての説明が行われた後、Marxent と Unity のチームは WebGL のプレイヤーデータとコードベースのサイズを縮小し、アプリケーションフローを最適化することに力を集中しました。具体的には次のようなことを実行しました:

  • WebAssembly の実装
  • プレイヤービルドから不要なアセットを削除し、大きな必須アセットのサイズを最適化
  • 不要な Unity のパッケージ(モジュール)を削除
  • ストリッピングの改善とマネージドコードライブラリの一部を削除することによってマネージドコードのサイズを最適化
  • シェーダのコンパイル時間とファーストシーンのアップフロントロード時間を最大限に短縮
  • その他の CPU に関するボトルネックを削除

後にアプリと WebAssembly との調和がこのアプリケーションのパフォーマンス最適化(APO)プロジェクトの主要な部分だったことがわかりました。WebAssembly は高速で実行されるテキストフォーマットで、World Wide Web Consortium(W3C)によって開発されたコードで JavaScript を補完できるようにします。 Marxent の製品開発リーダー、Vince Kilian によると、「WebAssembly の統合は Unity 2018.3 のリリースによってもたらされた最も重要な機能の 1 つです」

ひとりの人間がもたらす変化

Unity のリードサポートエンジニアのひとりは、1 週間、現場でクライアントのチームといっしょに過ごしました。Marxent の CTO であり共同創設者の Barry Besecker は言います。「彼の専門知識の深さと幅広さは驚くばかりのものでしたが、おそらくもっと重要なのは、彼が私たちのチームの要となってくれたことです。このすばらしい人物のおかげでチームワークは最高でした」彼の問題解決の能力がすばらしく、企業向けの Unity プラットフォームに関して豊富な経験を備えていたことは言うまでもありませんが、同時にコミュニケーションの中心として Marxent のチームと Unity の開発者やエンジニアをつなぎ、さまざまなソリューションをもたらしました。特にワークセッションでは Unity の WebGL の達人のひとりからのメッセージを直接チームに伝え、すばらしいアイデアを思いついたり厄介な問題を解決したりする手助けをしました。

また彼は、Unity の知的所有権を保護しながらも、Unity の「ブラックボックス」での作業についてしばしば有益で実践的なアドバイスをチームに提供しました。「問題の原因を深いレベルまで掘り下げるためには、システムの構造についてもある程度の理解が必要です。Unity の一部には複雑にネスト化されたステートメントがあり、また一部のスタックは追跡が非常に困難です。したがって彼が持つ深い専門知識と見識は私たちにとってとても重要でした」

高度に生産的な共同作業

APO の実施後、Marxent は顧客に対して、フロントエンドのロード時間の問題を早期に解決する方法が見つかり、ただちに実装される見込みであることを伝えました。「何か問題がある場合、私たちはすぐにお客様の意見を聞くようにしています。今回のケースの場合、ある新規のお客様にテスト環境のプロトタイプを使ってもらっていたので、改善点をよりスムーズに確認してもらうことができました」(Besecker 氏)。Marxent の概算によると、ロード時間が 30% 短縮され、感覚的にかなりの改善効果があったとのことです。

この経験を踏まえて Marxent では現在、シェーダーシステム(Unity 2018.3 で導入されたシェーダーパイプラインとレンダーパイプライン)の拡張性向上に向けた開発支援用の作業指示書を作成しています。

Marxent では、ユーザー生成による動的な環境やオブジェクトを強化していくという Unity の今後の方針に期待を寄せています。「いくつかの開発者カンファレンスで Unity のプロジェクトを見てきましたが、画面に数百万のインスタンスがあるのに対し、コール数はそれよりもはるかに少なく、非常に革新的だと思いました。ただし、あれは大量のオブジェクトを処理する場合の例ですよね。Marxent の場合、数千台ものソファーを同時に生成するわけではありません」(Kilian 氏)。

たしかにそうかもしれませんが、Marxent は数千台のソファーの売り上げには貢献しています。商業用 AR/VR ツールの開発において、世界をリードしているのです。プロフェッショナルサービスのような連携作業は、2 つの面でメリットをもたらします。1 つは製品が最適化されるということです。そしてもう 1 つは、ソリューションに関する Unity 側の見識が深まることで、Unity の製品やロードマップがさらに強化され、新たに形成されていくということです。たとえば、Marxent との共同作業を通じて、Unity は汎用診断ツールとしてのメモリプロファイラーの重要性を再認識しました。また、動的小売アプリ用のシェーダーシステムにおけるリアルタイムライティングの重要性も再認識しました。

「他のベンダーは一切考慮しませんでしたが、Unity を選んだことは正解でした。彼らは私たちが誇る技術と調査研究を高く評価し、私たちは Unity こそがアプリの最適化をサポートする正しい選択肢であることを確信しました。また正直言って、彼らにはすぐにプロジェクトに取りかかれる専門家スタッフがいました」

Barry Besecker, CTO and Co-Founder, Marxent

弊社のウェブサイトは最善のユーザー体験をお届けするためにクッキーを使用しています。詳細については、クッキーポリシーのページをご覧ください。

OK