GPU Picking with mouse coordinate

Hello,

I am trying to recreate this example in BabylonJS on a flat plane: Three.js Indexed Textures for Picking and Color

But before getting to the end goal, I was wondering if this first step is possible. I was wondering if it is possible to get a pixel value of a texture based on a UV coordinate of another texture. Basically, say you have a quad with whatever texture on it. Then, when you hover over the quad with a mouse, get the UV coordinate of the mouse position that intersects with the texture. Then, get the value of a pixel from a different quad with a different texture on it using that UV coordinate. Is this possible or is there a better way?

I’m a beginner to WebGL and BabylonJS. I apologize if my explanation is confusing. Please let me know and I will try to be more clear.

Thank you for your help.

The pick function will provide you with the uv coordinates which you can use to map information from the texture itself. for example:

https://playground.babylonjs.com/#NU4F6Y#230 - notice line 23.
You can also do it with mapping on the mesh itself (using pickResult.pickedPoint)

You can read about it here:

https://doc.babylonjs.com/babylon101/picking_collisions

Is that what you were looking for?

3 Likes

Thank you! BabylonJs is amazing!

1 Like

The picking works for a single mesh really well, but is it possible to pick multiple meshes? I have a few quads that are overlapping and it seems to return just one.

You can use scene.multiPick in that case:
https://doc.babylonjs.com/api/classes/babylon.scene#multipick