VisionOS Safariで始まる、HTMLだけで3Dモデルを扱える時代

こんにちは。サービシンクR&Dの藤原です。Apple Vision Pro向けに配信が始まったVisionOS 26で、前回の記事でも触れたHTMLの<model>要素をSafariが標準サポートしました。WebKit公式ブログの「A Step Into the Spatial Web」では動画付きで実装の様子が紹介されているので、まだご覧になっていない方はまずそれを見てもらうのが一番分かりやすいと思います。

Webページの中に3Dオブジェクトを直接埋め込み、ユーザーが自由に触れるようになったわけです。さらに、こちらが見る位置を変えるとオブジェクトの角度も変化して見えるようになっています。iOS 26でも写真を立体的に表示する機能が追加されましたが、それと同じような体験がWeb上でもできるようになりました。

これまでもWebに3Dを持ち込むことは可能でしたが、制作の現場にそのまま導入するには高いハードルがありました。WebGLやThree.jsのようなライブラリのおかげで比較的簡単に扱えるようにはなりましたが、シェーダーやカメラ制御など専門的な知識が必須で、案件によってはコスト面でも難しいものでした。商品を立体で見せたいとか、建築物を回転させて眺めたいといった要望が出ても、工数や技術面での負担から実現できないこともあったでしょう。そうした状況を大きく変えるかもしれないのが、今回の<model>要素です。

これまでWebで3Dを扱うのが大変だった理由

Webで3Dを扱う取り組みは昔から存在していました。90年代にはVRML、2000年代にはX3Dといった規格が登場しましたが、どちらも普及には至りませんでした。その後、2011年ごろからWebGLが実用化され、Three.jsやBabylon.jsといったライブラリが広まり、ようやく「ブラウザで3Dを表示する」ことが現実的になったのです。

ただしこうした手法は、どうしても専門的な領域でした。HTMLやCSSを使う感覚で「ちょっと埋め込む」というわけにはいかず、JavaScriptでシーンを作り、カメラを設定し、レンダラーを走らせるといったコードを書き込む必要がありました。

さらに、外部ライブラリに依存していたことも大きなハードルだったはずです。有名ライブラリは進化のペースが速く、バージョンによってAPIの挙動が変わったり、古いコードがそのまま動かなくなったりすることも少なくなかったでしょう。CDNで読み込む場合も「どのバージョンを使うか」を管理しなければならず、チーム開発では依存関係のずれがトラブルにつながることもあったと考えられます。単に「モデルを配置したい」だけでも、ライブラリの更新や調整に時間を割かざるを得ない状況は、制作現場にとって大きな負担になっていたはずです。

こうした背景を踏まえると、今回の<model>要素の登場は大きな転換点になります。これまで複雑なコードや外部ライブラリに頼らざるを得なかった3Dの扱いが、HTMLの標準だけで記述できるようになったからです。

HTMLで3Dを直接読み込めるようになった

たとえば、従来は「環境光を入れて、触って回せるモデル」を埋め込もうとすると、数十行のJavaScriptを書かなければなりませんでした。以下はその一例です。

従来（Three.js の例）

<canvas id="c"></canvas>
<script type="module">
  import * as THREE from 'https://unpkg.com/three@0.160/build/three.module.js';
  import { OrbitControls } from 'https://unpkg.com/three@0.160/examples/jsm/controls/OrbitControls.js';
  import { RGBELoader } from 'https://unpkg.com/three@0.160/examples/jsm/loaders/RGBELoader.js';
  import { GLTFLoader } from 'https://unpkg.com/three@0.160/examples/jsm/loaders/GLTFLoader.js';

  const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('c'), antialias: true });
  renderer.setSize(innerWidth, innerHeight);
  renderer.outputColorSpace = THREE.SRGBColorSpace;

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(50, innerWidth/innerHeight, 0.01, 100);
  camera.position.set(0, 1, 3);

  const controls = new OrbitControls(camera, renderer.domElement);

  new RGBELoader().load('/envs/studio.hdr', (hdr) => {
    hdr.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = hdr;
  });

  new GLTFLoader().load('/models/product.glb', (gltf) => {
    scene.add(gltf.scene);
  });

  (function loop(){
    requestAnimationFrame(loop);
    controls.update();
    renderer.render(scene, camera);
  }());
</script>

新しい<model>要素

<model stagemode="orbit" environmentmap="/envs/studio.hdr">
  <source src="/models/product.usdz" type="model/vnd.usdz+zip">
  <img src="/imgs/product.jpg" alt="サンプル商品">
</model>

従来は「シーンを作る」「カメラを置く」「レンダラーを走らせる」といった準備が必須でしたが、<model>ならHTMLにタグを置くだけで同じような体験を実装できます。これがどれほど大きな変化かは、コードを並べてみると一目瞭然です。

もちろんThree.jsのようなライブラリには、パソコンを含む幅広い環境で動く、シェーダーやエフェクトを自由に組み込める、といった強みがあり今後も使われ続けるでしょう。ただ、これほど簡単に3Dを扱える仕組みが標準に加わったことで、「ちょっと3Dを試してみたい」という制作者の背中を押す存在になったのは間違いありません。Webに立体を組み込むことを特別なことではなくし、空間的なWeb体験を前に進めようとするAppleの意思が、ここにはっきりと表れています。

3Dモデルをどう用意するか

<model>要素を活用するには、まず3Dモデルを用意する必要があります。 手軽に試したいならWebKitが公開しているサンプルや、Appleが提供するReality Composer Proに含まれるサンプルのUSDZモデルを使うことができます。

LiDARセンサーを搭載したiPhoneやiPadを持っていれば、身近なものを自分でスキャンすることもできます。Reality Composerアプリを使って、小物や家具程度までならスキャンしてUSDZに変換できます。もうひとつの方法がフォトグラメトリで、複数の写真から立体を再構成する技術です。屋外のオブジェクトや比較的大きな対象でも扱えるので、LiDARでは難しい場面を補う手段として広く使われています。

しかしスキャンしたいものが建物のようにさらに大規模な対象になると、どちらの手法でも限界があります。その場合はやはりBlenderのようなモデリングソフトを使って一から作る必要があります。BlenderはUSDフォーマットの入出力にも対応しているので、作成したモデルをUSDZにエクスポートすればそのままWebに利用できます。

さらに、近年はAIを使った生成サービスも増えています。MeshyやTripoのように、テキストや画像を入力するだけで立体モデルを作れる仕組みは、試作やアイデア検証にとても便利です。加えて、Webサイトの世界観を伝えたり没入感を高めたりするコンテンツ制作にも応用できます。一方でECサイトの商品モデルのように「実物と3Dモデルが一致していること」が前提となる場面では、AI生成だけに頼るのはリスクがあります。その場合はフォトグラメトリやLiDARで現物を取り込み、必要に応じてBlenderで修正する、といった組み合わせが現実的でしょう。

つまり、モデルの用意には「既存の素材を使う」「現物をスキャンする」「一からモデリングする」「AIで生成する」といった複数の道筋があり、目的に応じて最適な方法を選ぶことが大切になると考えられます。

Web制作者の役割とこれから

VisionOS 26でSafariが<model>要素をサポートしたことは、Webの3D表現を標準の一部に近づける大きな出来事です。テキスト、画像、動画に続いて、3Dまでもが日常的な選択肢になる時代が見えてきました。

3Dモデル自体はデザイナーが作ることが多いでしょうが、それをWebに適切に組み込み、快適に体験できるようにするのはWebエンジニアの仕事です。簡単に組み込めるようになったとはいえ、依然として回転モードを調整したり、環境マップを工夫して印象を変えたりと、UXデザインの延長で3Dの見せ方を考えることが求められます。平面のレイアウトから一歩進んで「立体をどう見せるか」に踏み込むわけです。3Dコンテンツがもっと一般的になれば、負担も増えますが、新しい表現を提案できるチャンスにもなります。

仕様はまだ発展途上で対応ブラウザも限られていますが、数年後には「Webで3Dを回して見る」ことが当たり前になっているかもしれません。サービシンクR&Dでは、こうした変化を追いながら実際のプロジェクトで検証を重ねています。Webが空間的な体験を取り込み始めたいま、新しい前提を理解し、現場でどう活かしていくかを考えることが重要だと感じています。