picking

i know this subject has been talked to death, but, i just wanted to make sure my technique is correct.

i have a large 3d object, when a user clicks it, the point on the texture they click should be replaced with a red dot.

to achieve this, i’m going to:

  • render the 3d object in a buffer with a texture, where each pixel is a unique colour.
  • on click use readpixels to get the pixel colour
  • ???
  • update the original text with a red dot.

need a little help with the ‘???’ bit… i know the unique colour that was clicked, now i presume, I’d need to loop through the unique colour texture and find the x and y position of this colour…however, this would be slow if i had a ‘big’ texture, say, 512x512

is there a better way?

Not sure what exactly you’re trying to do, since it would only work with textures you’d made specially for that purpose. Precise picking is normally done with a plane check per triangle, which involves a bit of math. The most desirable return value is UV mapping coordinates for the texture. Then you can do whatever you want with it.

On user click of a particular object, I want to find the position of that click within the texture,

After that, I’ll then update that texture with a red dot at that position.

I only need help with finding the position of that click.

Did it 2 years ago by modifying O3D’s picking library, it will be very tedious if you want to implement picking by your own. Can’t really remember all the details.

I think googling “Ray triangle intersection in Opengl” is a good start - which does not use any colours and textures at all. The downside is that this may not be the fastest algorithm, since it will traverse all the polygons to find out whether it had intersected with the ray. But the good side is that this returns you the precise 3D location.

However, it only take less than a second to traverse 65,000 polygon mesh in my app.

Have a bit of finding on the internet, check this out:
http://www.dyn-lab.com/articles/pick-selection.html

Another tutorial I would recommend is:
http://www.3dkingdoms.com/selection.html#ray

Although is a tutorial in OpenGL, but similar concept can be applied to WebGL I guess.

if you think you can identify your objects using 4 [0-1] floats, you can just send a uniform with the x.y position of your mouse cursor to the FSH.
Then in the FSH, when the screen coordinate are the same as the mouse cursor, instead of drawing the colour (from texture or whatever), draw the 4 floats that identifies the object being drawn.

When drawing is finished, read the pixel under the mouse cursor and you’ll have your 4xfloats object’s identifier.

EDIT:
You could also store (TextureCoord) TC.x, TC.y, FaceIdx, Identifier where every value are floats [0-1]