WebGL-はじめに

数年前、Javaアプリケーション（アプレットとJOGLの組み合わせ）を使用して、GPU（Graphical Processing Unit）に対応することにより、Web上の3Dグラフィックを処理していました。アプレットを実行するにはJVMが必要なため、Javaアプレットに依存することが難しくなりました。数年後、人々はJavaアプレットの使用をやめました。

Adobe（Flash、AIR）が提供するStage3D APIは、GPUハードウェアアクセラレーションアーキテクチャを提供しました。これらのテクノロジーを使用して、プログラマーはWebブラウザーとIOSおよびAndroidプラットフォームで2Dおよび3D機能を備えたアプリケーションを開発できます。 Flashは独自のソフトウェアであったため、Web標準としては使用されませんでした。

2011年3月に、WebGLがリリースされました。 JVMなしで実行できるオープンウェアです。 Webブラウザーによって完全に制御されます。

HTML 5の新しいリリースには、2D Canvas、WebGL、SVG、3D CSSトランスフォーム、SMILなどの3Dグラフィックスをサポートするいくつかの機能があります。このチュートリアルでは、WebGLの基本について説明します。

OpenGLとは何ですか？

OpenGL（Open Graphics Library）は、2Dおよび3Dグラフィックス向けのクロス言語、クロスプラットフォームAPIです。コマンドのコレクションです。 OpenGL4.5はOpenGLの最新バージョンです。次の表に、OpenGLに関連する一連のテクノロジーを示します。

API	Technology Used
OpenGL ES	It is the library for 2D and 3D graphics on embedded systems - including consoles, phones, appliances, and vehicles. OpenGL ES 3.1 is its latest version. It is maintained by the Khronos Group www.khronos.org
JOGL	It is the Java binding for OpenGL. JOGL 4.5 is its latest version and it is maintained by jogamp.org.
WebGL	It is the JavaScript binding for OpenGL. WebGL 1.0 is its latest version and it is maintained by the khronos group.
OpenGLSL	OpenGL Shading Language. It is a programming language which is a companion to OpenGL 2.0 and higher. It is a part of the core OpenGL 4.4 specification. It is an API specifically tailored for embedded systems such as those present on mobile phones and tablets.

注意-WebGLでは、GLSLを使用してシェーダーを記述します。

WebGLとは何ですか？

WebGL（Web Graphics Library）は、Web上の3Dグラフィックスの新しい標準です。2Dグラフィックスとインタラクティブな3Dグラフィックスをレンダリングする目的で設計されています。これは、電話やその他のモバイルデバイス向けの低レベル3D APIであるOpenGLのES 2.0ライブラリから派生しています。 WebGLはES 2.0（Embedded Systems）と同様の機能を提供し、最新の3Dグラフィックスハードウェアで良好に機能します。

これは、HTML5で使用できるJavaScript APIです。 WebGLコードは、HTML5の<canvas>タグ内に記述されます。これは、インターネットブラウザーが使用されたコンピューター上のグラフィック処理ユニット（GPU）にアクセスできるようにする仕様です。

WebGLの開発者

*Vladimir Vukicevic* という名前のアメリカとセルビアのソフトウェアエンジニアが基盤を作り、WebGLの作成を主導しました

2007年、ウラジミールはHTMLドキュメントのCanvas要素の OpenGL プロトタイプの作業を開始しました。
2011年3月、Kronos GroupはWebGLを作成しました。

レンダリング

レンダリングとは、コンピュータープログラムを使用してモデルから画像を生成するプロセスです。グラフィックスでは、仮想シーンは、レンダリングプログラムを介して渡されるジオメトリ、視点、テクスチャ、照明、シェーディングなどの情報を使用して記述されます。このレンダープログラムの出力はデジタル画像になります。

レンダリングには2種類あります-

ソフトウェアレンダリング-すべてのレンダリング計算はCPUの助けを借りて行われます。
ハードウェアレンダリング-すべてのグラフィックス計算はGPU（グラフィックスプロセッシングユニット）によって行われます。

レンダリングはローカルまたはリモートで実行できます。レンダリングされる画像が非常に複雑な場合、レンダリングは、複雑なシーンをレンダリングするのに必要な十分なハードウェアリソースを備えた専用サーバーでリモートで実行されます。 *サーバーベースのレンダリング*とも呼ばれます。レンダリングはCPUによってローカルで実行することもできます。 *クライアントベースのレンダリング*と呼ばれます。

WebGLは、クライアントベースのレンダリングアプローチに従って3Dシーンをレンダリングします。画像の取得に必要なすべての処理は、クライアントのグラフィックスハードウェアを使用してローカルで実行されます。

GPU

NVIDIAによると、GPUは「変換、照明、三角形のセットアップ/クリッピング、レンダリングエンジンを統合したシングルチッププロセッサであり、1秒間に最低1,000万ポリゴンを処理できます」。順次処理用に最適化されたいくつかのコアを備えたマルチコアプロセッサとは異なり、GPUは並列ワークロードを効率的に処理する数千の小さなコアで構成されています。したがって、GPUは、ディスプレイへの出力を目的としたフレームバッファー（完全なフレームデータを含むRAMの一部）でのイメージの作成を高速化します。

CPUおよびGPU

GPU加速コンピューティング

GPU加速コンピューティングでは、アプリケーションはCPUにロードされます。コードの*計算集約*部分に遭遇するたびに、コードのその部分が読み込まれ、GPUで実行されます。システムにグラフィックスを効率的な方法で処理する能力を与えます。

GPU Accelerated Computing

GPUには個別のメモリがあり、一度にコードの小さな部分の複数のコピーを実行します。 GPUは、中央メモリではなく、ローカルメモリにあるすべてのデータを処理します。したがって、GPUで処理する必要があるデータは、GPUメモリにロード/コピーしてから処理する必要があります。

上記のアーキテクチャを備えたシステムでは、3Dプログラムの処理を高速化するために、CPUとGPU間の通信オーバーヘッドを減らす必要があります。そのためには、GPUと繰り返し通信するのではなく、すべてのデータをコピーしてGPUに保持する必要があります。

サポートされているブラウザ

次の表は、WebGLをサポートするブラウザのリストを示しています-

ウェブブラウザー

Browser Name	Version	Support
Internet Explorer	11 and above	Complete support
Google Chrome	39 and above	Complete support
Safari	8	Complete support
Firefox	36 and above	Partial support
Opera	27 and above	Partial support

モバイルブラウザ

Browser Name	Version	Support
Chrome for Android	42	Partial support
Android browser	40	Partial support
IOS Safari	8.3	Complete support
Opera Mini	8	Does not support
Blackberry Browser	10	Complete support
IE mobile	10	Partial support

WebGLの利点

WebGLを使用する利点は次のとおりです-

* JavaScriptプログラミング*-WebGLアプリケーションはJavaScriptで記述されています。これらのアプリケーションを使用すると、HTMLドキュメントの他の要素と直接やり取りできます。他のJavaScriptライブラリを使用することもできます（例： JQuery）およびHTMLテクノロジーを使用して、WebGLアプリケーションを強化します。
モバイルブラウザでのサポートの増加-WebGLは、iOSサファリ、Androidブラウザ、Chrome for Androidなどのモバイルブラウザもサポートします。
オープンソース-WebGLはオープンソースです。ライブラリのソースコードにアクセスして、ライブラリの機能と開発方法を理解できます。
コンパイルの必要はありません-JavaScriptはプログラミングとハーフHTMLの半分のコンポーネントです。このスクリプトを実行するために、ファイルをコンパイルする必要はありません。代わりに、任意のブラウザを使用してファイルを直接開き、結果を確認できます。 WebGLアプリケーションはJavaScriptを使用して開発されているため、WebGLアプリケーションもコンパイルする必要はありません。
自動メモリ管理-JavaScriptは自動メモリ管理をサポートしています。手動でメモリを割り当てる必要はありません。 WebGLはJavaScriptのこの機能を継承します。
設定が簡単-WebGLはHTML 5に統合されているため、追加の設定は不要です。 WebGLアプリケーションを作成するために必要なものは、テキストエディタとWebブラウザだけです。

環境設定

WebGLに別の環境を設定する必要はありません。 WebGLをサポートするブラウザーには、WebGL用の独自の組み込みセットアップがあります。

Webgl-introduction

目次