6

スクリーン ピクセルに対応する任意の位置にコーナーがあるクワッドに、長方形のテクスチャをマップしたいと考えています。のようなものdrawQuad( x1,y1, x2,y2, x3,y3, x4,y4 )。WebGL でこれを行うデモはありますか?

私が WebGL で行ったことはすべて Three.js で行ってきました。これにより、ジオメトリ プロジェクション、ライティング、およびカメラが簡単になります。しかし、これはより簡単です。照明やカメラ アングルは必要なく、四隅の絶対位置を入力するだけです。この下位レベルに到達できるのであれば、Three.js を使用することに反対しているわけではありません。

Quartz Composerの GLSL 頂点シェーダーに関する説明を見つけました。

アップデート

私のプロジェクトでは、任意の要素 (canvas、img、div、video) を引き伸ばすことができ、非平面形状で引き裂かれないため、今のところ CSS を使用することになりました...最終的には、WebGL オプションを再検討する可能性があります. 四隅を任意の位置にドラッグする例があれば、ここに追加します。

meemoo マッパー

4

1 に答える 1

3

「Learning webGL」のチュートリアルを読むことを強くお勧めします。

クワッドの頂点ごとに、その「UV 座標」を送信します。UV 座標は、テクスチャのどの部分が頂点にバインドされているかを示す vec2 データです。

たとえば、(0,0) uv はテクスチャの左上隅を表し、(0.3, 0.4) はテクスチャの幅 30%、高さ 40% に対応するテクスチャ上の位置を表します。

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)、(x2, y1)、(x1, y2)、(x2, y2) になり、対応する UV 座標は (0.0, 0.0)、(1.0, 0,0) になります。 )、(0.0、1.0)、(1.0、1.0)。あるポイントから別のポイントへの UV 座標を完全に定義して、テクスチャをストレッチした方法に注目してください。

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

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)
}

シェーダーは、1 つの三角形を結合する頂点間の UV 座標を補間するため、各フラグメントは UV から独自の補間値を取得し、異なるテクスチャ データをサンプリングします。

これをよく読んでから、クワッドの作成は簡単です: http://learningwebgl.com/blog/?p=507

お役に立てれば。

      •  

実際の例: http://abstract-algorithm.com/quad.html

于 2013-05-15T15:23:16.580 に答える