Polygon rendering issue

[daniel-sheward]

Sandcastle example:

https://sandcastle.cesium.com/#c=pZJLT+MwEMe/ipVTKmWdxkna9EEFKntDYlXQXggHk0xbC8euxk5RWPHdcR7V7gI94Zc8M//faORxoZWx5CjgBZBcEAUvZA1G1BX93fn83Cs6e62V5UIB5t5okatcFR2JUP7Sstlp5eg+DQVlhRVgKC9L/0+uCFG8gjnJvQ2U5DDI3TI1bnkBuRe0oiEwJx1CyF4Aciz2zfxU0pqjdTeuYrpFXV3DDgHMFSJv/IceOo3/rXZEkxllLEvGSZqx4HP8R5LQKUsZm01nk+AMn4wn8STL0nN8NGbjKJqe5dM4yqKEneVZEqVZHE+Db9bfhx9Hg67iFlBw+fcltdRINz+vO8GbO9/6rrZzaOOr1tW99j80dbQgXuDl3qIFT5uQpbGNhNWprEtRHTRaUqP0KQ0tVAfpajDhU108g6WFMaPFQIb/ostSHIkoL774dqSQ3BgX2dZS3olX929Wy9DpP6FS81Ko3e0RUPKmle2j1U3vpJQuQ2d+TVqt5RPHD5nfAQ

Browser:

Chrome Version 107.0.5304.110 (Official Build) (arm64)

Operating System:

macOS Monterey 12.5 (21G72)

WebGL Report

WebGL 1

Item	Value
Platform	MacIntel
User Agent	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Context Name	webgl
GL Version	WebGL 1.0 (OpenGL ES 2.0 Chromium)
Shading Language Version	WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor	WebKit
Renderer	WebKit WebGL
Unmasked Vendor	Google Inc. (Apple)
Unmasked Renderer	ANGLE (Apple, Apple M1 Max, OpenGL 4.1)
Antialiasing	Available
ANGLE	No
Major Performance Caveat	No

WebGL 1 Supported Extensions

• ANGLE_instanced_arrays
• EXT_blend_minmax
• EXT_color_buffer_half_float
• EXT_disjoint_timer_query
• EXT_float_blend
• EXT_frag_depth
• EXT_shader_texture_lod
• EXT_texture_compression_rgtc
• EXT_texture_filter_anisotropic
• EXT_sRGB
• KHR_parallel_shader_compile
• 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_multi_draw

WebGL 2

Item	Value
Platform	MacIntel
User Agent	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Context Name	webgl2
GL Version	WebGL 2.0 (OpenGL ES 3.0 Chromium)
Shading Language Version	WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)
Vendor	WebKit
Renderer	WebKit WebGL
Unmasked Vendor	Google Inc. (Apple)
Unmasked Renderer	ANGLE (Apple, Apple M1 Max, OpenGL 4.1)
Antialiasing	Available
ANGLE	No
Major Performance Caveat	No

WebGL 2 Supported Extensions

• EXT_color_buffer_float
• EXT_color_buffer_half_float
• EXT_disjoint_timer_query_webgl2
• EXT_float_blend
• EXT_texture_compression_rgtc
• EXT_texture_filter_anisotropic
• EXT_texture_norm16
• KHR_parallel_shader_compile
• 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
• WEBGL_multi_draw

Steps to reproduce:

1. Open the sandbox.
2. Hold down control key and move the mouse to make the camera perpendicular to the polygon.
3. Observe polygon rendering issues as you move the camera.

Screenshots:

Workaround:

Add the following code to the sandbox:

viewer.scene.logarithmicDepthBuffer = false;

[ggetz]

Thanks for the in-depth report @daniel-sheward! I'm unable to reproduce in Chrome on MacOS with an Intel chip.

Apple M1 Max

I think this may be the culprit. We've seen some other issues arise on M1 Macs. I think the underlying culprit here is this precision issue specific to machines with M1 chips.

[daniel-sheward]

Hi @ggetz, while we are also experiencing the jittering issue, I think this might be a seperate issue.

I'm unable to reproduce in Chrome on MacOS with an Intel chip.

We have observed the same, so the issue does seem to be related to the M1.

Running Chrome with the following:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp/c1 --use-cmd-decoder=passthrough --use-angle=metal

Resolves the jittery issue when testing with https://prideout.net/emulating-double-precision and the sandbox you posted however it does not resolve the rendering issue.

The logarithmicDepthBuffer workaround resolves the rendering issue but does not work for the jittering issue.

A bit of research into previous tickets has shown this workaround being suggested two years ago for a similar issue:
#9114 (comment)

Which also references this PR: #9108

I've done some screen recordings to hopefully make the issue easier to see:

Tilting:

Screen.Recording.2022-11-17.at.10.14.42.am.mov

Zooming:

Screen.Recording.2022-11-17.at.10.06.49.am.mov

I don't think this polygon jitters like what you see with the lines reported in that issue.

I have also seen a similar issue reported from many years ago:
#4161

The issue only appears to occur at a distance from the polygon. Zoom in far enough and the issue stops occurring whereas the jitter issue gets significantly worse as you zoom in.

It also only appears to occur in that area of the map. Creating polygons in Australia works without issues for example.

[ggetz]

Thanks for digging further @daniel-sheward.

This may be a long shot, but would you be able to try this version of your Sandcastle which uses a WebGL 2 context?

[daniel-sheward]

Hi @ggetz,

Unfortunately the issue still occurs with the sandbox that you linked.

I'm happy to keep trying various things out on my M1 if you can think of anything else.

In the meantime, for our product I'm planning on setting logarithmicDepthBuffer to false as it appears to have have zero impact on non-M1 devices while fixing this issue. I'm not really sure if there are any downsides to this.

If there's no downsides to setting logarithmicDepthBuffer to false, then would the solution to this just be removing whatever code relates to this, effectively making it disabled everywhere?

From what I can tell it's only used to decide between these two values in Scene.js but I could be very wrong:

this.farToNearRatio = 1000.0;
this.logarithmicDepthFarToNearRatio = 1e9;

https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/Scene.js#L333

I think I might set up a test environment tomorrow and see if I can play around with removing some of this code to see what happens.

[daniel-sheward]

Hi @ggetz, this seems to have been fixed since I posted this issue. I can't reproduce it using any of the links.

Thanks for your help.