Google Model Viewerとは？

Google Model Viewer（以下Model Viewer）は、3DモデルをWeb上で表示するためのライブラリです。GoogleによるオープンソースのWeb技術で、内部的には「Three.js」という3Dグラフィックスライブラリを活用しています。

2024年5月にModel Viewerの簡単な使い方について解説しましたが、10月になって新しいメジャーバージョンであるv4.0.0がリリースされました。本記事では、この新しいバージョンについて紹介します。

特徴

  • <model-viewer /> という単純なHTMLタグを使うだけで3Dモデルが表示可能
  • オープンソースで無料利用可能
  • スマートフォンでARとして表示する機能も搭載
  • Three.jsの複雑な設定を意識せずに使える

最新バージョン（v4.0.0）の新機能と改良点

1. トーンマッピングの進化：より自然な色表現へ

トーンマッピングとは？
高ダイナミックレンジ（HDR）の画像データを、一般的なディスプレイで表示可能な低ダイナミックレンジ（LDR）に変換する技術です。

具体的な変更点：

  • 旧バージョン：「ACES」（映画業界標準）がデフォルト
    • 課題：明るい黄色や緑・青の色再現が難しかった
  • 新バージョン：「PBR Neutral」がデフォルト
    • 特徴：Eコマースや製品表示に最適化
    • メリット：より正確な色の再現が可能に

※従来のACESを使いたい場合は tone-mapping="aces" と指定することで利用可能です。

2. カメラオービットの最適化

カメラオービットとは？
3Dモデルの周りをカメラが回転する際の設定のことです。

変更内容：

  • 旧設定：Infinity 157.5deg auto
  • 新設定：Infinity 180deg auto
  • 効果：より自然な視点での3Dモデル表示が可能に

3. Materials APIの大幅改善

Materials APIのサンプルがWebXRモードで動作するようになりました。

実際のデモは<model-viewer> Materials & Scene Examplesにて確認できます。

再現するためのコードもあるので、内容を確認してください（長いので、この記事中には掲載しません）。

4. Three.jsの最新化

  • 内部で使用しているThree.jsがr169にアップデート
  • 参考：2024年11月時点でのThree.js最新版はr170

導入方法（詳細手順）

1. 基本的なセットアップ

HTMLファイルに以下のスクリプトを追加します：

<script
  type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js">
</script>

2. 3Dモデルの表示方法

実際の使用例（スミソニアン博物館の宇宙服3Dモデルを表示）

<model-viewer
  src="shared-assets/models/NeilArmstrong.glb" ar
  environment-image="shared-assets/environments/moon_1k.hdr"
  poster="shared-assets/models/NeilArmstrong.webp"
  shadow-intensity="1"
  camera-controls
  touch-action="pan-y">
</model-viewer>

主要な属性の説明

  • alt: モデルの説明文（アクセシビリティのため重要）
  • src: 3Dモデルファイルのパス
  • ar: AR表示機能の有効化
  • environment-image: 環境マップの設定
  • poster: 読み込み中に表示される画像
  • shadow-intensity: 影の強さ
  • camera-controls: カメラ操作の有効化

ブラウザ対応状況

  • 最適な動作： Chromium系ブラウザ（Google Chrome、Microsoft Edge）
  • 一部制限あり： Safari
    • 実験的機能の一部が利用できない場合あり
    • 基本的な3Dモデル表示は問題なし

活用シーンと具体的な使用例

3Dモデルのプレビューと共有

  • 製品の3Dカタログ
  • デザインレビュー用の3Dモデル共有

Eコマース活用

  • 商品の360度ビュー
  • スマートフォンでのAR試着・設置シミュレーション
  • 詳細な商品検証用の3Dビューワー

建築・不動産分野

  • 建築モデルの3D表示
  • 内装のバーチャルツアー
  • 建築計画の3Dプレゼンテーション

教育コンテンツ

  • 3D教材の作成
  • 歴史的建造物の立体表示
  • 科学実験のシミュレーション

インタラクティブコンテンツ

  • JavaScriptと連携した対話的な3D表示
  • ユーザー操作による3Dモデルのカスタマイズ

向いていないケース

  • 物理演算を多用する3Dゲーム
  • 複雑なアニメーションが必要なコンテンツ
  • 高度なグラフィックス処理が必要なシミュレーション

まとめ

Model Viewerは、特に以下の点で優れた選択肢となります：

  • 導入の簡単さ
  • 豊富な機能セット
  • v4.0.0での色表現の改善
  • AR/VR対応の充実

3Dコンテンツの実装を考えている方は、ぜひModel Viewerの活用を検討してみてください。特に最新のv4.0.0では、より実用的な改善が施され、さらに使いやすくなっています。

公式ドキュメントやサンプルコードを参考に、まずは簡単な実装から始めてみることをお勧めします。ARやVRでの活用も視野に入れながら、革新的なWebコンテンツを作っていけることでしょう。