Hello,
I’m currently trying to render a mesh in front of an image which I’m currently loading in using Babylon.GUI.Image. I have set the mesh’s renderingGroupId to 1 but it still doesn’t show up in front of the image and the image is always drawn over it. How do I go about rendering the mesh in front of this image? Any other ideas besides GUI.Image are also welcome.
Playground example:
Say you’d want to render the sphere in front of the image.
Heya, if you pass false for the 2nd param to CreateFullscreenUI() then it will be in the background behind the meshes, like this. 
Posting again since my reply got messed up:
Thank you for this. In my local copy, there are more meshes in the background and I only want to render some of them in front of the image. Say I want to render the sphere in front and let the plane stay behind in the above playground, how will I go about it?
The actual scenario in my game is a journal which I can open mid game with a model that I need to rotate placed in a section of the journal. Hence I need a way to render the journal behind that model but ahead of the other meshes in the background.
Hmm, one way is to use a second camera for the journal and the mesh(s) in front of it, leveraging layer masks. For example here the ground is behind the journal GUI and the sphere is in front.
Hi @bleakGorilla ,
Parts of the answer have already been given to you by others. I have faced similar issue in my project and soaked-up some learning from the big brains 
here in this forum.
So, let me share this part with you.
First, you did attempt to set a renderingGroupId to your mesh but obviously, it didn’t work.
The answer is, the BJS 2D GUI (advancedTexture) always renders on top (at least by default).
You have a couple (or more) solutions as a go-around.
One (may be the easiest one) is to bring in a second advancedTexture with a higher layerMask in your scene. You would assign this one to the mesh you want to display on top.
Next, @Blake also gave you an indication of how to handle the problem. By bringing in a second camera in the scene (basically a duplicate of the first cam) and assigning it to use the same layerMask as the mesh(es) you want to show on top (or behind) the GUI and/or other meshes, you can sort the order of how the meshes/meshes groups and the GUI are showing.
So, in short, the features you want to have a look at is multiple cameras and layerMasks. Alternatively to the multiple cams approach, you can also make your GUI in a separate scene. There is some quite comprehensive information in the doc (GUI section and advanced section).
Hope this helps and meanwhile, have a great WE,
Edit: Rather than this long explanation, quickly did set-up a simple PG for you. It’s very rushy, but after all it’s sunday here
One remark: To keep this simple, I have put just basic numbers of 0 to 2 for the layerMasks. However, note that ‘layerMask’ works with hexadecimal. If you fancy it, you can be much more precise in the sorting.
I have pushed new instructions to the left. Again, apologies for this rushy PG. Still, hope this helps you towards understanding the multiple camera and layerMask approach. Again, there are also other ways.
Edit2: LoL, just realized the PG made by @Blake. Well, at least now, you can see some variants of this technique. I should really start reading the text before posting 
Thank you so much everyone! Using multiple cameras and layer masks did the trick for me! Have a great weekend