推奨事項: NSDT エディターを使用して3D アプリケーション シナリオを迅速に構築する
WebGL は急速に成長しており、関心が高まっていますが、このテクノロジーに関する詳細な情報が不足していることがよくあります。そのすべての基本と、それが提供できるさまざまなフレームワークとライブラリを明らかにしましょう。
WebGLの基本
よくある誤解に反して、WebGL はグラフィックス スイートではありません。代わりに、コードを使用して幾何学的オブジェクトを描画し、クライアントの GPU エンジンを使用してグラフィックス オブジェクトを HTML キャンバス上にラスタライズします。
WebGL の基本を理解するには、基本的な 3D グラフィック理論とレンダリング ワークフローを理解するのに役立ちます。3D シーンでは、各点は x、y、z 座標によって識別される頂点です。次に、頂点が接続されて、プリミティブと呼ばれる一連の三角形形状が形成されます。光源を適用して、影と奥行きの外観を作成します。次に、プリミティブはラスター化されて 2D ピクセルの投影として 3D ベクトル グラフィックスが作成され、脳をだまして 3D コンピューター画面上に 2D オブジェクトが見えるようにします。
WebGL コードには 2 種類の関数があります。
- 頂点シェーダ、
- フラグメントシェーダー。
これらは、画面上にピクセルを描画する方法をコンピュータに指示するために使用されます。メインのプログラム コードは JavaScript で記述されていますが、シェーダーは C/C++ によく似た GL シェーダー言語を使用します。
頂点シェーダーは頂点の座標を計算し、フラグメント シェーダーはピクセル カラーの計算を担当します。シェーディング プロセスでは、画像を滑らかにレンダリングするためにコンピューターで多くの計算を実行する必要があります。通常、CPU が処理するワークロードは大きすぎます。このため、WebGL は GPU を利用して計算をより効率的に分散します。
基本的に、WebGL API は、クライアント画面に描画される内容を制御するためのカスタム シェーダー状態に関するものです。
幸いなことに、Web サイトに 3D グラフィックを追加するプログラムを手動で作成する必要はありません。three.js、PlayCanvas、Unity の WebGL ビルド オプションなどのリソースを使用すると、 WebGL の基本的な知識がなくても、3D エクスペリエンスを迅速にデザインできます。
WebGL 用の追加ライブラリ
Web 開発者は、さまざまな WebGL フレームワークとライブラリを使用して Web 製品を構築できます。事前に作成された要素を適用すると、車輪を再発明するのではなく、Web 開発の速度が大幅に向上します。
ここで、WebGL を使用してアプリケーションを開発するためのいくつかの人気のあるアドオン ライブラリの概要を見てみましょう。
Unity WebGL
WebGL 開発用のリソースを探している場合、おそらくこれが最初に出会うライブラリでしょう。Unity WebGL を使用すると、Web 開発者は Web ページでコンテンツを作成するときにブラウザの JavaScript エンジンと直接対話できます。
このようにして、Web ページ上のすべての要素が相互に通信できるようになります。Unity WebGL では、これを行うためのさまざまな方法が提供されています。Unity スクリプトから Javascript または C 関数を呼び出したり、ブラウザの JavaScript から Unity スクリプトにデータを送信したりすることもできます。
現在、ほとんどの主要なデスクトップ ブラウザは Unity WebGL コンテンツをサポートしています。ただし、モバイル デバイスのサポートはまだ提供されていません。
Three.js
Three.js は、WebGL 用に特別に用意された JavaScript 要素ライブラリです。このライブラリには、エフェクト、オブジェクト、カメラ、シーン、マテリアル、シェーダ、その他のユーティリティの大規模なコレクションが含まれています。マニュアルはまだ作成中ですが、Web 上の大規模な開発者コミュニティがフォーラムやディスカッションを運営しています。
バビロン.js
Github 上の別のオープンソース ライブラリである Babylon.js は、ブラウザで 3D グラフィックスを表示するためのエンジンとして説明されることがよくあります。そのネイティブ言語は Typescript ですが、そのコードは WebGL と HTML5 をサポートするすべてのブラウザーによってネイティブに解釈されます。Babylon.js には、ゲーム、犯罪データの視覚化、ファッション、医療教育、軍事訓練など、幅広い用途があります。
プレイキャンバス
特にゲーム向けの PlayCanvas は、独自のクラウドベースの開発プラットフォームを搭載した 3D エンジンで、Web 開発チームが複数のコンピュータからリアルタイムで Web プロジェクトを編集できるようになります。これらの機能には、3D アニメーション、剛体物理シミュレーション、サウンド デザインが含まれます。このエンジンは 2014 年にオープンソース化され、Github に無料のリポジトリもあります。
フレーム
このフレームワークは、XR 開発 (AR/VR および複合現実エクスペリエンス)、およびブラウザーでの 3D および VR 要素の表示に適しています。AFrame は本質的に、アニメーション、ジオメトリ、カーソル、コントロールなどのコンポーネントを多数備えた VR プラグインです。
AFrame によって生成されたコードは、デスクトップやモバイル デバイス上でグラフィックを表示できるだけでなく、ほとんどの一般的な VR ヘッドセット上で実行できます。これにより、AFrame はブラウザ ゲームをあらゆるデバイスで実行できるようにするのに最適なライブラリになります。無料のリポジトリも Github で入手できます。
Deck.gl
Deck.gl は主に地理空間データの視覚化を目的としており、WebGL を使用して大規模なデータセットを操作したり、分析データに基づいて複雑な視覚化を作成したりするのに最適です。React とうまく統合されており、MapboxGL と組み合わせて Mapbox マップ上に魅力的な 2D または 3D グラフィック オーバーレイを作成すると、優れた結果が得られます。Deck.gl Github リポジトリを使用して、WebGL 地理空間視覚化を作成できます。
追加の WebGL ライブラリの総数は 80 を超えており、それらすべてについて説明することはこの記事の範囲を超えています。ただし、Openbase のライブラリの広範なリストを使用して、ビジネス目的に最適なものを見つけることができます。
エピローグ
3D Web デザイン、インタラクティブ アプリケーション、ゲーム、物理シミュレーション、データ視覚化、アートワークで使用される WebGL は、魅力的でインタラクティブなユーザー エクスペリエンスを作成するための革新的なテクノロジの 1 つとみなされます。KhronosGroup によって作成されたこのテクノロジーは OpenGL ES の直接の子孫であり、ゲームや VR の 3D ビジュアリゼーションに使用されます。
元のリンク: 3D Web グラフィックス レンダリングに最適な 6 つの WebGL ライブラリ (mvrlink.com)