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 のコンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをその場で生成します。