ジオメトリのテクスチャのv座標を反転させます。
texture()が機能するためには、ジオメトリは その表面上の点を長方形の画像のピクセルにマッピングする方法が 必要です。この長方形の画像がテクスチャとして使用されます。ジオメトリの 座標(x, y, z)
の頂点は、テクスチャ画像の座標(u, v)
の ピクセルにマッピングされます。
myGeometry.uvs配列は、 ジオメトリに追加された順序で各頂点の(u, v)
座標を 格納します。myGeometry.flipV()
を呼び出すと、ジオメトリの v座標が反転し、テクスチャが垂直方向に鏡像反転して表示されます。
例えば、平面の4つの頂点は左上の角から時計回りに追加されます。 以下はmyGeometry.flipV()
を呼び出すことで、平面のテクスチャ 座標がどのように変化するかを示しています:
// 元のテクスチャ座標を表示します。 // 出力: [0, 0, 1, 0, 0, 1, 1, 1] console.log(myGeometry.uvs);
// v座標を反転させます。 myGeometry.flipV();
// 反転後のテクスチャ座標を表示します。 // 出力: [0, 1, 1, 1, 0, 0, 1, 0] console.log(myGeometry.uvs);
// 以下の入れ替えに注目してください: // 左側の頂点: [0, 0] <--> [1, 0] // 右側の頂点: [1, 0] <--> [1, 1]
実例
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/p5.Geometry.js and open a pull request!