Tearing when using landscape orientation

[declanwoods]

First of all, thank you for this brilliant project. I've had very minimal issues and the docs are great when first setting up the environment.

My issue is that when I use an item such as PageViewwith scrollDirection: Axis.horizontal in a landscape orientation, massive tearing occurs

I start flutter like this:
./flutter-pi/out/flutter-pi -i "/dev/input/event1" -o landscape_right -d "155,86" ./app

Here is my output

Output

[flutter-pi] WARNING: display has non-square pixels. Non-square-pixels are not supported by flutter.
===================================
display mode:
  resolution: 1024 x 600
  refresh rate: 60Hz
  physical size: 155mm x 86mm
  flutter device pixel ratio: 1.738540
===================================
EGL information:
  version: 1.4
  vendor: "Mesa Project"
  client extensions: "EGL_EXT_device_base EGL_EXT_device_enumeration EGL_EXT_device_query EGL_EXT_platform_base EGL_KHR_client_get_all_proc_addresses EGL_EXT_client_extensions EGL_KHR_debug EGL_EXT_platform_wayland EGL_EXT_platform_x11 EGL_MESA_platform_gbm EGL_MESA_platform_surfaceless EGL_EXT_platform_device"
  display extensions: "EGL_ANDROID_blob_cache EGL_EXT_buffer_age EGL_EXT_image_dma_buf_import EGL_EXT_image_dma_buf_import_modifiers EGL_KHR_cl_event2 EGL_KHR_config_attribs EGL_KHR_create_context EGL_KHR_create_context_no_error EGL_KHR_fence_sync EGL_KHR_get_all_proc_addresses EGL_KHR_gl_colorspace EGL_KHR_gl_renderbuffer_image EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_3D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_image EGL_KHR_image_base EGL_KHR_image_pixmap EGL_KHR_no_config_context EGL_KHR_reusable_sync EGL_KHR_surfaceless_context EGL_EXT_pixel_format_float EGL_KHR_wait_sync EGL_MESA_configless_context EGL_MESA_drm_image EGL_MESA_image_dma_buf_export EGL_MESA_query_driver EGL_WL_bind_wayland_display "
===================================
OpenGL ES information:
  version: "OpenGL ES 3.1 Mesa 19.3.2"
  shading language version: "OpenGL ES GLSL ES 3.10"
  vendor: "Broadcom"
  renderer: "V3D 4.2"
  extensions: "GL_EXT_blend_minmax GL_EXT_multi_draw_arrays GL_EXT_texture_format_BGRA8888 GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth24 GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_mapbuffer GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_stencil8 GL_OES_texture_3D GL_OES_texture_float GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_half_float GL_EXT_texture_sRGB_decode GL_OES_EGL_image GL_OES_depth_texture GL_OES_packed_depth_stencil GL_EXT_texture_type_2_10_10_10_REV GL_OES_get_program_binary GL_APPLE_texture_max_level GL_EXT_discard_framebuffer GL_EXT_read_format_bgra GL_EXT_frag_depth GL_NV_fbo_color_attachments GL_OES_EGL_image_external GL_OES_EGL_sync GL_OES_vertex_array_object GL_EXT_occlusion_query_boolean GL_EXT_texture_rg GL_EXT_unpack_subimage GL_NV_draw_buffers GL_NV_read_buffer GL_NV_read_depth GL_NV_read_depth_stencil GL_NV_read_stencil GL_EXT_draw_buffers GL_EXT_map_buffer_range GL_KHR_debug GL_KHR_texture_compression_astc_ldr GL_OES_depth_texture_cube_map GL_OES_required_internalformat GL_OES_surfaceless_context GL_EXT_color_buffer_float GL_EXT_sRGB_write_control GL_EXT_separate_shader_objects GL_EXT_shader_implicit_conversions GL_EXT_shader_integer_mix GL_EXT_base_instance GL_EXT_compressed_ETC1_RGB8_sub_texture GL_EXT_draw_elements_base_vertex GL_EXT_primitive_bounding_box GL_EXT_shader_io_blocks GL_EXT_texture_border_clamp GL_EXT_texture_norm16 GL_KHR_context_flush_control GL_NV_image_formats GL_OES_draw_elements_base_vertex GL_OES_primitive_bounding_box GL_OES_shader_io_blocks GL_OES_texture_border_clamp GL_OES_texture_stencil8 GL_OES_texture_storage_multisample_2d_array GL_EXT_buffer_storage GL_EXT_float_blend GL_KHR_no_error GL_KHR_texture_compression_astc_sliced_3d GL_OES_EGL_image_external_essl3 GL_OES_shader_image_atomic GL_MESA_shader_integer_functions GL_KHR_parallel_shader_compile GL_MESA_framebuffer_flip_y GL_EXT_texture_query_lod "
===================================
flutter: Observatory listening on http://127.0.0.1:38633/fxN8LFmXCAE=/

[ardera]

First of all, thank you for this brilliant project. I've had very minimal issues and the docs are great when first setting up the environment.

Thanks, that's nice to hear!

My issue is that when I use an item such as PageViewwith scrollDirection: Axis.horizontal in a landscape orientation, massive tearing occurs

Just to be sure: The tearing does not ocurr in normal (portrait) orientation, right? Or did you just not test with portrait orientation? Actually, the rotation is done using OpenGL. The low-level graphics code (errors in which could cause tearing) is the same, regardless of orientation.

Additionally to the -o cmdline argument, are you setting the orientation inside flutter using SystemChrome.setPreferredOrientations too somewhere?

[declanwoods]

As far as I can tell from testing just then, the tearing does not occur in portrait_down orientation.

I'm not using SystemChrome.setPreferredOrientations in my code, is this something you recommend for a landscape application?

Not sure if relevant, but I saw in another issue you used kmscube to test graphic, and using your branch i was able to run in both normal and atomic modes

[ardera]

I'm not using SystemChrome.setPreferredOrientations in my code, is this something you recommend for a landscape application?

No, changing the orientation at runtime using SystemChrome.setPreferredOrientations is actually less preferred. It works fine, but the flutter engine has some weird behaviour when the orientation is being changed and flutter-pi has some hacks to get along with this. It wouldn't be that suprising if the hacks caused the tearing. However, since you're not changing the orientation at runtime, the hacks don't seem to be cause in this case.

Not sure if relevant, but I saw in another issue you used kmscube to test graphic, and using your branch i was able to run in both normal and atomic modes

Okay, did you notice any tearing in either legacy or atomic mode?

You could also try checking out the flutter-pi sources at commit a041cd4 and build & run those and see if it fixes the tearing.

There's one thing in the graphics code that isn't "adequately implemented", I'll try improving that, maybe that solves it.

[declanwoods]

Didn't notice any tearing in any of the kmscube modes, either in your version or the apt version. However, i can't run the apt version in atomic mode, i get an error that simply says no eglDupNativeFenceFDANDROID

I will try the commit of flutter-pi you mentioned now

[declanwoods]

Checked out that commit and built but no difference, here is a video of the problem in action. https://streamable.com/fh4wqn

[ardera]

That video is very interesting. The tearing looks very weird, it's not at all what you would expect if vsync was not working somehow.

I haven't yet reproduced the problem. My flutter app looks pretty similiar to yours (PageView with some icons). In slo-mo, I noticed 1 occasion of tearing on my display, but it doesn't look anything like the tearing you experience. (You have multiple tears simultaneously, i.e. multiple regions where the "old" frame shows)

What display are you using? (model, vendor, HDMI or DSI)

I'm using the Official 7-inch display (so DSI)

[declanwoods]

The display I use (link below) is HDMI, 1024x600.

https://www.ebay.com.au/itm/7-Inch-1024-600-Capacitive-Touch-Screen-LCD-Display-DIY-Kit-for-Raspberry-Pi/222619692743?ssPageName=STRK%3AMEBIDX%3AIT&_trksid=p2057872.m2749.l2649

This might be useful also, heres my /boot/config.txt

[pi4]
# Enable DRM VC4 V3D driver on top of the dispmanx display stack
dtoverlay=vc4-fkms-v3d
max_framebuffers=2

[all]
dtoverlay=vc4-fkms-v3d


hdmi_force_hotplug=1
hdmi_group=2
hdmi_mode=87
hdmi_cvt 1024 600 60 3 0 0 0
gpu_mem=64
start_x=0

And this is my cmdline.txt

console=serial0,115200 console=tty1 root=PARTUUID=97709164-02 rootfstype=ext4 elevator=deadline fsck.repair=yes rootwait quiet splash plymouth.ignore-serial-consoles

[ardera]

Okay, I reproduced it. I connected a HDMI monitor to the Pi and I consistently get the same tearing that you get too. That means it doesn't have anything to do with flutter-pi. I googled a bit and it's actually a known issue, but likely won't be fixed since they're working on getting the new (Full-KMS) graphics driver ready instead. See this forum thread

I just tried and it works fine with the Full-KMS driver. (Didn't test with all the hdmi_ params you added to config.txt though) No tearing there. For info on how to switch to full-kms, see the latest post on the forum thread I mentioned.

[ardera]

Closing this now since it's an OS bug.

[declanwoods]

Followed the instructions and confirmed that I have linux 5.4 installed correctly

Linux gardenpi-display 5.4.69-v7l+ #1344 SMP Fri Oct 2 16:01:56 BST 2020 armv7l GNU/Linux

Everything runs fine, but I now cant use my touchscreen! Any help would be appreciated, but I understand if it's hard to replicate this one

[compositor] Could not move cursor to front. Mouse cursor may be invisible. drmdev_plane_get_max_zpos_value: Invalid argument
[compositor] GPU does not supported the desired HW plane order.
             Some UI layers may be invisible.

[ardera]

Followed the instructions and confirmed that I have linux 5.4 installed correctly

Linux gardenpi-display 5.4.69-v7l+ #1344 SMP Fri Oct 2 16:01:56 BST 2020 armv7l GNU/Linux

Did you run rpi-update? If yes, that was probably uncessary and it's generally not a good idea. You only need to go into /boot/config.txt and change vc4-fkms-v3d to vc4-kms-v3d-pi4 😄.

I now cant use my touchscreen!

To be precise, only the touch doesn't work right? Or does the display not work too? Touch shouldn't be affected at all by the config.txt change, so it was probably caused by the rpi-update. You can run sudo apt-get update; sudo apt-get install --reinstall raspberrypi-bootloader raspberrypi-kernel to undo the update.

[declanwoods]

Haha, yes I did run rpi-update. Thanks so much, will try this soon. And yes, just the touchscreen not working, the display seems to work but i can't test for tearing yet

[declanwoods]

To follow up, I have reinstalled and all is working now. I think my touchscreen just changed from event0 to event4 for some reason. Thanks!

[ardera]

Nice! Btw why are you specifying the -i flag? Do you have 2 touchscreens connected?

[declanwoods]

I just assumed I needed it, I will remove it if that will detect the touchscreen automatically