在顶点着色器与片元着色器中计算TBN矩阵的差异及优势探究
Great question! It’s totally reasonable to assume calculating the TBN matrix in the vertex shader (VS) would be faster—after all, we’re doing the work once per vertex instead of once per fragment. But as you’ve noticed, major engines like THREE.js and PlayCanvas lean into fragment shader (FS) calculations, and there are some key reasons for that. Let’s break down the differences and the advantages of the FS approach.
Core Differences Between the Two Approaches
First, let’s clarify what each method does:
- Vertex Shader Calculation: You compute the full TBN matrix once per vertex, then pass the entire matrix to the fragment shader via a
varyingvariable. The GPU interpolates this matrix across the face for each fragment. - Fragment Shader Calculation: You pass individual transformed vectors (normal, tangent, and sometimes the tangent’s w component) from the VS to the FS, then assemble the TBN matrix per fragment (or even recompute the bitangent in the FS using the normal and tangent).
Why Fragment Shader Calculation Is Preferred
Here are the main advantages that make this approach worth the extra per-fragment computation:
1. Avoids Interpolation-Induced Precision Loss
When you interpolate a full TBN matrix (or even its individual vectors) across a triangle, the resulting fragment-level vectors lose their orthogonality. TBN matrices rely on being orthogonal to correctly transform vectors into tangent space (critical for normal mapping). Interpolation stretches or skews these vectors, leading to:
- Distorted normal map sampling
- Incorrect lighting calculations (especially noticeable on curved surfaces or sharp edges)
- Visible artifacts like "warped" shadows or highlights
By assembling the TBN matrix in the FS (or recomputing the bitangent there using cross(vNormal, vTangent) * vTangent.w), you ensure the three vectors stay orthogonal at every fragment, preserving precision and visual correctness.
2. Handles Non-Uniform Scaling Robustly
Normal matrices are designed to correctly transform normals under non-uniform scaling (they use the inverse transpose of the model-view matrix). However, tangents don’t get the same automatic correction if you just multiply them by the normal matrix. If you compute the bitangent in the VS and interpolate it, non-uniform scaling will break the orthogonality of the TBN set.
In the FS, recomputing the bitangent from the interpolated normal and tangent fixes this issue. The cross product ensures the bitangent is perpendicular to both, and the tangent’s w component accounts for handedness, so the TBN matrix remains valid even with uneven scaling.
3. Offers Greater Flexibility
Doing the work in the FS lets you dynamically adjust the TBN matrix for effects like:
- Normal map flipping (useful for mirrored geometry)
- Tangent space modifications for procedural effects
- Swapping between different normal maps or tangent spaces at runtime
You don’t need to modify or recompile the vertex shader to add these tweaks—all adjustments happen in the FS, making your shader code more modular and adaptable.
4. Modern GPUs Can Handle the Overhead
While per-fragment computation sounds like it would be slower, modern GPUs are heavily optimized for parallel fragment processing. The cost of assembling a TBN matrix per fragment is negligible compared to the visual quality gains. Engines prioritize correctness and visual fidelity over minor performance savings here, especially since most real-world scenes have far more fragments than vertices.
Quick Recap
- Vertex Shader: Faster per-vertex computation, but suffers from interpolation artifacts and struggles with non-uniform scaling.
- Fragment Shader: Slightly more computation per fragment, but delivers precise, orthogonal TBN matrices, handles scaling correctly, and offers more flexibility.
内容的提问来源于stack exchange，提问作者user2331095
