2D layering fixes (#2080)

* Fix images with same render order not layering transparently

* nicer draw order sample

* every draw order given out is individual again to avoid z fighting

* spelling

crates/re_log_types/src/component_types/tensor.rs

@@ -1359,7 +1359,7 @@ fn test_tensor_shape_utilities() {
         assert!(tensor.is_vector());
         assert!(tensor.is_shaped_like_an_image());
     }
-    // Color/Grey 2x4 images
+    // Color/Gray 2x4 images
     for shape in [
         vec![4, 2],
         vec![4, 2, 1],
@@ -1381,7 +1381,7 @@ fn test_tensor_shape_utilities() {
         assert!(tensor.is_shaped_like_an_image());
     }
 
-    // gray 1x4 images
+    // Gray 1x4 images
     for shape in [
         vec![4, 1],
         vec![4, 1, 1],
@@ -1396,7 +1396,7 @@ fn test_tensor_shape_utilities() {
         assert!(tensor.is_shaped_like_an_image());
     }
 
-    // gray 4x1 images
+    // Gray 4x1 images
     for shape in [
         vec![1, 4],
         vec![1, 4, 1],

crates/re_renderer/src/view_builder.rs

@@ -258,7 +258,9 @@ impl ViewBuilder {
     pub const MAIN_TARGET_DEFAULT_DEPTH_STATE: Option<wgpu::DepthStencilState> =
         Some(wgpu::DepthStencilState {
             format: Self::MAIN_TARGET_DEPTH_FORMAT,
-            depth_compare: wgpu::CompareFunction::Greater,
+            // It's important to set the depth test to GreaterEqual, not to Greater.
+            // This way, we ensure that objects that are drawn later with the exact same depth value, can overwrite earlier ones!
+            depth_compare: wgpu::CompareFunction::GreaterEqual,
             depth_write_enabled: true,
             stencil: wgpu::StencilState {
                 front: wgpu::StencilFaceState::IGNORE,

crates/re_viewer/src/ui/view_spatial/scene/mod.rs

@@ -10,6 +10,7 @@ use re_log_types::{
 };
 use re_renderer::{renderer::TexturedRect, Color32, OutlineMaskPreference, Size};
 use re_viewer_context::{auto_color, AnnotationMap, Annotations, SceneQuery, ViewerContext};
+use smallvec::smallvec;
 use smallvec::SmallVec;
 
 use crate::misc::{mesh_loader::LoadedMesh, SpaceViewHighlights, TransformCache};
@@ -41,6 +42,9 @@ pub struct Image {
 
     /// Textured rectangle for the renderer.
     pub textured_rect: TexturedRect,
+
+    /// Draw order value used.
+    pub draw_order: DrawOrder,
 }
 
 pub enum UiLabelTarget {
@@ -149,54 +153,64 @@ impl SceneSpatial {
         }
 
         // Push in default draw orders. All of them using the none hash.
-        entities_per_draw_order
-            .entry(DrawOrder::DEFAULT_BOX2D)
-            .or_default()
-            .push(DrawOrderTarget::DefaultBox2D);
-        entities_per_draw_order
-            .entry(DrawOrder::DEFAULT_IMAGE)
-            .or_default()
-            .push(DrawOrderTarget::DefaultImage);
-        entities_per_draw_order
-            .entry(DrawOrder::DEFAULT_LINES2D)
-            .or_default()
-            .push(DrawOrderTarget::DefaultLines2D);
-        entities_per_draw_order
-            .entry(DrawOrder::DEFAULT_POINTS2D)
-            .or_default()
-            .push(DrawOrderTarget::DefaultPoints);
+        entities_per_draw_order.insert(
+            DrawOrder::DEFAULT_BOX2D,
+            smallvec![DrawOrderTarget::DefaultBox2D],
+        );
+        entities_per_draw_order.insert(
+            DrawOrder::DEFAULT_IMAGE,
+            smallvec![DrawOrderTarget::DefaultImage],
+        );
+        entities_per_draw_order.insert(
+            DrawOrder::DEFAULT_LINES2D,
+            smallvec![DrawOrderTarget::DefaultLines2D],
+        );
+        entities_per_draw_order.insert(
+            DrawOrder::DEFAULT_POINTS2D,
+            smallvec![DrawOrderTarget::DefaultPoints],
+        );
 
         // Determine re_renderer draw order from this.
+        //
+        // We give objects with the same `DrawOrder` still a different depth offset
+        // in order to avoid z-fighting artifacts when rendering in 3D.
+        // (for pure 2D this isn't necessary)
+        //
         // We want to be as tightly around 0 as possible.
         let mut offsets = EntityDepthOffsets::default();
-        let mut draw_order = -((entities_per_draw_order.len() / 2) as re_renderer::DepthOffset);
+        let num_entities_with_draw_order: usize = entities_per_draw_order
+            .values()
+            .map(|entities| entities.len())
+            .sum();
+        let mut draw_order = -((num_entities_with_draw_order / 2) as re_renderer::DepthOffset);
         offsets.per_entity = entities_per_draw_order
             .into_values()
-            .flat_map(move |targets| {
-                let pairs = targets
+            .flat_map(|targets| {
+                targets
                     .into_iter()
-                    .filter_map(|target| match target {
-                        DrawOrderTarget::Entity(entity) => Some((entity, draw_order)),
-                        DrawOrderTarget::DefaultBox2D => {
-                            offsets.box2d = draw_order;
-                            None
-                        }
-                        DrawOrderTarget::DefaultLines2D => {
-                            offsets.lines2d = draw_order;
-                            None
-                        }
-                        DrawOrderTarget::DefaultImage => {
-                            offsets.image = draw_order;
-                            None
-                        }
-                        DrawOrderTarget::DefaultPoints => {
-                            offsets.points = draw_order;
-                            None
+                    .filter_map(|target| {
+                        draw_order += 1;
+                        match target {
+                            DrawOrderTarget::Entity(entity) => Some((entity, draw_order)),
+                            DrawOrderTarget::DefaultBox2D => {
+                                offsets.box2d = draw_order;
+                                None
+                            }
+                            DrawOrderTarget::DefaultLines2D => {
+                                offsets.lines2d = draw_order;
+                                None
+                            }
+                            DrawOrderTarget::DefaultImage => {
+                                offsets.image = draw_order;
+                                None
+                            }
+                            DrawOrderTarget::DefaultPoints => {
+                                offsets.points = draw_order;
+                                None
+                            }
                         }
                     })
-                    .collect::<SmallVec<[_; 4]>>();
-                draw_order += 1;
-                pairs
+                    .collect::<SmallVec<[_; 4]>>()
             })
             .collect();
 

crates/re_viewer/src/ui/view_spatial/scene/scene_part/images.rs

@@ -5,7 +5,7 @@ use itertools::Itertools;
 use re_data_store::{query_latest_single, EntityPath, EntityProperties};
 use re_log_types::{
     component_types::{ColorRGBA, InstanceKey, Tensor, TensorData, TensorDataMeaning},
-    Component, DecodedTensor, Transform,
+    Component, DecodedTensor, DrawOrder, Transform,
 };
 use re_query::{query_primary_with_history, EntityView, QueryError};
 use re_renderer::{
@@ -113,21 +113,21 @@ fn handle_image_layering(scene: &mut SceneSpatial) {
                     );
 
                     fn is_plane_similar(a: macaw::Plane3, b: macaw::Plane3) -> bool {
-                        a.normal.dot(b.normal) >= 0.99 && (a.d - b.d) >= 0.01
+                        a.normal.dot(b.normal) > 0.99 && (a.d - b.d).abs() < 0.01
                     }
-                    let has_same_depth_offset = rectangle_group.last().map_or(true, |last_image| {
-                        last_image.textured_rect.options.depth_offset
-                            == image.textured_rect.options.depth_offset
-                    });
-
-                    // Are the image planes too unsimilar? Then this is a new group.
-                    if !rectangle_group.is_empty()
-                        && (!is_plane_similar(prev_plane, cur_plane) || !has_same_depth_offset)
-                    {
+
+                    // Use draw order, not depth offset since depth offset might change when draw order does not.
+                    let has_same_draw_order = rectangle_group
+                        .last()
+                        .map_or(true, |last_image| last_image.draw_order == image.draw_order);
+
+                    // If the planes are similar, add them to the same group, otherwise start a new group.
+                    if has_same_draw_order && is_plane_similar(prev_plane, cur_plane) {
+                        rectangle_group.push(image);
+                    } else {
                         let previous_group = std::mem::replace(&mut rectangle_group, vec![image]);
                         return Some(previous_group);
                     }
-                    rectangle_group.push(image);
                 }
                 if !rectangle_group.is_empty() {
                     Some(rectangle_group.drain(..).collect())
@@ -150,8 +150,9 @@ fn handle_image_layering(scene: &mut SceneSpatial) {
             let opacity = if idx == 0 {
                 1.0
             } else {
+                // avoid precision problems in framebuffer
                 1.0 / total_num_images.at_most(20) as f32
-            }; // avoid precision problems in framebuffer
+            };
             image.textured_rect.options.multiplicative_tint = image
                 .textured_rect
                 .options
@@ -181,9 +182,10 @@ impl ImagesPart {
         crate::profile_function!();
 
         // Instance ids of tensors refer to entries inside the tensor.
-        for (tensor, color) in itertools::izip!(
+        for (tensor, color, draw_order) in itertools::izip!(
             entity_view.iter_primary()?,
-            entity_view.iter_component::<ColorRGBA>()?
+            entity_view.iter_component::<ColorRGBA>()?,
+            entity_view.iter_component::<DrawOrder>()?
         ) {
             crate::profile_scope!("loop_iter");
             let Some(tensor) = tensor else { continue; };
@@ -251,6 +253,7 @@ impl ImagesPart {
                     ent_path: ent_path.clone(),
                     tensor,
                     textured_rect,
+                    draw_order: draw_order.unwrap_or(DrawOrder::DEFAULT_IMAGE),
                 });
             }
         }
@@ -401,13 +404,18 @@ impl ScenePart for ImagesPart {
                 continue;
             };
 
-            match query_primary_with_history::<Tensor, 3>(
+            match query_primary_with_history::<Tensor, 4>(
                 &ctx.log_db.entity_db.data_store,
                 &query.timeline,
                 &query.latest_at,
                 &props.visible_history,
                 ent_path,
-                [Tensor::name(), InstanceKey::name(), ColorRGBA::name()],
+                [
+                    Tensor::name(),
+                    InstanceKey::name(),
+                    ColorRGBA::name(),
+                    DrawOrder::name(),
+                ],
             )
             .and_then(|entities| {
                 for entity in entities {

examples/rust/api_demo/src/main.rs

@@ -17,6 +17,7 @@ use std::{
     f32::consts::{PI, TAU},
 };
 
+use itertools::Itertools;
 use rerun::{
     components::{
         AnnotationContext, AnnotationInfo, Box3D, ClassDescription, ClassId, ColorRGBA, DrawOrder,
@@ -284,23 +285,48 @@ fn demo_rects(rec_stream: &RecordingStream) -> anyhow::Result<()> {
     Ok(())
 }
 
+fn colored_tensor<F: Fn(usize, usize) -> [u8; 3]>(
+    width: usize,
+    height: usize,
+    pos_to_color: F,
+) -> ndarray::Array3<u8> {
+    let pos_to_color = &pos_to_color; // lambda borrow workaround.
+    ndarray::Array3::from_shape_vec(
+        (height, width, 3),
+        (0..height)
+            .flat_map(|y| (0..width).flat_map(move |x| pos_to_color(x, y)))
+            .collect_vec(),
+    )
+    .unwrap()
+}
+
 fn demo_2d_layering(rec_stream: &RecordingStream) -> anyhow::Result<()> {
     use ndarray::prelude::*;
 
-    // Add several overlapping images
-    let img = Array::<u8, _>::from_elem((512, 512, 3).f(), 64);
+    // Add several overlapping images.
+    // Large dark gray in the background
+    let img = Array::<u8, _>::from_elem((512, 512, 1).f(), 64);
     MsgSender::new("2d_layering/background")
         .with_timepoint(sim_time(1.0))
         .with_component(&[Tensor::try_from(img.as_standard_layout().view())?])?
         .with_component(&[DrawOrder(0.0)])?
         .send(rec_stream)?;
-    let img = Array::<u8, _>::from_elem((256, 256, 3).f(), 128);
-    MsgSender::new("2d_layering/middle")
+    // Smaller gradient in the middle
+    let img = colored_tensor(256, 256, |x, y| [x as u8, y as u8, 0]);
+    MsgSender::new("2d_layering/middle_red")
+        .with_timepoint(sim_time(1.0))
+        .with_component(&[Tensor::try_from(img.as_standard_layout().view())?])?
+        .with_component(&[DrawOrder(1.0)])?
+        .send(rec_stream)?;
+    // Slightly smaller red in the middle, on the same layer as the previous.
+    let img = colored_tensor(192, 192, |_, _| [0, 0, 255]);
+    MsgSender::new("2d_layering/middle_blue")
         .with_timepoint(sim_time(1.0))
         .with_component(&[Tensor::try_from(img.as_standard_layout().view())?])?
         .with_component(&[DrawOrder(1.0)])?
         .send(rec_stream)?;
-    let img = Array::<u8, _>::from_elem((128, 128, 3).f(), 255);
+    // Small white on top.
+    let img = Array::<u8, _>::from_elem((128, 128, 1).f(), 255);
     MsgSender::new("2d_layering/top")
         .with_timepoint(sim_time(1.0))
         .with_component(&[Tensor::try_from(img.as_standard_layout().view())?])?