webgl入门实例-向量在图形学中的核心作用

在图形学中，向量是描述几何、光照、运动等核心概念的基础工具。以下是向量在图形学中的关键应用和深入解析：

1. 向量的核心作用

• 几何表示：描述点、方向、法线、切线等。
• 空间变换：平移、旋转、缩放等操作依赖向量运算。
• 光照计算：光线方向、反射向量、点积用于漫反射和镜面高光。
• 物理模拟：速度、加速度、力的合成与分解。

  ---

  2. 图形学中的向量运算

  (1) 点积（Dot Product）的应用

  • 光照模型：计算光线与表面法线的夹角（Lambert漫反射）：

    I = max ⁡ ( 0 , L ⋅ N ) ⋅ I light I = \max(0, \mathbf{L} \cdot \mathbf{N}) \cdot I_{\text{light}} I=max(0,L⋅N)⋅Ilight​

      L 为光线方向 \ {L}为光线方向  L为光线方向，   N 为法线 \ {N}为法线  N为法线， I light 为光强 I_{\text{light}}为光强 Ilight​为光强

  • 背面剔除：若视线向量(\mathbf{V})与法线(\mathbf{N})的点积(\mathbf{V} \cdot \mathbf{N} > 0)，则表面不可见。
  • 投影计算：将向量投影到另一向量（如阴影生成）。

    (2) 叉积（Cross Product）的应用

    • 法向量计算：通过三角形两边的叉积求法线：

      N = ( v 1 − v 0 ) × ( v 2 − v 0 ) \mathbf{N} = (\mathbf{v}_1 - \mathbf{v}_0) \times (\mathbf{v}_2 - \mathbf{v}_0) N=(v1​−v0​)×(v2​−v0​)

    • 坐标系构建：生成切线空间（TBN矩阵）用于法线贴图：

      T = 切线 , B = N × T \mathbf{T} = \text{切线}, \quad \mathbf{B} = \mathbf{N} \times \mathbf{T} T=切线,B=N×T

      (3) 归一化（Normalization）

      • 将向量转换为单位向量，确保方向计算不受长度影响：

        v ^ = v ∣ v ∣ \hat{\mathbf{v}} = \frac{\mathbf{v}}{|\mathbf{v}|} v^=∣v∣v​

        （关键用于光线方向、法线等）

        ---

        3. 向量在图形流水线中的角色

        (1) 顶点处理

        • 模型变换：通过矩阵乘法（如MVP矩阵）将顶点从模型空间转换到裁剪空间：

          v clip = M V P ⋅ v model \mathbf{v}_{\text{clip}} = \mathbf{MVP} \cdot \mathbf{v}_{\text{model}} vclip​=MVP⋅vmodel​

        • 法线变换：法线需用模型矩阵的逆转置矩阵变换，以保持垂直性：

          N world = ( M − 1 ) ⊤ ⋅ N model \mathbf{N}_{\text{world}} = (\mathbf{M}^{-1})^\top \cdot \mathbf{N}_{\text{model}} Nworld​=(M−1)⊤⋅Nmodel​

          (2) 光照与着色

          • Phong模型：结合环境光、漫反射（点积）、镜面反射（反射向量计算）：

            R = 2 ( L ⋅ N ) N − L \mathbf{R} = 2(\mathbf{L} \cdot \mathbf{N})\mathbf{N} - \mathbf{L} R=2(L⋅N)N−L

          • 半程向量（Blinn-Phong）：优化镜面高光计算：

            H = L + V ∣ L + V ∣ \mathbf{H} = \frac{\mathbf{L} + \mathbf{V}}{|\mathbf{L} + \mathbf{V}|} H=∣L+V∣L+V​

            (3) 屏幕空间操作

            • 视口变换：将NDC坐标映射到屏幕像素坐标：

              { x screen = ( x ndc + 1 ) ⋅ width 2 y screen = ( 1 − y ndc ) ⋅ height 2 \begin{cases} x_{\text{screen}} = (x_{\text{ndc}} + 1) \cdot \frac{\text{width}}{2} \\ y_{\text{screen}} = (1 - y_{\text{ndc}}) \cdot \frac{\text{height}}{2} \end{cases} {xscreen​=(xndc​+1)⋅2width​yscreen​=(1−yndc​)⋅2height​​

              ---

              4. 图形学特有问题与优化

              (1) 精度问题

              • 浮点误差：使用高精度浮点（如double）或误差容忍比较（如glm::epsilonEqual）。
              • 归一化失效：零向量或极小向量的保护性处理：

                if (length(v)  
                (2) 向量插值
                 
                

                • 重心坐标插值：在三角形内插值顶点属性（颜色、UV、法线）：

                  p = α v 0 + β v 1 + γ v 2 \mathbf{p} = \alpha \mathbf{v}_0 + \beta \mathbf{v}_1 + \gamma \mathbf{v}_2 p=αv0​+βv1​+γv2​

                • 透视校正插值：在投影空间中需除以深度（w分量）保证正确性。

                  (3) 性能优化

                  • SIMD指令：使用SSE/AVX加速向量运算（如Unity的Burst编译器）。
                  • 预计算向量：如预生成环境贴图的辐照度向量。

                    ---

                    5. 实际代码示例（GLSL/HLSL）

                    (1) 法线贴图解码

                    vec3 normal = texture(normalMap, uv).xyz * 2.0 - 1.0; // 从[0,1]映射到[-1,1]
                    normal = normalize(TBN * normal); // TBN为切线空间矩阵
                    

                    (2) 反射光线计算

                    vec3 reflectDir = reflect(-lightDir, normal);
                    float specular = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);
                    

                    (3) 屏幕空间UV计算

                    vec2 screenUV = gl_FragCoord.xy / resolution;
                    

                    ---

                    6. 扩展：向量在高级图形技术中的应用

                    • 光线追踪：光线方向向量与场景求交（如rayDir = normalize(target - origin)）。
                    • SDF（符号距离场）：利用向量计算点到表面的最短距离。
                    • 流体模拟：速度场（向量场）的平流与扩散。

                      ---

                      
                      （图片来源网络，侵删）
                      
                      （图片来源网络，侵删）
                      
                      （图片来源网络，侵删）