I am interested in 'picking' (i.e. selecting) objects in my canvas by clicking on it.
- I am not interested in picking by color (as that doesn't allow me to know which object has been clicked)
- I am not interested in using gl.RenderMode(GL_SELECT). Anyway, my understanding is that this is obsolete and may not even be supported in WebGL.
Updated
I have an idea. Please let me know if this idea is flawed. I have a 3d world and a camera object - meaning i have a camera position, lookat veector, and up vector.
My idea is this:
"Fire" a vector/ray through the 3d world (this vector is basically the camera's lookat vector). Then i just iterate through all of my 3d objects and check if it intersects with this ray/vector and return the object which is the closest distance to the camera. My collision detection, for the time being, would be a simple bounding sphere. I can get more sophisticated later by using a more complex/accurate collision detection.
The only gap I see is this:
I do not know how to create the ray/vector based off of the mouse coordinate. I can get the (X, Y) of the mouse click on the canvas element. But not sure how to translate this to be the starting point of the ray/vector in world coordinate.
Any thoughts on this approach? Any ideas regarding the gap concern that i have?