プログラミングを説明します。ES2のプログラムが作成できます。サンプルのダウンロードはこちらです。シェーダのコンパイルとシェーダの実行時に頂点や照明に関するデータを送る機能だけしか持っていません。関数はある程度パターン化された処理をするだけで、映像表現に関わる部分はすべてユーザが作成したシェーダプログラムの処理になります。使い方は簡単に言うと次のようになります。今回は2次元の三角形が移動するだけのごく簡単なシェーダを動作させるプログラムを解説します。3次元でキレイなアニメーションさせる場合でも、もっと複雑な処理をするシェーダとそのシェーダに送るデータが複雑になるだけです。あと、テクスチャの扱いが重要ですが、画像フォーマットの話が必要になってくるので今回は省きます。今回はちょっと長いので簡単な目次です。ソースを実行時にコンパイル、リンクして、できたプログラムオブジェクトをGPUに送ってグラフィックの描画に使います。バーテックスシェーダは頂点毎に実行され、頂点の位置を出力します。フラグメントシェーダは頂点で囲まれた範囲のピクセル毎に呼び出され、その位置の色を出力します。図形が重なっていてもフラグメントシェーダは繰り返し実行されますが、三次元的に画面手前にある図形の色は上書き出力され、後から同じ画面位置に出力する場合に画面奥になる場合は無視されます。頂点と頂点の間は、頂点が持っている色、法線ベクトル、テクスチャ座標などの値を頂点間で自動的に補完してフラグメントシェーダに渡します。1秒間には数億回もの処理が必要になります。バーテックスシェーダとフラグメントシェーダを超高速に実行することで、CPUではスピード的に全く無理だった映像表現が可能となっています。この図のように頂点の位置とその他の情報を頂点シェーダに渡すと、それらの情報は補間計算されてフラグメントシェーダに渡され、フラグメントシェーダが1つのピクセルの色を決めます。頂点の座標を出力するように作成します。シェーダのソースは文字列としてアプリケーションのソースに埋め込むか、ファイルに格納します。ES2のドライバがコンパイル、リンクするようにプログラムを作成します。シェーダの実際の例は後述します。赤い色を出力しています。頂点に囲まれた範囲が赤くなるだけのフラグメントシェーダです。文法はバーテックスシェーダと同じですが、変数の使い方が少しだけ異なります。};シェーダ関連の初期化アプリケーションの種類にかかわらず、いつも同じようなコードを使う部分となります。関数はシェーダのタイプ(バーテックスシェーダまたはフラグメントシェーダ)とシェーダのソースを文字列として受け取ってコンパイルします。コンパイルでエラーが発生していないか確認します。shader;}プログラムオブジェクトを作成コンパイルしたバーテックスシェーダとフラグメントシェーダをリンクしてプログラムオブジェクトを作成します。リンクしてプログラムオブジェクトを作成したらシェーダは不要となります。異なって、シェーダプログラム(GLSL)の書き方で自由に機能を実現できるため、アプリケーションの目的ごとに変化する部分です。非常に似た文法を持っていて、ほとんどどんなプログラムでも書くことができます。テクスチャの読み書きができるため、テクスチャをデータの転送に使うことでグラフィックスと関係のない計算でも可能です。WebGLと同じなので情報は取得しやすいと思います。(頂点シェーダ)頂点バッファに設定した頂点ごとにバーテックスシェーダが呼び出されます。テクスチャ座標が入っています。頂点位置を代入します。範囲が画面に表示される範囲となります。設定された値が加減算されます。値に従って、三角形が右下から左上の範囲で位置が変わります。ここではバーテックスシェーダのソースを文字配列として定義します。バーテックスシェーダ内で計算することになります。(ピクセルシェーダ)頂点に囲まれた範囲のすべてのピクセルに対してフラグメントシェーダが呼び出されます。