How to always render in front without changing renderingGroupId?

Questions
1

Hey ya’ll,

Having some difficulty rendering objects in front, tried lots of ways with material depthFunction and groupRenderingId (which doesn’t scale), would be good to have advice on something that works. Thanks!

Here is an example:
I have a sphere, the axes, and the connecting lines. I’m trying to make the axes render in front of everything, but can’t get it to work oddly. I tried setting the renderingGroupId between 2 and 3, changed the material to depthFunction = Engine.ALWAYS, etc, but still kinda stuck here
image
(as you can see, the red axis is blocked by the connecting line)

2

It is exaggerating to say : would be good to have something that works.

groupRenderingId work. And it’s made for what you want to do. You seem to say that nothing is working? I have rarely seen such a well maintained engine. Be a little more grateful.

3

I think you’re overthinking the tone of the question and coming at it like your feelings got hurt, and that’s too bad since it’s just a question

What if for example you have 100 objects, and you want to render the first object always in front, and the second object behind, and the rest follow etc? groupRenderingId seems to be valid from 2-4, but it doesn’t scale

I saw some things with setRenderOrder(groupRenderId) and depthFunction and that was interesting, but I couldn’t get it to work somehow

4

Perhaps, a utilityLayer can be used

5

Please go do on, I’m intrigued…
Like using a different utilityLayer for the custom meshes?

6

A utility layer is used for things like gizmos. I do not know if there are gonna either be side-effects or issues of performance if there are lots, or what happens when there are more than 1. Do you create them in reverse order? All I know they change the order.

1 Like
7

I’m having a similar issue with depth masks. I had to write a function to insert the mask meshes before any other meshes like this

function insertMaskAtFront(maskMesh, scene, targetIndex = 0) {
    targetMesh = scene.meshes[targetIndex];
    if (targetMesh.parent == maskRootNode) {
        insertMaskAtFront(maskMesh, scene, targetIndex + 1)
    }
    else {
       var mask_index = scene.meshes.indexOf(maskMesh)
       scene.meshes[mask_index] = scene.meshes[targetIndex]
       scene.meshes[targetIndex] = maskMesh 
    }
}

But this approach won’t scale for me as I need to be able to adjust the z position of the masks, which means I would then have to reorder them in the scenes list. I also tried setRenderOrder, but it did not give me the results I expected.

8

On a whim I reversed the order returned by my custom ordering function and it worked.

//Render any meshes that are children of the maskRootNode first.
    scene.setRenderingOrder(0, (a, b) => {
        return (a.getMesh().parent === maskRootNode ? -1 :
               (b.getMesh().parent === maskRootNode ? 1 :
               0));
    })

So in your case, you have some test for the mesh you want to render first and make sure it has a lower value returned by the function than a mesh you want to render after it. This test could be based on a parent, as I did, which has the nice benefit of grouping theses meshes in the inspector. Alternatively, this is JS, so you can attach any property (e.g. isAxis = true) you want to a mesh and then use it in your custom order function. Hope that helps.

2 Likes
9

Thanks Eric!
I tried that (even tried switching around -1 : 1) though it didn’t work for my case sadly

The utilityLayer idea is starting to sound pretty neat : )

1 Like
10

Hello @mrlooi just checking in, are you still having issues?

11

I didn’t quite find a solution to this yet with the utility layers : /

12

All right, are you able to share a playground with your scene and what you have tried so far? Would be extremely helpful for us to help you further :smiley: