From c6b126e155f4e67b3986f71854edebe13950ead6 Mon Sep 17 00:00:00 2001
From: Muck van Weerdenburg <muck@mweerden.net>
Date: Tue, 1 Feb 2022 08:31:52 +0100
Subject: [PATCH 1/6] shared-webgl-context: original patch from experimentation

---
 src/core/LayerGL.js | 51 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/core/LayerGL.js b/src/core/LayerGL.js
index 484fc40c..a02f6ea3 100644
--- a/src/core/LayerGL.js
+++ b/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,16 @@ var LayerGL = function (id, zr) {
      * @type {clay.Renderer}
      */
     try {
-        this.renderer = new Renderer({
-            clearBit: 0,
-            devicePixelRatio: zr.painter.dpr,
-            preserveDrawingBuffer: true,
-            // PENDING
-            premultipliedAlpha: true
-        });
+        if (!_LayerGL_global_renderer) {
+                _LayerGL_global_renderer = new src_Renderer({
+                    clearBit: 0,
+                    devicePixelRatio: zr.painter.dpr,
+                    preserveDrawingBuffer: true,
+                    // PENDING
+                    premultipliedAlpha: true
+                });
+        }
+        this.renderer = _LayerGL_global_renderer;
         this.renderer.resize(zr.painter.getWidth(), zr.painter.getHeight());
     }
     catch (e) {
@@ -71,7 +76,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';
@@ -182,6 +192,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;
 };
 
 /**
@@ -189,6 +204,21 @@ LayerGL.prototype.resize = function (width, height) {
  * @return {[type]} [description]
  */
 LayerGL.prototype.clear = function () {
+    if (this.renderer.gl.isContextLost()) {
+        console.log('context lost, recreating renderer')
+	if (_LayerGL_global_renderer.gl.isContextLost()) {
+            this.renderer = new Renderer({
+              clearBit: 0,
+              devicePixelRatio: this.zr.painter.dpr,
+              preserveDrawingBuffer: true,
+              // PENDING
+              premultipliedAlpha: true
+            });
+        }
+        this.renderer = _LayerGL_global_renderer;
+    }
+    this.renderer.resize(this.zr.painter.getWidth(), this.zr.painter.getHeight());
+
     var gl = this.renderer.gl;
     var clearColor = this._backgroundColor || [0, 0, 0, 0];
     gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
@@ -261,6 +291,9 @@ LayerGL.prototype._doRender = function (accumulating) {
         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 +708,4 @@ LayerGL.prototype._dispatchToView = function (eventName, e) {
 
 Object.assign(LayerGL.prototype, notifier);
 
-export default LayerGL;
\ No newline at end of file
+export default LayerGL;

From a3f12863cf24e1dcc020c743b15789154008fb3d Mon Sep 17 00:00:00 2001
From: Muck van Weerdenburg <muck@mweerden.net>
Date: Tue, 1 Feb 2022 08:33:34 +0100
Subject: [PATCH 2/6] shared-webgl-context: clean up patch, correct
 src_Renderer -> Renderer

---
 src/core/LayerGL.js | 47 +++++++++++++++++++++------------------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/core/LayerGL.js b/src/core/LayerGL.js
index a02f6ea3..e850dd3c 100644
--- a/src/core/LayerGL.js
+++ b/src/core/LayerGL.js
@@ -46,16 +46,7 @@ var LayerGL = function (id, zr) {
      * @type {clay.Renderer}
      */
     try {
-        if (!_LayerGL_global_renderer) {
-                _LayerGL_global_renderer = new src_Renderer({
-                    clearBit: 0,
-                    devicePixelRatio: zr.painter.dpr,
-                    preserveDrawingBuffer: true,
-                    // PENDING
-                    premultipliedAlpha: true
-                });
-        }
-        this.renderer = _LayerGL_global_renderer;
+        this.resetRenderer();
         this.renderer.resize(zr.painter.getWidth(), zr.painter.getHeight());
     }
     catch (e) {
@@ -114,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 () {};
 
 /**
@@ -204,21 +209,6 @@ LayerGL.prototype.resize = function (width, height) {
  * @return {[type]} [description]
  */
 LayerGL.prototype.clear = function () {
-    if (this.renderer.gl.isContextLost()) {
-        console.log('context lost, recreating renderer')
-	if (_LayerGL_global_renderer.gl.isContextLost()) {
-            this.renderer = new Renderer({
-              clearBit: 0,
-              devicePixelRatio: this.zr.painter.dpr,
-              preserveDrawingBuffer: true,
-              // PENDING
-              premultipliedAlpha: true
-            });
-        }
-        this.renderer = _LayerGL_global_renderer;
-    }
-    this.renderer.resize(this.zr.painter.getWidth(), this.zr.painter.getHeight());
-
     var gl = this.renderer.gl;
     var clearColor = this._backgroundColor || [0, 0, 0, 0];
     gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
@@ -255,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;

From abe3acc39fdd98fe48907741eb7e94c363754774 Mon Sep 17 00:00:00 2001
From: Muck van Weerdenburg <muck@mweerden.net>
Date: Tue, 1 Feb 2022 08:34:55 +0100
Subject: [PATCH 3/6] shared-webgl-context: fix for render after accumulating
 where other plots could affect the background color

---
 src/core/LayerGL.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/core/LayerGL.js b/src/core/LayerGL.js
index e850dd3c..e6dcdd44 100644
--- a/src/core/LayerGL.js
+++ b/src/core/LayerGL.js
@@ -282,6 +282,14 @@ LayerGL.prototype.renderToCanvas = function (ctx) {
 };
 
 LayerGL.prototype._doRender = function (accumulating) {
+    if (this.renderer.gl.isContextLost()) {
+        console.log('context lost, resetting renderer')
+        this.resetRenderer();
+    }
+
+    // Needed in case we are not directly called from render()
+    this.renderer.clearColor = this._backgroundColor;
+
     this.clear();
     this.renderer.saveViewport();
     for (var i = 0; i < this.views.length; i++) {

From c891309dfe2741d5d9f62060e628dc7c5eafec02 Mon Sep 17 00:00:00 2001
From: Muck van Weerdenburg <muck@mweerden.net>
Date: Tue, 1 Feb 2022 08:35:54 +0100
Subject: [PATCH 4/6] shared-webgl-context: fix context being lost during
 accumulation; have to rerender completely

---
 src/core/LayerGL.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/core/LayerGL.js b/src/core/LayerGL.js
index e6dcdd44..44557057 100644
--- a/src/core/LayerGL.js
+++ b/src/core/LayerGL.js
@@ -283,12 +283,17 @@ LayerGL.prototype.renderToCanvas = function (ctx) {
 
 LayerGL.prototype._doRender = function (accumulating) {
     if (this.renderer.gl.isContextLost()) {
-        console.log('context lost, resetting renderer')
+        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();

From 33edb15fe78c4d4274caa5788687bc6ed0453f7a Mon Sep 17 00:00:00 2001
From: Muck van Weerdenburg <muck@mweerden.net>
Date: Tue, 1 Feb 2022 08:37:22 +0100
Subject: [PATCH 5/6] shared-webgl-context: quick fix for flowGL animation

---
 src/chart/flowGL/FlowGLView.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/chart/flowGL/FlowGLView.js b/src/chart/flowGL/FlowGLView.js
index f8a78b59..37ab15c2 100644
--- a/src/chart/flowGL/FlowGLView.js
+++ b/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) {

From 69b31512d249c56f9438032b12fd3ea9473d167a Mon Sep 17 00:00:00 2001
From: Muck van Weerdenburg <muck@mweerden.net>
Date: Tue, 1 Feb 2022 08:38:17 +0100
Subject: [PATCH 6/6] shared-webgl-context: added test case with multiple plots
 and controls to trigger lost contexts

---
 test/multi.html | 413 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 413 insertions(+)
 create mode 100644 test/multi.html

diff --git a/test/multi.html b/test/multi.html
new file mode 100644
index 00000000..30406c55
--- /dev/null
+++ b/test/multi.html
@@ -0,0 +1,413 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Multiple plots - ECHARTS-GL</title>
+        <script src="../node_modules/echarts/dist/echarts.js"></script>
+        <script src="../dist/echarts-gl.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/simplex.js"></script>
+    </head>
+    <body>
+        <div id="ui">
+            <input type="text" id="width" value="400"> x <input type="text" id="height" value="400">
+            <button onclick="resize_plots();">Resize</button>
+            <button onclick="trigger_context_lost();">Trigger context lost</button>
+        </div>
+        <div id="plots"></div>
+        <script>
+
+            function trigger_context_lost() {
+                Array.from(Array(16), () => document.createElement('canvas').getContext('webgl'));
+            }
+
+
+
+            function create_flow_plot(div) {
+                var chart = echarts.init(div);
+
+                var noise = new SimplexNoise(Math.random);
+                var noise2 = new SimplexNoise(Math.random);
+                function generateData() {
+                    var data = [];
+                    for (var i = 0; i <= 50; i++) {
+                        for (var j = 0; j <= 50; j++) {
+                            var dx = noise.noise2D(i / 30, j / 30);
+                            var dy = noise2.noise2D(i / 30, j / 30);
+                            var mag = Math.sqrt(dx * dx + dy * dy);
+                            valMax = Math.max(valMax, mag);
+                            valMin = Math.min(valMin, mag);
+                            data.push([i, j, dx, dy, mag]);
+                        }
+                    }
+                    return data;
+                }
+                var valMin = Infinity;
+                var valMax = -Infinity;
+                var data = generateData();
+
+                chart.setOption({
+                    visualMap: {
+                        show: false,
+                        min: valMin,
+                        max: valMax,
+                        dimension: 4,
+                        inRange: {
+                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+                        }
+                    },
+                    xAxis: {
+                        type: 'value',
+                        axisLine: {
+                            lineStyle: {
+                                color: '#000'
+                            }
+                        },
+                        splitLine: {
+                            show: false,
+                            lineStyle: {
+                                color: 'rgba(0,0,0,0.2)'
+                            }
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLine: {
+                            lineStyle: {
+                                color: '#000'
+                            }
+                        },
+                        splitLine: {
+                            show: false,
+                            lineStyle: {
+                                color: 'rgba(0,0,0,0.2)'
+                            }
+                        }
+                    },
+                    series: [{
+                        type: 'flowGL',
+                        data: data,
+                        particleDensity: 64,
+                        particleSize: 5,
+                        itemStyle: {
+                            opacity: 0.5
+                        }
+                    }, {
+                        type: 'custom',
+                        data: data,
+                        encode: {
+                            x: 0,
+                            y: 0
+                        },
+                        renderItem: function (params, api) {
+                            var x = api.value(0), y = api.value(1), dx = api.value(2), dy = api.value(3);
+                            var start = api.coord([x - dx / 2, y - dy / 2]);
+                            var end = api.coord([x + dx / 2, y + dy / 2]);
+                            return {
+                                type: 'line',
+                                shape: {
+                                    x1: start[0], y1: start[1],
+                                    x2: end[0], y2: end[1]
+                                },
+                                style: {
+                                    lineWidth: 2,
+                                    stroke:'#000'
+                                }
+                            }
+                        }
+                    }]
+                });
+
+                return chart;
+            }
+
+
+
+            function create_scatter_plot(div) {
+                var chart = echarts.init(div);
+                $.getJSON('data/masterPainterColorChoice.json', function (json) {
+
+                    var data = json[0].x.map(function (x, idx) {
+                        return [+x, +json[0].y[idx]];
+                    });
+
+                    chart.setOption({
+                        backgroundColor: '#fff',
+                        title: {
+                            text: 'Master Painter Color Choices Throughout History',
+                            subtext: 'Data From Plot.ly',
+                            x: 'right'
+                        },
+                        tooltip: {
+                            trigger: 'axis',
+                            axisPointer: {
+                                type: 'cross'
+                            }
+                        },
+                        xAxis: {
+                            type: 'value',
+                            splitLine: {
+                                show: false
+                            },
+                            scale: true,
+                            splitNumber: 5,
+                            axisLabel: {
+                                formatter: function (val) {
+                                    return val + 's';
+                                }
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            min: 0,
+                            max: 360,
+                            splitNumber: 6,
+                            name: 'Hue',
+                            splitLine: {
+                                show: false
+                            }
+                        },
+                        series: [{
+                            type: 'scatterGL',
+                            symbolSize: function (val, param) {
+                                return json[0].marker.size[param.dataIndex] / json[0].marker.sizeref;
+                            },
+                            itemStyle: {
+                                opacity: 0.5,
+                                borderColor: '#000',
+                                borderWidth: 1,
+                                color: function (param) {
+                                    return json[0].marker.color[param.dataIndex];
+                                }
+                            },
+                            data: data
+                        }]
+                    });
+                });
+
+                return chart;
+            }
+
+
+
+            function create_surface_plot(div) {
+                var chart = echarts.init(div);
+
+                chart.setOption({
+                    backgroundColor: '#fff',
+                    xAxis3D: {},
+                    yAxis3D: {},
+                    zAxis3D: {},
+                    grid3D: {
+                        light: {
+                            main: {
+                                intensity: 0.7,
+                                shadow: true
+                            }
+                        },
+                        viewControl: {
+                        }
+                    },
+                    series: [{
+                        type: 'surface',
+                        shading: 'lambert',
+                        lambertMaterial: {
+                            detailTexture: 'asset/woods.jpg',
+                            // textureTiling: 4
+                        },
+                        wireframe: {
+                            show: true
+                        },
+                        itemStyle: {
+                            color: '#fff'
+                        },
+                        equation: {
+                            x: {
+                                step: 0.05
+                            },
+                            y: {
+                                step: 0.05
+                            },
+                            z: function (x, y) {
+                                if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
+                                    return '-';
+                                }
+                                return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
+                            }
+                        }
+                    }]
+                });
+
+                return chart;
+            }
+
+
+
+            function create_metal_plot(div) {
+                var chart = echarts.init(div);
+
+                var sin = Math.sin;
+                var cos = Math.cos;
+                var pow = Math.pow;
+                var sqrt = Math.sqrt;
+                var cosh = Math.cosh;
+                var sinh = Math.sinh;
+                var PI = Math.PI;
+
+                var aa = 0.4;
+                var r = 1 - aa * aa;
+                var w = sqrt(r);
+
+                var config = {
+                    aa: aa
+                };
+
+                function getParametricEquation() {
+                    return {
+                        u: {
+                            min: -13.2,
+                            max: 13.2,
+                            step: 0.4
+                        },
+                        v: {
+                            min: -37.4,
+                            max: 37.4,
+                            step: 0.4
+                        },
+                        x: function (u, v) {
+                            var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
+                            return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom);
+                        },
+                        y: function (u, v) {
+                            var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
+                            return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom;
+                        },
+                        z: function (u, v) {
+                            var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
+                            return  2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom
+                        }
+                    };
+                }
+
+                chart.setOption({
+                    toolbox: {
+                        feature: {
+                            saveAsImage: {
+                                backgroundColor: '#111'
+                            }
+                        },
+                        iconStyle: {
+                            normal: {
+                                borderColor: '#fff'
+                            }
+                        },
+                        left: 0
+                    },
+                    xAxis3D: {
+                        type: 'value'
+                    },
+                    yAxis3D: {
+                        type: 'value'
+                    },
+                    zAxis3D: {
+                        type: 'value'
+                    },
+                    grid3D: {
+
+                        environment: 'none',
+
+                        axisPointer: {
+                            show: false
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#fff'
+                            }
+                        },
+                        postEffect: {
+                            enable: true,
+                            screenSpaceAmbientOcclusion: {
+                                enable: true,
+                                radius: 4,
+                                intensity: 2
+                            }
+                        },
+                        temporalSuperSampling: {
+                            enable: true
+                        },
+                        light: {
+                            main: {
+                                intensity: 0
+                            },
+                            ambient: {
+                                intensity: 0
+                            },
+                            ambientCubemap: {
+                                texture: 'asset/pisa.hdr',
+                                exposure: 1,
+                                diffuseIntensity: 1,
+                                specularIntensity: 2
+                            }
+                        },
+                        viewControl: {
+                            // projection: 'orthographic'
+                        }
+                    },
+                    series: [{
+                        type: 'surface',
+                        parametric: true,
+                        shading: 'realistic',
+                        silent: true,
+                        wireframe: {
+                            show: false
+                        },
+                        realisticMaterial: {
+                            roughness: 0.3,
+                            metalness: 1
+                        },
+                        itemStyle: {
+                            color: '#aaa'
+                        },
+                        parametricEquation: getParametricEquation()
+                    }]
+                });
+
+                return chart;
+            }
+
+
+
+            var divs = []
+            var plots = []
+            function add_plot(constructor) {
+                var div = document.createElement('div');
+                div.style.width = '400px';
+                div.style.height = '400px';
+                div.style.float = 'left';
+                document.getElementById('plots').appendChild(div);
+                divs.push(div);
+                plots.push(constructor(div));
+            }
+
+            function resize_plots() {
+                var width = document.getElementById('width').value;
+                var height = document.getElementById('height').value;
+                for (var i = 0; i < divs.length; i++) {
+                    divs[i].style.width = width + 'px';
+                    divs[i].style.height = height + 'px';
+                    plots[i].resize(width, height);
+                }
+            }
+
+
+
+            add_plot(create_flow_plot);
+            add_plot(create_metal_plot);
+            add_plot(create_surface_plot);
+            add_plot(create_scatter_plot);
+            add_plot(create_flow_plot);
+            add_plot(create_metal_plot);
+
+        </script>
+    </body>
+</html>