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

 

其余方向与此类似，不再浪费篇幅。

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