【OpenGL(SharpGL)】支持任意相機可平移縮放的軌跡球實現

【OpenGL(SharpGL)】支持任意相機可平移縮放的軌跡球

（本文PDF版在這里。）

在3D程序中，軌跡球（ArcBall）可以讓你只用鼠標來控制模型（旋轉），便於觀察。在這里（http://www.yakergong.net/nehe/ ）有nehe的軌跡球教程。

本文提供一個本人編寫的軌跡球類（ArcBall.cs），它可以直接應用到任何camera下，還可以同時實現縮放和平移。工程源代碼在文末。

2016-07-08

再次更新了軌跡球代碼，重命名為ArcBallManipulater。

    /// <summary>
    /// Rotate model using arc-ball method.
    /// </summary>
    public class ArcBallManipulater : Manipulater, IMouseHandler
    {

        private ICamera camera;
        private GLCanvas canvas;

        private MouseEventHandler mouseDownEvent;
        private MouseEventHandler mouseMoveEvent;
        private MouseEventHandler mouseUpEvent;
        private MouseEventHandler mouseWheelEvent;

        private vec3 _vectorRight;
        private vec3 _vectorUp;
        private vec3 _vectorBack;
        private float _length, _radiusRadius;
        private CameraState cameraState = new CameraState();
        private mat4 totalRotation = mat4.identity();
        private vec3 _startPosition, _endPosition, _normalVector = new vec3(0, 1, 0);
        private int _width;
        private int _height;
        private bool mouseDownFlag;

        public float MouseSensitivity { get; set; }

        public MouseButtons BindingMouseButtons { get; set; }
        private MouseButtons lastBindingMouseButtons;

        /// <summary>
        /// Rotate model using arc-ball method.
        /// </summary>
        /// <param name="bindingMouseButtons"></param>
        public ArcBallManipulater(MouseButtons bindingMouseButtons = MouseButtons.Left)
        {
            this.MouseSensitivity = 0.1f;
            this.BindingMouseButtons = bindingMouseButtons;

            this.mouseDownEvent = new MouseEventHandler(((IMouseHandler)this).canvas_MouseDown);
            this.mouseMoveEvent = new MouseEventHandler(((IMouseHandler)this).canvas_MouseMove);
            this.mouseUpEvent = new MouseEventHandler(((IMouseHandler)this).canvas_MouseUp);
            this.mouseWheelEvent = new MouseEventHandler(((IMouseHandler)this).canvas_MouseWheel);
        }

        private void SetCamera(vec3 position, vec3 target, vec3 up)
        {
            _vectorBack = (position - target).normalize();
            _vectorRight = up.cross(_vectorBack).normalize();
            _vectorUp = _vectorBack.cross(_vectorRight).normalize();

            this.cameraState.position = position;
            this.cameraState.target = target;
            this.cameraState.up = up;
        }

        class CameraState
        {
            public vec3 position;
            public vec3 target;
            public vec3 up;

            public bool IsSameState(ICamera camera)
            {
                if (camera.Position != this.position) { return false; }
                if (camera.Target != this.target) { return false; }
                if (camera.UpVector != this.up) { return false; }

                return true;
            }
        }

        public mat4 GetRotationMatrix()
        {
            return totalRotation;
        }

        public override void Bind(ICamera camera, GLCanvas canvas)
        {
            if (camera == null || canvas == null) { throw new ArgumentNullException(); }

            this.camera = camera;
            this.canvas = canvas;

            canvas.MouseDown += this.mouseDownEvent;
            canvas.MouseMove += this.mouseMoveEvent;
            canvas.MouseUp += this.mouseUpEvent;
            canvas.MouseWheel += this.mouseWheelEvent;

            SetCamera(camera.Position, camera.Target, camera.UpVector);
        }

        public override void Unbind()
        {
            if (this.canvas != null && (!this.canvas.IsDisposed))
            {
                this.canvas.MouseDown -= this.mouseDownEvent;
                this.canvas.MouseMove -= this.mouseMoveEvent;
                this.canvas.MouseUp -= this.mouseUpEvent;
                this.canvas.MouseWheel -= this.mouseWheelEvent;
                this.canvas = null;
                this.camera = null;
            }
        }

        void IMouseHandler.canvas_MouseWheel(object sender, MouseEventArgs e)
        {
        }

        void IMouseHandler.canvas_MouseDown(object sender, MouseEventArgs e)
        {
            this.lastBindingMouseButtons = this.BindingMouseButtons;
            if ((e.Button & this.lastBindingMouseButtons) != MouseButtons.None)
            {
                var control = sender as Control;
                this.SetBounds(control.Width, control.Height);

                if (!cameraState.IsSameState(this.camera))
                {
                    SetCamera(this.camera.Position, this.camera.Target, this.camera.UpVector);
                }

                this._startPosition = GetArcBallPosition(e.X, e.Y);

                mouseDownFlag = true;
            }
        }

        private void SetBounds(int width, int height)
        {
            this._width = width; this._height = height;
            _length = width > height ? width : height;
            var rx = (width / 2) / _length;
            var ry = (height / 2) / _length;
            _radiusRadius = (float)(rx * rx + ry * ry);
        }

        void IMouseHandler.canvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (mouseDownFlag && ((e.Button & this.lastBindingMouseButtons) != MouseButtons.None))
            {
                if (!cameraState.IsSameState(this.camera))
                {
                    SetCamera(this.camera.Position, this.camera.Target, this.camera.UpVector);
                }

                this._endPosition = GetArcBallPosition(e.X, e.Y);
                var cosAngle = _startPosition.dot(_endPosition) / (_startPosition.length() * _endPosition.length());
                if (cosAngle > 1.0f) { cosAngle = 1.0f; }
                else if (cosAngle < -1) { cosAngle = -1.0f; }
                var angle = MouseSensitivity * (float)(Math.Acos(cosAngle) / Math.PI * 180);
                _normalVector = _startPosition.cross(_endPosition).normalize();
                if (!
                    ((_normalVector.x == 0 && _normalVector.y == 0 && _normalVector.z == 0)
                    || float.IsNaN(_normalVector.x) || float.IsNaN(_normalVector.y) || float.IsNaN(_normalVector.z)))
                {
                    _startPosition = _endPosition;

                    mat4 newRotation = glm.rotate(angle, _normalVector);
                    this.totalRotation = newRotation * totalRotation;
                }
            }
        }

        private vec3 GetArcBallPosition(int x, int y)
        {
            float rx = (x - _width / 2) / _length;
            float ry = (_height / 2 - y) / _length;
            float zz = _radiusRadius - rx * rx - ry * ry;
            float rz = (zz > 0 ? (float)Math.Sqrt(zz) : 0.0f);
            var result = new vec3(
                rx * _vectorRight.x + ry * _vectorUp.x + rz * _vectorBack.x,
                rx * _vectorRight.y + ry * _vectorUp.y + rz * _vectorBack.y,
                rx * _vectorRight.z + ry * _vectorUp.z + rz * _vectorBack.z
                );
            //var position = new vec3(rx, ry, rz);
            //var matrix = new mat3(_vectorRight, _vectorUp, _vectorBack);
            //result = matrix * position;

            return result;
        }

        void IMouseHandler.canvas_MouseUp(object sender, MouseEventArgs e)
        {
            if ((e.Button & this.lastBindingMouseButtons) != MouseButtons.None)
            {
                mouseDownFlag = false;
            }
        }

    }

注意，在GetArcBallPosition(int x, int y);中，獲取位置實際上是一個坐標變換的過程，所以可以用矩陣*向量實現。詳見被注釋掉的代碼。

        private vec3 GetArcBallPosition(int x, int y)
        {
            float rx = (x - _width / 2) / _length;
            float ry = (_height / 2 - y) / _length;
            float zz = _radiusRadius - rx * rx - ry * ry;
            float rz = (zz > 0 ? (float)Math.Sqrt(zz) : 0.0f);
            var result = new vec3(
                rx * _vectorRight.x + ry * _vectorUp.x + rz * _vectorBack.x,
                rx * _vectorRight.y + ry * _vectorUp.y + rz * _vectorBack.y,
                rx * _vectorRight.z + ry * _vectorUp.z + rz * _vectorBack.z
                );
            // Get position using matrix * vector.
            //var position = new vec3(rx, ry, rz);
            //var matrix = new mat3(_vectorRight, _vectorUp, _vectorBack);
            //result = matrix * position;

            return result;
        }

 

2016-02-10

我已在CSharpGL中集成了最新的軌跡球代碼。軌跡球只負責旋轉。

using GLM;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CSharpGL.Objects.Cameras
{
    /// <summary>
    /// 用鼠標旋轉模型。
    /// </summary>
    public class ArcBallRotator
    {
        vec3 _vectorCenterEye;
        vec3 _vectorUp;
        vec3 _vectorRight;
        float _length, _radiusRadius;
        CameraState cameraState = new CameraState();
        mat4 totalRotation = mat4.identity();
        vec3 _startPosition, _endPosition, _normalVector = new vec3(0, 1, 0);
        int _width;
        int _height;

        float mouseSensitivity = 0.1f;

        public float MouseSensitivity
        {
            get { return mouseSensitivity; }
            set { mouseSensitivity = value; }
        }

        /// <summary>
        /// 標識鼠標是否按下
        /// </summary>
        public bool MouseDownFlag { get; private set; }

        /// <summary>
        /// 
        /// </summary>
        public ICamera Camera { get; set; }


        const string listenerName = "ArcBallRotator";

        /// <summary>
        /// 用鼠標旋轉模型。
        /// </summary>
        /// <param name="camera">當前場景所用的攝像機。</param>
        public ArcBallRotator(ICamera camera)
        {
            this.Camera = camera;

            SetCamera(camera.Position, camera.Target, camera.UpVector);
#if DEBUG
            const string filename = "ArcBallRotator.log";
            if (File.Exists(filename)) { File.Delete(filename); }
            Debug.Listeners.Add(new TextWriterTraceListener(filename, listenerName));
            Debug.WriteLine(DateTime.Now, listenerName);
            Debug.Flush();
#endif
        }

        private void SetCamera(vec3 position, vec3 target, vec3 up)
        {
            _vectorCenterEye = position - target;
            _vectorCenterEye.Normalize();
            _vectorUp = up;
            _vectorRight = _vectorUp.cross(_vectorCenterEye);
            _vectorRight.Normalize();
            _vectorUp = _vectorCenterEye.cross(_vectorRight);
            _vectorUp.Normalize();

            this.cameraState.position = position;
            this.cameraState.target = target;
            this.cameraState.up = up;
        }

        class CameraState
        {
            public vec3 position;
            public vec3 target;
            public vec3 up;

            public bool IsSameState(ICamera camera)
            {
                if (camera.Position != this.position) { return false; }
                if (camera.Target != this.target) { return false; }
                if (camera.UpVector != this.up) { return false; }

                return true;
            }
        }

        public void SetBounds(int width, int height)
        {
            this._width = width; this._height = height;
            _length = width > height ? width : height;
            var rx = (width / 2) / _length;
            var ry = (height / 2) / _length;
            _radiusRadius = (float)(rx * rx + ry * ry);
        }

        /// <summary>
        /// 必須先調用<see cref="SetBounds"/>()方法。
        /// </summary>
        /// <param name="x"></param>
        /// <param name="y"></param>
        public void MouseDown(int x, int y)
        {
            Debug.WriteLine("");
            Debug.WriteLine("=================>MouseDown:", listenerName);
            if (!cameraState.IsSameState(this.Camera))
            {
                SetCamera(this.Camera.Position, this.Camera.Target, this.Camera.UpVector);
                Debug.WriteLine(string.Format(
                    "update camera state: {0}, {1}, {2}",
                    this.cameraState.position, this.cameraState.target, this.cameraState.up), listenerName);
            }

            this._startPosition = GetArcBallPosition(x, y);
            Debug.WriteLine(string.Format("Start position: {0}", this._startPosition), listenerName);

            MouseDownFlag = true;

            Debug.WriteLine("-------------------MouseDown end.", listenerName);
        }

        private vec3 GetArcBallPosition(int x, int y)
        {
            var rx = (x - _width / 2) / _length;
            var ry = (_height / 2 - y) / _length;
            var zz = _radiusRadius - rx * rx - ry * ry;
            var rz = (zz > 0 ? Math.Sqrt(zz) : 0);
            var result = new vec3(
                (float)(rx * _vectorRight.x + ry * _vectorUp.x + rz * _vectorCenterEye.x),
                (float)(rx * _vectorRight.y + ry * _vectorUp.y + rz * _vectorCenterEye.y),
                (float)(rx * _vectorRight.z + ry * _vectorUp.z + rz * _vectorCenterEye.z)
                );
            return result;
        }


        public void MouseMove(int x, int y)
        {
            if (MouseDownFlag)
            {
                Debug.WriteLine("    =================>MouseMove:", listenerName);
                if (!cameraState.IsSameState(this.Camera))
                {
                    SetCamera(this.Camera.Position, this.Camera.Target, this.Camera.UpVector);
                    Debug.WriteLine(string.Format(
                        "    update camera state: {0}, {1}, {2}",
                        this.cameraState.position, this.cameraState.target, this.cameraState.up), listenerName);
                }

                this._endPosition = GetArcBallPosition(x, y);
                Debug.WriteLine(string.Format(
                    "    End position: {0}", this._endPosition), listenerName);
                var cosAngle = _startPosition.dot(_endPosition) / (_startPosition.Magnitude() * _endPosition.Magnitude());
                if (cosAngle > 1) { cosAngle = 1; }
                else if (cosAngle < -1) { cosAngle = -1; }
                Debug.Write(string.Format("    cos angle: {0}", cosAngle), listenerName);
                var angle = mouseSensitivity * (float)(Math.Acos(cosAngle) / Math.PI * 180);
                Debug.WriteLine(string.Format(
                    ", angle: {0}", angle), listenerName);
                _normalVector = _startPosition.cross(_endPosition);
                _normalVector.Normalize();
                if ((_normalVector.x == 0 && _normalVector.y == 0 && _normalVector.z == 0)
                    || float.IsNaN(_normalVector.x) || float.IsNaN(_normalVector.y) || float.IsNaN(_normalVector.z))
                {
                    Debug.WriteLine("    no movement recorded.", listenerName);
                }
                else
                {
                    Debug.WriteLine(string.Format(
                        "    normal vector: {0}", _normalVector), listenerName);
                    _startPosition = _endPosition;

                    mat4 newRotation = glm.rotate(angle, _normalVector);
                    Debug.WriteLine(string.Format(
                        "    new rotation matrix:   {0}", newRotation), listenerName);
                    this.totalRotation = newRotation * totalRotation;
                    Debug.WriteLine(string.Format(
                        "    total rotation matrix: {0}", totalRotation), listenerName);
                }
                Debug.WriteLine("    -------------------MouseMove end.", listenerName);
            }
        }

        public void MouseUp(int x, int y)
        {
            Debug.WriteLine("=================>MouseUp:", listenerName);
            MouseDownFlag = false;
            Debug.WriteLine("-------------------MouseUp end.", listenerName);
            Debug.WriteLine("");
            Debug.Flush();
        }

        public mat4 GetRotationMatrix()
        {
            return totalRotation;
        }
    }
}

 

1. 軌跡球原理

上面是我黑來的兩張圖，拿來說明軌跡球的原理。

看左邊這個，網格代表繪制3D模型的窗口，上面放了個半球，這個球就是軌跡球。假設鼠標在網格上的某點A，過A點作網格所在平面的垂線，與半球相交於點P，P就是A在軌跡球上的投影。鼠標從A1點沿直線移動到A2點，對應着軌跡球上的點P1沿球面移動到了P2。那么，從球心O到P1和P2分別有兩個向量OP1和OP2。OP1旋轉到了OP2，我們就認為是模型也按照這個方式作同樣的旋轉。這就是軌跡球的旋轉思路。

右邊這個圖沒用上…

2. 軌跡球實現

實現軌跡球，首先要求出鼠標點A1、A2投影到軌跡球上的點P1、P2的坐標，然后計算兩個向量A1P1和A2P2之間的夾角以及旋轉軸，最后讓模型按照求出的夾角和旋轉軸，調用glRotate就可以了。

1) 計算投影點

在攝像機上應用軌跡球，才能實現適應任意位置攝像機的ArcBall類。

如圖所示，紅綠藍三色箭頭的交點是攝像機eye的位置，紅色箭頭指向center的位置，綠色箭頭指向up的位置，藍色箭頭指向右側。

說明：1.Up是可能在藍色Right箭頭的垂面內的任意方向的，這里我們要把它調整為與紅色視線垂直的Up，即上圖所示的Up。2.綠色和藍色箭頭組成的平面即為程序窗口所在位置，因為Eye就在這里嘛。而且Up指的就是屏幕正上方，Right指的就是屏幕正右方。3.顯然軌跡球的半球在圖中矩形所在的這一側，球心就是Eye。

鼠標在Up和Right所在的平面移動，當它位於A點時，投影到軌跡球的點P。現在已知的是Eye、Center、原始Up、A點在屏幕上的坐標、向量Eye-P的長度、向量AP的長度。現在要求P點的坐標，只不過是一個數學問題了。

當然，開始的時候要設置相機位置。

        public void SetCamera(float eyex, float eyey, float eyez,
            float centerx, float centery, float centerz,
            float upx, float upy, float upz)
        {
            _vectorCenterEye = new Vertex(eyex - centerx, eyey - centery, eyez - centerz);
            _vectorCenterEye.Normalize();
            _vectorUp = new Vertex(upx, upy, upz);
            _vectorRight = _vectorUp.VectorProduct(_vectorCenterEye);
            _vectorRight.Normalize();
            _vectorUp = _vectorCenterEye.VectorProduct(_vectorRight);
            _vectorUp.Normalize();
        }

  

根據鼠標在屏幕上的位置投影點的計算方法如下。

        private Vertex GetArcBallPosition(int x, int y)
        {
            var rx = (x - _width / 2) / _length;
            var ry = (_height / 2 - y) / _length;
            var zz = _radiusRadius - rx * rx - ry * ry;
            var rz = (zz > 0 ? Math.Sqrt(zz) : 0);
            var result = new Vertex(
                (float)(rx * _vectorRight.X + ry * _vectorUp.X + rz * _vectorCenterEye.X),
                (float)(rx * _vectorRight.Y + ry * _vectorUp.Y + rz * _vectorCenterEye.Y),
                (float)(rx * _vectorRight.Z + ry * _vectorUp.Z + rz * _vectorCenterEye.Z)
                );
            return result;
        }

 這里主要應用了向量的思想，向量(Eye-P) = 向量(Eye-A) + 向量(A-P)。而向量(Eye-A)和向量(A-P)都是可以通過單位長度的Up、Center-Eye和Right向量求得的。

2) 計算夾角和旋轉軸

首先，設置鼠標按下事件

        public void MouseDown(int x, int y)
        {
            this._startPosition = GetArcBallPosition(x, y);

            mouseDownFlag = true;
        }

 

然后，設置鼠標移動事件。此時P1P2兩個點都有了，旋轉軸和夾角就都可以計算了。

        public void MouseMove(int x, int y)
        {
            if (mouseDownFlag)
            {
                this._endPosition = GetArcBallPosition(x, y);
                var cosAngle = _startPosition.ScalarProduct(_endPosition) / (_startPosition.Magnitude() * _endPosition.Magnitude());
                if (cosAngle > 1) { cosAngle = 1; }
                else if (cosAngle < -1) { cosAngle = -1; }
                var angle = 10 * (float)(Math.Acos(cosAngle) / Math.PI * 180);
                System.Threading.Interlocked.Exchange(ref _angle, angle);
                _normalVector = _startPosition.VectorProduct(_endPosition);
                _startPosition = _endPosition;
            }
        }

  

然后，設置鼠標彈起的事件。

        public void MouseUp(int x, int y)
        {
            mouseDownFlag = false;
        }

 

在使用opengl（sharpgl）繪制的時候，調用

        public void TransformMatrix(OpenGL gl)
        {
            gl.PushMatrix();
            gl.LoadIdentity();
            gl.Rotate(2 * _angle, _normalVector.X, _normalVector.Y, _normalVector.Z);
            System.Threading.Interlocked.Exchange(ref _angle, 0);
            gl.MultMatrix(_lastTransform);
            gl.GetDouble(Enumerations.GetTarget.ModelviewMatix, _lastTransform);
            gl.PopMatrix();
            gl.Translate(_translateX, _translateY, _translateZ);
            gl.MultMatrix(_lastTransform);
            gl.Scale(Scale, Scale, Scale);
        }

 

3. 額外功能實現

縮放很容易實現，直接設置Scale屬性即可。

沿着屏幕上下左右前后地移動，則需要參照着camera的方向動了。

        public void GoUp(float interval)
        {
            this._translateX += this._vectorUp.X * interval;
            this._translateY += this._vectorUp.Y * interval;
            this._translateZ += this._vectorUp.Z * interval;
        }

 

其余方向與此類似，不再浪費篇幅。

工程源代碼在此。（http://files.cnblogs.com/bitzhuwei/Arcball6662014-02-07_20-07-00.rar）