WebGLについて⑧
シェーダのコンパイルとリンク
■ポリゴンを描画するまで〜
- HTMlからcanvas要素を取得
- canvasからWebGLコンテキストの取得
- シェーダのコンパイル
- モデルデータを用意
- 頂点バッファ(VBO)の生成と通知
- 座標変換行列の生成と通知
- 描画命令の発行
- canvasを更新してレンダリング
1,2については以下の記事でやってきたので割愛します。 arusu0629.hatenablog.com
今回は3.についての記事です！
※上記プログラムはWebGLコンテキストを既に取得しているとみなして書いています
- シェーダを生成するにはWebGLのメソッドである
createShaderを使う - 頂点シェーダの場合は
gl.VERTEX_SHADERを引数に指定 - フラグメントシェーダでは
gl.FRAGMENT_SHADERを引数に指定 - 生成したシェーダをソースに割り当てるために
shaderSourceメソッドを実行する - シェーダをコンパイルするには
compileShaderメソッドに引数として生成したシェーダを渡してあげればOK
プログラムオブジェクト
→WebGLプログラムと各シェーダとのデータのやり取りを管理してくれるオブジェクト
- まずはプログラムオブジェクトを生成するために
createProgramメソッドを行う - 生成したプログラムオブジェクトに各シェーダを割り当てる
- その後は
linkProgramメソッドを使ってシェーダをリンクする - リンクが上手く出来たかを組み込み定数の
LINK_STATUSを見て判断する - リンクが問題なければ
useProgramメソッドを実行。これをしないとWebGLに正しく認識されない
【まとめ】
ここまでの内容として
- HTMLソースを用意
- javascriptファイルの参照とシェーダのソースを記述
- javascriptにはシェーダの生成・コンパイルを行うメソッドとリンクを管理するプログラムオブジェクトのメソッドを用意
