World grid part 1/2: add world grid renderer to `re_renderer` #8230

Wumpf · 2024-11-27T10:54:10Z

What

Implements a "world grid" to be used later in the spatial views of the viewer.
Haven't tested yet how suitable this is for 2D views, might need some adjustments.

Video

Youtube unfortunately compresses this a lot and Github doesn't let me upload any significant amount of video
(click me)

Screenshots

Analytical anti-aliasing (shown is what is supposed to be a 1ui unit == 2pixel wide line):

Distance has only the cardinal lines (== every tenth line). Those fade eventually as well:

Fading is based on "how many lines coincide here" which makes fading view dependent rather than distance dependent:

(this makes this hopefully robust for many usecases)

Grid intersects non-transparent geometry (transparent geometry will be ignored in the future. previous surveying showed that this is common and not a biggy)

Grid fades at acute viewing angles (because empirically and unsurprisingly it looks weird if we don't!)

Tested image quality to be satisfying on high dpi (ui unit == 2 pixels) and low dpi (ui unit == pixel).

How does it work

Draw a large shader generated plane (mostly because setting up vertex buffers is just more hassle 😄 )
- depth test enabled
- depth write disabled
- premultiplied alpha blend
- make sure we draw this after the background (reminder: we first draw solid, then background)
Fragment shader looks at 2d coordinate on the plane and decides how "liney" it is
- using screen space derivatives (ddx/ddy) we figure out how far to go on the plane to achieve a certain line thickness
- fades:
  - fade if the line density gets too high
  - fade if view angle is too acute relative
- ... lot's of details documented in the shader code!

I considered just drawing a screen space triangle, but drawing a plane that moves with the camera has lots of advantages:

don't have to manipulate depth
- faster since early z just works
- less thinking required!
don't cover things above the horizon - even if only the grid is visible, less pixels will be shaded

Known shortcomings

various hardcoded values around how fading works. Tricky to formalize this better, but likely good enough
- Doesn't look equally good at all pixel widths, but decent for the range we care
every tenth line is a "cardinal line", that's nice but it stops there - "infinite" amount of cardinal lines would be nicer
- Experimented with that but so far didn't get anything that was compelling. Having many order-of-magnitude lines looks way too busy imho, it needs a mechanism that limits that to two.
- Blender's 2D view does this really well, but in 3D they only do two cardinals as well.

Try it yourself

Controls:

Space: Pause
G: Toggle camera mode

native:

cargo run -p re_renderer_examples --bin world_grid

web:

cargo run-wasm -p re_renderer_examples --bin world_grid

Backend testing matrix

Metal
Vulkan
WebGL
WebGPU

github-actions · 2024-11-27T10:54:42Z

Web viewer built successfully. If applicable, you should also test it:

I have tested the web viewer

Result	Commit	Link
✅	`359eeb5`	https://rerun.io/viewer/pr/8230

^{Note: This comment is updated whenever you push a commit.}

Wumpf · 2024-11-27T11:08:04Z

crates/viewer/re_renderer/shader/world_grid.wgsl

+    // X and Y are combined like akin to premultiplied alpha operations.
+    let intensity_combined = saturate(cardinal_and_regular.x * (1.0 - cardinal_and_regular.y) + cardinal_and_regular.y);


tbh not so sure about this anymore. Sounded like a compelling idea in Ben's article, but looking at the close-ups I actually don't like the change in color when grid lines meet.
So maybe more like

Suggested change

// X and Y are combined like akin to premultiplied alpha operations.

let intensity_combined = saturate(cardinal_and_regular.x * (1.0 - cardinal_and_regular.y) + cardinal_and_regular.y);

let intensity_combined = max(cardinal_and_regular.x, cardinal_and_regular.y);

It's very subtle though either way.

let intensity_combined = saturate(cardinal_and_regular.x * (1.0 - cardinal_and_regular.y) + cardinal_and_regular.y);

let intensity_combined = max(cardinal_and_regular.x, cardinal_and_regular.y);

I think the first is better at this particular angle (less Moiré). Hard to test without camera control

oh wow yeah so much better, agreed
more visual refinements on the way in the follow-up pr

crates/viewer/re_renderer/src/renderer/world_grid.rs

Wumpf · 2024-11-27T14:41:50Z

started integrating this into the viewer and will have adjustments to the style based on experiences in real examples. Not feeding those back in because I don't want to redo all those screenshots

Wumpf · 2024-11-27T15:02:56Z

view angle fade is one of the things that isn't holding up: The implementation here is too simplistic. Also the "line density aware fade" is taking care of this well enough

emilk

So beautiful 🤩

crates/viewer/re_renderer/shader/world_grid.wgsl

emilk · 2024-11-27T20:32:28Z

crates/viewer/re_renderer/shader/world_grid.wgsl

+    // It seems that if we want to go down this path, we should ensure that there's only two levels of lines on screen at a time.
+    const CARDINAL_LINE_FACTOR: f32 = 10.0;


For a reference: in egui_plot I have an infinite level of lines, but with only three levels viisble at any time, with a smooth fade to avoid discontinuities: https://emilk.github.io/egui_plot/

This means no matter how small or big your plots are, you always have thicker and thinner lines to guide you

have some new ideas that I want to try in the follow-up pr
the main issue I found was that having more than two "types" of lines on screen looks bad. And in a 3d perspective I found it very tricky to select the right levels. That said, maybe it's really not that hard, I want to try some more. Thanks for the link!

emilk · 2024-11-27T20:38:06Z

crates/viewer/re_renderer/shader/world_grid.wgsl

+    // X and Y are combined like akin to premultiplied alpha operations.
+    let intensity_combined = saturate(cardinal_and_regular.x * (1.0 - cardinal_and_regular.y) + cardinal_and_regular.y);


let intensity_combined = saturate(cardinal_and_regular.x * (1.0 - cardinal_and_regular.y) + cardinal_and_regular.y);

let intensity_combined = max(cardinal_and_regular.x, cardinal_and_regular.y);

I think the first is better at this particular angle (less Moiré). Hard to test without camera control

crates/viewer/re_renderer/src/draw_phases/mod.rs

crates/viewer/re_renderer_examples/2d.rs

crates/viewer/re_renderer_examples/world_grid.rs

crates/viewer/re_renderer/shader/world_grid.wgsl

### Related * Follow-up of part 1: #8230 * Fixes #872 ### What Adds new line grid property to the 3D view and enables it by default. Furthermore... * improves the grid shader with infinite cardinal lines while showing only two types of "cardinalitities" * this is simply based on log10(camera distance from plane) and then blends between two levels of grid * improve grid's handling of extreme zoom levels. Still some instability on WebGL, but overall much more robust (less flickering/cutoff) * Introduce a general `Plane3D` component which is meant for later reuse in other contexts The new view property is best described its fbs: ```rust /// Configuration for the 3D line grid. table LineGrid3D ( "attr.rerun.scope": "blueprint" ) { /// Whether the grid is visible. /// /// Defaults to true. visible: rerun.blueprint.components.Visible ("attr.rerun.component_optional", nullable, order: 1000); /// Space between grid lines spacing of one line to the next in scene units. /// /// As you zoom out, successively only every tenth line is shown. /// This controls the closest zoom level. spacing: rerun.blueprint.components.GridSpacing ("attr.rerun.component_optional", nullable, order: 2000); /// In what plane the grid is drawn. /// /// Defaults to whatever plane is determined as the plane at zero units up/down as defined by [components.ViewCoordinates] if present. plane: rerun.components.Plane3D ("attr.rerun.component_optional", nullable, order: 3000); /// How thick the lines should be in ui units. /// /// Default is 1.0 ui unit. stroke_width: rerun.components.StrokeWidth ("attr.rerun.component_optional", nullable, order: 5000); /// Color used for the grid. /// /// Transparency via alpha channel is supported. /// Defaults to a slightly transparent light gray. color: rerun.components.Color ("attr.rerun.component_optional", nullable, order: 6000); } ``` Properties in the viewer in default selection panel width <img width="291" alt="image" src="https://github.com/user-attachments/assets/8292f7bb-e2a4-42b4-9147-7bbd72fc38c7"> New plane controls expanded: <img width="281" alt="image" src="https://github.com/user-attachments/assets/0cc19ce7-1031-4b58-bc24-7c2699d5e25b"> Examples of the grid in action (in default settings): <img width="1326" alt="image" src="https://github.com/user-attachments/assets/fe167eef-29e4-478f-a6e2-d2fb82f30a91"> <img width="1563" alt="image" src="https://github.com/user-attachments/assets/d1a878be-16b0-4c9b-873c-fcf1abcd67fd"> Bad case - grid is not fine enough and through the scene: <img width="1154" alt="image" src="https://github.com/user-attachments/assets/cb76355a-778d-4bd9-a724-b4d9b1dffd84"> Bad case - grid is above the scene. <img width="1464" alt="image" src="https://github.com/user-attachments/assets/0a150db3-f344-444a-a4a0-33c877ea38ae"> ## Testing * [x] Metal * [x] Vulkan * [x] WebGPU * [x] WebGL ## Future work * tweak some examples to disable the grid or change its spacing * Extend grid to 2d scenes

Wumpf added 7 commits November 26, 2024 18:46

fix re_renderer configure failure and remove unwraps

c1229ad

first basically working grid shader

2a337cc

various improvements, camera movement in example

00afa0f

more improvements

2180880

EVEN more improvements

3775716

fade on accute viewing angles

82a6c81

improve code clarity, more cleanup

882f6fe

Wumpf added the 🔺 re_renderer affects re_renderer itself label Nov 27, 2024

fix typos

20f8bdd

Wumpf added 📺 re_viewer affects re_viewer itself include in changelog labels Nov 27, 2024

fix function/variable name conflict - naga can handle this, dawn can not

020d450

Wumpf commented Nov 27, 2024

View reviewed changes

crates/viewer/re_renderer/src/renderer/world_grid.rs Outdated Show resolved Hide resolved

fix incorrect comment

6de2d73

Wumpf mentioned this pull request Nov 27, 2024

World grid part 2/2: Integrate into Viewer #8234

Merged

4 tasks

emilk self-requested a review November 27, 2024 20:13

emilk approved these changes Nov 27, 2024

View reviewed changes

more meaningful ordering for grid plane axis

2db57a5

emilk reviewed Nov 28, 2024

View reviewed changes

crates/viewer/re_renderer/shader/world_grid.wgsl Outdated Show resolved Hide resolved

Wumpf added 4 commits November 28, 2024 09:22

document & rename plane geometry size

f959d8b

add new interpolation.wgsl

b658ef9

fixup constant

fc7c57b

fix thicknes control, comments, clarifications

4b32687

Wumpf force-pushed the andreas/world-grid branch from 381febc to 16af40b Compare November 28, 2024 09:41

Wumpf added 2 commits November 28, 2024 10:41

use plane equation instead of orientation enum, kill view fade

16af40b

dead code

359eeb5

Wumpf merged commit a54c2c5 into main Nov 28, 2024
31 checks passed

Wumpf deleted the andreas/world-grid branch November 28, 2024 10:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

World grid part 1/2: add world grid renderer to `re_renderer` #8230

World grid part 1/2: add world grid renderer to `re_renderer` #8230

Wumpf commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

Wumpf Nov 27, 2024

emilk Nov 27, 2024

Wumpf Nov 27, 2024

Wumpf commented Nov 27, 2024

Wumpf commented Nov 27, 2024

emilk left a comment

emilk Nov 27, 2024

Wumpf Nov 27, 2024

emilk Nov 27, 2024

		// X and Y are combined like akin to premultiplied alpha operations.
		let intensity_combined = saturate(cardinal_and_regular.x * (1.0 - cardinal_and_regular.y) + cardinal_and_regular.y);

	// X and Y are combined like akin to premultiplied alpha operations.
	let intensity_combined = saturate(cardinal_and_regular.x * (1.0 - cardinal_and_regular.y) + cardinal_and_regular.y);
	let intensity_combined = max(cardinal_and_regular.x, cardinal_and_regular.y);

		// It seems that if we want to go down this path, we should ensure that there's only two levels of lines on screen at a time.
		const CARDINAL_LINE_FACTOR: f32 = 10.0;

World grid part 1/2: add world grid renderer to re_renderer #8230

World grid part 1/2: add world grid renderer to re_renderer #8230

Conversation

Wumpf commented Nov 27, 2024 • edited Loading

Related

What

Video

Screenshots

How does it work

Known shortcomings

Try it yourself

Backend testing matrix

github-actions bot commented Nov 27, 2024 • edited Loading

Wumpf Nov 27, 2024

Choose a reason for hiding this comment

emilk Nov 27, 2024

Choose a reason for hiding this comment

Wumpf Nov 27, 2024

Choose a reason for hiding this comment

Wumpf commented Nov 27, 2024

Wumpf commented Nov 27, 2024

emilk left a comment

Choose a reason for hiding this comment

emilk Nov 27, 2024

Choose a reason for hiding this comment

Wumpf Nov 27, 2024

Choose a reason for hiding this comment

emilk Nov 27, 2024

Choose a reason for hiding this comment

World grid part 1/2: add world grid renderer to `re_renderer` #8230

World grid part 1/2: add world grid renderer to `re_renderer` #8230

Wumpf commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading