WebGL: ブラウザでの3Dグラフィックス

WebGL: ブラウザでの3Dグラフィックス

現代のウェブサイトがプラグインを必要とせずに、ブラウザ上で滑らかな3Dグラフィックスを表示できる方法について考えたことはありますか？その答えはWebGLです。これは、ウェブページがコンピュータのグラフィックスカード（GPU）を利用して、リアルタイムで3Dシーンを描画できるようにするテクノロジーです。

WebGLとは何か、なぜ重要なのか？

WebGLはWeb Graphics Libraryの略です。これは、ウェブ開発者にコンピュータや電話の内部のグラフィックスハードウェアへの直接アクセスを提供するJavaScript APIです。WebGL以前は、ウェブ上で3Dを表示するには、FlashやJavaアプレットのようなプラグインが必要でした。覚えていますか？WebGLは、3Dグラフィックスをウェブプラットフォームのネイティブな部分にし、すべての最新ブラウザとすべてのデバイスで動作するようにすることで、すべてを変えました。

WebGLはJavaScriptとGPUの間の架け橋と考えてください。JavaScriptはロジックやUIには優れていますが、重い計算処理には適していません。一方、グラフィックスカードは並列で数百万の計算を実行するように設計されています。これは、毎秒60回、何百万もの三角形が画面上のどこに表示されるべきかを計算するのに最適です。

WebGLの内部動作

WebGLの核心は、三角形を描画することです。非常に多くの三角形です。あなたが見るすべての3Dオブジェクト（キャラクター、車、建物）は、接続された三角形で構成されています。WebGLは、それらの三角形を定義し、GPUにどのように色付けするかを指示するためのツールを提供します。

プロセスは2つの主要な段階で行われ、GPU上で直接実行されるシェーダーと呼ばれる小さなプログラムによって処理されます。

まず、頂点シェーダーが各三角形の各頂点（頂点と呼ばれる）を受け取り、それが画面上のどこに表示されるべきかを計算します。これは、オブジェクトを移動、回転、拡大縮小する一連の変換を適用し、3D空間から2D画面に投影することによって行われます。

次に、フラグメントシェーダー（ピクセルシェーダーとも呼ばれる）が、それらの三角形がカバーするすべてのピクセルに対して実行されます。その仕事は、各ピクセルの色を決定することです。ここで、テクスチャ、照明、影、およびシーンをリアルに見せるためのすべての視覚的な詳細が適用されます。

これらのシェーダーは、GLSL（OpenGL Shading Language）と呼ばれる言語で記述され、C言語に少し似ています。それらは数千のGPUコアで並列に実行されるため、非常に高速です。

WebGL 1とWebGL 2の違いは？

WebGL 1とWebGL 2についてよく耳にするでしょう。それらをゲーム機のバージョンのように考えてください。WebGL 2はより新しく、より高性能なバージョンです。WebGL 1は2011年から存在し、どこでも動作します。これは、三角形の描画、テクスチャの適用、単純なシェーディングなどの基本を提供します。

WebGL 2はその後登場し、以前はデスクトップグラフィックスAPIでのみ利用可能だった機能をもたらしました。インスタンス描画（単一のコマンドで同じオブジェクトを数千回描画する）、トランスフォームフィードバック（再利用のためにGPU出力をキャプチャする）、およびより多くのテクスチャ形式などです。現在、すべての最新ブラウザがWebGL 2をサポートしているため、新しいプロジェクトのデフォルトの選択肢となっています。

なぜほとんど誰も生のWebGLを書かないのか

生のWebGLコードを書くのは...冗長です。非常に冗長です。1つの三角形を描画するだけでも、数十行のコードが必要です。バッファの作成、シェーダーのコンパイル、プログラムのリンク、属性の設定、テクスチャのバインド、そして最後に描画呼び出しの発行です。これをライト、カメラ、アニメーション、複数のオブジェクトがある複雑なシーンで行うと、非常に煩わしく、エラーが発生しやすくなります。

そのため、ほとんどの人がライブラリを使用します。最も人気があるのはThree.jsです。これは、レンダラーの設定、シーングラフ（オブジェクトの階層）の管理、カメラ、ライト、マテリアル、一般的な3Dファイル形式のローダーの提供など、すべての定型コードを処理します。Three.jsを使用すると、約20行のコードで回転する3Dキューブを作成できます。200行ではなく。

他にも優れたオプションがあります。Babylon.jsは、組み込みの物理エンジン、ビジュアルエディター、優れたTypeScriptサポートを備えた、より完全なゲームエンジンに近いものです。PlayCanvasはクラウド上で動作し、共同編集エディターを備えています。OGLは軽量なものが必要な場合に小さくて最小限です。そして、本当に最大限の制御が必要な場合、生のWebGLは常にありますが、ほとんどのプロジェクトはそのレベルの制御を必要としません。

レンダリングパイプライン：3Dシーンから画面上のピクセルへ

ブラウザで3Dシーンを見るとき、フレーム間の数ミリ秒の間に多くのことが起こります。その過程は次のとおりです。

3Dオブジェクトは、独自のローカル座標系（モデル空間）で始まります。ここでは、(0,0,0)がオブジェクトの中心です。頂点シェーダーは、それらをワールド空間（シーン内の位置）、次にビュー空間（カメラに対する相対位置）、次にクリップ空間（GPUが可視性を簡単に判断できる標準化された立方体）、そして最後にスクリーン空間（ディスプレイ上の実際のピクセル）に変換します。

次にラスタライゼーションが行われます。GPUは各三角形がどのピクセルをカバーするかを決定します。それらの各ピクセルに対して、フラグメントシェーダーが実行され、最終的な色が決定されます。ここで、テクスチャのサンプリング、照明計算、透明度やグローなどのエフェクトが適用されます。

GPUはまた、自動的に深度テストを実行します。深度バッファ（zバッファ）を保持することで、近くのオブジェクトが遠くのオブジェクトを正しく隠すようにします。また、透明なオブジェクトのブレンドを処理し、不透明度に基づいて色を結合します。

高速化：パフォーマンスのヒント

GPUは非常に高速ですが、ボトルネックがあります。CPUとの通信です。JavaScriptがGPUに何かを描画するように指示するたびに（描画呼び出し）、オーバーヘッドが発生します。描画呼び出しが多すぎると、フレームレートが低下します。パフォーマンスの鍵は、この通信を最小限に抑えることです。

一般的な手法には、インスタンシング（1回の呼び出しで同じジオメトリの複数のコピーを描画する）、バッチ処理（複数のオブジェクトを1つの描画呼び出しに結合する）、テクスチャアトラスの使用（多くの小さなテクスチャを1つの大きなテクスチャにパックして、テクスチャを絶えず切り替える必要をなくす）などがあります。

LOD（レベルオブディテール）も古典的なテクニックです。近くでは高詳細モデルを使用し、遠くのオブジェクトにはより単純なバージョンに切り替えます。視錐台カリングは、カメラの視界外にあるものをすべて描画しないようにします。また、レンダーループには常にrequestAnimationFrameを使用してください。これはディスプレイのリフレッシュレートと同期し、タブが非表示のときに一時停止します。

プロファイリングのために、ブラウザの開発ツールは非常に優れています。Chrome DevToolsにはWebGLタブがあり、Spector.jsのようなツールはフレーム全体をキャプチャして再生できるため、どの描画呼び出しが発生し、それぞれにどれだけの時間がかかったかを正確に確認できます。

WebGPU：次世代

WebGLは10年以上にわたって私たちに貢献してきましたが、古い時代のグラフィックスハードウェア向けに設計されました。WebGPUは、ネイティブプラットフォーム上のVulkan、Metal、DirectX 12と同様に、開発者にGPUに対するより直接的な制御を提供する、より低レベルのAPIです。

WebGPUは、コンピュートシェーダー（グラフィックスだけでなく、GPU上での汎用計算の実行）、より優れたマルチスレッドサポート、より予測可能なパフォーマンスをもたらします。これはすでにChromeとEdgeで利用可能であり、Firefoxではフラグの背後にあり、Safari Technology Previewでも利用可能です。Three.jsやBabylon.jsなどのライブラリはWebGPUレンダラーを追加しており、最小限のコード変更で切り替えることができます。

WebGPUは一夜にしてWebGLを置き換えることはありません。WebGLはなくなりませんが、新しい高性能プロジェクトにとっては、それが未来です。

これで何が作れるのか？

可能性は驚くほど広いです。データ可視化は3Dチャートやインタラクティブな地球儀で生き生きとします。プロダクトコンフィギュレーターは、顧客が車、家具、スニーカーをリアルタイムでカスタマイズできるようにします。カジュアルなパズルから本格的なAAA体験までのゲームがブラウザで動作します。科学可視化は、研究者が分子構造や気候モデルを探索するのに役立ちます。クリエイティブコーディングとデモシーンは芸術的な境界を押し広げます。ARとVR体験はWebXRを通じて動作します。デジタルツインは工場が現実世界のシステムを監視しシミュレーションすることを可能にします。そしてCAD/BIMビューアーはプロフェッショナルなエンジニアリングツールをブラウザにもたらします。

ウェブは正当な3Dプラットフォームになりました。製品のショーケース、データダッシュボード、ゲームのいずれを構築する場合でも、WebGL（そしてますますWebGPU）は、プラグインもインストールも不要で、URLだけで実現するためのツールを提供します。