![見出し画像](https://assets.st-note.com/production/uploads/images/51781937/rectangle_large_type_2_e9bd6877294385b0823b32f607dac0b3.png?width=800)
🎡GLSLの概要
3.7 Keywordsにはvec2とかvec3は予約語であると書いてある。
ということで命名にはかなり強い意味があるのでそれ全部おぼえとかないといけない。
4.1でそれぞれ型定義されてる
vec3 3成分浮動小数点ベクトル
vec4 4成分の浮動小数点ベクトル
OpenGL ES シェーディング言語には、浮動小数点値、整数、ブーリアンの汎用2、3、4成分ベクトルのデータタイプがあります。浮動小数点ベクター変数は、色、法線、位置、テクスチャ座標、テクスチャの検索結果など、コンピュータグラフィックスで非常に有用なさまざまなものを格納するために使用できます。
レジスタのように意味があるgl_FragColor gl_FragCoord
gl_FragColorという変数自体にもレジスタのように意味がある。
7.2 フラグメントシェーダの特殊変数
フラグメントシェーダの出力は、OpenGL ESパイプラインの後段にある固定関数演算によって処理されます。フラグメントシェーダは(略)、内蔵変数のgl_FragColorとgl_FragDataを使ってOpenGL ESパイプラインに値を出力します。
特殊変数であるgl_FragColorとgl_FragDataのデータに応じて描画をする。
特殊変数とか予約語の制約が強く、そこに値を入れて計算させる。最終的にGPUと直接話して魔法陣のようなものを作る世界観。
timerとかmouseはOpenGLでは定義がない。こちらはuniformという定義があって、おそらくハンドラ(バインダ?リンク?)みたいにGPU側に送れる変数のようなもののようだ。
ユニフォームはシェーダ、OpenGL ES、アプリケーション間のリンクを形成します。
ユニフォーム修飾子は、処理されるプリミティブ全体で値が同じであるグローバル変数を宣言するために使用されます。すべてのユニフォーム変数は読み取り専用で、アプリケーションがAPIコマンドを使って直接初期化するか、OpenGL ESが間接的に初期化します。
デモタイム
これをこう、いろいろ値やら大きさやら変えてみたのがこれ。
P5.jsでも動かしてみた。みなさんも挑戦してみましょう。
Three.jsだとvUvになるから気をつけろ
https://editor.p5js.org/setapolo/sketches/aoTXOqPGe
![](https://assets.st-note.com/img/1656750235158-OwX5NfQkyg.png?width=800)
![](https://assets.st-note.com/img/1661065989957-6wpddnZ0hx.png)
お願い致します