WebGL チュートリアル
このチュートリアルでは、 <canvas> 要素を使用して WebGL グラフィックを描画する方法について、基本から説明します。提供されている例から、 WebGL でできることの明確な概念を知ることができ、独自のコンテンツを作成する際に役立つコードスニペットを提供します。
WebGL により、プラグインを使用することなく HTML の <canvas> 内で 3D グラフィックをレンダリングするための OpenGL ES 2.0 に基づく API をウェブコンテンツから使用できます。 WebGL のプログラムは JavaScript で記述する制御コードと、コンピューターの Graphics Processing Unit (GPU) で実行する特殊効果コード（シェーダーコード）で構成されます。 WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。
始める前に
<canvas> 要素を使用することはそれほど難しくありませんが、 HTML や JavaScript の基礎を理解している必要があります。 <canvas> 要素や WebGL は一部の古いブラウザーが対応していませんが、すべての主要なブラウザーの最近のバージョンが対応しています。キャンバスにグラフィックスを描画するためには、 JavaScript のコンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをその場で生成します。
このチュートリアルの内容
- WebGL 入門
-
WebGL コンテキストのセットアップ方法です。
- WebGL コンテキストへの平面コンテンツの追加
-
WebGL を使用して単純な平面図形を描画する方法です。
- シェーダーを用いた WebGL での色の指定
-
シェーダーを用いた図形への色の設定方法について紹介します。
- WebGL でのオブジェクトのアニメーション
-
簡単なアニメーションを作成するための、オブジェクトの回転と変換の方法を紹介します。
- WebGL を用いた 3D オブジェクトの作成
-
3D オブジェクト（今回は立方体）の作成とアニメーションの方法を紹介します。
- WebGL でのテクスチャの使用
-
オブジェクトの表面にテクスチャをマッピングする方法について紹介します。
- WebGL でのライティング
-
WebGL コンテキストにおいて光の稿かをシミュレーションする方法です。
- WebGL でのテクスチャのアニメーション
-
テクスチャをアニメーションさせる方法についてです。ここでは、回転する立方体の表面に Ogg ビデオをマッピングする手法を紹介します。