当对象旋转时,法线旋转方向错误

Question

我在WebGL中渲染一个简单的环面.旋转顶点工作正常,但我的法线有问题.当围绕单个轴旋转时,它们保持正确的方向,但是当围绕第二个轴的旋转增加时,法线开始以错误的方式向上旋转,直到其中一个旋转为180°,然后法线在完全相反的情况下旋转他们应该.我假设问题在于用于旋转的四元数,但我无法确定哪里出错了.

这是一个(略有修改,但它仍然显示问题)我的项目的jsfiddle:https://jsfiddle.net/dt509x8h/1/
在小提琴的html部分有一个包含来自obj的所有数据的div -file我正在阅读以生成圆环(尽管分辨率较低).

顶点着色器:

attribute vec4 aVertexPosition;
attribute vec3 aNormalDirection;

uniform mat4 uMVPMatrix;
uniform mat3 uNMatrix;

varying vec3 nrm;

void main(void) {
    gl_Position = uMVPMatrix * aVertexPosition;
    nrm = aNormalDirection * uNMatrix;
}

片段着色器:

varying vec3 nrm;

void main(void) {
    gl_FragColor = vec4(nrm, 1.0);
}

更新矩阵(在输入时运行):

mat4.perspective(pMatrix, Math.PI*0.25, width/height, clipNear, clipFar); //This is actually not run on input, it is just here to show the creation of the perspective matrix
mat4.fromRotationTranslation(mvMatrix, rotation, position);
mat3.normalFromMat4(nMatrix, mvMatrix);

mat4.multiply(mvpMatrix, pMatrix, mvMatrix);

var uMVPMatrix = gl.getUniformLocation(shaderProgram, "uMVPMatrix");
var uNMatrix = gl.getUniformLocation(shaderProgram, "uNMatrix");
gl.uniformMatrix4fv(uMVPMatrix, false, mvpMatrix);
gl.uniformMatrix3fv(uNMatrix, false, nMatrix);

创建旋转四元数(鼠标移动时调用):

var d = vec3.fromValues(lastmousex-mousex, mousey-lastmousey, 0.0);
var l = vec3.length(d);
vec3.normalize(d,d);
var axis = vec3.cross(vec3.create(), d, [0,0,1]);
vec3.normalize(axis, axis);

var q = quat.setAxisAngle(quat.create(), a, l*scale);
quat.multiply(rotation, q, rotation);

仅围绕Y轴旋转圆环,法线指向正确的方向:

围绕两个轴旋转圆环.法线指向所有地方:

我正在使用glMatrix v2.3.2进行所有矩阵和四元数运算.

更新: 似乎仅围绕Z轴旋转(通过quat.setAxisAngle明确地设置输入轴[0,0,1],或通过使用quat.rotateZ)也会导致法线以相反方向旋转.
归零z分量axis并没有帮助.

Update2: 通过quat.rotateX(q, q, l*scale); quat.rotateY(q, q, l*scale); quat.multiply(rotation, q, rotation);似乎正确旋转,但是一旦引入绕Z的旋转,z法线就会开始移动.
使用x或y鼠标值的差异而不是l使所有法线移动,因此scale对x和y 使用很大的不同值.

Update3:更改着色器中的乘法顺序, uNMatrix * aNormalDirection使法线始终以错误的方式旋转.

Answer 1

就我而言,问题在于如何从.obj文件加载数据.我已经反转了所有顶点的z位置,但法线是从非反转顶点生成的.
使用非反转z位置和翻转正常矩阵乘法来解决问题.