adaption of gl renderer for VectorTileLayer and Vector3DLayer

Author: fuzhenn

debug/terrain.html

@@ -127,8 +127,6 @@
             //mapbox服务
             debug: true,
             type: 'mapbox',
-            tileSize: 256,
-
             urlTemplate: 'https://{s}.tiles.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoibWFwYm94LWdsLWpzIiwiYSI6ImNram9ybGI1ajExYjQyeGxlemppb2pwYjIifQ.LGy5UGNIsXUZdYMvfYRiAQ',
             // urlTemplate: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1Ijoidmhhd2siLCJhIjoiY2xmbWpqOXBoMGNmZDN2cjJwZXk0MXBzZiJ9.192VNPJG0VV9dGOCOX1gUw',
             // urlTemplate: 'https://osm-tiles.ams3.cdn.digitaloceanspaces.com/elevation/{z}/{x}/{y}.png',

packages/layer-3dtiles/src/layer/renderer/TileMeshPainter.js

@@ -803,7 +803,8 @@ export default class TileMeshPainter {
             instanceBuffers[p] = {
                 buffer: this._regl.buffer({
                     dimension: instanceData[p].length / instanceCount,
-                    data: instanceData[p]
+                    data: instanceData[p],
+                    name: p
                 }),
                 divisor: 1
             };
@@ -1447,7 +1448,7 @@ export default class TileMeshPainter {
         }
         const attrs = {};
         for (const p in attributes) {
-            const buffer = getUniqueREGLBuffer(this._regl, attributes[p], { dimension: attributes[p].itemSize });
+            const buffer = getUniqueREGLBuffer(this._regl, attributes[p], { dimension: attributes[p].itemSize, name: p });
             // 优先采用 attributeSemantics中定义的属性
             const name = attributeSemantics[p] || p;
             attrs[name] = extend({}, attributes[p]);

packages/vt/src/layer/renderer/VectorTileLayerRenderer.js

@@ -248,20 +248,11 @@ class VectorTileLayerRenderer extends maptalks.renderer.TileLayerCanvasRenderer
         return !!inGroup;
     }
 
-    createContext() {
-        const inGroup = this.canvas.gl && this.canvas.gl.wrap;
-        if (inGroup) {
-            this.gl = this.canvas.gl.wrap();
-            this.regl = this.canvas.gl.regl;
-        } else {
-            const { gl, regl, attributes } = this._createREGLContext(this.canvas);
-            this.gl = gl;
-            this.regl = regl;
-            this.glOptions = attributes;
-        }
-        if (inGroup) {
-            this.canvas.pickingFBO = this.canvas.pickingFBO || this.regl.framebuffer(this.canvas.width, this.canvas.height);
-        }
+    initContext() {
+        const { regl, reglGL } = this.context;
+        this.regl = regl;
+        this.gl = reglGL;
+        this.canvas.pickingFBO = this.canvas.pickingFBO || this.regl.framebuffer(this.canvas.width, this.canvas.height);
         this.pickingFBO = this.canvas.pickingFBO || this.regl.framebuffer(this.canvas.width, this.canvas.height);
         this._debugPainter = new DebugPainter(this.regl, this.getMap());
         this._prepareWorker();
@@ -326,19 +317,6 @@ class VectorTileLayerRenderer extends maptalks.renderer.TileLayerCanvasRenderer
         this._workerCacheIndex++;
     }
 
-    clearCanvas() {
-        super.clearCanvas();
-        if (!this.regl) {
-            return;
-        }
-        //这里必须通过regl来clear，如果直接调用webgl context的clear，则brdf的texture会被设为0
-        this.regl.clear({
-            color: CLEAR_COLOR,
-            depth: 1,
-            stencil: 0
-        });
-    }
-
     isDrawable() {
         return true;
     }
@@ -1611,6 +1589,8 @@ class VectorTileLayerRenderer extends maptalks.renderer.TileLayerCanvasRenderer
             this._groundPainter.dispose();
             delete this._groundPainter;
         }
+        delete this.gl;
+        delete this.regl;
         if (super.onRemove) super.onRemove();
         this._clearPlugin();
     }
@@ -2006,8 +1986,7 @@ class VectorTileLayerRenderer extends maptalks.renderer.TileLayerCanvasRenderer
 
     _getLayerOpacity() {
         const layerOpacity = this.layer.options['opacity'];
-        // 不在GroupGLLayer中时，MapCanvasRenderer会读取opacity并按照透明度绘制，所以layerOpacity设成1
-        return this._isInGroupGLLayer() ? (isNil(layerOpacity) ? 1 : layerOpacity) : 1;
+        return (isNil(layerOpacity) ? 1 : layerOpacity);
     }
 }
 

packages/vt/src/layer/vector/Vector3DLayerRenderer.js

@@ -1530,19 +1530,6 @@ class Vector3DLayerRenderer extends maptalks.renderer.CanvasRenderer {
         /* eslint-enable no-empty */
     }
 
-    clearCanvas() {
-        super.clearCanvas();
-        if (!this.regl) {
-            return;
-        }
-        //这里必须通过regl来clear，如果直接调用webgl context的clear，则brdf的texture会被设为0
-        this.regl.clear({
-            color: [0, 0, 0, 0],
-            depth: 1,
-            stencil: 0xFF
-        });
-    }
-
     resizeCanvas(canvasSize) {
         super.resizeCanvas(canvasSize);
         const canvas = this.canvas;
@@ -1654,8 +1641,7 @@ class Vector3DLayerRenderer extends maptalks.renderer.CanvasRenderer {
 
     _getLayerOpacity() {
         const layerOpacity = this.layer.options['opacity'];
-        // 不在GroupGLLayer中时，MapCanvasRenderer会读取opacity并按照透明度绘制，所以layerOpacity设成1
-        return this._isInGroupGLLayer() ? (isNil(layerOpacity) ? 1 : layerOpacity) : 1;
+        return (isNil(layerOpacity) ? 1 : layerOpacity);
     }
 }