1802856 - WebGL Canvas rendering issue (Mali-G76, m1 mac) incomplete rendering of bunny

Status: NEW

(Core :: Graphics, defect, P3)

Description

[Kevin Brosnan [Ex-Mozilla]]

From github: https://github.com/mozilla-mobile/fenix/issues/24992.

Steps to reproduce

1. Open page https://regl-project.github.io/regl/www/gallery/lighting.js.html

Expected behaviour

Render properly.

Actual behaviour

Not render properly

Device name

Huawei Nova 5 pro

Android version

Android 10

Firefox release type

Firefox Nightly

Firefox version

101.0a1 (Build #2015876715), 405f406f1+

Device logs

No response

Additional information

┆Issue is synchronized with this Jira Task

Change performed by the Move to Bugzilla add-on.

Comment 1

[Kevin Brosnan [Ex-Mozilla]]

I can reproduce this on a Pixel 6 Pro (Mali-G78) using nightly

Comment 2

[Nicolas Silva [:nical]]

Also reproduces on an m1 mac.

Comment 3

[Kelsey Gilbert [:jgilbert]]

I don't have any Mali or M1 devices.

• What does the issue look like? Screenshots?
• Anything in devtools Console?
• Does it assert in a Debug build?

Comment 4

[Kevin Brosnan [Ex-Mozilla]]

There is a screenshot on the original GH issue. The move to Bugzilla extension is not capable of moving over screenshots to Bugzilla attachments.

https://user-images.githubusercontent.com/55432068/165678245-803714aa-9b0a-41a8-a2ce-c2c3328150a3.jpg

Comment 5

[Nicolas Silva [:nical]]

I don't see anything in the devtools console and no crash in a debug build.

Comment 6

[Kelsey Gilbert [:jgilbert]]

I either need hardware, or someone else will need to investigate.
@nical do you have bandwidth to run mozregression?

Comment 7

[Kelsey Gilbert [:jgilbert]]

@nical can you include a screenshot and your about:support for the affected machine? We have other people on M1 that don't see any issues.

Comment 8

[Brad Werth [:bradwerth]]

Works for me on my M1 Max. Here's the Graphics section from my about:support:

Features
Window Device Pixel Ratios: 2
Compositing: WebRender
Asynchronous Pan/Zoom: wheel input enabled; scrollbar drag enabled; keyboard enabled; autoscroll enabled; smooth pinch-zoom enabled
WebGL 1 Driver WSI Info: CGL IsWebglOutOfProcessEnabled: 1
WebGL 1 Driver Renderer: Apple -- Apple M1 Max
WebGL 1 Driver Version: 4.1 Metal - 83
WebGL 1 Driver Extensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_NV_texture_barrier
WebGL 1 Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_float_blend EXT_frag_depth EXT_shader_texture_lod EXT_sRGB EXT_texture_compression_rgtc EXT_texture_filter_anisotropic MOZ_debug OES_element_index_uint OES_fbo_render_mipmap OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context
WebGL 2 Driver WSI Info: CGL IsWebglOutOfProcessEnabled: 1
WebGL 2 Driver Renderer: Apple -- Apple M1 Max
WebGL 2 Driver Version: 4.1 Metal - 83
WebGL 2 Driver Extensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_NV_texture_barrier
WebGL 2 Extensions: EXT_color_buffer_float EXT_float_blend EXT_texture_compression_rgtc EXT_texture_filter_anisotropic MOZ_debug OES_draw_buffers_indexed OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
Target Frame Rate: 60
GPU #1
Active: Yes
Vendor ID: 0x106b
RAM: 0

Comment 9

[Ashley Hale [:ahale]]

I can reproduce this on Google Pixel 6 Pro, the bunny looks extremely trippy with varying holes in the mesh from frame to frame. It seems to follow a somewhat rhythmic pattern over the rotation from being mostly complete to being mostly holes and back.

As far as I understand, this is what happens if the GPU is not allowed to finish rendering or is missing a crucial shader for multi-pass frame rendering ( https://rosenzweig.io/blog/asahi-gpu-part-5.html talks about this on Asahi Linux on this GPU).

Notably, this same bug appears in Chrome and Edge on the same phone. Is this actually a Firefox bug or a driver bug?

Comment 10

[Ashley Hale [:ahale]]

Attachment: Google Pixel 6 Pro Firefox Nightly Screenshot_20221201-143508.png

Comment 11

[Ashley Hale [:ahale]]

Attachment: Google Pixel 6 Pro Chrome Screenshot_20221201-143515.png

Comment 12

[Ashley Hale [:ahale]]

Attachment: Google Pixel 6 Pro Edge Screenshot_20221201-143521.png

Comment 13

[Ashley Hale [:ahale]]

Attachment: Firefox nightly on Intel i9-11900H

Comment 14

[Ashley Hale [:ahale]]

On that same phone, a number of the other demos in the gallery repro this same issue https://regl-project.github.io/regl/www/gallery.html - mostly to do with the bunny model, but also the textured cube has similar flicker. Some demos don't even render anything (a few don't render anything on Windows either though).

Comment 15

[Jamie Nicol [:jnicol]]

Like Ashley, I can also repro on a Pixel 6. Looking at the devices people have stated they can repro on it seems to be limited to recent Mali (and Nical's M1). I suspect the Pixel 4 (adreno) mentioned on github was in fact a Pixel 6 (mali). And given it also repros in chrome on these devices I'm confident it's a driver issue rather than a firefox one.

Nical, can you reproduce in Chrome on that device too?

Comment 16

[Ashley Hale [:ahale]]

I will file a bug on chromium and see if that can be routed to the driver vendor somehow, as this is pretty unlikely to be a browser issue in 3 browsers.

Comment 17

[Nicolas Silva [:nical]]

This also reproduces with Chrome on the M1.

Comment 18

[Ashley Hale [:ahale]]

I'll mention that this bug still seems to occur on my Google Pixel 6 Pro phone. I still need to file the chromium bug, which hopefully should get routed to the correct people to get the driver bug fixed for Android (at least if I am understanding the bug correctly).