Use WebGL2 in render tests by default

[stepankuzmin]

Switches render tests to use WebGL2 by default. Adds WebGL1 render tests for:

• Chrome on Linux
• Firefox on Linux
• Chrome on macOS
• Safari on macOS

Also, increases the allowed value for the heatmap render tests, which were failing in Firefox.

Note: sometimes, test-render-mac-safari-dev (WebGL2) fails with

Global error: AssertionError: null == true at http://localhost:7357/dist/mapbox-gl-dev.js, line 1774

Launch Checklist

• briefly describe the changes in this PR
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog></changelog>

[mourner]

The heatmap failures look not just like platform differences but more like the difference between the full and no-half-float fallback paths — since there are expected pics for both in that particular test, worth investigating what's happening there before we up the allowed diff.

[stepankuzmin]

@mourner It appears that the expected-half-float.png has a lower difference than expected.png, and Firefox uses it despite whether WebGL2 is disabled or enabled. So I assume it's WebGL2 that affects these tests

Firefox with WebGL2 disabled

Firefox with WebGL2 enabled

https://output.circle-artifacts.com/output/job/dcceb834-aef0-4f2f-baa1-87eb0e287cdf/artifacts/0/test/integration/render-tests/index.html

[mourner]

@stepankuzmin this looks like a genuine bug — FF/WebGL2 renders heatmaps with low res (see some pixel artifacts) as if it bypasses the half-float code path. We can merge the PR anyway but we should make sure to bring those allowed values back after fixing the root cause.

[astojilj]

.

[astojilj]

We do this, and spec wise, it looks correct:

        if (!isWebGL2) this.extTextureHalfFloat = gl.getExtension('OES_texture_half_float');
        if (isWebGL2 || (this.extTextureHalfFloat && gl.getExtension('OES_texture_half_float_linear'))) {
            this.extRenderToTextureHalfFloat = gl.getExtension('EXT_color_buffer_half_float');
        }

EXT_color_buffer_half_float was originally WebGL1 extension and relatively recently applied as WebGL2 extension (2020) KhronosGroup/WebGL#3146.

I didn't do a thorough check (https://hg.mozilla.org/mozilla-central/log?rev=EXT_color_buffer_half_float)- it is worth checking if it is implemented as WebGL 2 extension in Firefox and report an issue there.

It was removed in https://bugzilla.mozilla.org/show_bug.cgi?id=1271830 but didn't see a PR that's adding it back to WebGL 2 extension list

[stepankuzmin]

It looks like the latest Firefox misses the EXT_color_buffer_half_float extension. It's also missing on the https://webglreport.com/?v=2 with the latest Firefox

[stepankuzmin]

@mourner @astojilj I've filled a bug in the Firefox tracker for that https://bugzilla.mozilla.org/show_bug.cgi?id=1832535

[mourner]

This looks good, but let's create an issue to make sure to follow up on FF heatmaps & the allowed diff.