fix maptalks/issues#790, maptalks/issues#791

Author: fuzhenn

packages/gl/src/layer/mask/Mask.js

@@ -184,7 +184,7 @@ export default class Mask extends Polygon {
         for (let i = 1; i < coordinates.length - 1; i++) {
             const point1 = map.coordToPointAtRes(coordinates[i], glRes, TEMP_POINT1);
             const point2 = map.coordToPointAtRes(coordinates[i + 1], glRes, TEMP_POINT2);
-            area += Math.abs(det(point0, point1, point2)) / 2;
+            area += det(point0, point1, point2) / 2;
         }
         return area;
     }

packages/layer-gltf/test/AddMaskSpec.js

@@ -176,6 +176,36 @@ describe('setMask', () => {
         gltflayer.setMask(mask);
     });
 
+    it('transparent color mask(issues/791)', done => {
+        const gltflayer = new maptalks.GLTFLayer('gltf');
+        const marker = new maptalks.GLTFGeometry(center, {
+            symbol: {
+                url: url4,
+                scaleX: 60,
+                scaleY: 60,
+                scaleZ: 60
+            }
+        }).addTo(gltflayer);
+        marker.once('load', () => {
+            setTimeout(function() {
+                const pixel1 = pickPixel(map, map.width / 2, map.height / 2, 1, 1);
+                expect(pixelMatch([9, 14, 15, 255], pixel1)).to.be.eql(true);
+                const pixel2 = pickPixel(map, map.width / 2 + 100, map.height / 2, 1, 1);
+                expect(pixelMatch([0, 0, 0, 0], pixel2)).to.be.eql(true);
+                done();
+            }, 100);
+        });
+        const symbol = {
+            polygonFill: "#0f0",
+            polygonOpacity: 0
+        }
+        new maptalks.GroupGLLayer('gl', [gltflayer], { sceneConfig }).addTo(map);
+        const mask = new maptalks.ColorMask(coord1, {
+            symbol
+        });
+        gltflayer.setMask(mask);
+    });
+
     it('clear mask', done => {//TODO 做像素判断
         const gltflayer = new maptalks.GLTFLayer('gltf');
         const marker = new maptalks.GLTFGeometry(center, {
@@ -581,9 +611,9 @@ describe('setMask', () => {
                 expect(resultsInHole[0].data instanceof maptalks.GLTFMarker).to.be.eql(true);
 
                 const resultsOutHole = gltflayer.identify(center.add(0.00043980278442308, 0));
-                expect(resultsOutHole.length).to.be.eql(2);
-                expect(resultsOutHole[0] instanceof maptalks.ColorMask).to.be.eql(true);
-                expect(resultsOutHole[1].data instanceof maptalks.GLTFMarker).to.be.eql(true);
+                expect(resultsOutHole.length).to.be.eql(1);
+                expect(resultsOutHole[0] instanceof maptalks.ColorMask).to.be.eql(false);
+                expect(resultsOutHole[0].data instanceof maptalks.GLTFMarker).to.be.eql(true);
                 done();
             }, 100);
         });

packages/layer-gltf/test/FixBugSpec.js

@@ -42,9 +42,9 @@ describe('bug', () => {
         marker.setScale(20, 20, 20);
         marker.on('load', () => {
             setTimeout(function() {
-                const expectMatrix = maptalksgl.mat4.fromValues(10.000000000000002, 0, -17.32050807568877, 0, 0, 20, 0, 0, 17.32050807568877, 0, 10.000000000000002, 0, 0.13082664542728, 0.1308266454209729, 0.1707822812928094, 1);
+                const expectMatrix = maptalks.mat4.fromValues(10.000000000000002, 0, -17.32050807568877, 0, 0, 20, 0, 0, 17.32050807568877, 0, 10.000000000000002, 0, 0.13082664542728, 0.1308266454209729, 0.1707822812928094, 1);
                 const modelMatrix = marker.getModelMatrix();
-                expect(maptalksgl.mat4.equals(expectMatrix, modelMatrix)).to.be.ok();
+                expect(maptalks.mat4.equals(expectMatrix, modelMatrix)).to.be.ok();
                 done();
             }, 100);
         });
@@ -931,8 +931,8 @@ describe('bug', () => {
         gltflayer.on('modelload', () => {
             const mesh = marker.getMeshes()[0];
             const copyMesh = marker.getMeshes()[0];
-            const scale1 = maptalksgl.mat4.getScaling([], mesh.localTransform);
-            const scale2 = maptalksgl.mat4.getScaling([], copyMesh.localTransform);
+            const scale1 = maptalks.mat4.getScaling([], mesh.localTransform);
+            const scale2 = maptalks.mat4.getScaling([], copyMesh.localTransform);
             expect(scale1).to.be.eql(scale2);
             done();
         });

packages/layer-gltf/test/GLTFLayerSpec.js

@@ -58,7 +58,7 @@ describe('maptalks.gltf', function () {
                 const mesh2 = marker2.getMeshes(null, null, 100)[0];
                 const localTransform1 = mesh1.localTransform;
                 const localTransform2 = mesh2.localTransform;
-                expect(maptalksgl.mat4.equals(localTransform1, localTransform2)).not.to.be.ok();
+                expect(maptalks.mat4.equals(localTransform1, localTransform2)).not.to.be.ok();
                 done();
             }, 200);
         });
@@ -557,9 +557,9 @@ describe('maptalks.gltf', function () {
         const marker = new maptalks.GLTFGeometry([center.x, center.y, 0], { symbol: { url: url1 }});
         marker.on('load', () => {
             marker.setCoordinates([center.x + 0.1, center.y, 10]);
-            const expectMatrix = maptalksgl.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+            const expectMatrix = maptalks.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
             const modelMatrix = marker.getModelMatrix();
-            expect(maptalksgl.mat4.equals(expectMatrix, modelMatrix)).to.be.ok();
+            expect(maptalks.mat4.equals(expectMatrix, modelMatrix)).to.be.ok();
             done();
         });
         gltflayer.addGeometry(marker);

packages/reshader.gl/src/shader/glsl/maskColorExtent.frag

@@ -11,6 +11,9 @@ void main() {
         gl_FragColor = texture2D(maskTexture, uv);
         gl_FragColor.a = maskColor.a;
     #else
+        if (maskColor.a == 0.0) {
+            discard;
+        }
         gl_FragColor = maskColor;
     #endif
 }