arusu0629のブログ

Swift初心者エンジニア

WebGLについて⑧

【前回】 arusu0629.hatenablog.com

シェーダのコンパイルとリンク

■ポリゴンを描画するまで〜

  1. HTMlからcanvas要素を取得
  2. canvasからWebGLコンテキストの取得
  3. シェーダのコンパイル
  4. モデルデータを用意
  5. 頂点バッファ(VBO)の生成と通知
  6. 座標変換行列の生成と通知
  7. 描画命令の発行
  8. 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に正しく認識されない

【まとめ】
ここまでの内容として

  1. HTMLソースを用意
  2. javascriptファイルの参照とシェーダのソースを記述
  3. javascriptにはシェーダの生成・コンパイルを行うメソッドとリンクを管理するプログラムオブジェクトのメソッドを用意

【続き】 arusu0629.hatenablog.com