How does needDepthPrePass work? Is it possible to pass my own render order values for instances?

Questions
1

I have a problem with ordering objects (regular instances) using my simple ShaderMaterial that renders transparent textures on objects. My front objects looks like invisible when it should be visible.
Problem solves when I turn on needDepthPrePass. I don’t know if it is a bad practice or a good one. Seems it renders all the objects twice so it’s not good for performance.

I can easily set up render order values manually as my project easily allows it to do. My project is 2D project with top-down view, without camera rotation, so my objects (they are all regular instances) is ordered “by design”, by Y axis. But… Is it possible to pass those render order values manually and don’t use needDepthPrePass? As I don’t think that I need this option in my case :smiley:

=> UPD
I’ve just learnt about renderingGroupId and the fact the instances are rendered in just one draw call. They cannot have different renderGroupId. Is it correct?
I have about 100 instances from 5 original meshes.
So I can’t just pass rendering order manually to my instances?

2

I believe this is a good practice. Actually, any render is bad for performance…

3

But it looks I have no other choice than using depthPrePass here, right?

4

You can use the Mesh.alphaIndex property to order transparent objects: the objects will be rendered in ascending order of alphaIndex.

1 Like
6

Looks like that what I need! Is there a something to set to start this feature to work?
I tried to use it here: https://playground.babylonjs.com/#LE94FO#5
I expected to see sphere1 behind sphere0. In that way I would know that ordering is now work.
Am I doing something wrong? Or when it comes to parenting it works in some other way?

7

alphaIndex only works for meshes that have a transparent material. I think this doc page should help you:

https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering/

8

Ok, got it, thanks!
Is there a way to use my own comparator for rendering order when it comes to instances?
I mean solution like this:

sphere0.subMeshes[0].sortkey = 1;
sphere1.subMeshes[0].sortkey = 0;
const sortfunc = (a,b) => a.sortkey < b.sortkey ? -1 : a.sortkey > b.sortkey ? 1 : 0;
scene.setRenderingOrder(0, sortfunc, sortfunc, sortfunc);

Here I implemented it: https://playground.babylonjs.com/#LE94FO#6
but looks it doesn’t work too :smiley:

9

It seems more complicated and less performant than simple needDepthPrePass.

1 Like
10

Even if I have my objects already ordered by my some own index? I easily could set the order number for every object as all my objects (instances) align along Y axis (2D, top-down view camera).
Depth is the distance to a camera + sorting, maybe it’s more complex calculation that just sorting by some ready-to-go index.

11

Make the most top meshes either opaque or with higher rendering group so they will be always visible. For other use needDepthPrePass. The performance gain which you probably may get from more complicated solutions is negligible for (5-top) meshes.
Also, you may try to use Standard material with alphaIndex, probably it will work better than Shader material.

1 Like
12

Mesh sorting does not work for instanced meshes, because they are treated differently from other meshes (you can see that your PG is working if you replace createInstance with clone).

You can set the Mesh.INSTANCEDMESH_SORT_TRANSPARENT flag to true if you want to sort transparent instanced meshes, but you don’t have a choice of metric; they will be sorted by distance from the camera.

2 Likes