HTML を記述するのと同じくらい簡単に、ウェブページ用の 3D モデルを作成できます。
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 を使用した拡張現実をサポートしています。
準備ができたら、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>
安定性
<model-viewer>
が最初のメジャー バージョンに達すると、API の安定性が優先されるため、バージョン 2.0 がリリースされるまで互換性を破る変更は回避されます。
次のステップ
<model-viewer>
バージョン 1.0 には最もご要望の多かった機能が含まれていますが、チームはまだ完了していません。さらに多くの機能が追加され、パフォーマンス、安定性、ドキュメント、ツールが改善されます。提案がある場合は、GitHub で問題を送信してください。また、PR も歓迎します。Twitter で <model-viewer>
をフォローするか、Spectrum のコミュニティ チャットで最新情報をご確認ください。