WebGL2 の context をここでは変数名 gl で表記するものとする。

最初の行に改行などを挟まず #version 300 es が必要。
なので、文字列リテラル(バッククォート1つで囲む改行可能文字列)を使う場合は、 最初の行にバックスラッシュを入れるなどの調整があったほうが良い。

• #version 300 es は webgl2 において最初の行に必須の宣言。
• void main() は両方のシェーダーで必須関数。
• precision mediump float; はフラグメントシェーダーの2行目に必須の宣言。

テンプレ

頂点シェーダー

#version 300 es
void main(){
 
}

フラグメントシェーダー

#version 300 es
precision mediump float;
void main(){
 
}

古い書き方をしているサイトのコードなどに騙されないように。

これらは並列実行用。

カメラ行列など、すべての頂点に対して同じ変数を使うとなったら、 uniform vec3 cam;。 attribute とか varying は使わないでいい。

• 最初からある変数
  • gl_Position 頂点シェーダーで出力しないといけないもの vec4 ?
  • gl_PointSize 頂点サイズが決められる？

• 頂点シェーダの in 自分でバッファ作って送り込む
• 頂点シェーダの out フラグメントシェーダにわたる
• フラグメントシェーダの in' 頂点シェーダの out から受け取る？
• フラグメントシェーダの out vec4 色を出力する？

• 三角形の内部になる画素について塗られるっぽい？
  • 頂点シェーダが出力した座標の補間値が各画素について計算されていて
  • フラグメントシェーダはその画素の正確な座標を利用して画素値を決めるっぽい？

その他 https://qiita.com/edo_m18/items/71f6064f3355be7e4f45

webgl2 context

• uniformMatrix3( pointer, transpose, matrix )
  transpose で送信時に行列を転置できる。

• WebGL2RenderingContext は WebGLRenderingContext のすべてのメソッドを持っている
• gl.TRIANGLES は IBO を使って表示する。
• gl.TRIANGLE_STRIP は (1,2,3), (2,3,4), (3,4,5) … という感じですべての連続する三点を使う三角形を描画する。
• gl_Position で -1,+1 の範囲にある三角形が見える
  • 三角形のどこかの頂点がはみ出していても、三角形全体がなくなるわけではなくて、台形みたいに表示される。
  • -1 が手前、 +1 が奥というかたちで depth 判定される。

• OpenGL は右手座標系という話が巷では流れているが、クリッピング座標系は左手系なので最初から左手座標系で考えると良い。右手と言われているのは、古の OpenGL で用意されていた行列とかが右手系用のものが多かったから？
  • gl.enable(gl.CULL_FACE) デフォルトでは、この左手系で反時計周りな三角形が描画される。

• →x ↑y

• 射影行列の z は正確に線形変換するわけではなくて、大小関係(前後関係)さえ保存されていれば良いので、 1/z のパラメータとして表現される。
  • 

うまく一回の strip 呼び出しで描画できなさそうなときは半時計回りの三角形を挟んで無かったことにする？