この画像はなぜ垂直に鏡映されないのですか？

Question

私は、webGlで使用されている多くの記号とドメインの規則の中で少し失われています。 this regl exampleに捨ててください（それは、ヒヒのテスト画像を表示しています）。ここで私が理解していることは次のとおりです。

• プリミティブが指定されていません。おそらくGL_TRIANGLEを推測します。
• したがって、ワールド空間に頂点が(-2, 0),(0, -2),(2, 2)の単一の三角形サーフェスを作成します。これを紙面に描くと、具体的には、領域[0,1] x [0,1]を含むために選択されたようです。
• uvは、この[0,1] x [0,1]領域（texture2dの領域）を含むワールド空間からその値をとります。私が正しく理解していれば、,のように、の点を指しているのが+uです。
• gl_Positionが1 - 2*uvに設定されているため、画像は「クリップスペース」内で[-1,1] x [-1,1], z=0を占めます。
• さらに重要なことは、+{u,v}の指示が-{x,y}に対応していることも意味します。
• 表示されている画像は、実際には、水平方向にミラー化されたです。 （compare to this）しかし、それはではなく、は垂直にミラーリングされています。 その他のものは、yの負の係数を相殺するオンスクリーンのピクセル座標への/からの最終変換に沿っている必要があります。
• しかし、Google検索では、gl_Positionが画面に対してどのような方法でもミラーリングされているという証拠はありません。私はそれが左利きであるとの議論を見ていますが、それは単に世界座標に関連してzを否定することからです。 (e.g. this question here)

簡潔に言えば、この画像は垂直にも映し出されるはずです。

私は何が欠けていますか？後世のために

---

、コードは以下に再現されています(MIT licensed)

const regl = require('regl')() 
const baboon = require('baboon-image') 

regl({ 
    frag: ` 
    precision mediump float; 
    uniform sampler2D texture; 
    varying vec2 uv; 
    void main() { 
    gl_FragColor = texture2D(texture, uv); 
    }`, 

    vert: ` 
    precision mediump float; 
    attribute vec2 position; 
    varying vec2 uv; 
    void main() { 
    uv = position; 
    gl_Position = vec4(1.0 - 2.0 * position, 0, 1); 
    }`, 

    attributes: { 
    position: [ 
     -2, 0, 
     0, -2, 
     2, 2] 
    }, 

    uniforms: { 
    texture: regl.texture(baboon) 
    }, 

    count: 3 
})() 

Answer 1

「ワールドスペース」のようなものは、WebGLの中にも、上記のあなたの例ではありません。 WebGLは、クリップ空間または（正規化されたデバイス座標）についてのみ気にします。ワールドスペースはで何かアプリ/フレームワーク/ライブラリーのお得な情報であると最終的にはWebGLのクリップスペース（または正規化デバイス座標）を得シェーダを提供

としては、いくつか、それはreglだ上記のコードはWebGLのないLJが指摘としょうかん。ですから、それはwebglではなくそのライブラリまでです。たとえば、ロードされるすべてのテクスチャを反転させることができ、どのように知ることができますか？それは、それが何をするかを推測するのはかなり簡単だと言った。

あなたの質問への短い答えが原因

gl_Position = vec4(1.0 - 2.0 * position, 0, 1); 

gl_Position = vec4(position, 0, 1); 

に変更しての全体像反転されているそして、あなたはそれはそれは図面の上下逆さま

だ表示されます巨大な三角形。入力値は

position: [ 
     -2, 0, 
     0, -2, 
     2, 2] 
    }, 

であり、このライン

gl_Position = vec4(1.0 - 2.0 * position, 0, 1); 

はgl_Positionに書き込まれた値が、我々はその相対をプロットした場合

5, 1 
1, 5 
-3, -3 

ある

1 - 2 * -2, 1 - 2 * 0 
1 - 2 * 0, 1 - 2 * -2 
1 - 2 * 2, 1 - 2 * 2 

ある意味しますカリフォルニアNVAS /画面/フレームバッファ我々は青い部分は、それはテクスチャがない「アップ」という概念を持っていないことに注意することが重要ですめくるため、スクリーン/キャンバス

ある

を取得します。覚えておくことが重要なことは、テクスチャ座標0,0がテクスチャの最初のピクセルを参照し、1,1がテクスチャの最後のピクセルを参照することです。彼らはその三角形の質感の赤い点はテクスチャ座標で0,0を表し

に適用される。ここ

は、テクスチャcoordsのです。

0,0をテクスチャの開始点（底部ではなく）と考える理由は、フレームバッファを使用してテクスチャにレンダリングしているときに、反転する必要がないということです。反転するのは、最終的にスクリーンにレンダリングしたときだけで、スクリーンに描画するときに左下に-1を置くため、-1になります。

これは説明するのが難しいですが、this exampleを見ると、オフスクリーンでテクスチャにレンダリングするときに、反転する必要はありません。それは、キャンバス/スクリーンにレンダリングするときだけです。

あなたは大きな三角形がテクスチャを確認するには、この

gl_Position = vec4((1.0 - 2.0 * position) * 0.2, 0, 1); 

にシェーダを変更確認したい場合はhere's the original

そして、あなたはそれがレンダリングされた年代の裏返しで見ることができますひっくり返されますreglの例

のWebGLやクリップ空間I'd recommend these tutorials