Shared WebGL-context implementation to partially fix ecomfe/echarts-gl#439

src/chart/flowGL/FlowGLView.js

@@ -64,6 +64,9 @@ export default echarts.ChartView.extend({
                 __percent: 1
             })
             .during(function () {
+                if (self._renderer && self._renderer.gl.isContextLost()) {
+                    self._renderer = self._layerGL.renderer;
+                }
                 var timeNow = + (new Date());
                 var dTime = Math.min(timeNow - time, 20);
                 time = time + dTime;
@@ -94,6 +97,7 @@ export default echarts.ChartView.extend({
     afterRender: function (globeModel, ecModel, api, layerGL) {
         var renderer = layerGL.renderer;
         this._renderer = renderer;
+        this._layerGL = layerGL;
     },
 
     _updateData: function (seriesModel, api) {

src/core/LayerGL.js

@@ -21,6 +21,8 @@ import graphicGL from '../util/graphicGL';
 import notifier from 'claygl/src/core/mixin/notifier';
 import requestAnimationFrame from 'zrender/lib/animation/requestAnimationFrame';
 
+var _LayerGL_global_renderer = undefined;
+
 /**
  * @constructor
  * @alias module:echarts-gl/core/LayerGL
@@ -44,13 +46,7 @@ var LayerGL = function (id, zr) {
      * @type {clay.Renderer}
      */
     try {
-        this.renderer = new Renderer({
-            clearBit: 0,
-            devicePixelRatio: zr.painter.dpr,
-            preserveDrawingBuffer: true,
-            // PENDING
-            premultipliedAlpha: true
-        });
+        this.resetRenderer();
         this.renderer.resize(zr.painter.getWidth(), zr.painter.getHeight());
     }
     catch (e) {
@@ -71,7 +67,12 @@ var LayerGL = function (id, zr) {
      * Canvas dom for webgl rendering
      * @type {HTMLCanvasElement}
      */
-    this.dom = this.renderer.canvas;
+    this.dom = document.createElement('canvas');
+    this.domCanvasContext = this.dom.getContext('2d')
+    this.dom.style.width = this.renderer.canvas.style.width;
+    this.dom.style.height = this.renderer.canvas.style.height;
+    this.dom.width = this.renderer.canvas.width;
+    this.dom.height = this.renderer.canvas.height;
     var style = this.dom.style;
     style.position = 'absolute';
     style.left = '0';
@@ -104,6 +105,20 @@ var LayerGL = function (id, zr) {
     this._disposed = false;
 };
 
+LayerGL.prototype.resetRenderer = function () {
+    if (!_LayerGL_global_renderer || _LayerGL_global_renderer.gl.isContextLost()) {
+        console.log('creating new renderer')
+        _LayerGL_global_renderer = new Renderer({
+            clearBit: 0,
+            devicePixelRatio: this.zr.painter.dpr,
+            preserveDrawingBuffer: true,
+            // PENDING
+            premultipliedAlpha: true
+        });
+    }
+    this.renderer = _LayerGL_global_renderer;
+};
+
 LayerGL.prototype.setUnpainted = function () {};
 
 /**
@@ -182,6 +197,11 @@ LayerGL.prototype.removeViewsAll = function () {
 LayerGL.prototype.resize = function (width, height) {
     var renderer = this.renderer;
     renderer.resize(width, height);
+
+    this.dom.style.width = this.renderer.canvas.style.width;
+    this.dom.style.height = this.renderer.canvas.style.height;
+    this.dom.width = this.renderer.canvas.width;
+    this.dom.height = this.renderer.canvas.height;
 };
 
 /**
@@ -225,6 +245,13 @@ LayerGL.prototype.needsRefresh = function () {
  * Refresh the layer, will be invoked by zrender
  */
 LayerGL.prototype.refresh = function (bgColor) {
+    if (this.renderer.gl.isContextLost()) {
+        console.log('context lost, resetting renderer')
+        this.resetRenderer();
+    }
+
+    // make sure global renderer canvas size matches this layer
+    this.renderer.resize(this.zr.painter.getWidth(), this.zr.painter.getHeight());
 
     this._backgroundColor = bgColor ? graphicGL.parseColor(bgColor) : [0, 0, 0, 0];
     this.renderer.clearColor = this._backgroundColor;
@@ -255,12 +282,28 @@ LayerGL.prototype.renderToCanvas = function (ctx) {
 };
 
 LayerGL.prototype._doRender = function (accumulating) {
+    if (this.renderer.gl.isContextLost()) {
+        console.log('context lost, resetting renderer and refreshing')
+        this.resetRenderer();
+
+        // Context lost in the "middle" of rendering/accumulating; trigger full rerender
+        this.needsRefresh();
+        return;
+    }
+
+    // Needed in case we are not directly called from render()
+    this.renderer.clearColor = this._backgroundColor;
+    this.renderer.resize(this.zr.painter.getWidth(), this.zr.painter.getHeight());
+
     this.clear();
     this.renderer.saveViewport();
     for (var i = 0; i < this.views.length; i++) {
         this.views[i].render(this.renderer, accumulating);
     }
     this.renderer.restoreViewport();
+
+    this.domCanvasContext.clearRect(0,0,this.dom.width,this.dom.height)
+    this.domCanvasContext.drawImage(this.renderer.canvas, 0, 0, this.renderer.canvas.width, this.renderer.canvas.height);
 };
 
 /**
@@ -675,4 +718,4 @@ LayerGL.prototype._dispatchToView = function (eventName, e) {
 
 Object.assign(LayerGL.prototype, notifier);
 
-export default LayerGL;
+export default LayerGL;