在 WebGL 中创建 3D 自由相机 - 为什么这些方法都不起作用？

Question

编辑

好的，我尝试过使用四元数的相机：

qyaw = [Math.cos(rot[0]/2), 0, Math.sin(rot[0]/2), 0];
qpitch = [Math.cos(rot[1]/2), 0, 0, Math.sin(rot[1]/2)];
rotQuat = quat4.multiply (qpitch, qyaw);
camRot = quat4.toMat4(rotQuat);
camMat = mat4.multiply(camMat,camRot);

我遇到了完全相同的问题。所以我猜这不是万向节锁。我尝试更改矩阵相乘的顺序，但它只是相机矩阵 * 模型视图矩阵，然后是对象矩阵 * 模型视图。是这样吧？

我正在尝试在 webGL 中构建一个 3d 相机，它可以在世界各地移动并绕 x 和 y（右和上）轴旋转。

我遇到了一个熟悉的问题（可能是万向节锁？），一旦其中一个轴旋转，围绕另一个轴的旋转就会被搞砸；例如，当您绕 Y 轴旋转 90 度时，绕 x 的旋转将变为绕 z 的旋转。

我意识到这是一个常见问题，并且有大量的指南来构建可以避免此问题的相机，但据我所知，我已经实现了两种不同的解决方案，但仍然遇到相同的问题。坦率地说，它让我头疼......

我正在使用的一个解决方案是（改编自 http://www.toymaker.info/Games/html/camera.html）：

function updateCam(){
    yAx = [0,1,0]; 
    xAx = [1,0,0];
    zAx = [0,0,1];

    mat4.identity(camMat);

    xRotMat = mat4.create();
    mat4.identity(xRotMat)
    mat4.rotate(xRotMat,rot[0],xAx);
    mat4.multiplyVec3(xRotMat,zAx); 
    mat4.multiplyVec3(xRotMat,yAx);


    yRotMat = mat4.create();
    mat4.identity(yRotMat)
    mat4.rotate(yRotMat,rot[1],yAx);
    mat4.multiplyVec3(yRotMat,zAx); 
    mat4.multiplyVec3(yRotMat,xAx);


    zRotMat = mat4.create();
    mat4.identity(zRotMat)
    mat4.rotate(zRotMat,rot[2],zAx);
    mat4.multiplyVec3(zRotMat,yAx); 
    mat4.multiplyVec3(zRotMat,xAx);


    camMat[0] = xAx[0];
    camMat[1] = yAx[0];
    camMat[2] = zAx[0];
    //camMat[3] = 
    camMat[4] = xAx[1]
    camMat[5] = yAx[1]; 
    camMat[6] = zAx[1];
    //camMat[7] = 
    camMat[8] = xAx[2]
    camMat[9] = yAx[2];
    camMat[10]= zAx[2];
    //camMat[11]=
    camMat[12]= -1* vec3.dot(camPos, xAx); 
    camMat[13]= -1* vec3.dot(camPos, yAx);
    camMat[14]= -1* vec3.dot(camPos, zAx);
    //camMat[15]=

    var movSpeed = 1.5 * forward;
    var movVec= vec3.create(zAx);
    vec3.scale(movVec, movSpeed);
    vec3.add(camPos, movVec);
    movVec= vec3.create(xAx);
    movSpeed = 1.5 * strafe;
    vec3.scale(movVec, movSpeed);
    vec3.add(camPos, movVec);

}

我也尝试使用此方法

mat4.rotate(camMat, rot[1], yAx);

而不是显式构建相机矩阵 - 相同的结果。

我的第二个（实际上是第一个......）方法看起来像这样（rot是一个数组，包含当前围绕x、y和z的旋转（z始终为零）：

   function updateCam(){
        mat4.identity(camRot);
        mat4.identity(camMat);
        camRot = fullRotate(rot);
        mat4.set(camRot,camMat);
        mat4.translate(camMat, camPos); 
    }

    function fullRotate(angles){
        var cosX = Math.cos(angles[0]);
        var sinX = Math.sin(angles[0]);
        var cosY = Math.cos(angles[1]);
        var sinY = Math.sin(angles[1]);
        var cosZ = Math.cos(angles[2]);
        var sinZ = Math.sin(angles[2]); 
        rotMatrix = mat4.create([cosZ*cosY, -1*sinZ*cosX + cosZ*sinY*sinX, sinZ*sinX+cosZ*sinY*cosX, 0,
            sinZ*cosY, cosZ*cosX + sinZ*sinY*sinX, -1*cosZ*sinX + sinZ*sinY*cosX, 0,
            -1*sinY, cosY*sinX, cosY*cosX, 0,
            0,0,0,1 ] );
        mat4.transpose(rotMatrix);
        return (rotMatrix);
    }

代码（我已经取出了大部分样板gl照明内容）等等，只留下变换）来实际绘制场景是：

   function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 2000.0, pMatrix);

    mat4.identity(mvMatrix);

    for(var i=0; i<planets.length; i++){
        if (planets[i].type =="sun"){
            currentProgram = perVertexSunProgram;
        } else {
            currentProgram = perVertexNormalProgram;
        }
        alpha = planets[i].alphaFlag;

        mat4.identity(planets[i].rotMat);

        mvPushMatrix(); 
            //all the following puts planets in orbit around a central sun, but it's not really relevant to my current problem
            var rot = [0,rotCount*planets[i].orbitSpeed,0];

            var planetMat;
            planetMat = mat4.create(fullRotate(rot));

            mat4.multiply(planets[i].rotMat, planetMat);

            mat4.translate(planets[i].rotMat, planets[i].position);

            if (planets[i].type == "moon"){
                var rot = [0,rotCount*planets[i].moonOrbitSpeed,0];
                moonMat = mat4.create(fullRotate(rot));
                mat4.multiply(planets[i].rotMat, moonMat);
                mat4.translate(planets[i].rotMat, planets[i].moonPosition);
                mat4.multiply(planets[i].rotMat, mat4.inverse(moonMat));
            }

            mat4.multiply(planets[i].rotMat, mat4.inverse(planetMat));
            mat4.rotate(planets[i].rotMat, rotCount*planets[i].spinSpd, [0, 1, 0]);


                        //this bit does the work - multiplying the model view by the camera matrix, then by the matrix of the object we want to render
            mat4.multiply(mvMatrix, camMat);
            mat4.multiply(mvMatrix, planets[i].rotMat);



            gl.useProgram(currentProgram);

            setMatrixUniforms();
            gl.drawElements(gl.TRIANGLES, planets[i].VertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);     
        mvPopMatrix();
        }
    }

但是，大多数变换可以忽略，可以看到相同的效果，只需在世界坐标 0,0,0 处显示一个球体，

我认为我的两种方法 - 要么。一次旋转一个轴你去吧，或者一次性构建旋转矩阵避免了一个接一个地进行两次旋转的问题

PS - 我仍然在开始学习 WebGL 和 3d 数学，所以温柔地跟我说话，就像几个月前才听说过矩阵的人一样......另外，我知道四元数是 3d 旋转的一个很好的解决方案，这将是我的下一次尝试，但是，我认为我需要理解为什么这两种方法先不要工作...

Answer 1

为了澄清起见，请这样考虑万向节锁：您玩过《雷神之锤》/《虚幻》/《使命召唤》/任何第一人称射击游戏，对吗？您知道当您向前看并左右移动鼠标时，您的视图会以漂亮的宽弧线摆动，但是如果您向上或向下看并左右移动鼠标，您基本上只是围绕一个点紧密旋转？这就是万向节锁。几乎所有 FPS 游戏都会使用它，因为它恰好模仿了我们在现实生活中会做的事情，因此大多数人通常不认为这是一个问题。

然而，对于像太空飞行模拟这样的东西，或者（更常见的）骨骼动画，这种效果是不可取的，因此我们使用四元数之类的东西来帮助我们解决它。您是否关心相机的万向节锁定取决于您想要实现的效果。

然而，我认为你并没有经历过这种情况。听起来好像你的矩阵乘法顺序混乱了，结果你的视图以你意想不到的方式旋转。我会尝试按照您进行 X/Y/Z 旋转的顺序进行操作，看看您是否可以找到一个能够给您带来所需结果的顺序。

现在，我讨厌进行代码转储，但这可能对您有用，所以我们开始：这是我在大多数较新的 WebGL 项目中用于管理自由浮动相机的代码。万向节已锁定，但正如我之前提到的，在这种情况下这并不重要。基本上它只是为您提供 FPS 风格的控件，您可以使用它们在场景中飞行。

/**
 * A Flying Camera allows free motion around the scene using FPS style controls (WASD + mouselook)
 * This type of camera is good for displaying large scenes
 */
var FlyingCamera = Object.create(Object, {
    _angles: {
        value: null
    },

    angles: {
        get: function() {
            return this._angles;
        },
        set: function(value) {
            this._angles = value;
            this._dirty = true;
        }
    },

    _position: {
        value: null
    },

    position: {
        get: function() {
            return this._position;
        },
        set: function(value) {
            this._position = value;
            this._dirty = true;
        }
    },

    speed: {
        value: 100
    },

    _dirty: {
        value: true
    },

    _cameraMat: {
        value: null
    },

    _pressedKeys: {
        value: null
    },

    _viewMat: {
        value: null
    },

    viewMat: {
        get: function() {
            if(this._dirty) {
                var mv = this._viewMat;
                mat4.identity(mv);
                mat4.rotateX(mv, this.angles[0]-Math.PI/2.0);
                mat4.rotateZ(mv, this.angles[1]);
                mat4.rotateY(mv, this.angles[2]);
                mat4.translate(mv, [-this.position[0], -this.position[1], - this.position[2]]);
                this._dirty = false;
            }

            return this._viewMat;
        }
    },

    init: {
        value: function(canvas) {
            this.angles = vec3.create();
            this.position = vec3.create();
            this.pressedKeys = new Array(128);

            // Initialize the matricies
            this.projectionMat = mat4.create();
            this._viewMat = mat4.create();
            this._cameraMat = mat4.create();

            // Set up the appropriate event hooks
            var moving = false;
            var lastX, lastY;
            var self = this;

            window.addEventListener("keydown", function(event) {
                self.pressedKeys[event.keyCode] = true;
            }, false);

            window.addEventListener("keyup", function(event) {
                self.pressedKeys[event.keyCode] = false;
            }, false);

            canvas.addEventListener('mousedown', function(event) {
                if(event.which == 1) {
                    moving = true;
                }
                lastX = event.pageX;
                lastY = event.pageY;
            }, false);

            canvas.addEventListener('mousemove', function(event) {
                if (moving) {
                    var xDelta = event.pageX  - lastX;
                    var yDelta = event.pageY  - lastY;
                    lastX = event.pageX;
                    lastY = event.pageY;

                    self.angles[1] += xDelta*0.025;
                    while (self.angles[1] < 0)
                        self.angles[1] += Math.PI*2;
                    while (self.angles[1] >= Math.PI*2)
                        self.angles[1] -= Math.PI*2;

                    self.angles[0] += yDelta*0.025;
                    while (self.angles[0] < -Math.PI*0.5)
                        self.angles[0] = -Math.PI*0.5;
                    while (self.angles[0] > Math.PI*0.5)
                        self.angles[0] = Math.PI*0.5;

                    self._dirty = true;
                }
            }, false);

            canvas.addEventListener('mouseup', function(event) {
                moving = false;
            }, false);

            return this;
        }
    },

    update: {
        value: function(frameTime) {
            var dir = [0, 0, 0];

            var speed = (this.speed / 1000) * frameTime;

            // This is our first person movement code. It's not really pretty, but it works
            if(this.pressedKeys['W'.charCodeAt(0)]) {
                dir[1] += speed;
            }
            if(this.pressedKeys['S'.charCodeAt(0)]) {
                dir[1] -= speed;
            }
            if(this.pressedKeys['A'.charCodeAt(0)]) {
                dir[0] -= speed;
            }
            if(this.pressedKeys['D'.charCodeAt(0)]) {
                dir[0] += speed;
            }
            if(this.pressedKeys[32]) { // Space, moves up
                dir[2] += speed;
            }
            if(this.pressedKeys[17]) { // Ctrl, moves down
                dir[2] -= speed;
            }

            if(dir[0] != 0 || dir[1] != 0 || dir[2] != 0) {
                var cam = this._cameraMat;
                mat4.identity(cam);
                mat4.rotateX(cam, this.angles[0]);
                mat4.rotateZ(cam, this.angles[1]);
                mat4.inverse(cam);

                mat4.multiplyVec3(cam, dir);

                // Move the camera in the direction we are facing
                vec3.add(this.position, dir);

                this._dirty = true;
            }
        }
    }
});

该相机假设 Z 轴是您的“上”轴，这对您来说可能是也可能不是。它还使用 ECMAScript 5 样式对象，但这对于任何支持 WebGL 的浏览器来说都不是问题，并且它利用了我的 glMatrix 库，但看起来您已经在使用它了。基本用法非常简单：

// During your init code
var camera = Object.create(FlyingCamera).init(canvasElement);

// During your draw loop
camera.update(16); // 16ms per-frame == 60 FPS

// Bind a shader, etc, etc...
gl.uniformMatrix4fv(shaderUniformModelViewMat, false, camera.viewMat);

其他一切都在内部为您处理，包括键盘和鼠标控制。可能不完全符合您的需求，但希望您可以从那里收集到您需要的东西。 （注意：这与我的 Quake 3 演示 中使用的相机基本相同，因此您应该了解它是如何实现的有效。）

好吧，我在一篇文章中已经胡言乱语了！祝你好运！

Answer 2

无论您如何构建矩阵，使用欧拉角度旋转（就像您的两个代码片段所做的那样）总是会导致显示万向节锁问题的转换。

您可能想看看https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation 作为创建避免万向锁的转换的起点。

Answer 3

尝试我基于 glmatrix 2.0 的新项目（webGL2 Visual-js 游戏引擎的一部分）。

激活相机使用事件：App.camera.FirstPersonController = true;

实例

对于相机重要功能：

相机交互

App.operation.CameraPerspective = function() {
    this.GL.gl.viewport(0, 0, wd, ht);
    this.GL.gl.clear(this.GL.gl.COLOR_BUFFER_BIT | this.GL.gl.DEPTH_BUFFER_BIT);

   // mat4.identity( world.mvMatrix )
  //  mat4.translate(world.mvMatrix  , world.mvMatrix, [ 10 , 10 , 10] );


    /* Field of view, Width height ratio, min distance of viewpoint, max distance of viewpoint, */
    mat4.perspective(this.pMatrix, degToRad( App.camera.viewAngle ), (this.GL.gl.viewportWidth / this.GL.gl.viewportHeight), App.camera.nearViewpoint , App.camera.farViewpoint );
};

manifest.js ：

var App = {

    name : "webgl2 experimental",
    version : 0.3,
    events : true,
    logs : false ,
    draw_interval : 10 ,
    antialias : false ,
    camera : { viewAngle : 45 ,
               nearViewpoint : 0.1 ,
               farViewpoint : 1000 ,
               edgeMarginValue : 100 ,
               FirstPersonController : false },

    textures : [] , //readOnly in manifest
    tools : {}, //readOnly in manifest

从以下位置下载源：
visual-js GE 项目的 webGL 2 部分

旧：

开角1.1
https://stackoverflow.com/a/17261523/1513187

非常快的第一人称控制器，基于 glmatrix 0.9 http://learningwebgl.com/ 示例。