javascript - WebGL，负比例法线

Question

我尝试在某些模型上渲染灯光。 所有模型都有一些独特的选项(缩放、位置、旋转)。我使用所有这些选项创建一个矩阵，并更改该矩阵中的所有模型顶点。

当模型具有负比例时，我遇到了一个大问题，正常情况是相反的并且看起来不应该。

这是我使用的代码:

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);
};

---

// 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] );
}

Answer 1

负比例值将翻转您的几何图形:demo来自 here 。如果您需要缩小它，您应该使用分数值。