CSharpGL(20)用unProject和Project实现鼠标拖拽图元

CSharpGL(20)用unProject和Project实现鼠标拖拽图元

效果图

例如，你可以把Big Dipper这个模型拽成下面这个样子。

配合旋转，还可以继续拖拽成这样。

当然，能拖拽的不只是线段。还可以拖拽三角形（如下图）、四边形。

另外，还可以单点拖拽。

2016-04-28

现在实现了高亮显示拾取、拖拽的图元的功能。

下面演示了鼠标移动到图元上时显示图元的索引值的功能。

 起初会出现stitching和z-fighting的现象。例如下面选中一个三角形时，由于stitching问题，没高亮其斜边。

于是我添加了PolygonOffsetSwtich开关，解决了这个问题。

下载

CSharpGL已在GitHub开源，欢迎对OpenGL有兴趣的同学加入（https://github.com/bitzhuwei/CSharpGL）

unProject/Project

这个两个函数的执行结果完全相反。拖拽功能全靠他们了。

Project把模型坐标系上的点转换为窗口坐标系上的点。这可以通过其实现代码来验证。

        /// <summary>
        /// Map the specified object coordinates (obj.x, obj.y, obj.z) into window coordinates.
        /// </summary>
        /// <param name="obj">The object.</param>
        /// <param name="model">The model.</param>
        /// <param name="proj">The proj.</param>
        /// <param name="viewport">The viewport.</param>
        /// <returns></returns>
        public static vec3 project(vec3 obj, mat4 model, mat4 proj, vec4 viewport)
        {
            vec4 tmp = new vec4(obj, (1f));
            tmp = model * tmp;
            tmp = proj * tmp;

            tmp /= tmp.w;
            tmp = tmp * 0.5f + new vec4(0.5f, 0.5f, 0.5f, 0.5f);
            tmp[0] = tmp[0] * viewport[2] + viewport[0];
            tmp[1] = tmp[1] * viewport[3] + viewport[1];

            return new vec3(tmp.x, tmp.y, tmp.z);
        }

通过试验发现，一个vec3经过Project后再经过unProject，会变回原来的值。这就是说，unProject把窗口坐标系上的点转换为模型坐标系上的点。

OpenGL是以窗口左下角为原点(0, 0)的。而Windows窗口是以左上角为原点的。所以用的时候要注意转换一下。

弄清楚了这两个函数，才能实现鼠标拖拽的功能。

拖拽原理

既然可以把模型空间的点转换为平面坐标系上的点，并且可以逆向操作。那么只需将要拖拽的点A通过project函数投影到屏幕上（变成a）；根据鼠标在屏幕上的移动，相应的移动a，变成a'，最后把a'通过unProject反射回模型空间，就是拖拽后的A'了。在VBO里，把A改为A'即可。

        /// <summary>
        /// 根据<paramref name="differenceOnScreen"/>来修改指定索引处的顶点位置。
        /// </summary>
        /// <param name="differenceOnScreen"></param>
        /// <param name="viewMatrix"></param>
        /// <param name="projectionMatrix"></param>
        /// <param name="viewport"></param>
        /// <param name="positionIndexes"></param>
        public void MovePositions(Point differenceOnScreen,
            mat4 viewMatrix, mat4 projectionMatrix, vec4 viewport, uint[] positionIndexes)
        {
            if (positionIndexes == null) { return; }
            if (positionIndexes.Length == 0) { return; }

            GL.BindBuffer(BufferTarget.ArrayBuffer, this.positionBufferPtr.BufferId);
            IntPtr pointer = GL.MapBuffer(BufferTarget.ArrayBuffer, MapBufferAccess.ReadWrite);
            unsafe
            {
                var array = (vec3*)pointer.ToPointer();
                for (int i = 0; i < positionIndexes.Length; i++)
                {
                    vec3 projected = glm.project(array[positionIndexes[i]],
                        viewMatrix, projectionMatrix, viewport);
                    vec3 newProjected = new vec3(projected.x + differenceOnScreen.X,
                        projected.y + differenceOnScreen.Y, projected.z);
                    array[positionIndexes[i]]=glm.unProject(newProjected,
                        viewMatrix, projectionMatrix, viewport);
                }
            }
            GL.UnmapBuffer(BufferTarget.ArrayBuffer);
            GL.BindBuffer(BufferTarget.ArrayBuffer, 0);
        }

MouseDown

鼠标按下时，如果拾取到图元，就要为拖拽做准备。（如果想了解拾取的原理，可参考CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)）

        private void glCanvas1_MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                // move vertex
                PickedGeometry pickedGeometry = RunPicking(e.X, e.Y);
                if (pickedGeometry != null)
                {
                    var dragParam = new DragParam(pickedGeometry,
                        camera.GetProjectionMat4(),
                        camera.GetViewMat4(),
                        new Point(e.X, glCanvas1.Height - e.Y - 1));
                    this.dragParam = dragParam;
                }
            }
        }

其中的RunPicking就是执行一次拾取操作。

        private PickedGeometry RunPicking(int x, int y)
        {
            this.glCanvas1_OpenGLDraw(selectedModel, null);
            IColorCodedPicking pickable = this.rendererDict[this.SelectedModel];
            pickable.MVP = this.camera.GetProjectionMat4() * this.camera.GetViewMat4();
            PickedGeometry pickedGeometry = ColorCodedPicking.Pick(
                this.camera, x, y, this.glCanvas1.Width, this.glCanvas1.Height, pickable);

            return pickedGeometry;
        }

这里有个dragParam类型，记录了按下后的一些数据。

    class DragParam
    {

        public PickedGeometry pickedGeometry;
        public mat4 projectionMatrix;
        public mat4 viewMatrix;
        public Point lastMousePositionOnScreen;
        public vec4 viewport;

        public DragParam(PickedGeometry pickedGeometry, mat4 projectionMatrix, mat4 viewMatrix, Point lastMousePositionOnScreen)
        {
            this.pickedGeometry = pickedGeometry;
            this.projectionMatrix = projectionMatrix;
            this.viewMatrix = viewMatrix;
            this.lastMousePositionOnScreen = lastMousePositionOnScreen;
            var viewport = new int[4]; GL.GetInteger(GetTarget.Viewport, viewport);
            this.viewport = new vec4(viewport[0], viewport[1], viewport[2], viewport[3]);
        }
    }

MouseMove

鼠标开始移动后，就要实时更新模型顶点的位置了。

        private void glCanvas1_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                // move vertex
                DragParam dragParam = this.dragParam;
                if (dragParam != null)
                {
                    var current = new Point(e.X, glCanvas1.Height - e.Y - 1);
                    Point differenceOnScreen = new Point(
                        current.X - dragParam.lastMousePositionOnScreen.X,
                        current.Y - dragParam.lastMousePositionOnScreen.Y);
                    dragParam.lastMousePositionOnScreen = current;
                    this.rendererDict[this.selectedModel].MovePositions(
                        differenceOnScreen,
                        dragParam.viewMatrix, dragParam.projectionMatrix,
                        dragParam.viewport,
                        dragParam.pickedGeometry.Indexes);
                }
            }
        }

MouseUp

鼠标抬起，清空数据，恢复状态。

        private void glCanvas1_MouseUp(object sender, MouseEventArgs e)
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                // move vertex
                this.dragParam = null;
            }
        }

总结

本文虽然简单，但是我却花了好几天才解决拖拽的问题。过程中想过试过种种奇葩的方案。最后，在弄明白了project和unProject的功能后，立即想到了现在这个方案，既简单又实用。

所以说必须戒除浮躁和急切的心理，慢慢地搞清楚每一个小问题。这才是磨刀不误砍柴工。

原CSharpGL的其他功能（UI、3ds解析器、TTF2Bmp、CSSL等），我将逐步加入新CSharpGL。

欢迎对OpenGL有兴趣的同学关注（https://github.com/bitzhuwei/CSharpGL）