"Hello World" of WebGL. Tried drawing a polygon for the first time.

1. はじめてのぽりごん

2. こんにちは
Maeda Naohito ＠ｍｄNHT
Web
Frontend Engineer
3D関係：
はるか昔にPapervision3d(as3)をさわったくら
い

4. OR

5. 材料
●<canvas>
●メインのjs
●vertex shader (glsl)
●fragment shader (glsl)
これらをまとめてhtmlに入れます。
jsとして実行されないようにtypeを指
定

6. 全体の流れ
context取得
シェーダーのコンパイルとリンク
頂点バッファの作成と登録
座標変換Matrixの作成と登録
レンダリング

7. webGLコンテクストの取得
1.canvas.getContext(‘webgl’);
2.キャンバスをクリアする

8. Shaderの初期化
Vertex shader、Fragment shaderの2つ
1.ソースを読み込む
2.シェーダーの作成する
3.ソースをシェーダーに割り当てる
4.コンパイルする

9. Vertex Shader
●頂点情報を扱うシェーダ
●gl_Position（組み込み変数）を設定する。
●attribute : 頂点ごとに違う値
●uniform : 一回の処理を通して同じ値
●varying : Fragment Shaderに渡す値
●constant : 定数

10. Fragment Shader
●ピクセル情報を扱う
●gl_FragColorを設定する

11. プログラムオブジェクトを作る
1.プログラムオブジェクト作成
2.シェーダーを割り当て
3.プログラムオブジェクトをリンク
4.プログラムの有効化

12. モデルの作成と登録
1.頂点データを準備する
2.バッファオブジェクトにデータをまとめる
3.準備したバッファをバインドする
4.GPUへ送信する属性を有効化する
5.GPUへ送信する

13. 座標変換
●行列計算ライブラリが必要
●モデル変換(モデルの移動・回転・拡縮)
●ビュー変換(視点の移動・回転・拡縮)
●プロジェクション変換(スクリーンに投影)
これらの変換行列をshaderに渡す

14. レンダリング
●キャンバスのクリア
●drawArrays()でバッファ上に描画
●flush()で実際の描画