ブラウザでの3D：テクノロジーとフレームワーク

ブラウザでの3D：テクノロジーとフレームワーク

Webは静かに3D体験のための本格的なプラットフォームになりました。単純な回転する立方体から始まったものは、大手ブランドのプロダクトコンフィギュレーター、科学者のためのデータ可視化、本格的なゲーム、没入型AR/VR体験へと進化しました。これらはすべてブラウザのタブで動作し、インストールは不要です。

Web 3Dを支える中核技術

基盤には、これらすべてを可能にするいくつかの重要なテクノロジーがあります。それらをケーキの層と考えてください。それぞれが下の層の上に構築されています。

WebGL 2は普遍的なベースラインです。何年も前からすべてのブラウザに搭載されており、安定しており、ツールやライブラリの大規模なエコシステムがあります。今日Web向けに構築する場合、直接記述するか、その上でフレームワークを使用するかにかかわらず、コードは最終的にWebGL 2上で実行されます。

WebGPUは輝く新星です。これは、ネイティブプラットフォームのVulkan、Metal、DirectX 12と同様に、開発者にGPUに対するより直接的な制御を提供する、モダンで低レベルのグラフィックスAPIです。コンピュートシェーダー（グラフィックスだけでなく一般的な計算にGPUを使用）、より優れたマルチスレッド、より予測可能なパフォーマンスを可能にします。ブラウザのサポートは急速に拡大しており、ChromeとEdgeで出荷され、Firefoxではフラグの背後で利用可能で、Safari Technology Previewでも利用できます。パフォーマンスが重要な新しいプロジェクトでは、注目に値します。

WebXRは、仮想現実と拡張現実をブラウザにもたらす方法です。Meta Quest、Apple Vision Pro、さらにはシンプルなCardboardビューアなどのVRヘッドセット、およびスマートフォンやタブレットでのARのための標準APIです。WebXRは、頭の位置の追跡、ステレオビューのレンダリング、コントローラー入力の管理といった複雑な作業を処理するため、体験の構築に集中できます。

WebAssembly（Wasm）も言及に値します。これにより、C++、Rust、またはその他の言語で記述されたコードを、ブラウザ内でネイティブに近い速度で実行できます。これが、Unity、Unreal、Godotなどの重量級エンジンがWebにエクスポートできる方法です。C++コアをWebAssemblyにコンパイルし、JavaScriptと並行して実行します。

最後に、Basis UniversalやKTX2などのGPUテクスチャ圧縮フォーマットを使用すると、GPUメモリ内で圧縮されたままのテクスチャを配信でき、帯域幅とメモリを節約できます。これはモバイルデバイスにとって重要です。

高レベルフレームワーク：生のWebGLを書きたいとは思わないでしょう

生のWebGLを書くことは、車のエンジンをゼロから作るようなものです。可能ですが、時間の有効活用になることはめったにありません。フレームワークは定型コードを処理し、有用な抽象化を提供し、バッファ、シェーダー、ドローコールではなく、シーン、オブジェクト、マテリアルの観点で考えられるようにします。

Three.jsはエコシステムの紛れもない王者です。2010年から存在し、大規模なコミュニティ、優れたドキュメントを持ち、主要な3Dフォーマットすべてで動作します。シーングラフ（オブジェクトのツリー）、カメラ、ライト、マテリアル、ジオメトリ、アニメーションシステム、ポストプロセッシングエフェクト、GLTF、OBJ、FBXなどのローダーを提供します。ReactエコシステムはReact Three Fiber（R3F）を通じてこれを受け入れており、Three.jsシーンをReactコンポーネントとして宣言的に記述できます。これはすでにReactで構築している場合のゲームチェンジャーです。

Babylon.jsは異なるアプローチを取ります。ブラウザ内の完全なゲームエンジンのようなものです。強力なビジュアルエディター、組み込みの物理エンジン、ノードベースのマテリアルエディター、優れたTypeScriptサポート、そしてファーストクラスのWebXR実装を備えています。ゲームのようなものを構築している場合や、エディタ駆動のワークフローが必要な場合、Babylon.jsは素晴らしい選択肢です。

PlayCanvasはクラウドネイティブである点でユニークです。エディターはブラウザで実行され、プロジェクトはクラウドに保存され、複数の人がリアルタイムで共同作業できます。エンティティコンポーネントシステムアーキテクチャを使用しており、プレイアブル広告、インスタントゲーム、共同3Dツールを構築するチームに人気があります。

A-Frameは宣言的でHTMLのようなアプローチを取ります。3DシーンをカスタムHTML要素として記述します：、、。Three.js上に構築されていますが、Web開発者にとって自然に感じられるエンティティコンポーネントシステムを公開しています。特にWebXRプロジェクトや教育目的で人気があります。

OGLはミニマリストの選択肢です。わずか数キロバイトで、意見はなく、WebGL上の薄いレイヤーにすぎません。バナー広告のようなサイズ制約のあるプロジェクトや、独自の抽象化をゼロから構築したい場合に最適です。

Reactエコシステム：コンポーネント駆動型3D

React開発者であれば、React Three Fiber（R3F）は変革的です。これはThree.js用のReactレンダラーです。つまり、UIと同じようにJSXを使用して3Dシーンを記述します。、、がコンポーネントになります。アニメーション用のフック、状態用のコンテキスト、非同期ロード用のサスペンス、そしてReactエコシステム全体など、Reactのすべてのパワーを得られます。

R3Fエコシステムはヘルパーで豊かに成長しました。@react-three/dreiは、オービットコントロール、HTMLオーバーレイ、テキスト、環境マップ、ローダーなど、数十の既製コンポーネントを提供します。@react-three/postprocessingはポストプロセッシングエフェクトをもたらします。@react-three/rapierと@react-three/cannon-esは物理演算を追加します。非常に少ない定型コードで驚くほど複雑な3Dアプリを構築できます。

ReactでのWebXRには、React XRがあり、AR/VR開発に同じ宣言的アプローチをもたらします。

ファイルフォーマット：glTFは3DのJPEG

3DをWebに載せるなら、glTF 2.0（GL Transmission Format）が標準です。これはしばしば「3DのJPEG」と呼ばれます。ロイヤリティフリーで効率的、ランタイム対応のフォーマットで、Khronos Group（WebGLとWebGPUの背後にいる同じ人々）によって維持されています。

glTFには2つのフレーバーがあります：.gltf（JSON + 個別のバイナリ/データファイル）と.glb（すべてを単一のバイナリファイルにまとめたもの）。Webでは通常.glbが好まれます。1つのファイル、1つのリクエスト、簡単なキャッシュです。

glTFは、物理ベースレンダリング（PBR）マテリアルをすぐにサポートします。メタリック/ラフネスワークフロー、法線マップ、オクルージョンマップ、エミッシブマップ。アニメーション、スケルタルリギング（スキニング）、モーフターゲット（ブレンドシェイプ）を処理します。圧縮については、Dracoがジオメトリサイズを劇的に削減し、KTX2/Basis UniversalがGPU上で圧縮されたままのテクスチャ圧縮を処理します。

他のフォーマットも存在します。AppleのAR Quick Look用のUSDZ、レガシー交換フォーマットとしてのFBXとOBJ。しかし、Web配信にはglTFが答えです。本番Webでの使用にはFBX/OBJを避けてください。冗長で、標準化が不足しており、圧縮もあまり効きません。

アセットパイプライン：モデリングからブラウザへ

モデリングソフトウェアからブラウザに3Dモデルを効率的に取り込むには、いくつかの手順が必要です。

モデリングは、Blender（無料で優れている）、Maya、Cinema 4D、Modoなどのツールで行われます。エクスポートするときは、Blender用の公式Khronos glTFエクスポーターを使用してください。これは仕様の作成者によってメンテナンスされており、最もクリーンな出力を生成します。

最適化は、Webパフォーマンスのための魔法が起こる場所です。glTF Transform（コマンドラインツール）は、Dracoジオメトリ圧縮の適用、テクスチャのKTX2/BasisUへのリサイズと圧縮、ミップマップの生成、未使用データの削除などを行うことができます。Meshoptimizerは頂点バッファとインデックスバッファをさらに圧縮します。glTF Validatorは、出荷前に仕様違反を検出します。

ホスティングには、適切なCORSヘッダーとHTTP RangeリクエストをサポートするCDNを使用してください。これにより、大規模なモデルのプログレッシブロードが可能になります。一部のチームは、フォーマット変換と最適化をオンザフライで処理する専用の3D CDNを使用しています。

物理演算とインタラクション：リアルに感じさせる

静的な3Dはきれいですが、インタラクティブな3Dは魅力的です。物理演算については、JavaScript/Wasmの世界での主なオプションは、Cannon-es（Cannon.jsの軽量ポート）、Rapier（Wasmにコンパイルされた高速でモダンなRustベースのエンジン、@react-three/rapierによる優れたR3F統合）、Ammo.js（業界標準のBullet物理エンジンのポート、強力だが重い）、Jolt Physics（より新しく非常に高速なWasmポート）です。

インタラクションについては、レイキャスティングが基本的な手法です。カメラからマウス/指の位置を通して不可視の光線を発射し、どの3Dオブジェクトがヒットしたかを確認します。ライブラリは既製のコントロールを提供します。オブジェクトの周りを回転するOrbitControls、物を移動するDragControls、ギズモスタイルの移動/回転/スケーリングのためのTransformControls。WebXRでは、コントローラーベースのインタラクション（ポインティング、グラブ、テレポート）を取得し、フレームワークのXR統合によって処理されます。

パフォーマンス予算：スムーズに保つ

Webはパフォーマンスにとって過酷な環境です。ユーザーは、フラッグシップスマートフォンから5年前のラップトップまで、さまざまなデバイスを使用しています。1秒間に60フレームを目指すということは、1フレームあたり16.6ミリ秒しかないことを意味します。VRの場合は、90fps（11.1ms）または120fps（8.3ms）が必要です。

目指すべきおおよその予算：モバイルでは10万トライアングル未満、デスクトップでは100万未満。ドローコールは50未満が理想的で、200未満が許容範囲です。テクスチャメモリはモバイルで100MB未満、デスクトップで500MB未満。シェーダーの複雑さは重要です。動的分岐を避け、テクスチャサンプルを制限し、命令数を低く抑えてください。

プロファイリングツールはあなたの友達です。Chrome DevToolsのパフォーマンスタブ、フレームキャプチャ用のSpector.js、three.jsの組み込み統計パネル、実行時にデバイスを階層化するdetect-gpu。重要な洞察：開発マシンだけでなく、実際のデバイスで測定してください。

プログレッシブエンハンスメント：グレースフルデグラデーション

すべてのデバイスがあなたの凝った3Dシーンを実行できるわけではありません。プログレッシブエンハンスメントとは、どこでも使用可能なエクスペリエンスを提供し、サポートされている場所に3Dを重ねることを意味します。

2Dのフォールバック（ヒーロー画像、カルーセル、静的グラフ）から始めてください。実行時にWebGL（およびWebGPU、WebXR）のサポートを検出します。ローエンドデバイスには、低ポリゴンモデル、小さなテクスチャを提供し、シャドウ、ブルーム、スクリーンスペースリフレクションなどの高価なエフェクトを無効にします。three.jsのdetectGPUやWebGL Reportなどのツールは、デバイスの能力レベルを分類するのに役立ちます。

目標は、すべてをどこでも同じように見せることではありません。コアエクスペリエンスをどこでも機能させ、ハードウェアが許す場所で輝かせることです。