法线矩阵推导

https://zhuanlan.zhihu.com/p/72734738

https://juejin.cn/post/7113952418613690382

https://blog.csdn.net/wangjianxin97?type=blog

1、为什么需要法线矩阵

js 复制代码

vec3 normalEyeSpace = modelViewMatrix * normal;

如果模型矩阵执行了非等比缩放, 顶点的改变会导致法向量不再保持垂直关系。

缩放后 n n n不在与线段垂直了, 真正垂直的是 n ′ n' n′。

three.js 代码:

js 复制代码

const geometry = new THREE.BufferGeometry()
const position = [];
const normals = [];
position.push(-1, 0, 0)
position.push(1, 0, 0)
position.push(0, 1, 0)

normals.push(0.5, 0.5, 0)
normals.push(0.5, 0.5, 0)
normals.push(0.5, 0.5, 0)

geometry.setAttribute('position', new THREE.Float32BufferAttribute(position, 3))
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3))

const material = new THREE.ShaderMaterial({
  vertexShader: `
    varying vec3 vNormal;
    void main() {
      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
      gl_Position = projectionMatrix * mvPosition;
      vNormal = normal;
    }
  `,
  fragmentShader: `
    varying vec3 vNormal;
    uniform mat3 normalMatrix;
    void main() {
      gl_FragColor = vec4( vNormal, 1.0 );
    }
  `,
});

const mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(0.5, 1, 1)

2 法向量矩阵推导

约定:

向量用小写字母的表示
转换矩阵用大写字母表示

假设矩阵 G G G 转换法向量, 矩阵 M M M转换切线。

如果转换到视图空间 ,那么 M M M就是modelViewMatrix, 如果转换到世界空间 , M M M就是modelMatrix。

根据假设有:
n ′ = G n t ′ = M t n' = G n \\ t' = M t \\ n′=Gnt′=Mt

根据几何关系有:
n ⋅ t = n ′ ⋅ t ′ = 0 n \cdot t = n' \cdot t' = 0 n⋅t=n′⋅t′=0

带入有:
n ′ ⋅ t ′ = ( G n ) ⋅ ( M t ) = ( G n ) T ( M t ) = n T G T M t \begin{aligned} n' \cdot t' &= (G n) \cdot (M t) \\ &= (G n)^{T} (M t) \\ &= n^{T} G^{T} M t \\ \end{aligned} n′⋅t′=(Gn)⋅(Mt)=(Gn)T(Mt)=nTGTMt

因为(向量点积用矩阵表示):
n ⋅ t = n T t = n ′ ⋅ t ′ n \cdot t = n^{T} t = n' \cdot t' n⋅t=nTt=n′⋅t′

所以，满足上式, 只需:
G T M = I G^{T} M = I GTM=I

因此:
G T = M − 1 ( G T ) T = ( M − 1 ) T G = ( M − 1 ) T \begin{aligned} G^{T} &= M^{-1} \\ (G^{T})^{T} &= (M^{-1})^{T} \\ G &= (M^{-1})^{T} \end{aligned} GT(GT)TG=M−1=(M−1)T=(M−1)T