Possibly outdated examples: `LayoutSize` should be equal to `DeviceSize` in value?

[ruifengx]

I am currently experimenting with WebRender, and I am following the examples. Specifically, I replicated the logic in examples/boilerplate.rs and had some problems with the following line:

webrender/examples/common/boilerplate.rs

Line 195 in d451d22

let layout_size = device_size.to_f32() / euclid::Scale::new(device_pixel_ratio);

Since methods like DisplayListBuilder::push_rect accepts LayoutSize as well, I presume that they should also be scaled in the same manner. Here is what my toy example looks like (on Windows 11):

scale = 1.5	scale = 1.0

Note: 1.5 is the system scale factor. The two versions differ in the way DeviceSize is transformed into LayoutSize. The left one uses Scale::new(window.scale_factor() as f32), and the right one uses Scale::identity().

The reddish rectangle has bounds LayoutRect::from_size(layout_size), and the text is laid out with the same bounds. It should be clear from the screenshot that in the scale = 1.0 version the rectangle is correctly covering the whole window, while the scale = 1.5 version is incorrectly scaled down.

Searching in this repository I found 25f674b, where the device_pixel_ratio option is removed from WebRenderOptions, and uses of such value is replaced by a hardcoded 1.0.

Now I wonder, is the examples doing the correct thing? To add to the point, I see an extremely large window (larger than my screen so I cannot take a screenshot) when I cargo run --bin basic. Could someone please educate me on this LayoutSize/DeviceSize/Scale situation? Thanks in advance!

[nical]

Layout coordinates are in a local space (relative to their parent transform), while device coordinates are global they should have all transformations applied and should map to actual pixels.

WebRender initially had a global scale factor which was applied towards the end of the rendering pipeline, but as mentioned in the commit you linked, it was difficult to handle pixel snapping correctly (at least for the requirements of the browser), and we ended up removing it. What Firefox does (and by extension what I'd recommend doing), is to apply the window's scaling via a transform in the display list.

[ruifengx]

What Firefox does (and by extension what I'd recommend doing), is to apply the window's scaling via a transform in the display list.

Thanks for the clarification! I managed to fix the problem following your advice.

By the way, do you think the examples could also be improved by adopting this transformation? Also, the default window size is currently set to 1920x1080 (logical), which is probably too big. On my laptop for example, I have a 2560x1440 screen with Windows global scale factor set to 1.5, so the window is larger than my whole display area. The template in examples/common/boilerplate.rs also does not respond to window resizing events, so resizing the window causes the visual elements exceeding the client area.

[2e0byo]

given that I'm new to webrender and have just run into exactly this, +1 for a transformation example.