法线矩阵推导
https://zhuanlan.zhihu.com/p/72734738
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