1

私は THREE.js で SDF フォントを使用しようとしています。それらには、文字の PNG マップと、各文字 x オフセット、y オフセット、幅、高さなどの文字データが付属しています。

各キャラクターのオフセットと幅などを含むキャラクター データを使用する前に、three.js/examples のサンプル UV テクスチャの 1 つの一部だけをマッピングしてみました。

JSFiddle: http://jsfiddle.net/b2zegeht/3/

クワッドの UV マッピング

したがって、上の画像はクワッドにレンダリングされており、ループ内の次のコードを使用しています。

        var i=0;

        geo.vertices.push(new THREE.Vector3(x-halfWidth, y+halfWidth, 0));      // TL
        geo.vertices.push(new THREE.Vector3(x-halfWidth, y-halfWidth, 0));      // BL
        geo.vertices.push(new THREE.Vector3(x+halfWidth, y-halfWidth, 0));      // BR
        geo.vertices.push(new THREE.Vector3(x+halfWidth, y+halfWidth, 0));      // TR

        // create two triangle faces for geom
        // all face coordinates must match vertice indexes
        // 0,1,2,3 start in the top left and go round the quad anti-clockwise
        var j = i*4;
        geo.faces.push(new THREE.Face3(
            j,                              // TL
            j+1,                            // BL
            j+3                             // TR
        ));
        geo.faces.push(new THREE.Face3(
            j+1,                            // BL
            j+2,                            // BR
            j+3                             // TR
        ));

        var k = i*2;

        // x, y+height
        // x, y
        // x+width, y+height    
        geo.faceVertexUvs[0][k] = [

            new THREE.Vector2(  0,  1  ),    // TL
            new THREE.Vector2(  0,  0  ),    // BL
            new THREE.Vector2(  1,  1  )     // TR

        ];

        // x, y
        // x+width, y
        // x+width, y+height
        geo.faceVertexUvs[0][k+1] = [

            new THREE.Vector2(  0,  0  ),    // BL
            new THREE.Vector2(  1,  0  ),    // BR
            new THREE.Vector2(  1,  1  )     // TR

        ];

クワッドにテクスチャの一部を表示するには、UV 座標を調整する必要があると仮定します。問題は、それらのいくつかは私の期待どおりに動作し、一部はそうではないことです。たとえば、テクスチャを 3 つずつ移動すると、0.3 から 1 の範囲で表示され、期待どおりに動作します。

        geo.faceVertexUvs[0][k] = [
            new THREE.Vector2(  0.3, 1  ),      // TL
            new THREE.Vector2(  0.3, 0  ),      // BL
            new THREE.Vector2(  1,   1  )       // TR
        ];
        geo.faceVertexUvs[0][k+1] = [
            new THREE.Vector2(  0.3, 0  ),      // BL
            new THREE.Vector2(  1,   0  ),      // BR
            new THREE.Vector2(  1,   1  )       // TR
        ];

ここに画像の説明を入力

次に、クワッドの上部の 2 つのコーナーを 2 つ下げて 0.8 にします。

        geo.faceVertexUvs[0][k] = [
            new THREE.Vector2(  0.3, 0.8  ),    // TL
            new THREE.Vector2(  0.3, 0  ),      // BL
            new THREE.Vector2(  1,   0.8  )     // TR
        ];
        geo.faceVertexUvs[0][k+1] = [
            new THREE.Vector2(  0.3, 0  ),      // BL
            new THREE.Vector2(  1,   0  ),      // BR
            new THREE.Vector2(  1,   0.8  )     // TR
        ];

ここに画像の説明を入力

しかし、これは機能しません。実際には U/X 座標に影響を与え、テクスチャの上半分を左にシフトしたようです。faceVertexUvs は、X、Y 座標と同じプロパティを示すようには見えません。ここで何が欠けているのか説明できますか? また、0.7、0.7 のような 1 つの正方形を表示するにはどうすればよいでしょうか。

これを理解したら、次のようなテクスチャからクワッドに文字をレンダリングできます。

ここに画像の説明を入力

4

1 に答える 1

0

問題は、上記のコードではなく、シェーダーにありました。質問はもっと明確にすべきだと思います。とにかく、このコードを削除すると機能します (Chrome と Firefox の両方で)。

if(uv.y != 0.0)
{
    textureCoord.w *= (uv.y);
}

フィドル: http://jsfiddle.net/47j8g71a/

于 2014-10-13T14:03:19.080 に答える