1.1 の概要

HTML を記述するのと同じくらい簡単に、ウェブページ用の 3D モデルを作成できます。

ジョー・メドレー
Joe Medley
GitHub
Rob Kochman 氏
Rob Kochman
X

3D モデルの重要性はこれまでになく高まっています。小売業者は顧客の自宅に店舗内ショッピング体験を 提供します美術館では作品の 3D モデルを ウェブ上に公開しています残念ながら、3D テクノロジーの深い知識やサードパーティのサイトで 3D コンテンツをホストしない限り、優れたユーザー エクスペリエンスを提供する方法でウェブサイトに 3D モデルを追加することは困難です。2019 年の初めに導入された <model-viewer> ウェブ コンポーネントは、数行の HTML を記述するのと同じくらい簡単に 3D モデルをウェブに配置できるようにすることを目指しています。それ以来、チームはコミュニティからのフィードバックやリクエストに対応してきました。その成果は、今年初めにリリースされた <model-viewer> バージョン 1.0 です。このたび、<model-viewer> 1.1 のリリースを発表いたします。GitHub でリリースノートを読むことができます。

昨年から追加された機能

バージョン 1.1 には、ウェブの拡張現実（AR）の組み込みサポート、速度と忠実度の改善、よくリクエストされるその他の機能が含まれています。

拡張現実（AR）

空白のキャンバスに 3D モデルを表示するのも良いことですが、自分の空間で表示できればさらに便利になります。完全にブラウザ内の 3D と AR を実現するために、Chrome Android は WebXR を使用した拡張現実をサポートしています。

<model-viewer> AR 機能のデモ。

準備ができたら、ar 属性を <model-viewer> タグに追加すれば使用できます。modelviewer.dev の WebXR サンプルに示すように、他の属性を使用して WebXR AR エクスペリエンスをカスタマイズできます。以下のコードサンプルは、その内容を示しています。

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

この見出しの下に埋め込まれた動画のようになります。

カメラの操作

<model-viewer> は、ビューの仮想カメラ（視聴者の視点）を完全に制御できるようになりました。これには、カメラのターゲット、軌道（モデルに対する位置）、画角が含まれます。また、自動回転を有効にして、ユーザー操作の制限（最大画角や最小画角など）を設定することもできます。

アノテーション

HTML と CSS を使用してモデルにアノテーションを付けることもできます。この機能は多くの場合、モデルの操作に合わせて移動する方法で、モデルの各部分にラベルを「付加」するために使用されます。アノテーションは、外観やモデルで非表示にする範囲などをカスタマイズできます。アノテーションは AR でも機能します。

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>
アノテーション付きの宇宙スーツ。
注釈付きの宇宙服。

詳細については、アノテーションのドキュメント ページをご覧ください。

編集者

バージョン 1.1 では、<model-viewer> 「編集」ツールが導入され、ホストされています。このツールを使用すると、モデルの迅速なプレビュー、さまざまな <model-viewer> 構成（露出や影のソフトネスなど）を試し、ポスター画像を生成して、アノテーションの座標をインタラクティブに取得できます。

レンダリングとパフォーマンスの改善

特にハイ ダイナミック レンジ（HDR）環境におけるレンダリングの忠実度が大幅に向上します。<model-viewer> は、ビューポートに <model-viewer> 要素が 1 つしかない場合にも直接レンダリング パスを使用するようになりました。これにより、パフォーマンスが向上します（特に Firefox）。最後に レンダリング解像度の動的スケーリングにより フレームレートが大幅に向上しました以下の例は、こうした最近の改善の一部を示しています。

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>
使い心地のよいヘルメットの 3D モデル。
使い勝手の良いヘルメットの 3D モデル

安定性

<model-viewer> が最初のメジャー バージョンに達すると、API の安定性が優先されるため、バージョン 2.0 がリリースされるまで互換性を破る変更は回避されます。

次のステップ

<model-viewer> バージョン 1.0 には最もご要望の多かった機能が含まれていますが、チームはまだ完了していません。さらに多くの機能が追加され、パフォーマンス、安定性、ドキュメント、ツールが改善されます。提案がある場合は、GitHub で問題を送信してください。また、PR も歓迎します。Twitter で <model-viewer> をフォローするか、Spectrum のコミュニティ チャットで最新情報をご確認ください。