p5.js shader スタート 8 テクスチャ座標の使用

本稿は「Using Texture Coordinates」ページを翻訳したものです。

テクスチャ座標の使用

TexCoordとFragCoord。シェーダーサンプルコードの中でこれらを使った変数に気づかれたかもしれませんが、その意味は正確には理解されていないでしょう。 シェーダーは伸び縮みする布で、その座標変数は布の隅を固定するピンと考えてください。ピンの位置とその間隔に応じて、シェーダーはさまざまな方法で伸びたり曲がったり、複製したりできます。

TexCoord

TexCoordは頂点シェーダーで計算され、頂点シェーダーからフラグメントシェーダに渡されます。その後シェーダーのテクスチャ座標がTexCoordに等しくなるよう設定されます。

.vertファイル(TexCoordに関係するコードのみ)

// CPUからのテクスチャ座標
attribute vec2 aTexCoord;

// これは、フラグメントシェーダーと共有する変数
// 頂点シェーダーからフラグメントシェーダに送るため、attribute texcoordsをvarying texcoordsに割り当てる
// 好きな名前を付けられるが、それがvaryingであることを示すため頭に'v'を付ける場合が多い
varying vec2 vTexCoord;

void main() {
  // テクスチャ座標をコピー
  vTexCoord = aTexCoord;
}

.fragファイル(TexCoordに関係するコードのみ)

// 頂点シェーダーからvTexCoordを受け取る
varying vec2 vTexCoord;

// vTexCoordはそのピクセルの位置に応じて、0.0から1.0までに変化する値
// これを使うと、画面のすべてのピクセルにアクセスできる
vec2 st = vTexCoord;

FragCoord

FragCoordは、フラグメントシェーダー内で、渡されたresolution uniformにもとづいたテクスチャ座標の計算に使用されます。

.fragファイル(FragCoordに関係するコードのみ)

void main (void) {
	vec2 st = gl_FragCoord.xy/u_resolution.xy;
}

座標をuvやst、coordといった名前で参照している場合を目にするかもしれませんが、これらは同じものを参照する異なる命名規則です。