Javascript WebGL,负比例法线
我尝试在一些模型上渲染灯光。 所有模型都有一些唯一选项(比例、位置、旋转)。我使用所有这些选项创建了一个矩阵,并从此矩阵更改了所有模型的顶点 我有一个大问题,当模型具有负比例时,法线反转,看起来不应该 下面是我使用的代码:Javascript WebGL,负比例法线,javascript,webgl,Javascript,Webgl,我尝试在一些模型上渲染灯光。 所有模型都有一些唯一选项(比例、位置、旋转)。我使用所有这些选项创建了一个矩阵,并从此矩阵更改了所有模型的顶点 我有一个大问题,当模型具有负比例时,法线反转,看起来不应该 下面是我使用的代码: vec3.calcNormal = function( a, b, c, dest ) { var v1 = dest || vec3.create(), v2 = vec3.create(); vec3.subtract( c, b, v1 );
vec3.calcNormal = function( a, b, c, dest ) {
var v1 = dest || vec3.create(), v2 = vec3.create();
vec3.subtract( c, b, v1 );
vec3.subtract( a, b, v2 );
vec3.cross( v1, v2 );
return vec3.normalize(v1);
};
//在顶点上应用矩阵
大小=顶点长度;
vert=新阵列(大小);
对于(i=0;i负比例值将翻转几何体:从。如果需要收缩,则应使用分数值。是的,我知道负比例值翻转几何体。我只想找到一种方法,在这种情况下如何生成适当的法线。如果几何体翻转,则所有人都需要翻转法线。对于法线变换ion你需要单独的矩阵阅读这个谢谢JAre,它很有效!所以基本上是逆矩阵,转置它,最后用它乘以所有法线:)
// Apply matrix on vertices
size = vertices.length;
vert = new Array(size);
for( i=0; i<size; ++i ) {
vert[i] = vec3.create();
mat4.multiplyVec3( matrix, vertices[i], vert[i] );
}
// Generate face normals
face_normal = new Array(faces.length);
for ( i=0, count=faces.length; i<count; ++i ) {
face = faces[i];
face_normal[i] = vec3.create();
vec3.calcNormal(
vert[ face.vertidx[0] ],
vert[ face.vertidx[1] ],
vert[ face.vertidx[2] ],
face_normal[i]
);
}
// Get normal matrix
mat3.transpose( mat4.toInverseMat3(matrix), normalMat );
// Apply matrix on vertices
size = vertices.length;
vert = new Array(size);
for( i=0; i<size; ++i ) {
vert[i] = vec3.create();
mat4.multiplyVec3( matrix, vertices[i], vert[i] );
}
// Generate face normals
face_normal = new Array(faces.length);
for ( i=0, count=faces.length; i<count; ++i ) {
face = faces[i];
face_normal[i] = vec3.create();
vec3.calcNormal(
vertices[ face.vertidx[0] ],
vertices[ face.vertidx[1] ],
vertices[ face.vertidx[2] ],
face_normal[i]
);
mat3.multiplyVec3( normalMat, face_normal[i] );
}