GeoTIFF rendering artifacts while dragging map on iPhone / WebGL

[achmed13]

I have a map with a COG GeoTIFF layer, and while dragging the map it looks like there are parts of the map along the right side that are not rendered, but it doesn't appear along tile boundaries and sometimes the blank shapes are rectangles and sometimes triangles.

I have only seen the problem on IOS, but with both Safari and Chrome. Also, it doesn't appear to happen unless zoomed in to level 22 or higher.

To Reproduce Steps to reproduce the behavior:

1. On an iPhone, go to oudolfgardendetroit.org/map
2. Zoom in all the way
3. Slowly drag to pan the map, and you should see what I'm talking about.

Here is a video of the bug in action: Video Link

[mike-000]

Also seen on Chrome/Windows even when downloading your file and using it locally in a simple example based on https://openlayers.org/en/latest/examples/cog.html so it seems to be an issue with the file

[achmed13]

I've done some more testing using the COG sample (https://openlayers.org/en/latest/examples/cog.html).

I changed the source to OSM, and I still see the same behavior when I zoom in to level 23 and pan around if I use it as a WebGLTileLayer, but it works as expected if I use a regular TileLayer.

Therefore, my best guess is that it's related to WebGL, but that's well beyond my technical comfort zone.

main.js

import Map from 'ol/Map';
import { OSM } from 'ol/Source';
import View from 'ol/View';
import WebGLTileLayer from 'ol/layer/WebGLTile';

const map = new Map({
	target: 'map',
	layers: [
		new WebGLTileLayer({
			source: new OSM(),
		}),
	],
	view: new View({
		center: [-9238257.525734771, 5211401.202844376],
		zoom: 23,
	}),
});

[mike-000]

I also see a Chrome/Windows rendering issue with https://openlayers.org/en/main/examples/webgl-tiles.html when zooming in a few levels beyond the max zoom of the source:

But much less noticeable than with your file where I did not zoom in beyond the max zoom of the COG.

[jahow]

Interesting, could that be a precision issue related to the WebGL renderer? Some devices do not support high precision floats in WebGL and will fallback to medium precision, which might explain the difference in severity. This needs to be investigated further IMO.

[fabry24]

Hello, Is there any progress with this issue? We noticed the same behaviour. @jahow do you investigated, which webgGL extensions are neccessary to avoid this issue?

We have these webgl 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_bptc', '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']

[jahow]

I haven't had the time to look into this unfortunately. I feel like there's more to it than finding the right WebGL extension; precision issues at high zoom levels is an ongoing issue with all WebGL renderers and fixing it requires diving into the rendering pipeline.

[bugracoskun]

I got the same issue. Are you planning to improve any solution for this issue ? @jahow