Skip to content

Commit

Permalink
Improve hovered order in 2D views (#8405)
Browse files Browse the repository at this point in the history
### What
Order the hovered items more logically, starting with the closest
(topmost) and going down to the deepest, like image layers in Photoshop.

#### Before

![image](https://github.com/user-attachments/assets/91893939-e4e2-4275-930a-39d584d4f8fc)

#### After
<img width="471" alt="Screenshot 2024-12-11 at 10 22 48"
src="https://github.com/user-attachments/assets/87edf308-dad7-482d-9f0b-6973ecfbf8e5">
  • Loading branch information
emilk authored Dec 12, 2024
1 parent 115d0b2 commit 22be22d
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 15 deletions.
43 changes: 28 additions & 15 deletions crates/viewer/re_view_spatial/src/picking.rs
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ pub struct PickingRayHit {

#[derive(Clone, PartialEq)]
pub struct PickingResult {
/// Picking ray hits. NOT sorted by distance but rather by source of picking.
/// Picking ray hits.
///
/// The hits are sorted front-to-back, i.e. closest hits are first.
///
/// Typically there is only one hit, but there might be several if there are transparent objects
/// or "aggressive" objects like 2D images which we always want to pick, even if they're in the background.
Expand Down Expand Up @@ -132,29 +134,31 @@ impl PickingContext {
self,
previous_picking_result,
);
let mut rect_hits = picking_textured_rects(self, images);
rect_hits.sort_by(|a, b| b.depth_offset.cmp(&a.depth_offset));
let ui_rect_hits = picking_ui_rects(self, ui_rects);

let mut image_hits = picking_textured_rects(self, images);
image_hits.sort_by(|a, b| b.depth_offset.cmp(&a.depth_offset));

let ui_hits = picking_ui_rects(self, ui_rects);

let mut hits = Vec::new();

// Start with gpu based picking as baseline. This is our prime source of picking information.
//
// ..unless the same object got also picked as part of a textured rect.
// Textured rect picks also know where on the rect, making this the better source!
// Note that whenever this happens, it means that the same object path has a textured rect and something else
// e.g. a camera.
if let Some(gpu_pick) = gpu_pick {
if rect_hits.iter().all(|rect_hit| {
rect_hit.instance_path_hash.entity_path_hash
!= gpu_pick.instance_path_hash.entity_path_hash
}) {
// ..unless the same object got also picked as part of a textured rect.
// Textured rect picks also know where on the rect they hit, making this the better source!
// Note that whenever this happens, it means that the same object path has a textured rect and something else
// e.g. a camera.
let has_image_hit_on_gpu_pick = image_hits.iter().any(|image_hit| {
image_hit.instance_path_hash.entity_path_hash
== gpu_pick.instance_path_hash.entity_path_hash
});
if !has_image_hit_on_gpu_pick {
hits.push(gpu_pick);
}
}

// We never throw away any textured rects, even if they're behind other objects.
hits.extend(rect_hits);
hits.extend(image_hits);

// UI rects are overlaid on top, but we don't let them hide other picking results either.
// Give any other previous hits precedence.
Expand All @@ -163,11 +167,20 @@ impl PickingContext {
.map(|prev_hit| prev_hit.instance_path_hash)
.collect();
hits.extend(
ui_rect_hits
ui_hits
.into_iter()
.filter(|ui_hit| !previously_hit_objects.contains(&ui_hit.instance_path_hash)),
);

// Re-order so that the closest hits are first:
hits.sort_by_key(|hit| match hit.hit_type {
PickingHitType::GuiOverlay => 0, // GUI is closest, so always goes on top

PickingHitType::GpuPickingResult => 1,

PickingHitType::TexturedRect => 2, // Images are usually behind other things (e.g. an image is behind a bounding rectangle in a 2D view), so we put these last (furthest last)
});

PickingResult { hits }
}
}
Expand Down
1 change: 1 addition & 0 deletions crates/viewer/re_view_spatial/src/picking_ui.rs
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ pub fn picking(
// TODO(#1818): Depth at pointer only works for depth images so far.
let mut depth_at_pointer = None;

// We iterate front-to-back, putting foreground hits on top, like layers in Photoshop:
for (hit_idx, hit) in picking_result.hits.iter().enumerate() {
let Some(mut instance_path) = hit.instance_path_hash.resolve(ctx.recording()) else {
// Entity no longer exists in db.
Expand Down

0 comments on commit 22be22d

Please sign in to comment.