Flickering edges during zoom/pan

[mjhouse]

Bevy Tilemap version

bevy = "0.5"
bevy_tilemap = "0.4.0"

Operating system & version

Ubuntu 20.04

What you did

1. Created a 30x30 hex tile map
2. Modified transform.scale of the 2d camera (zoomed out)
3. Modified transform.translation of the 2d camera (panned)

What you expected to happen

No flickering lines along the edge of textures.

What actually happened

Observed white, flickering lines, mainly along left edge of tiles

Additional information

I've tried:

• Modifying sampler properties of loaded textures (min_filter etc.)
• Modifying pan to only move by multiples of the current scale
• Changing GridTopology

The only thing that's had a major effect has been changing pan. Panning by whole numbers removes the lines at scale=1.0. Panning by a multiple of the scale removes the lines at scale=1.0 and stops the flicker at other scales, but doesn't remove the lines.

[joshuajbouw]

Ah shoot. That math is biting me in the butt again :'(. Thats for the report. There is a potential possibility of this being fixed with the new renderer, I would say lets wait until the renderer is released. I think the next version of Bevy should be any day now?

[mjhouse]

@joshuajbouw No worries. I've been trying different things to see if I can find a workaround, but haven't yet. I'm still not completely convinced that this is a bevy_tilemap issue. Is this something you've seen before?

[joshuajbouw]

Yeah, in the vert files each have a line like this: https://github.com/joshuajbouw/bevy_tilemap/blob/master/src/chunk/render/tilemap-hexcols-even.vert#L70

and here: https://github.com/joshuajbouw/bevy_tilemap/blob/master/src/chunk/render/tilemap-hexcols-even.vert#L60

We used ceil to round the value of the position to the nearest pixel, but it seems like that is causing issues. Want to try playing around with it?

[mjhouse]

Yeah, I'll mess with it. Thanks man.

[mjhouse]

@joshuajbouw Tried messing with the ceil/floor lines and didn't get anywhere. If you subtract 1.0 from sprite_rect.end.x, though, the edge issues go away. I'm still not sure why and I don't know what sort of unintended side effects it would cause.

    ...
    sprite_rect.end.x -= 1.0; // add this line to .vert files right above atlas_positions

    vec2 atlas_positions[4] = vec2[](
        vec2(sprite_rect.begin.x, sprite_rect.end.y),
        sprite_rect.begin,
        vec2(sprite_rect.end.x, sprite_rect.begin.y),
        sprite_rect.end
    );
    ...

I've only tested it in tilemap-hexrows-odd.vert.

Also found another issue using a 2d camera with multiple chunks. I'll file it this afternoon.

Notes

• These edges only seem to be really noticeable with a transparent texture over a non-transparent texture (the tree tiles over grass, in my case)
• The edges that I'm seeing are the background color of the game, so I set background to white and the lines popped out pretty sharply.
• Some of them (the angled lines on the tile) I fixed by modifying the texture I was using, but the straight edges on the left and right were still off.

Before

(had to scale the gif down, but lines are still clear near the end)

After

[enebo]

[Update: I presumed this is the same issue qith square tiles are hex ones since it seems to use the same logic: https://github.com/joshuajbouw/bevy_tilemap/blob/master/src/chunk/render/tilemap-square.vert#L51 . Apologies if this is really a second issue.]

I have a solid grey texture for square tiles in areas not explored and when I scroll out I can see a number of artifacts (which will change as the scale changes on zooming out). These are lines at the borders of the tiles. If I scroll in and zoom in I see nothing once it is 1x or greater. I do not have panning motion so I see no flickering. I only mention this because there is no alpha being used in my example. I think just populating a tilemap with a sprite of a solid color and adding a system like should reproduce the issue:

const MIN_ZOOM: f32 = 0.2;
const MAX_ZOOM: f32 = 2.0;
const ZOOM_INCREMENT: f32 = 0.1;

pub fn scroll_events(
    mut scroll_evr: EventReader<MouseWheel>,
    mut camera_query: Query<(&Camera, &mut Transform)>
) {
    for ev in scroll_evr.iter() {
        match ev.unit {
            MouseScrollUnit::Line => {
                for (_, mut transform) in camera_query.iter_mut() {
                    let zoom = transform.scale * (1.0 + ev.y * ZOOM_INCREMENT); // 0.9 or 1.1
                    *transform.scale = *Vec3::new(
                        zoom.x.clamp(MIN_ZOOM, MAX_ZOOM),
                        zoom.y.clamp(MIN_ZOOM, MAX_ZOOM),
                        1.0);
                }
            }
            _ => {},
        }
    }
}

[joshuajbouw]

This will likely change with the upcoming update, which would require 0.6 Bevy.