Ghoscher's Blog

Introduction:

In the following three or four articles I’m gonna discuss XNA picking related issues including:
1- Ray picking.
2- RTS style selection box (two approaches).
3- Projection and why you need it.

I’m not an XNA professional so I might make some mistakes, please if you think any thing is wrong tell me and I’ll be happy to respond 😀

What is picking?

Well.. in short, picking is something you’ll need if you want to know what 3D object the mouse cursor is over! in other words picking lets you “pick” a 3D object with your mouse, if you have ever played a 3D RTS (real time startegy) game like C&C Generals, selecting a unit with you mouse is called picking!

In a 2D game knowing what’s the mouse is over – in most cases – is simple, just check if the mouse is inside a rectangle or a circle for example, in a 3D world it’s a little trickier!.

In a previous post I visualized how picking 3D objects works in XNA. (no need to check the old post, every thing you want is here…)
Today I’m gonna explain how the operation works, the official picking sample is great, and much of my explanation is taken from there…
Picking will be explained step by step in addition to some other picking issues…

1-Ray Picking:

A ray goes from a specified point towards a specified direction ( it doesn’t have an ending point).
XNA provides a Ray struct with some good intersection detection methods, you can check ray intersection against bounding volumes (BoundingBox, BoundingSphere, BoundingFrustum) and Planes.
The main idea of picking is to create a ray that goes from a point in the near plane of the camera frustum towards another point in the far plane of the camera frustum, these two points are specified using the mouse screen coordinates (mouse x and y), once we have that ray we can check for intersections with 3D objects using there bounding spheres for example..

Click on image to see full size

Whenever you draw a 3D object to your 2D screen it has to be projected using the matrices  world, view and projection, multiplying the 3D position of a vertex with these three matrices produces the 2D position of the vertex in the viewport. this operation is called projection, transforming from world coordinates to screen coordinates.

When picking we want to do the opposite : transform from screen coordinates (mouse position on the screen) to world coordinates, This operation is called Unprojection.

XNA struct Viewport provides methods for both projecting & unprojecting points, for now we want the unprojection method which is:

public Vector3 Unproject(Vector3 source, Matrix projection, Matrix view, Matrix world);

the first parameter is a Vector3, but the mouse position (2D vector) only has x,y what’s that? remember that we need a Ray that goes from a point in the near plane towards another point in the far plane? so we need to unproject two points.
The two points will be

Vector3 nearPoint = new Vector3( mousePosition.x, mousePosition.y , 0);
Vector3 farPoint = new Vector3( mousePosition.x, mousePosition.y , 1);

for the near point we specified zero as the z component of the point which means this point is as close as possible to the camera, while one for the second point means it’s as far as possible from the camera… These two points still need to be unprojected so we use the Unproject method mentioned above.
The other three parameters of the method Unproject are the same matrices used for projection when drawing the scene, which we can get from the camera we used for drawing, world can be just Matrix.Identity, so to unproject the 2D points:

Viewport viewport = GraphicsDevice.Viewport;
nearPoint = viewport.Unproject(nearPoint, camera.Projection, camera.View, Matrix.Identity);
farPoint = viewport.Unproject(farPoint, camera.Projection, camera.View, Matrix.Identity);

The two points nearPoint & farPoint are now in world space ( They are 3D points now :D).
If you know simple vector math you should know that to get a vector from point A to point B , you subtract point B from point A, so we create a direction vector and normalize it:

Vector3 direction = farPoint - nearPoint;
direction.Normalize();

and the ray we need is

//Ray(Vector3 position, Vector3 direction);
Ray ray = new Ray( nearPoint, direction);

You can now use this ray for picking! just make sure you transform your mesh’s bounding sphere before checking for intersection ( The function RayIntersectsModel in the official sample does that for you 😉 ) , note that the method Ray.Intesects returns a float? which means a nullable float… if there’s no intersection the function will return null, otherwise it returns the distance from the ray position to the intersection point.

So to wrap our ray function:

public static Ray GetMouseRay(Vector2 mousePosition, Viewport viewport, Camera camera)
{
    Vector3 nearPoint = new Vector3(mousePosition, 0);
    Vector3 farPoint = new Vector3(mousePosition, 1);

    nearPoint = viewport.Unproject(nearPoint, camera.Projection, camera.View, Matrix.Identity);
    farPoint = viewport.Unproject(farPoint, camera.Projection, camera.View, Matrix.Identity);

    Vector3 direction = farPoint - nearPoint;
    direction.Normalize();

    return new Ray(nearPoint, direction);
}

Notes on the code above:
1- viewport is the viewport the objects you’re picking are rendered in, by defualt you’ll be rendering only in one viewport which is GraphicsDevice.Viewport
2- camera class contains the view,projection matrices.
3- In my humble opinion 🙂 , it’s good to embed the GetMouseRay method in the Camera class since unprojection is camera related, this way you only have to call

Ray ray = camera.GetMouseRay(mousePosition,viewport);

Okay! just to make sure I got it right I wrote a small XNA4 app that visualizes the camera frustum and the mouse ray 😀 ( I updated it from XNA3.1 from a previous article ).

Click on an image to view full size

In the right view port you’ll see the main scene, nothing special, some models rendered using BasicEffect.
The left view port is the interesting one! 🙂 the whole scene is rendered again, viewed from a different angle (another camera) and the main camera (used in the right view port) is rendered here ( just like in 3DS Max) , you can see the mouse ray in red and the projected scene ( the right viewport ) in the near plane.
– Instructions are written inside the app –

You can download the source code (VS2010 Solution) and\or the exe here:

Ray Picking Sample XNA4.0 Bin (37kB)

Ray Picking Sample XNA4.0 Source (54kB)

As I mentioned before, this project was updated from an older one, but currently I’m writing an XNA camera library that contains several camera types, and I intent to add the VisualCamera as a utility class called CameraVisualizer, I’ll release the camera package as soon as it’s done..

Well… this is the end of part one, part two will demonstrate picking multiple objects using a selection rectangle, just like the ones used in 3D RTS games, Thanks for reading 🙂