home /
uni /
gl /
top
はじめの一歩
最低限のコードで動かす
- 絶対に必要なのは頂点シェーダーとフラグメントシェーダ
- ふたつのシェーダーに対して同じような処理をするので関数にしてある
- 頂点シェーダーは
gl_Positionを返す必要がある
- ポイント（点）を描画する場合は
gl_PointSizeも返す必要がある
- フラグメントシェーダーは
gl_FragColorを返す必要がある
- それさえ返していれば頂点バッファは必須ではなく、
drawArraysに頂点数だけ渡せばいい
- JSのスレッドが走る時に(0, 0, 0, 0)で塗り潰されるらしい
- その結果、キャンバスが透明になり、CSSの背景色が見えるようになる
- この例では背景色を指定しておらず、青い四角を書いているので、ブラウザの背景色を青にしている人は多分何も見えない
- スレッドが起動するたびに塗り潰されるので、ふたつ以上のスレッドに分けて描画しようとすると、先に描画したものが消えてしまう
- この辺の挙動は
getContextするときにオプションで変更できるらしい
- もでるびゅーぷろじぇくしょん？ なにそれ？
見通しをよくする
- シェーダーソースをscript要素に追い出した
$IDはなんとなくjQueryぽいがidを指定すると要素を取ってくる
loadShaderは指定されたソースが文字列ではなかった場合、要素とみなしてその中身をソースにする
- ついでにシェーダータイプも文字列で指定できるようにする
- 背景もちゃんと塗りつぶす
$Dとかヒドいことしてるけど気にしない
パラメータの指定
- 頂点とポイントサイズをuniformで指定してみる
gl_Position.wは1固定
- ポイントサイズの小さい順に (1, 0) (-1, 0) (0, 1) (0, -1)なので、右端がX=+1、左端が-1、上端がY=+1、下端が-1
バッファと頂点属性
- バッファの確保、内容の設定、属性への割り当てが必要（めんどくさい）
enableVertexAttribArrayを呼び出すのを忘れがち
- 面倒くさいものは関数にしておこう
- バッファの確保時に頂点数を数えさせるため、頂点ひとつ分を配列にまとめ、その配列を
createFloatBufferに渡し、createFloatBuffer側でArray.flatで展開
- 戻り値として頂点数も返す
- 属性をふたつ、
setVertexAttribで一気に設定
getAttribLocationの値はプログラムをリンクすれば決まるので、linkProgram関数でリンク時に取得
- 頂点属性には
vertexAttrib4fvなどで固定値を割り当てることもできる
disableVertexAttribArrayを呼び出すのを忘れがち
- 属性の数によって呼び出す関数が違う
- 引数の要素数で関数の配列を引いているが、
thisが変わってしまうのでcallで呼び出す