如何计算切线和双切向量

我在three.js中加载了纹理，然后传递给着色器。在顶点着色器中，我计算法线，然后将uv向量保存到变量中。

<script id="vertexShader" type="x-shader/x-vertex">

                varying vec3 N,P;
                varying vec2 UV;

                void main() {
                    gl_Position= projectionMatrix * modelViewMatrix * vec4(position,1.0);
                    P= position;
                    N= normalMatrix * vec3(normal);
                    UV= uv;
                }
            </script>
            <script id="fragmentShader" type="x-shader/x-fragment">

                varying vec3 N,P;
                varying vec2 UV;
                uniform sampler2D texture;

                void main() {
                    gl_FragColor= texture2D(texture,UV);
                }

            </script>

如何计算T和B向量？

首先，对于每个3D顶点，都有无限切线和双切线向量。下图说明了每个顶点为何有无限数量的切线空间，切线和双切线在所示平面中可以具有任何方向。

因此，为了正确计算最有用的¹切线空间，我们希望切线空间对齐，以使x轴（切线）对应于凹凸贴图中的u方向，而y轴（切线）对应于v方向。在凹凸贴图中，我们应该已经有顶点的法线，该顶点的法线已经与切线空间中的Z方向相对应。

_{（1）最有用，因为最后我们希望从纹理中采样法线向量}

最好用图片来解释，我们希望切线空间如下(u, v)图所示对齐。

图像的来源虽然与计算机图形学并不严格相关

在计算机图形学中，开发人员通常使用(u,v)也称为纹理坐标。我们将假定T为切线，B为双切线，并且P0是目标顶点，即三角形的一部分(P0,P1,P2)。

首先要记住我们想要做的是计算切线和bitanget：

1. T与u对齐，B与v对齐。
2. T和B处于顶点法线所在的平面（上图中所示的平面）。

关键是我们已经假设T和B处于同一平面，并且现在与U和V对应，如果我们能够知道它们的值，就可以将乘积与第三个向量相乘，以构造一个从世界到切线空间的转换矩阵。

既然我们知道任何2D向量都可以写成两个独立向量²的线性组合，并且由于我们已经有三角形点（边），如上图所示。我们可以这样写：

E1 =（u1-u0）T +（v1-v0）B

E2 =（u2-u0）T +（v2-v0）B

_{（2）实际上就是基础矩阵的推导方法}

上面的等式可以用矩阵形式写成，

| E1x E1y E1z |   | deltaU1 deltaV1 | * | Tx Ty Tz |
| E2x E2y E2z | = | deltaU2 deltaV2 |   | Bx By Bz |

通过求解矩阵方程，我们可以确定T和B值，可以构造一个转换矩阵。

C ++的完整源代码

#include "Vector4D.h"


struct Triangle
{
    unsigned short  index[3];
};


void CalculateTangentArray(long vertexCount, const Point3D *vertex, const Vector3D *normal,
        const Point2D *texcoord, long triangleCount, const Triangle *triangle, Vector4D *tangent)
{
    Vector3D *tan1 = new Vector3D[vertexCount * 2];
    Vector3D *tan2 = tan1 + vertexCount;
    ZeroMemory(tan1, vertexCount * sizeof(Vector3D) * 2);

    for (long a = 0; a < triangleCount; a++)
    {
        long i1 = triangle->index[0];
        long i2 = triangle->index[1];
        long i3 = triangle->index[2];

        const Point3D& v1 = vertex[i1];
        const Point3D& v2 = vertex[i2];
        const Point3D& v3 = vertex[i3];

        const Point2D& w1 = texcoord[i1];
        const Point2D& w2 = texcoord[i2];
        const Point2D& w3 = texcoord[i3];

        float x1 = v2.x - v1.x;
        float x2 = v3.x - v1.x;
        float y1 = v2.y - v1.y;
        float y2 = v3.y - v1.y;
        float z1 = v2.z - v1.z;
        float z2 = v3.z - v1.z;

        float s1 = w2.x - w1.x;
        float s2 = w3.x - w1.x;
        float t1 = w2.y - w1.y;
        float t2 = w3.y - w1.y;

        float r = 1.0F / (s1 * t2 - s2 * t1);
        Vector3D sdir((t2 * x1 - t1 * x2) * r, (t2 * y1 - t1 * y2) * r,
                (t2 * z1 - t1 * z2) * r);
        Vector3D tdir((s1 * x2 - s2 * x1) * r, (s1 * y2 - s2 * y1) * r,
                (s1 * z2 - s2 * z1) * r);

        tan1[i1] += sdir;
        tan1[i2] += sdir;
        tan1[i3] += sdir;

        tan2[i1] += tdir;
        tan2[i2] += tdir;
        tan2[i3] += tdir;

        triangle++;
    }

    for (long a = 0; a < vertexCount; a++)
    {
        const Vector3D& n = normal[a];
        const Vector3D& t = tan1[a];

        // Gram-Schmidt orthogonalize
        tangent[a] = (t - n * Dot(n, t)).Normalize();

        // Calculate handedness
        tangent[a].w = (Dot(Cross(n, t), tan2[a]) < 0.0F) ? -1.0F : 1.0F;
    }

    delete[] tan1;
}

完整的源代码和派生可以在这里找到。