yuuho.wiki

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== GLSL ======

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

=== シェーダーのテンプレート ===

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

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

**テンプレ**
<code glsl 頂点シェーダー>
#version 300 es
void main(){

}
</code>

<code glsl フラグメントシェーダー>
#version 300 es
precision mediump float;
void main(){

}
</code>


=== WebGL2 とその他 GLSL の書き方の違い ===
古い書き方をしているサイトのコードなどに騙されないように。

これらは並列実行用。

^ 古い ^ 新しい ^
| ''attribute'' | ''in'' |
| ''varying'' | ''out'' |

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


=== 予約語など ===

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

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


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

==== ビルトイン関数 ====

|''dot''  | 内積 |
| ''min'' |  |
| ''max'' |  |

その他 [[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 のパラメータとして表現される。
    * {{:tips:glsl:projection.png?600}}


=== TRIANGLES STRIP の仕組み ===
^ type ^ face index ^ vertex index ^^^
| **0**,1,2 | F0 |  **V0**  |    V1    |  V2  |
| 1,**0**,2 | F1 |    V2    |  **V1**  |  V3  |
| **0**,1,2 | F2 |  **V2**  |    V3    |  V4  |
| 1,**0**,2 | F3 |    V4    |  **V3**  |  V5  |
| **0**,1,2 | F4 |  **V4**  |    V5    |  V6  |
| 1,**0**,2 | F5 |    V6    |  **V5**  |  V7  |
| **0**,1,2 | F6 |  **V6**  |    V7    |  V8  |
| 1,**0**,2 | F7 |    V8    |  **V7**  |  V9  |
| ... |||||

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