Reproject DataTiles using WebGL instead of 2d canvas.

[sweepline]

I have made an implementation of the ol/src/reproj:render() function using webgl instead of 2d canvas. This solves three problems:

• Doing 4band reprojection in a single step instead of 3-bytes per pixel.
• Linear interpolation of data instead of only nearest neighbor.
• An issue in firefox described here means that a few pixels are mangled when using a 2d-canvas for reprojection.

Since this will be used for datatiles, it should be okay to do it in webgl, as datatiles are used for webgl based rendering anyway.

It does all the work for a datatile reprojection using a single WebGLRenderingContext. Whereas the current implementation computes an affine transformation from the source to the target explicitly, this is not needed when doing the work in WebGL as the transformation is built-in.

This makes it possible to do up 4band f32/u8 reprojection in 1 pass which means that you never need to do multiple passes as that is what a tiletexture can hold as well as far as I understand. It produces the same output in examples/numpytile for example which is supposedly 5-bands. I have not A/B tested the speed difference.

This means you can do interpolation when reprojection instead of always having to do nearest neighbour. It is even possible for f32 data if the webgl extension is available. Below is a comparison on some elevation-data. You can still see some artifacts because reprojected tiles have no gutter (also on the main branch), which I intend to fix in a future pull-request.

This fixes the same reprojection artifacts in Firefox as #14099, as well as the ones that could not be fixed in that PR.

[github-actions]

📦 Preview the website for this branch here: https://deploy-preview-15860--ol-site.netlify.app/.

[tschaub]

Awesome! Thank you for this contribution, @sweepline. It has been on my list for a while to rework our raster reprojection. I look forward to making time to dig into this, but just wanted to express my gratitude for your work.

[tschaub]

Suggested change

	* @param {WebGLRenderingContext} [gl] Context to render in.
	* @param {WebGLRenderingContext} gl Context to render in.

[mike-000]

The webgl-reproj-no-wrap rendering test is passing at the center and resolution used. However if you move to the pole and zoom in slightly an error occurs in your code:

This seems unrelated to the failing tests where source.getTileSize(z) does not match source.getTileGrid().getTileSize(z).

Also https://deploy-preview-15860--ol-site.netlify.app/en/latest/examples/geotiff-reprojection.html and https://deploy-preview-15860--ol-site.netlify.app/en/latest/examples/multiple-cogs.html are not working for me (Windows 10 and Android) due to Too many active WebGL contexts. Oldest context will be lost. warnings. If I restrict the first example to 4 bands including added alpha by specifying bands: [1, 2, 3], it does work.