どこかにひっそりと佇む Safari テクノロジープレビュー 161 リリースノート は、新しい HTML 要素と属性のサポートに関する一見無害な行です。
サポートの追加
<model src>と名誉<source type>属性（[メール保護])
私が認識していない要素についての言及を見るたびに、私の心は真っ直ぐに行きます は！ 私には新しいニュースですが、他の人にとってはおそらく古いニュースです. それは姿勢が悪いことだと私は知っています。
- うーん、独自の実験のように見えます。
- うわー、本当に新しいこと！
真実は、それはXNUMXつすべてのようなものです。
進化し続けるコンセプトです
のように、私が見つけた最初のやや公式に聞こえるもの <model> W3C仕様にはありませんでしたが、 説明者のための WebKit のレポ. README にあるのは、2021 年の巨大なメモだけです。 <model> 要素はイマーシブ Web CG に移動しました。」 飛び越えようとしたけど目が合った HistoryAndEvolution.md 上の初期のコンテキストの素晴らしい要約を含むファイル <model> 概念：
<model>素子 は、次のステップに進み、Safari と iOS の統合のエクスペリエンスを向上させたいという願望から生まれました。 ARクイックルック 特徴。
AR Quick Look の Apple のスプラッシュ ページを見なければなりませんでした。 携帯電話のカメラを使用して自宅で製品の 3D レンダリングを転置できる、一部の店舗の新機能をご存知ですか? それが私たちが話している種類のものであり、 Apple は、メトロポリタン美術館からの素敵なケース スタディをリンクしています。.
この限られた文脈から私が理解しているように：
- ドロップ
<model>ドキュメント内の要素。 - 外部ソース ファイルを追加します。
<model src="assets/example.usdz">.
元の提案は Immersive Web Committee Group からのものです
それがチームです 仮想現実 (VR) と拡張現実 (AR) をウェブの一部にします。 Appleがレポをリンクしたので、私はジャンプして行きました 説明者に直接. これは仕様でも何でもなく、元の提案です。 要素のより良い定義！
HTML では、次のような要素を介して多くのメディア タイプを表示できます。
<img>,<picture>または<video>ですが、3D コンテンツを直接表示するための宣言的な方法は提供していません。 ページ内に 3D コンテンツを埋め込むのは比較的面倒で、<canvas>エレメント。 3D モデルを、既にサポートされている他のメディア タイプと同等の立場に置く時が来たと考えています。[...]
HTML
<model>要素は、ウェブサイトがインタラクティブな 3D モデルを他のビジュアル メディアと同じくらい便利に埋め込むことを可能にすることを目的としています。 モデルは、3D オーサリング ツールによって作成されるか、動的に生成されることが期待されますが、サーバーによってスタンドアロン リソースとして提供されます。
基本的な例はこれをまとめたものです。 それは本当にのように感じます <video> or <picture> 要素：
<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>.usdz? .glb? 通常、私のデスクを横切るタイプのファイルではありません。 これらおよびその他のファイルタイプをブラッシュアップする必要があると思います <model> 支持するかもしれません。 繰り返しますが、これらはすべて当初の提案にすぎません。
草案の提案はまだ完全にスタブ化されていません
しかし、それはします 素敵なアウトラインを提供する 物事がどこに行く可能性があるか：
- ドキュメントへのモデルの追加
- 双方向性を有効にする
- 複数のフォーマットのサポート
- フォールバック コンテンツの提供
- アクセス可能にする
理解しなければならないことがたくさんあります。 そこにあるもののほとんどは、対処が必要な文書化された問題です。 しかし、それはより多くの光を当てます <model> 均一に感じさせる提案された属性のように 他には？ ような <video> など autoplay, controls, loop, muted, poster, etc.
さらにさかのぼります
私が見つけた 3D モデリングの最も初期の言及は Keith Clark の 2018 年の投稿 と呼ばれるカスタム要素のプロトタイプを作成します。 <x-model>. 彼はそれを「DOM と CSSOM へのアクセスを提供するプレースホルダー」と説明し、読み込みとレンダリングは スリー.js.
キースのアイデアは、 <model-viewer> 2020年に共有されたコンポーネントJoe Medley (そしてその後の update それに）。 さえあります そのためのホームページ ニール・アームストロングを宇宙でドラッグするのは楽しいです.
もしかしてただの実験？
つまり、ドラフト仕様は具体化されていません。 Apple は、Safari TP 161 の発表のおかげで喜んでボールをプレーしようとしているようだ。 それは完全に理にかなっています Apple の AR に対する強気ぶり 全体として。 (アップルメガネ、 誰でも？）
Google は、Web Components 側ではありますが、ドアに足を踏み入れているようです。 Apple と Google が Web 上の AR に何を求めているかで利益相反が生じる可能性があることは容易に理解できます。
これらはすべて、すべてを理解しようとする私のメモです。 私がこれまでに知っていることよりも、もっと多くのニュアンスがなければなりません. 頭のいい人なら、もっときちんとした弓を結べるに違いない <model> コメントで。 😉
Safari Technology Previewについて話している間、 先日発売されたばかりの162 そしてそれは可能にします CSS のネスト と CSS 相対色の構文.
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源： https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/
