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 色を出力する？

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

webgl2 context

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

• WebGL2RenderingContext は WebGLRenderingContext のすべてのメソッドを持っている
• gl.TRIANGLES は IBO を使って表示する。
• gl.TRIANGLE_STRIP は (1,2,3), (2,3,4), (3,4,5) … という感じですべての連続する三点を使う三角形を描画する。