how to layer text with other elements

[lemleyautomation]

Hello,

I am working on a wgpu application and I am using glyphon for the text of the user interface. I would like to be able to have popup windows in the UI. but the way I have thing set up, all of my UI elements are rendered with one call to "renderpass.draw" with a custom shader, and then I call glyphon's text renderer.

so basically all of my text is showing up on one layer at the top. I can't seem to hide the text that is under a popup window. I tried using the "with depth" but it did not really seem to have any effect.

Is there a good way to do this?

[grovesNL]

You can do this with depth testing by writing depths for your UI elements, then using matching depths for your text. When this is set up correctly, your text should be drawn in the correct layer. You can debug depth values with Renderdoc as a way to check this.

When drawing text, you have to use metadata to pass the depth or some way to lookup the depth for it. metadata is just a usize so this could be the depth itself, or an index into a Vec somewhere, etc. During prepare_with_depth, you lookup the depth for the metadata and this will be used for depth testing. e.g., converting the metadata back to depth directly might look something like this

let metadata_to_depth = |metadata| {
    // Convert the metadata back to depth.
    f32::from_bits(metadata as u32)
};
renderer.prepare_with_depth(device, queue, font_system, atlas, viewport, text, cache, metadata_to_depth);

If this sounds too complicated, you can also create separate renders for each layer of your UI and call them in order. e.g., render the lowest UI elements, render the text for those elements, render the next layer of UI elements, render the text for those elements, and so on.

[lemleyautomation]

I'd do multiple renders if I have to, but I'd like to avoid it if possible. Maybe I am missing something, but I set a static depth to 0.1:

self.text_renderer.prepare_with_depth(
            device,
            queue,
            &mut self.font_system,
            &mut self.atlas,
            &mut self.viewport,
            areas.into_iter(),
            &mut self.swash_cache,
            |_| { 
                0.1
            }
).unwrap();

and my shader for my UI elements sets all the same value, right now, 0.2:

@vertex
fn vs_main(vertex: Vertex) -> VertexPayload {
    var out: VertexPayload;
    out.position = vec4<f32>(
        (vertex.position.x/(vertex.size.x/2.0))-1,
        -((vertex.position.y/(vertex.size.y/2.0))-1),
        0.2, 
        1.0
    );
    out.color = vertex.color;
    return out;
}

I have also tried this with the numbers switched, but the only thing that seems to matter is whether or not I call text_renderer.render or my render function last. It really seems like the call to render_pass.draw is what is determining the draw order, regardless of depth

[grovesNL]

Yeah that's the right starting point. You'll also need to enable the specific depth testing comparison that you want. If it's not clear how to do this from wgpu examples, I could try to put together an example sometime.

[lemleyautomation]

Thanks so much! It's working now. for my case, some things to note were:

• I needed to call render_pass.draw() on my ui elements first, then on the text renderer.
• the depth_compare function on my ui elements worked best when set to "always"
• the depth_compare function on the text renderer seemed to work best when set to "Less"