fix: fix terrain mask texture initialization and fix gl specs (#2636)

Author: fuzhenn

packages/gl/src/layer/TileLayerGLRenderer.ts

@@ -296,7 +296,7 @@ class TileLayerGLRenderer2 extends TexturePoolable(CanvasCompatible(TileLayerRen
             blend: {
                 enable: true,
                 func: {
-                    src: 1,
+                    src: 'src alpha',
                     dst: 'one minus src alpha'
                 },
                 equation: 'add'

packages/gl/src/layer/terrain/TerrainLayerRenderer.js

@@ -372,7 +372,7 @@ class TerrainLayerRenderer extends MaskRendererMixin(TileLayerRendererable(Layer
                     if (!visitedSkinTiles.has(tileId)) {
                         if (!cleared && skinImages[j].layer.hasTerrainMask) {
                             //FIXME 潜在bug： 如果skinLayers中有多个 hasTerrainMask 的图层，其中一个clearMask并更新mask后，其他的terrainMask图层并没有更新mask
-                            this._clearMask(image);
+                            this._clearMask(image.mask);
                             cleared = true;
                         }
                         skinImages[j].terrainMaskFBO = image.mask;
@@ -393,8 +393,8 @@ class TerrainLayerRenderer extends MaskRendererMixin(TileLayerRendererable(Layer
         }
     }
 
-    _clearMask(tileImage) {
-        TERRAIN_MASK_CLEAR.framebuffer = tileImage.mask;
+    _clearMask(maskFBO) {
+        TERRAIN_MASK_CLEAR.framebuffer = maskFBO;
         this.device.clear(TERRAIN_MASK_CLEAR);
     }
 
@@ -744,6 +744,7 @@ class TerrainLayerRenderer extends MaskRendererMixin(TileLayerRendererable(Layer
         fboInfo.depthStencil = this._terrainMaskDepthStencil;
         const texture = regl.framebuffer(fboInfo)
         texture.colorTex = color;
+        this._clearMask(texture);
         // 单独创建的 color 必须要手动destroy回收，光destroy framebuffer，color是不会销毁的
         return texture;
     }

packages/gl/test/test.js

@@ -255,7 +255,7 @@ describe('gl tests', () => {
             setTimeout(() => {
                 const canvas = map.getRenderer().canvas;
                 const pixel = readPixel(canvas, canvas.width / 2, canvas.height / 2);
-                expect(pixel).to.be.eql({ data: { '0': 170, '1': 85, '2': 0, '3': 191 } });
+                expect(pixel).to.be.eql({ data: { '0': 169, '1': 86, '2': 0, '3': 95 } });
                 done();
             }, 500);
         });
@@ -579,7 +579,7 @@ describe('gl tests', () => {
                     group.on('layerload', () => {
                         const canvas = map.getRenderer().canvas;
                         const pixel = readPixel(canvas, canvas.width / 2, canvas.height / 2);
-                        expect(pixel).to.be.eql({ data: { '0': 138, '1': 142, '2': 143, '3': 255 } });
+                        expect(pixel).to.be.eql({ data: { '0': 136, '1': 140, '2': 141, '3': 255 } });
                         done();
                     });
                 });
@@ -616,7 +616,7 @@ describe('gl tests', () => {
                     group.once('layerload', () => {
                         const canvas = map.getRenderer().canvas;
                         const pixel = readPixel(canvas, canvas.width / 2, canvas.height / 2);
-                        expect(pixel).to.be.eql({ data: { '0': 139, '1': 143, '2': 145, '3': 127 } });
+                        expect(pixel).to.be.eql({ data: { '0': 137, '1': 141, '2': 143, '3': 127 } });
                         done();
                     });
                 });
@@ -650,7 +650,7 @@ describe('gl tests', () => {
                     group.once('layerload', () => {
                         const canvas = group.getRenderer().canvas;
                         const pixel = readPixel(canvas, canvas.width / 2, canvas.height / 2);
-                        expect(pixel).to.be.eql({ data: { '0': 138, '1': 142, '2': 143, '3': 255 }});
+                        expect(pixel).to.be.eql({ data: { '0': 136, '1': 140, '2': 141, '3': 255 }});
                         done();
                     });
                 });
@@ -951,7 +951,7 @@ describe('gl tests', () => {
                 setTimeout(() => {
                     const canvas = map.getRenderer().canvas;
                     const pixel = readPixel(canvas, canvas.width / 2, canvas.height / 2);
-                    expect(pixel).to.be.eql({ data: { '0': 138, '1': 142, '2': 143, '3': 255 } });
+                    expect(pixel).to.be.eql({ data: { '0': 136, '1': 140, '2': 141, '3': 255 } });
                     done();
                 }, 1000);
             }, 2000);
@@ -1092,7 +1092,7 @@ describe('gl tests', () => {
                     group.once('layerload', () => {
                         const canvas = map.getRenderer().canvas;
                         const pixel = readPixel(canvas, canvas.width / 2, canvas.height / 2 + 1);
-                        expect(pixel).to.be.eql({ data: { '0': 97, '1': 96, '2': 89, '3': 255 }  });
+                        expect(pixel).to.be.eql({ data: { '0': 85, '1': 85, '2': 79, '3': 255 }  });
                         done();
                     });
                 });
@@ -1945,7 +1945,7 @@ describe('gl tests', () => {
                     group.once('layerload', () => {
                         const canvas = map.getRenderer().canvas;
                         const pixel = readPixel(canvas, canvas.width / 2, canvas.height / 2);
-                        expect(pixel).to.be.eql({ data: { '0': 138, '1': 142, '2': 143, '3': 255 } });
+                        expect(pixel).to.be.eql({ data: { '0': 136, '1': 140, '2': 141, '3': 255 } });
                         done();
                     });
                 });
@@ -2126,9 +2126,9 @@ describe('gl tests', () => {
                     group.once('layerload', () => {
                         const canvas = map.getRenderer().canvas;
                         const pixel1 = readPixel(canvas, canvas.width / 2, canvas.height / 2);
-                        expect(pixel1).to.be.eql({ data: { '0': 70, '1': 133, '2': 195, '3': 255 } });
+                        expect(pixel1).to.be.eql({ data: { '0': 68, '1': 128, '2': 185, '3': 255 } });
                         const pixel2 = readPixel(canvas, canvas.width / 2, canvas.height / 2 + 250);
-                        expect(pixel2).to.be.eql({ data: {'0': 92, '1': 90, '2': 77, '3': 255 } });
+                        expect(pixel2).to.be.eql({ data: {'0': 125, '1': 115, '2': 95, '3': 255 } });
                         done();
                     });
                 });