วิธีการคำนวณเวกเตอร์แทนเจนต์และบิทูเมน


9

ฉันมีพื้นผิวโหลดใน three.js จากนั้นส่งผ่านไปยังเฉดสี ใน shader ที่ฉันคำนวณปกติ, และฉันบันทึกลงในตัวแปรเวกเตอร์ยูวี

<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 ได้อย่างไร


2
คุณต้องการอัลกอริทึมโดยทั่วไปหรือเฉพาะสำหรับห้องสมุดที่คุณเลือก?
concept3d

ถ้าฉันสามารถคำนวณด้วย three.js มันจะดีกว่า
Ramy Al Zuhouri

คำตอบ:


26

ประการแรกสำหรับทุกจุดยอด 3D นั้นจะมีเวกเตอร์แทนเจนต์และทวิแทนเจนต์ที่ไม่มีที่สิ้นสุด ภาพด้านล่างอธิบายว่าทำไมมีช่องว่างแทนเจนต์สำหรับแต่ละจุดยอดอนันต์แทนเจนต์และบิทูเมนท์สามารถมีทิศทางใดก็ได้ในระนาบที่แสดง

จำนวนช่องว่าง tanget สำหรับแต่ละจุดสุดยอด

ดังนั้น inorder ในการคำนวณพื้นที่แทนเจนต์ที่มีประโยชน์มากที่สุดอย่างเหมาะสม1เราต้องการให้พื้นที่แทนเจนต์ของเราสอดคล้องกับแกน x (แทนเจนต์) ที่สอดคล้องกับทิศทาง u ในแผนที่ bump และแกน y (bitangent) สอดคล้องกับทิศทาง v ในแผนที่ bump เราควรมีจุดยอดปกติที่สอดคล้องกับทิศทาง Z ในพื้นที่แทนเจนต์แล้ว

(1) มีประโยชน์มากที่สุดเพราะในท้ายที่สุดเราต้องการให้เวกเตอร์ปกติถูกสุ่มตัวอย่างจากพื้นผิว

ที่ดีที่สุดที่จะอธิบายด้วยภาพเราต้องการให้พื้นที่สัมผัสกันของเราที่จะจัดตำแหน่งตามที่(u, v)แสดงด้านล่าง

ป้อนคำอธิบายรูปภาพที่นี่

แหล่งที่มาของรูปภาพ แต่ไม่เกี่ยวข้องกับกราฟิกคอมพิวเตอร์

ในนักพัฒนากราฟิกคอมพิวเตอร์มักใช้(u,v)หรือที่เรียกว่าพิกัดพื้นผิว เราจะถือว่ามีการสัมผัสกัน T และ B เป็น bitangent และเป็นจุดสุดยอดเป้าหมายของเราที่เป็นส่วนหนึ่งของรูปสามเหลี่ยมP0(P0,P1,P2)

ก่อนอื่นให้จำสิ่งที่เราต้องการทำคือการคำนวณแทนเจนต์และบิทูเนตที่:

  1. T สอดคล้องกับ u และ B ชิดกับ v
  2. T และ B วางอยู่ในระนาบที่มีจุดสุดยอดปกติ (ระนาบที่แสดงในภาพด้านบน)

ประเด็นก็คือเราได้สันนิษฐานไว้แล้วว่า T และ B วางอยู่ในระนาบเดียวกันและสอดคล้องกับ U และ V ในตอนนี้ถ้าเราสามารถรู้คุณค่าของพวกเขาเราสามารถข้ามผลิตภัณฑ์และเวกเตอร์ที่สามเพื่อสร้างเมทริกซ์การแปลงจากโลกสู่อวกาศแทนเจนต์

ป้อนคำอธิบายรูปภาพที่นี่

เนื่องจากเราทราบว่าเวกเตอร์ 2D ใด ๆ สามารถเขียนเป็นชุดเชิงเส้นของเวกเตอร์อิสระสองตัว2และเนื่องจากเรามีจุดสามเหลี่ยม (ขอบ) อยู่แล้วแสดงในภาพด้านบน เราสามารถเขียน:

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

รหัสที่มาเต็มรูปแบบและรากศัพท์สามารถพบได้ที่นี่


ถ้าฉันไม่มีสามเหลี่ยมล่ะ? ในกรณีของฉันฉันมีพื้นผิวที่ควรใช้กับทรงกลม วิธีการปรับให้เข้ากับกรณีนี้?
Ramy Al Zuhouri

@RamyAlZuhouri ไม่ใช่ทรงกลมที่สร้างมาจากรูปสามเหลี่ยม? คุณแค่วนรอบจุดยอดเหมือนในรหัส หากทรงกลมของคุณไม่ได้เป็นรูปสามเหลี่ยมซึ่งเป็นเรื่องที่แตกต่างอย่างสิ้นเชิง
concept3d

ฉันใช้ SphereGeometry three.js (ใน javascript) บางทีฉันควรผ่านคุณสมบัติใบหน้าไปที่ตัวแรเงา? ทรงกลมที่ฉันวาดมีจุดยอด 1,089 และหน้า 1084
Ramy Al Zuhouri

1
คุณคำนวณพื้นที่แทนเจนต์แล้วส่งแทนเจนต์ไปยังเฉดสี และคุณควรเข้าถึงใบหน้า / จุดยอดเพื่อคำนวณพื้นที่สัมผัสแทน
concept3d

ในกรณีของฉันฉันจะได้แทนเจนต์ 1,084 ฉันจะแมปแทนเจนต์กับจุดยอดได้อย่างไร
Ramy Al Zuhouri
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.