vislite 0.8.0 → 1.0.0-next.0

package/lib/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.8.0
+* VISLite JavaScript Library v1.0.0-next.0
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Sat Mar 02 2024 12:41:38 GMT+0800 (中国标准时间)
+* Publish Date:  Wed Mar 27 2024 19:32:09 GMT+0800 (中国标准时间)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -256,7 +256,7 @@
         ];
     }
 
-    function scale$1 (cx, cy, times, x, y) {
+    function scale (cx, cy, times, x, y) {
         return [
             times * (x - cx) + cx,
             times * (y - cy) + cy
@@ -299,46 +299,6 @@
         return colors;
     }
 
-    var toHex = function (value) {
-        var hex = value.toString(16);
-        return hex.length == 1 ? ("0" + hex) : hex;
-    };
-    function formatColor (color, format) {
-        var colorNode = document.getElementsByTagName('head')[0];
-        colorNode.style['color'] = color;
-        var allStyle = document.defaultView && document.defaultView.getComputedStyle ?
-            document.defaultView.getComputedStyle(colorNode, null) :
-            colorNode.currentStyle;
-        var oralFormat = allStyle.getPropertyValue('color').replace(/rgba?\(/, '').replace(")", "").split(',');
-        for (var index = 0; index < oralFormat.length; index++) {
-            oralFormat[index] = +oralFormat[index];
-        }
-        oralFormat.push(1);
-        switch (format) {
-            case "3d": {
-                return [
-                    oralFormat[0] / 255,
-                    oralFormat[1] / 255,
-                    oralFormat[2] / 255,
-                    oralFormat[3]
-                ];
-            }
-            case "rgba": {
-                return "rgba(".concat(oralFormat[0], ", ").concat(oralFormat[1], ", ").concat(oralFormat[2], ", ").concat(oralFormat[3], ")");
-            }
-            case "rgb": {
-                return "rgb(".concat(oralFormat[0], ", ").concat(oralFormat[1], ", ").concat(oralFormat[2], ")");
-            }
-            case "hexAlpha": {
-                return "#".concat(toHex(oralFormat[0])).concat(toHex(oralFormat[1])).concat(toHex(oralFormat[2])).concat(toHex(+(oralFormat[3] * 255).toFixed(0)));
-            }
-            case "hex": {
-                return "#".concat(toHex(oralFormat[0])).concat(toHex(oralFormat[1])).concat(toHex(oralFormat[2]));
-            }
-        }
-        throw new Error("Unsupported color format: " + format);
-    }
-
     var $timers = [];
     var $interval = 13;
     var $timerId;
@@ -581,16 +541,6 @@
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     }
 
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-            if (ar || !(i in from)) {
-                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-                ar[i] = from[i];
-            }
-        }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-
     typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
         var e = new Error(message);
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -772,23 +722,14 @@
         });
     };
 
-    var linearGradient$1 = function (el, x0, y0, x1, y1) {
-        var defs = initDefs(el);
-        var gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random();
-        var linearGradient = toNode("linearGradient");
-        defs.appendChild(linearGradient);
-        setAttribute(linearGradient, "id", gradientId);
-        setAttribute(linearGradient, "x1", x0 + "%");
-        setAttribute(linearGradient, "y1", y0 + "%");
-        setAttribute(linearGradient, "x2", x1 + "%");
-        setAttribute(linearGradient, "y2", y1 + "%");
+    var enhanceGradient$1 = function (gradient, gradientId) {
         var enhanceGradient = {
             "value": function () {
                 return "url(#" + gradientId + ")";
             },
             "setColor": function (stop, color) {
                 var stopEl = toNode("stop");
-                linearGradient.appendChild(stopEl);
+                gradient.appendChild(stopEl);
                 setAttribute(stopEl, "offset", (stop * 100) + "%");
                 setAttribute(stopEl, "style", "stop-color:" + color + ";");
                 return enhanceGradient;
@@ -796,6 +737,18 @@
         };
         return enhanceGradient;
     };
+    var linearGradient$1 = function (el, x0, y0, x1, y1) {
+        var defs = initDefs(el);
+        var gradientId = "vislite-lg-" + new Date().valueOf() + "-" + Math.random();
+        var linearGradient = toNode("linearGradient");
+        defs.appendChild(linearGradient);
+        setAttribute(linearGradient, "id", gradientId);
+        setAttribute(linearGradient, "x1", x0 + "%");
+        setAttribute(linearGradient, "y1", y0 + "%");
+        setAttribute(linearGradient, "x2", x1 + "%");
+        setAttribute(linearGradient, "y2", y1 + "%");
+        return enhanceGradient$1(linearGradient, gradientId);
+    };
     var radialGradient$1 = function (el, cx, cy, r) {
         var defs = initDefs(el);
         var gradientId = "vislite-rg-" + new Date().valueOf() + "-" + Math.random();
@@ -805,27 +758,9 @@
         setAttribute(radialGradient, "cx", cx + "%");
         setAttribute(radialGradient, "cy", cy + "%");
         setAttribute(radialGradient, "r", r + "%");
-        var enhanceGradient = {
-            "value": function () {
-                return "url(#" + gradientId + ")";
-            },
-            "setColor": function (stop, color) {
-                var stopEl = toNode("stop");
-                radialGradient.appendChild(stopEl);
-                setAttribute(stopEl, "offset", (stop * 100) + "%");
-                setAttribute(stopEl, "style", "stop-color:" + color + ";");
-                return enhanceGradient;
-            }
-        };
-        return enhanceGradient;
+        return enhanceGradient$1(radialGradient, gradientId);
     };
 
-    var oldAttrName$1 = {
-        "font-size": "fontSize",
-        "font-family": "fontFamily",
-        "arc-start-cap": "arcStartCap",
-        "arc-end-cap": "arcEndCap",
-    };
     var SVG$1 = (function () {
         function SVG(svg) {
             this.name = "SVG";
@@ -847,12 +782,11 @@
         }
         SVG.prototype.config = function (params) {
             if (typeof params !== "object") {
-                return this.__config[oldAttrName$1[params] || params];
+                return this.__config[params];
             }
             else {
                 for (var key in params) {
-                    var _key = oldAttrName$1[key] || key;
-                    this.__config[_key] = params[key];
+                    this.__config[key] = params[key];
                 }
             }
             return this;
@@ -1537,8 +1471,7 @@
         };
     }
 
-    var linearGradient = function (painter, x0, y0, x1, y1) {
-        var gradient = painter.createLinearGradient(x0, y0, x1, y1);
+    var enhanceGradient = function (gradient) {
         var enhanceGradient = {
             "value": function () {
                 return gradient;
@@ -1550,28 +1483,15 @@
         };
         return enhanceGradient;
     };
+    var linearGradient = function (painter, x0, y0, x1, y1) {
+        var gradient = painter.createLinearGradient(x0, y0, x1, y1);
+        return enhanceGradient(gradient);
+    };
     var radialGradient = function (painter, cx, cy, r) {
         var gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r);
-        var enhanceGradient = {
-            "value": function () {
-                return gradient;
-            },
-            "setColor": function (stop, color) {
-                gradient.addColorStop(stop, color);
-                return enhanceGradient;
-            }
-        };
-        return enhanceGradient;
+        return enhanceGradient(gradient);
     };
 
-    var oldAttrName = {
-        "font-size": "fontSize",
-        "font-family": "fontFamily",
-        "font-weight": "fontWeight",
-        "font-style": "fontStyle",
-        "arc-start-cap": "arcStartCap",
-        "arc-end-cap": "arcEndCap",
-    };
     var Canvas$1 = (function (_super) {
         __extends(Canvas, _super);
         function Canvas(ViewCanvas, RegionCanvas, opts, scaleSize) {
@@ -1589,8 +1509,7 @@
         }
         Canvas.prototype.config = function (configs) {
             for (var key in configs) {
-                var _key = oldAttrName[key] || key;
-                this.useConfig(_key, configs[key]);
+                this.useConfig(key, configs[key]);
             }
             return this;
         };
@@ -1794,54 +1713,64 @@
         return painter;
     }
 
-    function getColorFactory (painter) {
-        var width = painter.drawingBufferWidth, height = painter.drawingBufferHeight;
-        var pixels = new Uint8Array(4 * width * height);
-        painter.readPixels(0, 0, width, height, painter.RGBA, painter.UNSIGNED_BYTE, pixels);
-        return function (x, y) {
-            y = height - y;
-            var pixelR = pixels[4 * (y * width + x)];
-            var pixelG = pixels[4 * (y * width + x) + 1];
-            var pixelB = pixels[4 * (y * width + x) + 2];
-            var pixelA = pixels[4 * (y * width + x) + 3];
-            return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")";
-        };
-    }
+    var getWebGLContext = (function (el, scale, mode) {
+        if (scale === void 0) { scale = 1; }
+        if (!el) {
+            throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.");
+        }
+        var width = el.clientWidth, height = el.clientHeight;
+        var ViewCanvas;
+        var _el = el;
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_;
+        }
+        else {
+            ViewCanvas = document.createElement('canvas');
+            el.appendChild(ViewCanvas);
+            _el._vislite_canvas_ = ViewCanvas;
+            el.setAttribute('vislite', 'WebGL');
+        }
+        ViewCanvas.style.width = width + "px";
+        ViewCanvas.setAttribute('width', width + "");
+        ViewCanvas.style.height = height + "px";
+        ViewCanvas.setAttribute('height', height + "");
+        return getWebGLContext$1(ViewCanvas, scale, {}, mode);
+    });
 
-    var newBuffer = function (painter) {
-        return painter.createBuffer();
-    };
-    var writeBuffer = function (painter, data, isElement, usage) {
-        var TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER;
-        painter.bufferData(TYPE, data, usage);
+    var loadShader = function (painter, type, source) {
+        var shader = painter.createShader(type);
+        if (shader == null)
+            throw new Error('Unable to create shader!');
+        painter.shaderSource(shader, source);
+        painter.compileShader(shader);
+        if (!painter.getShaderParameter(shader, painter.COMPILE_STATUS))
+            throw new Error('Failed to compile shader:' + painter.getShaderInfoLog(shader));
+        return shader;
     };
-    var useBuffer = function (painter, location, size, type, stride, offset, normalized) {
-        painter.vertexAttribPointer(location, size, type, normalized, stride, offset);
-        painter.enableVertexAttribArray(location);
+    var useShader = function (painter, vshaderSource, fshaderSource) {
+        var vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource);
+        var fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource);
+        var glProgram = painter.createProgram();
+        painter.attachShader(glProgram, vertexShader);
+        painter.attachShader(glProgram, fragmentShader);
+        painter.linkProgram(glProgram);
+        if (!painter.getProgramParameter(glProgram, painter.LINK_STATUS))
+            throw new Error('Failed to link program: ' + painter.getProgramInfoLog(glProgram));
+        return glProgram;
     };
-    var BufferObject = (function () {
-        function BufferObject(painter, isElement) {
-            if (isElement === void 0) { isElement = false; }
+    var ShaderObject = (function () {
+        function ShaderObject(painter) {
             this.__painter = painter;
-            this.__isElement = isElement;
-            this.__buffer = newBuffer(painter);
-            this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER;
         }
-        BufferObject.prototype.use = function () {
-            this.__painter.bindBuffer(this.__type, this.__buffer);
-            return this;
-        };
-        BufferObject.prototype.write = function (data) {
-            writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW);
-            this.__fsize = data.BYTES_PER_ELEMENT;
+        ShaderObject.prototype.use = function () {
+            this.__painter.useProgram(this.program);
             return this;
         };
-        BufferObject.prototype.divide = function (location, size, stride, offset) {
-            if (offset === void 0) { offset = 0; }
-            useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false);
+        ShaderObject.prototype.compile = function (vshaderSource, fshaderSource) {
+            this.program = useShader(this.__painter, vshaderSource, fshaderSource);
             return this;
         };
-        return BufferObject;
+        return ShaderObject;
     }());
 
     var initTexture = function (painter, type, unit) {
@@ -1898,401 +1827,42 @@
         return TextureObject;
     }());
 
-    var textures = {};
-    function getTexture (type, painter, kind) {
-        var uniqueName = type + "-" + kind;
-        if (!textures[uniqueName]) {
-            textures[uniqueName] = new TextureObject(painter, kind);
-        }
-        return textures[uniqueName];
-    }
-
-    var loadShader = function (painter, type, source) {
-        var shader = painter.createShader(type);
-        if (shader == null)
-            throw new Error('Unable to create shader!');
-        painter.shaderSource(shader, source);
-        painter.compileShader(shader);
-        if (!painter.getShaderParameter(shader, painter.COMPILE_STATUS))
-            throw new Error('Failed to compile shader:' + painter.getShaderInfoLog(shader));
-        return shader;
+    var newBuffer = function (painter) {
+        return painter.createBuffer();
     };
-    var useShader = function (painter, vshaderSource, fshaderSource) {
-        var vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource);
-        var fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource);
-        var glProgram = painter.createProgram();
-        painter.attachShader(glProgram, vertexShader);
-        painter.attachShader(glProgram, fragmentShader);
-        painter.linkProgram(glProgram);
-        if (!painter.getProgramParameter(glProgram, painter.LINK_STATUS))
-            throw new Error('Failed to link program: ' + painter.getProgramInfoLog(glProgram));
-        return glProgram;
+    var writeBuffer = function (painter, data, isElement, usage) {
+        var TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER;
+        painter.bufferData(TYPE, data, usage);
     };
-    var ShaderObject = (function () {
-        function ShaderObject(painter) {
+    var useBuffer = function (painter, location, size, type, stride, offset, normalized) {
+        painter.vertexAttribPointer(location, size, type, normalized, stride, offset);
+        painter.enableVertexAttribArray(location);
+    };
+    var BufferObject = (function () {
+        function BufferObject(painter, isElement) {
+            if (isElement === void 0) { isElement = false; }
             this.__painter = painter;
+            this.__isElement = isElement;
+            this.__buffer = newBuffer(painter);
+            this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER;
         }
-        ShaderObject.prototype.use = function () {
-            this.__painter.useProgram(this.program);
-            return this;
-        };
-        ShaderObject.prototype.compile = function (vshaderSource, fshaderSource) {
-            this.program = useShader(this.__painter, vshaderSource, fshaderSource);
+        BufferObject.prototype.use = function () {
+            this.__painter.bindBuffer(this.__type, this.__buffer);
             return this;
         };
-        return ShaderObject;
-    }());
-
-    var vsColor = "attribute vec4 a_position;\nuniform mat4 u_matrix;\n\nvoid main()\n{\n    vec4 temp = u_matrix * a_position;\n\n    // 把原生的WebGL使用的左手坐标系变成了右手坐标系\n    temp.z = -1.0 * temp.z;\n\n    // 表示眼睛距离vec4(0.0,0.0,1.0)的距离\n    float dist = 4.0;\n\n    // 使用投影直接计算\n    // 为保证纹理和相对位置正确\n    // x、y、z的改变满足线性变换\n    gl_Position = vec4((dist + 1.0) * temp.x, (dist + 1.0) * temp.y, dist * (dist + temp.z) + 1.0 - dist * dist, temp.w * 2.0 * (dist + temp.z));\n}";
-
-    var vsColors = "attribute vec4 a_position;\nuniform mat4 u_matrix;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\nvoid main()\n{\n    vec4 temp = u_matrix * a_position;\n    temp.z = -1.0 * temp.z;\n    float dist = 4.0;\n    gl_Position = vec4((dist + 1.0) * temp.x, (dist + 1.0) * temp.y, dist * (dist + temp.z) + 1.0 - dist * dist, temp.w * 2.0 * (dist + temp.z));\n\n    v_color = a_color;\n}";
-
-    var vsImage = "attribute vec4 a_position;\nuniform mat4 u_matrix;\nattribute vec2 a_textcoord;\nvarying vec2 v_textcoord;\n\nvoid main()\n{\n    vec4 temp = u_matrix * a_position;\n    temp.z = -1.0 * temp.z;\n    float dist = 4.0;\n    gl_Position = vec4((dist + 1.0) * temp.x, (dist + 1.0) * temp.y, dist * (dist + temp.z) + 1.0 - dist * dist, temp.w * 2.0 * (dist + temp.z));\n\n    v_textcoord = a_textcoord;\n}";
-
-    var vsCube = "attribute vec4 a_position;\nuniform mat4 u_matrix;\nattribute vec4 a_normal;\nvarying vec3 v_normal;\n\nvoid main()\n{\n    vec4 temp = u_matrix * a_position;\n    temp.z = -1.0 * temp.z;\n    float dist = 4.0;\n    gl_Position = vec4((dist + 1.0) * temp.x, (dist + 1.0) * temp.y, dist * (dist + temp.z) + 1.0 - dist * dist, temp.w * 2.0 * (dist + temp.z));\n\n    v_normal = normalize(vec3(a_normal));\n}";
-
-    var fsColor = "precision mediump float;\n\nuniform vec4 u_color;\n\nvoid main()\n{\n    gl_FragColor = u_color;\n}";
-
-    var fsColors = "precision mediump float;\n\nvarying vec4 v_color;\n\nvoid main()\n{\n    gl_FragColor = v_color;\n}";
-
-    var fsImage = "precision mediump float;\n\nuniform sampler2D u_sampler;\nvarying vec2 v_textcoord;\n\nvoid main()\n{\n    gl_FragColor = texture2D(u_sampler, v_textcoord);\n}";
-
-    var fsCube = "precision mediump float;\n\nvarying vec3 v_normal;\nuniform samplerCube u_texture;\n\nvoid main()\n{\n    gl_FragColor = textureCube(u_texture, normalize(v_normal));\n}";
-
-    var shaders = {};
-    function getShader (type, painter, mesh) {
-        var _a, _b;
-        var uniqueName = type +
-            (mesh.material.color ? "1" : "0") +
-            (mesh.material.colors ? "1" : "0") +
-            (mesh.material.image ? "1" : "0") +
-            (mesh.material.cube ? "1" : "0");
-        if (shaders[uniqueName])
-            return shaders[uniqueName].use();
-        var vertexShader = (_a = {},
-            _a[type + "1000"] = vsColor,
-            _a[type + "0100"] = vsColors,
-            _a[type + "0010"] = vsImage,
-            _a[type + "0001"] = vsCube,
-            _a)[uniqueName].replace(/uniform +mat4 +u_matrix;/, "\n    uniform mat4 u_matrix_world;\n    uniform mat4 u_matrix_mesh;\n    uniform mat4 u_matrix_proporion;").replace(/u_matrix +\* +a_position/, "u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position");
-        var fragmentShader = (_b = {},
-            _b[type + "1000"] = fsColor,
-            _b[type + "0100"] = fsColors,
-            _b[type + "0010"] = fsImage,
-            _b[type + "0001"] = fsCube,
-            _b)[uniqueName];
-        var shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use();
-        shaders[uniqueName] = shader;
-        return shader;
-    }
-
-    function doDraw (type, painter, mesh, meshWorld, globalWorld) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        var shader = getShader(type, painter, mesh);
-        new BufferObject(painter).use()
-            .write(mesh.geometry.attributes.position.array)
-            .divide(painter.getAttribLocation(shader.program, "a_position"), mesh.geometry.attributes.position.itemSize, mesh.geometry.attributes.position.itemSize, 0);
-        painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_world"), false, globalWorld.matrix);
-        painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_proporion"), false, globalWorld.proporion);
-        painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix_mesh"), false, meshWorld.matrix);
-        if (mesh.geometry.attributes.normal) {
-            new BufferObject(painter).use()
-                .write(mesh.geometry.attributes.normal.array)
-                .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, mesh.geometry.attributes.normal.itemSize, 0);
-        }
-        if ("color" in mesh.material) {
-            painter.uniform4f(painter.getUniformLocation(shader.program, "u_color"), (_a = mesh.material.color) === null || _a === void 0 ? void 0 : _a.r, (_b = mesh.material.color) === null || _b === void 0 ? void 0 : _b.g, (_c = mesh.material.color) === null || _c === void 0 ? void 0 : _c.b, (_d = mesh.material.color) === null || _d === void 0 ? void 0 : _d.alpha);
-        }
-        if ("colors" in mesh.material) {
-            new BufferObject(painter).use()
-                .write((_e = mesh.material.colors) === null || _e === void 0 ? void 0 : _e.array)
-                .divide(painter.getAttribLocation(shader.program, "a_color"), (_f = mesh.material.colors) === null || _f === void 0 ? void 0 : _f.itemSize, (_g = mesh.material.colors) === null || _g === void 0 ? void 0 : _g.itemSize, 0);
-        }
-        else if ("cube" in mesh.material) {
-            var size = ((_j = (_h = mesh.material.cube) === null || _h === void 0 ? void 0 : _h.right) === null || _j === void 0 ? void 0 : _j.image.value).width;
-            painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0);
-            getTexture(type, painter, 'cube').useCube([
-                (_l = (_k = mesh.material.cube) === null || _k === void 0 ? void 0 : _k.right) === null || _l === void 0 ? void 0 : _l.image.value,
-                (_o = (_m = mesh.material.cube) === null || _m === void 0 ? void 0 : _m.left) === null || _o === void 0 ? void 0 : _o.image.value,
-                (_q = (_p = mesh.material.cube) === null || _p === void 0 ? void 0 : _p.top) === null || _q === void 0 ? void 0 : _q.image.value,
-                (_s = (_r = mesh.material.cube) === null || _r === void 0 ? void 0 : _r.bottom) === null || _s === void 0 ? void 0 : _s.image.value,
-                (_u = (_t = mesh.material.cube) === null || _t === void 0 ? void 0 : _t.far) === null || _u === void 0 ? void 0 : _u.image.value,
-                (_w = (_v = mesh.material.cube) === null || _v === void 0 ? void 0 : _v.near) === null || _w === void 0 ? void 0 : _w.image.value
-            ], size, size);
-        }
-        else if ("image" in mesh.material) {
-            painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0);
-            new BufferObject(painter).use()
-                .write((_x = mesh.geometry.attributes.uv) === null || _x === void 0 ? void 0 : _x.array)
-                .divide(painter.getAttribLocation(shader.program, "a_textcoord"), (_y = mesh.geometry.attributes.uv) === null || _y === void 0 ? void 0 : _y.itemSize, 2, 0);
-            getTexture(type, painter, '2d').useImage((_z = mesh.material.image) === null || _z === void 0 ? void 0 : _z.value);
-        }
-        if (mesh.geometry.index) {
-            new BufferObject(painter, true).use()
-                .write(mesh.geometry.index.array);
-            painter.drawElements(painter[mesh.geometry.type], mesh.geometry.index.count, painter.UNSIGNED_BYTE, 0);
-        }
-        else {
-            painter.drawArrays(painter[mesh.geometry.type], 0, mesh.geometry.attributes.position.count);
-        }
-    }
-
-    var needUpdate = false;
-    var scale = 10;
-    var WebGL$1 = (function () {
-        function WebGL(ViewCanvas, RegionCanvas, mode) {
-            this.name = "WebGL";
-            this.__getColor = function (x, y) { return "rgba(0,0,0,1)"; };
-            this.__regionList = {};
-            this.__regionAssemble = assemble(0, 1, 0.2, 3);
-            this.__regionName = "";
-            this.__regionColor = [0, 0, 0, 1];
-            this.__scene = {
-                children: [],
-                matrix: new Matrix4([
-                    1, 0, 0, 0,
-                    0, 1, 0, 0,
-                    0, 0, 1, 0,
-                    0, 0, 0, scale
-                ])
-            };
-            this.__unique = new Date().valueOf();
-            this.painter = getWebGLContext$1(ViewCanvas, scale, {}, mode);
-            if (RegionCanvas) {
-                this.__regionPainter = getWebGLContext$1(RegionCanvas, scale, {}, mode);
-            }
-            var proportion = this.painter.canvas.width / this.painter.canvas.height;
-            var xProportion = 1;
-            var yProportion = 1;
-            if (proportion > 1) {
-                xProportion = 1 / proportion;
-            }
-            else {
-                yProportion = proportion;
-            }
-            var zProportion = Math.min(xProportion, yProportion);
-            this.__proporion = [
-                xProportion, 0, 0, 0,
-                0, yProportion, 0, 0,
-                0, 0, zProportion, 0,
-                0, 0, 0, 1
-            ];
-        }
-        WebGL.prototype.matrix = function (initMatrix4) {
-            return new Matrix4(initMatrix4);
-        };
-        WebGL.prototype.getMatrix = function () {
-            return this.__scene.matrix;
-        };
-        WebGL.prototype.getObject3D = function () {
-            return this.__scene.children;
-        };
-        WebGL.prototype.review = function (isUpdateRegion) {
-            if (isUpdateRegion === void 0) { isUpdateRegion = false; }
-            if (isUpdateRegion) {
-                if (this.__regionPainter) {
-                    this.__regionPainter.clearColor(1, 1, 1, 1);
-                    this.__regionPainter.clear(this.__regionPainter.COLOR_BUFFER_BIT);
-                }
-            }
-            else {
-                this.painter.clearColor(1, 1, 1, 1);
-                this.painter.clear(this.painter.COLOR_BUFFER_BIT);
-            }
-            for (var index = 0; index < this.__scene.children.length; index++) {
-                this.draw(this.__scene.children[index], isUpdateRegion);
-            }
+        BufferObject.prototype.write = function (data) {
+            writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW);
+            this.__fsize = data.BYTES_PER_ELEMENT;
             return this;
         };
-        WebGL.prototype.draw = function (object3D, isUpdateRegion) {
-            var _a;
-            if (isUpdateRegion === void 0) { isUpdateRegion = false; }
-            if (!isUpdateRegion)
-                needUpdate = true;
-            var meshWorld = {
-                matrix: (_a = object3D.matrix) === null || _a === void 0 ? void 0 : _a.value()
-            };
-            var globalWorld = {
-                matrix: this.__scene.matrix.value(),
-                proporion: this.__proporion
-            };
-            this.setRegion(object3D.region);
-            for (var index = 0; index < object3D.mesh.length; index++) {
-                if (isUpdateRegion) {
-                    if (this.__regionPainter) {
-                        doDraw("painter" + this.__unique, this.__regionPainter, {
-                            geometry: object3D.mesh[index].geometry,
-                            material: {
-                                color: {
-                                    r: this.__regionColor[0],
-                                    g: this.__regionColor[1],
-                                    b: this.__regionColor[2],
-                                    alpha: this.__regionColor[3]
-                                }
-                            }
-                        }, meshWorld, globalWorld);
-                        this.__getColor = getColorFactory(this.__regionPainter);
-                    }
-                }
-                else {
-                    doDraw("region" + this.__unique, this.painter, object3D.mesh[index], meshWorld, globalWorld);
-                }
-            }
-        };
-        WebGL.prototype.render = function (object3D) {
-            if (!('matrix' in object3D))
-                object3D.matrix = new Matrix4();
-            if (!('region' in object3D))
-                object3D.region = "";
-            for (var index = 0; index < object3D.mesh.length; index++) {
-                var mesh = object3D.mesh[index];
-                if (mesh.geometry.attributes.normal && Array.isArray(mesh.geometry.attributes.normal.array)) {
-                    mesh.geometry.attributes.normal.array = new Float32Array(mesh.geometry.attributes.normal.array);
-                }
-                if (mesh.geometry.attributes.position && Array.isArray(mesh.geometry.attributes.position.array)) {
-                    mesh.geometry.attributes.position.array = new Float32Array(mesh.geometry.attributes.position.array);
-                }
-                if (mesh.geometry.attributes.uv && Array.isArray(mesh.geometry.attributes.uv.array)) {
-                    mesh.geometry.attributes.uv.array = new Float32Array(mesh.geometry.attributes.uv.array);
-                }
-                if (mesh.geometry.index && Array.isArray(mesh.geometry.index.array)) {
-                    mesh.geometry.index.array = new Uint8Array(mesh.geometry.index.array);
-                }
-                if (mesh.material.colors && Array.isArray(mesh.material.colors.array)) {
-                    mesh.material.colors.array = new Float32Array(mesh.material.colors.array);
-                }
-            }
-            this.__scene.children.push(object3D);
-            this.draw(object3D);
-        };
-        WebGL.prototype.setRegion = function (regionName) {
-            this.__regionName = regionName + "";
-            if (regionName) {
-                if (this.__regionList[regionName] == void 0) {
-                    this.__regionList[regionName] = __spreadArray(__spreadArray([], this.__regionAssemble(), true), [1], false);
-                }
-                this.__regionColor = this.__regionList[regionName];
-            }
-            else {
-                this.__regionColor = [0, 0, 0, 1];
-            }
+        BufferObject.prototype.divide = function (location, size, stride, offset) {
+            if (offset === void 0) { offset = 0; }
+            useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false);
             return this;
         };
-        WebGL.prototype.getRegion = function (x, y) {
-            var _this = this;
-            if (needUpdate)
-                this.review(true);
-            needUpdate = false;
-            return new Promise(function (resolve) {
-                var rgba = _this.__getColor(x, y);
-                for (var key in _this.__regionList) {
-                    var currentRGBA = _this.__regionList[key];
-                    if ("rgba(" + currentRGBA[0] * 255 + "," + currentRGBA[1] * 255 + "," + currentRGBA[2] * 255 + "," + currentRGBA[3] * 255 + ")" == rgba) {
-                        resolve(key);
-                        break;
-                    }
-                }
-                resolve("");
-            });
-        };
-        return WebGL;
+        return BufferObject;
     }());
 
-    var WebGL = (function (_super) {
-        __extends(WebGL, _super);
-        function WebGL(el, option) {
-            if (option === void 0) { option = {}; }
-            if (!el) {
-                throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.");
-            }
-            option = mergeOption(option, {
-                region: true
-            });
-            var width = el.clientWidth, height = el.clientHeight;
-            var ViewCanvas, RegionCanvas = null;
-            var _el = el;
-            if (_el._vislite_canvas_) {
-                ViewCanvas = _el._vislite_canvas_[0];
-                RegionCanvas = _el._vislite_canvas_[1];
-            }
-            else {
-                if (option.region) {
-                    RegionCanvas = document.createElement('canvas');
-                    el.appendChild(RegionCanvas);
-                    RegionCanvas.style.position = 'absolute';
-                    RegionCanvas.style.zIndex = "-1";
-                    RegionCanvas.style.opacity = "0";
-                }
-                ViewCanvas = document.createElement('canvas');
-                el.appendChild(ViewCanvas);
-                _el._vislite_canvas_ = [ViewCanvas, RegionCanvas];
-                el.setAttribute('vislite', 'WebGL');
-            }
-            for (var _i = 0, _a = [ViewCanvas, RegionCanvas]; _i < _a.length; _i++) {
-                var canvas = _a[_i];
-                if (canvas) {
-                    canvas.style.width = width + "px";
-                    canvas.setAttribute('width', width + "");
-                    canvas.style.height = height + "px";
-                    canvas.setAttribute('height', height + "");
-                }
-            }
-            return _super.call(this, ViewCanvas, RegionCanvas, option.mode) || this;
-        }
-        return WebGL;
-    }(WebGL$1));
-
-    var getWebGLContext = (function (el, scale, mode) {
-        if (scale === void 0) { scale = 1; }
-        if (!el) {
-            throw new Error("VISLite getWebGLContext:The mount point requires an HTMLElement type but encountered null.");
-        }
-        var width = el.clientWidth, height = el.clientHeight;
-        var ViewCanvas;
-        var _el = el;
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_;
-        }
-        else {
-            ViewCanvas = document.createElement('canvas');
-            el.appendChild(ViewCanvas);
-            _el._vislite_canvas_ = ViewCanvas;
-            el.setAttribute('vislite', 'WebGL');
-        }
-        ViewCanvas.style.width = width + "px";
-        ViewCanvas.setAttribute('width', width + "");
-        ViewCanvas.style.height = height + "px";
-        ViewCanvas.setAttribute('height', height + "");
-        return getWebGLContext$1(ViewCanvas, scale, {}, mode);
-    });
-
-    var Shader = (function (_super) {
-        __extends(Shader, _super);
-        function Shader() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Shader.prototype.compile = function (arg1, arg2) {
-            if (arg2) {
-                _super.prototype.compile.call(this, arg1, arg2);
-            }
-            else {
-                _super.prototype.compile.call(this, {
-                    "color": vsColor,
-                    "colors": vsColors,
-                    "image": vsImage,
-                    "cube": vsCube
-                }[arg1], {
-                    "color": fsColor,
-                    "colors": fsColors,
-                    "image": fsImage,
-                    "cube": fsCube
-                }[arg1]);
-            }
-            return this;
-        };
-        return Shader;
-    }(ShaderObject));
-
     var rotateX = function (deg, x, y, z) {
         var cos = Math.cos(deg), sin = Math.sin(deg);
         return [x, y * cos - z * sin, y * sin + z * cos];
@@ -2347,126 +1917,6 @@
         return Mercator;
     }());
 
-    var mousePosition = function (el, event) {
-        var bounding = el.getBoundingClientRect();
-        return {
-            "x": event.clientX - bounding.left,
-            "y": event.clientY - bounding.top
-        };
-    };
-    var getKeyString = function (event) {
-        return {
-            37: "left",
-            38: "up",
-            39: "right",
-            40: "down",
-        }[event.keyCode || event.which];
-    };
-    function viewHandler (callback) {
-        var el = document.getElementsByTagName('body')[0];
-        el.addEventListener("keydown", function (event) {
-            var keyCode = getKeyString(event);
-            if (keyCode == 'up') {
-                callback({
-                    type: "lookUp",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-            else if (keyCode == 'down') {
-                callback({
-                    type: "lookDown",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-            else if (keyCode == 'left') {
-                callback({
-                    type: "lookLeft",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-            else if (keyCode == 'right') {
-                callback({
-                    type: "lookRight",
-                    normal: [],
-                    value: 0.1,
-                    event: event
-                });
-            }
-        });
-        var mouseP = null;
-        var doMove = function (event) {
-            if (mouseP == null) {
-                callback({
-                    type: "hover",
-                    normal: [],
-                    value: 0,
-                    event: event
-                });
-            }
-            else {
-                var tempMouseP = mousePosition(el, event);
-                var normal = [tempMouseP.x - mouseP.x, tempMouseP.y - mouseP.y];
-                var rotateNormal = [
-                    normal[1],
-                    normal[0],
-                    0
-                ];
-                if (rotateNormal[0] == 0 && rotateNormal[1] == 0)
-                    return;
-                callback({
-                    type: "rotate",
-                    normal: rotateNormal,
-                    value: (Math.abs(tempMouseP.x - mouseP.x) + Math.abs(tempMouseP.y - mouseP.y)) * 0.01,
-                    event: event
-                });
-                mouseP = tempMouseP;
-            }
-        };
-        el.addEventListener("mousedown", function (event) {
-            mouseP = mousePosition(el, event);
-        });
-        el.addEventListener("mouseup", function () {
-            mouseP = null;
-        });
-        el.addEventListener("mousemove", function (event) {
-            doMove(event);
-        });
-        el.addEventListener("touchend", function () {
-            mouseP = null;
-        });
-        el.addEventListener("touchstart", function (event) {
-            mouseP = mousePosition(el, event);
-        });
-        el.addEventListener("touchmove", function (event) {
-            doMove(event.touches[0]);
-        });
-        var doScale = function (value, event) {
-            if (value == 0)
-                return;
-            var baseTimes = 0.899;
-            callback({
-                type: "scale",
-                value: value < 0 ? baseTimes : 2 - baseTimes,
-                normal: [],
-                event: event
-            });
-        };
-        el.addEventListener("mousewheel", function (event) {
-            doScale(event.wheelDelta, event);
-        });
-        if (window.addEventListener) {
-            window.addEventListener('DOMMouseScroll', function (event) {
-                doScale(-1 * event.detail, event);
-            }, false);
-        }
-    }
-
     var observer;
     var attrValueToCallback = {};
     var uniqueid = 0;
@@ -2833,318 +2283,28 @@
         return TreeLayout;
     }(Tree));
 
-    var splitNum = function (precision, radius, deg) {
-        if (deg === void 0) { deg = Math.PI * 2; }
-        var num = Math.ceil(deg /
-            Math.asin(precision / radius) * 2);
-        return (isNaN(num) || num < 12) ? 12 : num;
-    };
-
-    function prismHorizontal (normal, x, y, z, radius, num, d, beginDeg, deg) {
-        if (beginDeg === void 0) { beginDeg = 0; }
-        if (deg === void 0) { deg = Math.PI * 2; }
-        var beginX, beginZ;
-        if (num == 4) {
-            var temp = radius / 1.414;
-            beginX = x + temp;
-            beginZ = z + temp;
-        }
-        else {
-            beginX = x + radius;
-            beginZ = z;
-        }
-        var point = [beginX, beginZ];
-        if (beginDeg != 0) {
-            point = rotate$1(x, z, beginDeg, beginX, beginZ);
-        }
-        var points = [];
-        var perDeg = deg / num;
-        for (var i = 0; i < num; i++) {
-            points.push(x, y, z);
-            if (normal)
-                points.push(0, d, 0);
-            points.push(point[0], y, point[1]);
-            if (normal)
-                points.push(0, d, 0);
-            point = rotate$1(x, z, perDeg * (i + 1), beginX, beginZ);
-            points.push(point[0], y, point[1]);
-            if (normal)
-                points.push(0, d, 0);
-        }
-        return points;
-    }
-
-    function prismVertical (normal, x, y, z, radius, height, num, beginDeg, deg) {
-        if (beginDeg === void 0) { beginDeg = 0; }
-        if (deg === void 0) { deg = Math.PI * 2; }
-        var points = [];
-        var beginPosition;
-        if (num == 4) {
-            beginPosition = rotate$1(x, z, Math.PI * 0.25, x - radius, z);
-        }
-        else {
-            beginPosition = [x + radius, z];
-        }
-        if (beginDeg != 0) {
-            beginPosition = rotate$1.apply(void 0, __spreadArray([x, z, beginDeg], beginPosition, false));
-        }
-        var perDeg = deg / num, degHalf = deg / (num * 2);
-        var endPosition, normalPosition = [];
-        for (var i = 0; i < num; i++) {
-            endPosition = rotate$1.apply(void 0, __spreadArray([x, z, perDeg], beginPosition, false));
-            if (normal) {
-                var halfPosition = rotate$1.apply(void 0, __spreadArray([x, z, degHalf], beginPosition, false));
-                normalPosition = [halfPosition[0], 0, halfPosition[1]];
-            }
-            points.push.apply(points, __spreadArray([beginPosition[0], y, beginPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([beginPosition[0], y + height, beginPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([endPosition[0], y + height, endPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([beginPosition[0], y, beginPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([endPosition[0], y, endPosition[1]], normalPosition, false));
-            points.push.apply(points, __spreadArray([endPosition[0], y + height, endPosition[1]], normalPosition, false));
-            beginPosition = endPosition;
-        }
-        return points;
-    }
-
-    function sphereFragment (normal, cx, cy, cz, radius, num, index) {
-        var points = [cx, cy + radius, cz], deg = Math.PI * 2 / num;
-        var point;
-        if (normal)
-            points.push(0, radius, 0);
-        var copy2 = function () {
-            points.push.apply(points, points.slice(points.length - (normal ? 12 : 6)));
-        };
-        for (var i = 1; i < num * 0.5; i++) {
-            point = rotate$1(cx, cy, deg * i, cx, cy + radius);
-            if (i > 1)
-                copy2();
-            var point1 = rotate$1(cx, cz, deg * index, point[0], cz);
-            points.push(point1[0], point[1], point1[1]);
-            if (normal)
-                points.push(point1[0] - cx, point[1] - cy, point1[1] - cz);
-            if (i > 1)
-                copy2();
-            var point2 = rotate$1(cx, cz, deg * (index + 1), point[0], cz);
-            points.push(point2[0], point[1], point2[1]);
-            if (normal)
-                points.push(point2[0] - cx, point2[1] - cy, point2[1] - cz);
-        }
-        copy2();
-        points.push(cx, cy - radius, cz);
-        if (normal)
-            points.push(0, -radius, 0);
-        return points;
-    }
-
-    function rotateLineFactory (x, y, z, x2, y2, z2) {
-        return function (x0, y0, z0, isNormal) {
-            if (x == x2 && z == z2)
-                return [x0, y0, z0];
-            var sin, cos, temp;
-            var _x0 = x0 - (isNormal ? 0 : x), _y0 = y0 - (isNormal ? 0 : y), _z0 = z0 - (isNormal ? 0 : z);
-            var _x2 = x2 - x, _y2 = y2 - y, _z2 = z2 - z;
-            var __d = Math.sqrt(_x2 * _x2 + _z2 * _z2);
-            cos = _x2 / __d;
-            sin = _z2 / __d;
-            var _x2N = _z2 * sin + _x2 * cos;
-            var d = Math.sqrt(_y2 * _y2 + _x2N * _x2N);
-            cos = _y2 / d;
-            sin = _x2N / d;
-            temp = [_y0, _x0];
-            _y0 = temp[0] * cos - temp[1] * sin;
-            _x0 = temp[0] * sin + temp[1] * cos;
-            cos = _x2 / __d;
-            sin = _z2 / __d;
-            temp = [_x0, _z0];
-            _x0 = temp[0] * cos - temp[1] * sin;
-            _z0 = temp[0] * sin + temp[1] * cos;
-            return [_x0 + (isNormal ? 0 : x), _y0 + (isNormal ? 0 : y), _z0 + (isNormal ? 0 : z)];
-        };
-    }
-
-    function triangles (normal, points) {
-        if (normal) {
-            var _points = [];
-            for (var i = 0; i < points.length; i += 9) {
-                var ab = [points[i + 3] - points[i], points[i + 4] - points[i + 1], points[i + 5] - points[i + 2]];
-                var ac = [points[i + 6] - points[i], points[i + 7] - points[i + 1], points[i + 8] - points[i + 2]];
-                var normalVector = [ab[1] * ac[2] - ac[1] * ab[2], ab[2] * ac[0] - ab[0] * ac[2], ab[0] * ac[1] - ab[1] * ac[2]];
-                _points.push.apply(_points, __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([points[i], points[i + 1], points[i + 2]], normalVector, false), [points[i + 3], points[i + 4], points[i + 5]], false), normalVector, false), [points[i + 6], points[i + 7], points[i + 8]], false), normalVector, false));
-            }
-            return _points;
-        }
-        else {
-            return points;
-        }
-    }
-
-    var Geometry = (function () {
-        function Geometry(option) {
-            if (option === void 0) { option = {}; }
-            this.name = 'Geometry';
-            this.__option = mergeOption(option, {
-                precision: 0.1,
-                normal: false,
-            });
-        }
-        Geometry.prototype.config = function (option) {
-            for (var key in option) {
-                this.__option[key] = option[key];
-            }
-            return this;
-        };
-        Geometry.prototype.splitNum = function (radius, deg) {
-            return splitNum(this.__option.precision, radius, deg);
-        };
-        Geometry.prototype.rotateLine = function (x1, y1, z1, x2, y2, z2) {
-            var _this = this;
-            var rotateLine = rotateLineFactory(x1, y1, z1, x2, y2, z2);
-            return function (x, y, z) { return rotateLine(x, y, z, _this.__option.normal); };
-        };
-        Geometry.prototype.prismHorizontal = function (x, y, z, radius, num, d, beginDeg, deg) {
-            return prismHorizontal(this.__option.normal, x, y, z, radius, num, d, beginDeg, deg);
-        };
-        Geometry.prototype.prismVertical = function (x, y, z, radius, height, num, beginDeg, deg) {
-            return prismVertical(this.__option.normal, x, y, z, radius, height, num, beginDeg, deg);
-        };
-        Geometry.prototype.sphereFragment = function (cx, cy, cz, radius, num, index) {
-            return sphereFragment(this.__option.normal, cx, cy, cz, radius, num, index);
-        };
-        Geometry.prototype.pie = function (x, y, z, radius, height, beginDeg, deg) {
-            var num = splitNum(this.__option.precision, radius, deg);
-            var beginXZ = rotate$1(x, z, beginDeg, x + radius, z);
-            var endXZ = rotate$1(x, z, beginDeg + deg, x + radius, z);
-            var result = [{
-                    name: "bottom",
-                    points: prismHorizontal(this.__option.normal, x, y, z, radius, num, height > 0 ? -1 : 1, beginDeg, deg),
-                    length: 3 * num,
-                    method: "TRIANGLES"
-                }, {
-                    name: "top",
-                    points: prismHorizontal(this.__option.normal, x, y + height, z, radius, num, height > 0 ? 1 : -1, beginDeg, deg),
-                    length: 3 * num,
-                    method: "TRIANGLES"
-                }, {
-                    name: "side",
-                    points: prismVertical(this.__option.normal, x, y, z, radius, height, num, beginDeg, deg),
-                    length: 6 * num,
-                    method: "TRIANGLES"
-                }, {
-                    name: "begin",
-                    points: triangles(this.__option.normal, [
-                        x, y, z, x, y + height, z, beginXZ[0], y, beginXZ[1],
-                        beginXZ[0], y + height, beginXZ[1], beginXZ[0], y, beginXZ[1], x, y + height, z
-                    ]),
-                    length: 6,
-                    method: "TRIANGLES"
-                }, {
-                    name: "end",
-                    points: triangles(this.__option.normal, [
-                        x, y, z, endXZ[0], y, endXZ[1], x, y + height, z,
-                        endXZ[0], y + height, endXZ[1], x, y + height, z, endXZ[0], y, endXZ[1]
-                    ]),
-                    length: 6,
-                    method: "TRIANGLES"
-                }];
-            return result;
-        };
-        Geometry.prototype.cylinder = function (x, y, z, radius, x2, y2, z2) {
-            var num = splitNum(this.__option.precision, radius);
-            if (arguments.length == 5) {
-                return this.prism(x, y, z, radius, x2, num);
-            }
-            else {
-                return this.prism(x, y, z, radius, x2, y2, z2, num);
-            }
-        };
-        Geometry.prototype.prism = function (x, y, z, radius, x2, y2, z2, num) {
-            var _a, _b, _c;
-            var height, rotateLine = null;
-            if (arguments.length == 6) {
-                height = x2;
-                num = y2;
-            }
-            else {
-                height = (y > y2 ? -1 : 1) * Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y) + (z2 - z) * (z2 - z));
-                rotateLine = rotateLineFactory(x, y, z, x2, y2, z2);
-            }
-            var result = [{
-                    name: "bottom",
-                    points: [],
-                    length: 0,
-                    method: "TRIANGLES"
-                }, {
-                    name: "top",
-                    points: [],
-                    length: 0,
-                    method: "TRIANGLES"
-                }, {
-                    name: "side",
-                    points: [],
-                    length: 0,
-                    method: "TRIANGLES"
-                }];
-            (_a = result[0].points).push.apply(_a, prismHorizontal(this.__option.normal, x, y, z, radius, num, height > 0 ? -1 : 1));
-            (_b = result[1].points).push.apply(_b, prismHorizontal(this.__option.normal, x, y + height, z, radius, num, height > 0 ? 1 : -1));
-            (_c = result[2].points).push.apply(_c, prismVertical(this.__option.normal, x, y, z, radius, height, num));
-            for (var i = 0; i < result.length; i++) {
-                if (rotateLine) {
-                    var points = [];
-                    var isNormal = false;
-                    for (var index = 0; index < result[i].points.length; index += 3) {
-                        points.push.apply(points, rotateLine(result[i].points[index], result[i].points[index + 1], result[i].points[index + 2], this.__option.normal && isNormal));
-                        isNormal = !isNormal;
-                    }
-                    result[i].points = points;
-                }
-                result[i].length = result[i].points.length / (this.__option.normal ? 6 : 3);
-            }
-            return result;
-        };
-        Geometry.prototype.sphere = function (cx, cy, cz, radius) {
-            var _a;
-            var num = splitNum(this.__option.precision, radius);
-            var result = [{
-                    name: "surface",
-                    points: [],
-                    length: 0,
-                    method: "TRIANGLES"
-                }];
-            for (var i = 0; i < num; i++) {
-                (_a = result[0].points).push.apply(_a, sphereFragment(this.__option.normal, cx, cy, cz, radius, num, i));
-            }
-            result[0].length = result[0].points.length / (this.__option.normal ? 6 : 3);
-            return result;
-        };
-        return Geometry;
-    }());
-
     var index = {
         Cardinal: Cardinal,
         Hermite: Hermite,
         Matrix4: Matrix4,
         rotate: rotate$1,
         move: move,
-        scale: scale$1,
+        scale: scale,
         getLoopColors: getLoopColors,
-        formatColor: formatColor,
         animation: animation,
         ruler: ruler,
         SVG: SVG,
         Canvas: Canvas,
-        WebGL: WebGL,
+        _Canvas: Canvas$1,
         getWebGLContext: getWebGLContext,
-        Shader: Shader,
+        Shader: ShaderObject,
         Texture: TextureObject,
         Buffer: BufferObject,
         Eoap: Eoap,
         Mercator: Mercator,
-        viewHandler: viewHandler,
         resizeObserver: resizeObserver,
         throttle: throttle,
-        TreeLayout: TreeLayout,
-        Geometry: Geometry
+        TreeLayout: TreeLayout
     };
 
     return index;