Can I control the draw order or depth of Multiple InstancedMeshes on a per instance basis?

[Saetch]

Hello,
I'm trying to create a simple 2D app that is supposed to show a lot of ants crawling around. For that I have basically 3 different textures that I would like to cycle through. This works well for the most part. I went with InstancedMeshes here and the performance is great, even when running in the browser, I can show 20k different ones at the same time with no performance hit which is awesome!
But I also noticed that they flicker when they are rendered on top of each other. This looks similiar to Z-fighting. I've tried to set a unique z-value for each entity, basically moving each of them to a unique distance to the camera, which is what worked when I had a unique Gm for each of them (tho then the performance tanks with a higher number of entities). But when I use InstancedMeshes this does not work. Now my guess is that it is because I use one InstancedMesh for each texture and they get rendered one after the other (basically, I have 3 different InstancedMeshes, one for each frame of the animation). Here is a video to show what I mean, I slowed the animation way down so it is easy to see:

Antler.Ubuntu-22.04.2025-01-16.00-34-39.1.mp4

I recreate the assigned Instances each frame based on the animation state of the entities and assign these to the individual InstancedMeshes that each represent a texture. I don't care which one is in front or the back to be honest, I just want the resulting flickering to be gone.
Well, for that I would like to know if there is a way to control which Instances are in front or back on a per instance basis or if there is a way to organize this all into a singular InstancedMesh and have the texture that is used be set on a per instance basis or if maybe my approach is real bad and there is a better way to do this altogether :)

Thanks in advance.

[asny]

I know what you mean, but doesn't look like z-fighting to me, more like a random render order. Do you have a depth buffer and DepthTest enabled? Are your ants material transparent?

[Saetch]

Hi! Thanks for the reply. I at least try to use that.
Yes, my ants are transparent. I load .pngs for that (thanks again for that reply on the previous discussion) :)
I create my window like this:

let window = Window::new(WindowSettings {
        title: "Antler".to_string(), 
        surface_settings: SurfaceSettings{
            depth_buffer: 24,
            ..Default::default()
        },
        ..Default::default()
    })
    .unwrap();

And I load my textures like this:

        let img: CpuTexture = three_d_asset::io::load_async(&[path])
        .await?
        .deserialize("")?;
        let cpu_material = CpuMaterial {
            albedo: Srgba::WHITE,
            albedo_texture: Some(img.clone()),
            ..Default::default()
        };
        let mut material = ColorMaterial::new_transparent(&context, &cpu_material);
        material.render_states.depth_test = DepthTest::LessOrEqual;

However I might be missing something here. These are the only occurences of depth in my code so far. My render_loop looks pretty basic still. I don't have anything specific to depth in it.
I just render with:

        let it = instanced_meshes.into_iter().map(|s| s as &dyn Object);
        frame_input
            .screen()
            .clear(ClearState::color_and_depth(0.8, 0.8, 0.8, 1.0, 1.0))
            .render(
                &camera,
                sprite_organizer.playfield.into_iter()/**<--just the rectangular background */.chain(it),
                &[&ambient],
            );

[asny]

Ok, I'm not sure what the problem is, might just be a bug in the way you assign a depth value to each instance. I would test different setups and see if the problem persist:

• Make sure the depth of each instance is unique and keeps the same depth value when moved from one instanced mesh to another
• Render with an opaque material
• Render with one instanced mesh by combining the textures into one texture and use the texture transform to swap between them