我在 WebGL 中渲染一个简单的圆环。旋转顶点可以正常工作,但法线有问题。当围绕单个轴旋转时,它们保持正确的方向,但是当围绕第二个轴的旋转增加时,法线开始以错误的方式旋转,直到其中一个旋转为 180°,然后法线以完全相反的方式旋转他们应该。我认为问题在于用于旋转的四元数,但我无法确定出了什么问题。
这是我项目的一个(稍作修改,但仍然显示问题)jsfiddle:https ://jsfiddle.net/dt509x8h/1/
在小提琴的 html 部分中有一个 div 包含来自 obj 的所有数据-我正在阅读以生成环面的文件(尽管分辨率较低)。
顶点着色器:
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:
Rotating byquat.rotateX(q, q, l*scale); quat.rotateY(q, q, l*scale); quat.multiply(rotation, q, rotation);
似乎是正确的,但是一旦引入围绕 Z 的旋转,z 法线就会开始移动。
使用 x 或 y 鼠标值的差异而不是l
会导致所有法线移动,因此scale
对 x 和 y 使用大不相同的 - 值也是如此。
更新3:更改着色器中的乘法顺序 uNMatrix * aNormalDirection
会导致法线始终以错误的方式旋转。