法线矩阵推导

https://zhuanlan.zhihu.com/p/72734738
https://juejin.cn/post/7113952418613690382
https://blog.csdn.net/wangjianxin97?type=blog

1、为什么需要法线矩阵

vec3 normalEyeSpace = modelViewMatrix * normal;

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

缩放后$n$不在与线段垂直了, 真正垂直的是$n^{\prime }$。

three.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$ 转换法向量, 矩阵$M$转换切线。
如果转换到视图空间,那么 $M$就是modelViewMatrix, 如果转换到世界空间,$M$就是modelMatrix。

根据假设有:
$$\begin{gathered} n^{\prime }=Gn \\ {t}^{\prime }=Mt \end{gathered}$$

根据几何关系有:
$$n\cdot t=n^{\prime }\cdot t^{\prime }=0$$

带入有:
$$\begin{array}{rl}{n}^{\prime }\cdot t^{\prime }& =(Gn)\cdot (Mt)\\ & =(Gn{)}^T(Mt)\\ & =n^T{G}^{T}Mt\end{array}$$

因为(向量点积用矩阵表示):
$$n\cdot t=n^{T}t=n^{\prime }\cdot t^{\prime }$$

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

因此:
$$\begin{array}{rl}{G}^T& =M^{-1}\\ (G^T{)}^T& =(M^{-1}{)}^T\\ G& =(M^{-1}{)}^T\end{array}$$