近年、Webブラウザ上で3Dコンテンツを手軽に表示・操作できる技術としてWebGL※1が注目されています。WebGLはブラウザ上で直接GPUを活用できるため、インストール不要でリッチなグラフィック表現が可能です。
WebGLを利用した3Dコンテンツ制作の手段として弊社では、ゲームエンジン「Unity」や、Webコンポーネントである「<model-viewer>」を活用しています。今回はこの2つを比較し、それぞれの特徴と使い分けについて解説します。
「Unity」の特徴
Unityとは？
Unity(公式サイト)は、非常に多機能な統合開発環境（ゲームエンジン）です。
3Dや2Dのグラフィック描画からサウンドの再生、ユーザーインターフェース（UI）の作成、さらにはゲームデータの管理まで、このソフト一つで開発に必要な工程をほぼすべて完結できます。
また、WindowsやMacなどのPC向けはもちろん、Webブラウザ上で動作するWebGLや、PlayStation5（PS5）やNintendo Switchなどの主要なゲーム機にも、一つのプロジェクトから簡単に出力できることも大きな特徴です。
開発方法について
Unityでの開発は、主にGUI※2とC#によるスクリプトの二つの方法で進められます。
GUIでは、エディターの画面上でゲームオブジェクトの配置やボタンのレイアウト、シーンの構築などをマウスを使って直感的に修正できます。コードを書かずにある程度の動作や演出を実装できるため、初心者にも取り組みやすい環境となっています。
一方で、より高度で複雑な動作を実現したい場合は、C#言語によるプログラミングで対応します。GUIによる設定とC#スクリプトを組み合わせることで、高度なプログラムロジックの作成から、アニメーション制御など、細かな挙動を自由にカスタマイズできます。
Unityによる制作物について
Unityは単なるゲーム開発のためのツールにとどまらず、近年では幅広い分野で活用が進んでいます。たとえば、映画やCM、アニメーション制作の現場では、Unityを使った3D映像制作が行われています。
Unityのリアルタイムレンダリング機能を利用することで、従来のように長時間のレンダリングを待つことなく、リアルタイムで映像を確認しながら制作を進めることが可能です。
特に、アニメーション制作の現場では、キャラクターの動きや表情をリアルタイムで確認しながら調整できるため、制作が大幅に効率化されます。
活用例:Unityがトヨタ自動車の車内体験を向上させる次世代HMIに採用される（引用: ユニティ・テクノロジーズ・ジャパン/株式会社トヨタ自動車）
また、製造業や医療、建築業界などの企業では、Unityを使った3DシミュレーションやVRコンテンツが職業研修の教材として採用されるケースが増えています。
従来の紙のマニュアルや座学だけでは習得が難しかった複雑な作業や、危険を伴う作業の手順などを、実際の操作に近い形で再現できるのが大きな魅力です。
製造業の現場では、生産ラインの操作訓練やトラブル対応のシミュレーションに活用され、作業員が実際に現場に入る前に具体的な作業イメージを掴むことができます。
Unityは他の開発環境と比べて、幅広い機能を備えており、VR（仮想現実）やAR（拡張現実）機能との統合も容易です。 その柔軟性を活かし、ゲーム開発の枠を超えて職業研修やインタラクティブなアート制作、教育分野など、さまざまな分野での活用が進んでいます。
「<model-viewer>」の特徴
<model-viewer>とは？
<model-viewer>(公式サイト) は、Googleによって開発が主導されているWeb技術(ライブラリ)です。 内部では、Three.js(公式サイト)という強力なJavaScriptライブラリが使われています。
Three.jsは、Webブラウザ上で3Dグラフィックスを描画するための技術であるWebGLを、より扱いやすくするためのJavaScriptライブラリです。
WebGLは高機能ですが、プログラミングが複雑で専門的な知識を必要とします。Three.jsは、そうしたWebGLの複雑さを隠し、3Dオブジェクトの作成や表示、アニメーションなどを、JavaScriptのコードで直感的かつ簡単に記述できるようしています。
<model-viewer> はそのThree.jsを利用しつつ、機能をビュワーに絞ることで、コンピュータの言語に近い「複雑なコード」を意識することなく、「簡単に高度」な表現が実現できます。
圧倒的実装スピードと速さ
<model-viewer> の最大の魅力の一つは、その軽量性と、実装の手軽さにあります。
スマートフォンなどのモバイルデバイスでの表示において、Webサイトの表示速度を損なうことなく、最適化されたパフォーマンスを発揮するため、あらゆる環境で一貫したユーザー体験を提供できます。
利用方法についても非常に簡単で、構築するhtml上で
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
の文でダウンロードし、以下の文を追記します。
<model-viewer src="model.glb" auto-rotate camera-controls></model-viewer>
このように単純に利用するだけであれば、たった２文だけで利用が開始出来ます。
複雑なJavaScriptライブラリを組み込んだり、ビュワー機能に関しては独自に機能開発をする必要が無いため、高度な3Dプログラミングの知識を必要とすることなく簡単に、そして素早く3Dモデルをページに組み込むことができます。
拡張性とインタラクティブ性について
<model-viewer> は、ただ3Dモデルを表示するだけでなく、ユーザーとのインタラクションを考慮した豊富な機能を提供しています。例えば、モデルの回転やズーム、パン(下記参照)といった基本的な操作はもちろんのこと、 ホットスポット※3（モデル上の特定の位置に情報を表示する機能）の設定、アニメーションの再生、環境光や影の調整など、多岐にわたるカスタマイズが可能です。
パンとは(引用: ゲームの表現についてまとめるサイト/カメラワーク用語と使い所)
アドオンである<model-viewer-effects>を利用すれば、あるオブジェクトにだけアウトラインを追加するなどコンテンツに追加のエフェクトを付与することも可能です。
さらに、WebXRとの連携により、対応デバイスではモデルを現実空間に表示するAR（拡張現実）体験も手軽に実現できます。
両者の比較と使い分けについて
ここまで、Unityと<model-viewer>の特徴を見てきましたが、両者はそれぞれ異なる目的やプロジェクトに適したツールです。
次に、2つのツールをどのように使い分けるべきか、具体的なケースを見ていきましょう。
Unity が向いているケース
Unityが向いているのは、たとえばゲームやインタラクティブなシミュレーションのように、高度な演出や複雑な動作が求められる場合です。複数のオブジェクトを同時に扱い、それらが互いに影響を与え合うようなコンテンツをつくるときには、Unityの豊富な機能やカスタマイズ性が非常に頼りになります。
さらに、Webだけに限らず、PCアプリやモバイルアプリ、さらにはVRやARコンテンツへも同じプロジェクトで展開できます。このクロスプラットフォーム性は、将来的にマルチデバイス対応を視野に入れたプロジェクトにとって大きなメリットです。
ただし、これらの自由度の高さは同時に開発の難易度の高さにつながります。
また、UnityがWeb向けに書き出した際に、出力されたファイルサイズが大きくなる傾向があります。このような負担も伴うため、プロジェクトの規模や予算によっては慎重な判断が必要です。
<model-viewer> が向いているケース
一方、「<model-viewer>」が活躍するのは、Webサイト上で製品を3Dで見せたいECサイトや、ポートフォリオサイトにおける3Dモデルの展示、あるいは製品紹介ページのように、単体のモデルを表示することが主目的のケースです。
HTMLのタグを記述するだけでモデルを表示できるため、短時間で導入でき、開発コストや保守コストも低く抑えられます。
また、ファイルサイズが軽く、スマートフォンなどのモバイル環境でも表示が安定しているため、ユーザー体験を損なわずに3D表現を取り入れられる点も強みです。ただし、その簡便さゆえにできることは限定的であり、複雑な動きや複数オブジェクトを絡めたシーン構成などには対応しきれないため、大規模なインタラクティブコンテンツには向いていません。 それでも、単純にモデルを美しく見せることを主目的とする場合には、過剰な機能が不要な分、最も効率的で実用的な選択肢と言えるでしょう。
まとめ
WebGLを活用した3Dコンテンツ制作にはさまざまなアプローチがあります。「Unity」は高機能で表現力が豊かですが、その分コストや運用負荷が高くなりがちです。一方「<model-viewer>」は非常に手軽で、軽量な3Dモデル表示には最適です。
目的やプロジェクトの規模に応じてツールを選択することで、より良い3Dコンテンツ開発が可能になります。
脚注
※1 参考:WebGLとは？仕組みやできること、対応ブラウザについて簡単に解説！
※2 グラフィカルインターフェース(Graphic User Interface)のこと。アプリをマウスなどで操作する為の画面。（参考:「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典/GUI）
※3 リンク先の宇宙飛行士の3Dモデルに追加されている脚注の為のUI部品。（参考:googleの<model-viewer>公式ドキュメント）