attribute頂点属性から読み込んだ値が設定される変数です。シェーダー内では読み込み専用の定数として扱われます。varying頂点シェーダーからフラグメントシェーダーに引き渡される変数です。定義された変数の値は、フラグメントシェーダーの同名の変数に自動的に設定されます(前述のとおり、重心座標による補間がかかります)。シェーダーに、もしくは頂点シェーダーからフラグメントシェーダーにデータを引き渡すことができるわけです。画面を描画する以上でシーンをレンダリングする準備ができました。関数を定期的に呼び出せば地球が回転するアニメーションが表示されます。gl.flush();}こちらの処理もブロックごとに説明します。最初の方は画面クリアや各種設定の初期化をしているだけなのでスキップして、シェーダーにパラメータを渡す部分を見ていきましょう。宣言された変数の値を設定する処理です。行列クラスを利用して各種変換行列を算出しています。先頭にコメントがあるので、そちらを参照してください。呼び出している部分です。前者は行列型、後者は四次ベクトル型の変数に値を設定するメソッドです。これ以外にも変数型ごとにメソッドが用意されているので、詳細は参考文献を参照してください。取得したインデックスとともにこれらのメソッドを呼び出すことで、シェーダーにデータを引き渡すことができます。回転行列やライトの位置など、モデル全体をとおして変化しない値は、この方法を使って設定するとよいでしょう。対応する頂点属性に割り当てることで、頂点シェーダーが適切な値を読み込めるようにします。頂点属性に割り当てます。第一引数は頂点属性の番号、第二引数はひとつの頂点の要素数、第三引数は要素のデータ型です。それ以外の引数はたいてい変更することはありません。詳細はリファレンスを参照してください。描画で使用されるようにしておきます。テクスチャを設定モデルに貼付けるテクスチャを有効にします。テクスチャをバインドすれば、それだけでテクスチャが貼られるようになります。パラメータを調整します。テクスチャの補間の設定で、サンプルではトライリニアフィルタリングを使用するように設定しています。範囲を出たときの処理の指定で、サンプルではエッジの色を引き延ばすように設定しています。引数は先頭からプリミティブタイプ、描画するインデックスの数、インデックスのデータ型、描画を開始するインデックスのオフセットです。よる描画はオフスクリーン・バッファに対して行われるので、それだけでは画面に反映されません。逆に言うと、シーン中のすべてのモデルを描画するまで画面には反映されないので、これによって描画のちらつきなどを押さえているわけです。呼び出すことで実際のブラウザ画面に反映されます。基本的な使い方をご紹介しました。そのままポートしているので、いろいろと面倒な手続きが多くて面食らった方もおられるかもしれません。ためだけのものではありません。非常に大きな可能性を秘めているのです。重要なのが、レンダリング処理の多くをカスタマイズできる頂点・フラグメントシェーダーです。アプリケーションの必要に応じて自由にフィルターなどを設計することができます。オーバーヘッドを回避して複雑な映像表現が可能です。主要な適用分野になっていくように思います。上でのグラフィクス表現を飛躍的に向上させてくれるのは間違いないでしょう。触れて、その可能性を体感してみてください。ついてのチュートリアルなどが公開されています。