Raycast UI raw image that has a render texture

Hello, I have a Screen Space - Overlay canvas with a Raw Image UI object that has a render texture. That render texture image comes from a top camera that is pointing to a box grid. What I want to do is to click on a box to change it's color. How can I do it? I leave you here a screenshot of the canvas in game.

Thanks!

 

I've done this before. I don't have the code handy but the gist is:

• Use RecttransformUtility and the mouse position to figure out the normalized (0-1) coordinates of the mouse within the Raw image's Recttransform.
• Use Camera.ViewportPointToRay with those coordinates to do a normal be raycast against your grid.

 

Why you can't simply add a button component to each box?

 

If I add a button component, Will I be able to interact with it through the render texture?

 

I will try to code what you said. Thanks!

 

I found a solution. I post it here:

Code (CSharp):

1. public class RenderTextureToWorld : MonoBehaviour, IPointerClickHandler
2. {
3.  
4.     public Camera gridCamera; //Camera that renders to the texture
5.     private RectTransform textureRectTransform; //RawImage RectTransform that shows the RenderTexture on the UI
6.  
7.     private void Awake()
8.     {
9.         textureRectTransform = GetComponent<RectTransform>(); //Get the RectTransform
10.     }
11.  
12.     public void OnPointerClick(PointerEventData eventData)
13.     {
14.         //I get the point of the RawImage where I click
15.         RectTransformUtility.ScreenPointToLocalPointInRectangle(textureRectTransform, eventData.position, null, out Vector2 localClick);
16.         //My RawImage is 700x700 and the click coordinates are in range (-350,350) so I transform it to (0,700) to then normalize
17.         localClick.x = (textureRectTransform.rect.xMin * -1) - (localClick.x * -1);
18.         localClick.y = (textureRectTransform.rect.yMin * -1) - (localClick.y * -1);
19.  
20.         //I normalize the click coordinates so I get the viewport point to cast a Ray
21.         Vector2 viewportClick = new Vector2(localClick.x / textureRectTransform.rect.size.x, localClick.y / textureRectTransform.rect.size.y);
22.  
23.         //I have a special layer for the objects I want to detect with my ray
24.         LayerMask layer = LayerMask.GetMask("Region");
25.  
26.         //I cast the ray from the camera which rends the texture
27.         Ray ray = gridCamera.ViewportPointToRay(new Vector3(viewportClick.x, viewportClick.y, 0));
28.  
29.         if (Physics.Raycast(ray, out RaycastHit hit, Mathf.Infinity, layer))
30.         {
31.  
32.             Debug.Log(hit.collider.gameObject.name);
33.         }
34.     }
35. }

I found part of the solution here: https://answers.unity.com/questions/1426388/get-mouse-click-world-coordinates-through-ui-raw-i.html but I had to do some changes to make it work on my project.

Thanks you all for the help!

 

If you mean this, so yes



To future reference only:

Code (CSharp):

1. public class UIBox : MonoBehaviour
2. {
3.     public Color colorToChange = Color.blue;
4.  
5.     public void Start()
6.     {
7.         // You can make this by inspector too, but from here you can add methods with any kind of parameter
8.         GetComponent<Button>().onClick.AddListener(() => ChangeColor(colorToChange));
9.     }
10.  
11.     private void ChangeColor (Color color)
12.         => GetComponent<RawImage>().color = color;
13. }

 

That's a really good solution too. Thank you!