WebGLの投影マッピング/クワッド反り/コーナーピン

Question

Iはピクセルを画面に対応する任意の位置に角部を有するクワッドに長方形のテクスチャをマッピングします。何かのようなdrawQuad(x1,y1, x2,y2, x3,y3, x4,y4)。 WebGLでこれを行うデモはありますか？私はWebGLので行っている

すべてがジオメトリ投影、照明、カメラが容易になりThree.js、とされています。しかし、これは簡単です：照明やカメラアングルが不要で、四隅の絶対位置を入力するだけです。私がThree.jsを使用することに反対しているわけではありません。

私はクォーツコンポーザーでan explanation with a GLSL vertex shaderを発見しました。

---

私のプロジェクトで更新

私は任意の要素（キャンバス、IMG、DIV、ビデオを）伸ばすことができ、かつ非で引き裂きを得ることはありませんので、私は、今のCSS一緒に行くことになりました私はWebGLオプションを再訪するかもしれません。誰かが4つのコーナーを任意の位置にドラッグする例があれば、ここでそれを追加します。

Answer 1

私は強く、 "学習のWebGL" から読んでチュートリアルを示唆しています。あなたはその「UV座標」を送信クワッドの各頂点のために

。 UV座標は、テクスチャのどの部分が頂点にバインドされているかを示すvec2データです。

（0.3、0.4）は、テクスチャの30％の幅と40％の高さに対応するテクスチャ上の位置を示しつつ、例えば、（0,0）、UVは、テクスチャの左上隅を表します。 GLSLシェーダで

は、そこに特別な機能である - にTexture2Dは、ここでの使用です：

uniform sampler2D uTexture; 
varying vec2 vUV; 
void main() 
    vec4 color_from_texture = texture2D (uTexture, vUV); 
    gl_FragColor = color_from_texture; 
} 

これは、サンプリングテクスチャと呼ばれ、あなたがにTexture2D関数を呼び出すことにより、いくつかの位置にテクスチャからデータを読み出しています。

頂点の位置は（x1、y1）、（x1、y2）、（x2、y2）、対応するUV座標は（0.0、0.0）、（1.0 、0,0）、（0.0,1.0）、（1.0,1.0）である。我々はUVを定義することで質感を随分どのよう 注1点から別のものに完全に調整します。

頂点シェーダは、次のようになります

は

attribute vec2 aUV; 
attribute vec2 aVertexPos; 
varying vec2 vUV; 
void main() { 
    vUV = aUv; 
    gl_Position = vec4(aVertexPos, 1.0); // maybe modelViewMatrix * projMatrix * vec4(aVertexPos, 1.0) 
} 

シェーダはUVが異なるテクスチャデータをサンプリングしますのでので、各フラグメントはUVあちこちに独自の、補間値を取得する1つの三角形を組み合わせて、頂点間の調整を補間します。

読む慎重にこの、その後、クワッドを作成することは簡単なはず： http://learningwebgl.com/blog/?p=507

・ホープ、このことができます。

• • •  

ライブ例：http://abstract-algorithm.com/quad.html