Bring reticule (crosshair) in front of GUI

Heya,

I’m working on a game with a team, but I have an issue where the crosshair is behind the GUI.
See image:
image

This is pretty annoying as it also means that the onPointerMoveObservable will not fire, but weirdly the onPointerDownObservable will.

I somehow can’t perfectly reproduce my case in a playground because the crosshair won’t show.
Here it is anyway. It has a GUI button and the crosshair which won’t show:
https://playground.babylonjs.com/#JU1DZP#2

The camera we use is normally an FPS camera like [the freecamera].(Babylon.js/freeCamera.ts at master · BabylonJS/Babylon.js · GitHub)

1 Like

You can’t see the crosshair in the PG because you parented it to the camera, so you need to set a z value greater than the camera.minZ property (which is 1 by default):

https://playground.babylonjs.com/#JU1DZP#3

As this crosshair is a 3D plane, it is drawn before the GUI, so appears below it. I think you will need another camera to draw the crosshair after the GUI or a utility layer to achieve what you want to do.

3 Likes

Thank you!
I added a utililyLayer and it did the job wonderfully! (by the way you shared the wrong playground, you meant ..#3 :stuck_out_tongue: )
Here is the new playground for those looking for an answer. I added a pointerLock

https://playground.babylonjs.com/#JU1DZP#4

Fixed!