Update per mdn webgl recommendations (#9474)

* Update per mdn webgl recommendations
- Delete shader handles after succesfull compilation
- Query render to half float texture instead of calling checkFramebufferStatus, potentially involving flush + round-trip on first frame

* Add heatmap layer to release testing

src/gl/context.js

@@ -63,6 +63,7 @@ class Context {
     extTextureFilterAnisotropic: any;
     extTextureFilterAnisotropicMax: any;
     extTextureHalfFloat: any;
+    extRenderToTextureHalfFloat: any;
     extTimerQuery: any;
 
     constructor(gl: WebGLRenderingContext) {
@@ -113,6 +114,7 @@ class Context {
         this.extTextureHalfFloat = gl.getExtension('OES_texture_half_float');
         if (this.extTextureHalfFloat) {
             gl.getExtension('OES_texture_half_float_linear');
+            this.extRenderToTextureHalfFloat = gl.getExtension('EXT_color_buffer_half_float');
         }
 
         this.extTimerQuery = gl.getExtension('EXT_disjoint_timer_query');

src/render/draw_heatmap.js

@@ -100,17 +100,10 @@ function bindFramebuffer(context, painter, layer) {
 function bindTextureToFramebuffer(context, painter, texture, fbo) {
     const gl = context.gl;
     // Use the higher precision half-float texture where available (producing much smoother looking heatmaps);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, painter.width / 4, painter.height / 4, 0, gl.RGBA,
-        context.extTextureHalfFloat ? context.extTextureHalfFloat.HALF_FLOAT_OES : gl.UNSIGNED_BYTE, null);
-
+    // Otherwise, fall back to a low precision texture
+    const internalFormat = context.extRenderToTextureHalfFloat ? context.extTextureHalfFloat.HALF_FLOAT_OES : gl.UNSIGNED_BYTE;
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, painter.width / 4, painter.height / 4, 0, gl.RGBA, internalFormat, null);
     fbo.colorAttachment.set(texture);
-
-    // If using half-float texture as a render target is not supported, fall back to a low precision texture
-    if (context.extTextureHalfFloat && gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
-        context.extTextureHalfFloat = null;
-        fbo.colorAttachment.setDirty();
-        bindTextureToFramebuffer(context, painter, texture, fbo);
-    }
 }
 
 function renderTextureToMap(painter, layer) {

src/render/program.js

@@ -76,6 +76,9 @@ class Program<Us: UniformBindings> {
         gl.linkProgram(this.program);
         assert(gl.getProgramParameter(this.program, gl.LINK_STATUS), (gl.getProgramInfoLog(this.program): any));
 
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+
         this.numAttributes = gl.getProgramParameter(this.program, gl.ACTIVE_ATTRIBUTES);
 
         this.attributes = {};

test/release/index.js

@@ -59,6 +59,9 @@ const pages = {
     },
     "mapbox-gl-rtl-text": {
         "title": "Add support for right-to-left scripts"
+    },
+    "heatmap-layer": {
+        "title": "Add a heatmap layer"
     }
 };