vislite 0.5.2-alpha.1 → 0.5.2

package/lib/WebGL/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.5.2-alpha.1
+* VISLite JavaScript Library v0.5.2
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Thu Oct 12 2023 15:44:35 GMT+0800 (China Standard Time)
+* Publish Date:  Sat Nov 04 2023 09:25:44 GMT+0800 (中国标准时间)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -60,623 +60,623 @@
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    function getWebGLContext (canvas, scale, opts) {
-        if (opts === void 0) { opts = {}; }
-        var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"], painter = null;
-        for (var i = 0; i < names.length; i++) {
-            try {
-                painter = canvas.getContext(names[i], opts);
-            }
-            catch (e) { }
-            if (painter)
-                break;
-        }
-        if (!painter)
-            throw new Error('Non canvas or browser does not support webgl.');
-        var width = painter.canvas.width, height = painter.canvas.height;
-        var viewWidth = width * scale;
-        var viewHeight = height * scale;
-        painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight);
-        painter.depthFunc(painter.LEQUAL);
-        painter.enable(painter.DEPTH_TEST);
-        return painter;
+    function getWebGLContext (canvas, scale, opts) {
+        if (opts === void 0) { opts = {}; }
+        var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"], painter = null;
+        for (var i = 0; i < names.length; i++) {
+            try {
+                painter = canvas.getContext(names[i], opts);
+            }
+            catch (e) { }
+            if (painter)
+                break;
+        }
+        if (!painter)
+            throw new Error('Non canvas or browser does not support webgl.');
+        var width = painter.canvas.width, height = painter.canvas.height;
+        var viewWidth = width * scale;
+        var viewHeight = height * scale;
+        painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight);
+        painter.depthFunc(painter.LEQUAL);
+        painter.enable(painter.DEPTH_TEST);
+        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 + ")";
-        };
+    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 + ")";
+        };
     }
 
-    function _move (d, a, b, c) {
-        if (c === void 0) { c = 0; }
-        var sqrt = Math.sqrt(a * a + b * b + c * c);
-        return [
-            1, 0, 0, 0,
-            0, 1, 0, 0,
-            0, 0, 1, 0,
-            a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
-        ];
+    function _move (d, a, b, c) {
+        if (c === void 0) { c = 0; }
+        var sqrt = Math.sqrt(a * a + b * b + c * c);
+        return [
+            1, 0, 0, 0,
+            0, 1, 0, 0,
+            0, 0, 1, 0,
+            a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
+        ];
     }
 
-    function _rotate (deg) {
-        var sin = Math.sin(deg), cos = Math.cos(deg);
-        return [
-            cos, sin, 0, 0,
-            -sin, cos, 0, 0,
-            0, 0, 1, 0,
-            0, 0, 0, 1
-        ];
+    function _rotate (deg) {
+        var sin = Math.sin(deg), cos = Math.cos(deg);
+        return [
+            cos, sin, 0, 0,
+            -sin, cos, 0, 0,
+            0, 0, 1, 0,
+            0, 0, 0, 1
+        ];
     }
 
-    function _scale (xTimes, yTimes, zTimes, cx, cy, cz) {
-        if (cx === void 0) { cx = 0; }
-        if (cy === void 0) { cy = 0; }
-        if (cz === void 0) { cz = 0; }
-        return [
-            xTimes, 0, 0, 0,
-            0, yTimes, 0, 0,
-            0, 0, zTimes, 0,
-            cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
-        ];
+    function _scale (xTimes, yTimes, zTimes, cx, cy, cz) {
+        if (cx === void 0) { cx = 0; }
+        if (cy === void 0) { cy = 0; }
+        if (cz === void 0) { cz = 0; }
+        return [
+            xTimes, 0, 0, 0,
+            0, yTimes, 0, 0,
+            0, 0, zTimes, 0,
+            cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
+        ];
     }
 
-    function _transform (a1, b1, c1, a2, b2, c2) {
-        if (typeof a1 === 'number' && typeof b1 === 'number') {
-            if (typeof c1 !== 'number') {
-                c1 = 0;
-                a2 = a1;
-                b2 = b1;
-                c2 = 1;
-            }
-            else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
-                a2 = a1;
-                b2 = b1;
-                c2 = c1;
-                a1 = 0;
-                b1 = 0;
-                c1 = 0;
-            }
-            if (a1 == a2 && b1 == b2 && c1 == c2)
-                throw new Error('It\'s not a legitimate ray!');
-            var sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)), cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1, sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0, b = (a2 - a1) * sin1 + (b2 - b1) * cos1, c = c2 - c1, sqrt2 = Math.sqrt(b * b + c * c), cos2 = sqrt2 != 0 ? c / sqrt2 : 1, sin2 = sqrt2 != 0 ? b / sqrt2 : 0;
-            return [
-                [
-                    cos1, cos2 * sin1, sin1 * sin2, 0,
-                    -sin1, cos1 * cos2, cos1 * sin2, 0,
-                    0, -sin2, cos2, 0,
-                    b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
-                ],
-                [
-                    cos1, -sin1, 0, 0,
-                    cos2 * sin1, cos2 * cos1, -sin2, 0,
-                    sin1 * sin2, cos1 * sin2, cos2, 0,
-                    a1, b1, c1, 1
-                ]
-            ];
-        }
-        else {
-            throw new Error('a1 and b1 is required!');
-        }
+    function _transform (a1, b1, c1, a2, b2, c2) {
+        if (typeof a1 === 'number' && typeof b1 === 'number') {
+            if (typeof c1 !== 'number') {
+                c1 = 0;
+                a2 = a1;
+                b2 = b1;
+                c2 = 1;
+            }
+            else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
+                a2 = a1;
+                b2 = b1;
+                c2 = c1;
+                a1 = 0;
+                b1 = 0;
+                c1 = 0;
+            }
+            if (a1 == a2 && b1 == b2 && c1 == c2)
+                throw new Error('It\'s not a legitimate ray!');
+            var sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)), cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1, sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0, b = (a2 - a1) * sin1 + (b2 - b1) * cos1, c = c2 - c1, sqrt2 = Math.sqrt(b * b + c * c), cos2 = sqrt2 != 0 ? c / sqrt2 : 1, sin2 = sqrt2 != 0 ? b / sqrt2 : 0;
+            return [
+                [
+                    cos1, cos2 * sin1, sin1 * sin2, 0,
+                    -sin1, cos1 * cos2, cos1 * sin2, 0,
+                    0, -sin2, cos2, 0,
+                    b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
+                ],
+                [
+                    cos1, -sin1, 0, 0,
+                    cos2 * sin1, cos2 * cos1, -sin2, 0,
+                    sin1 * sin2, cos1 * sin2, cos2, 0,
+                    a1, b1, c1, 1
+                ]
+            ];
+        }
+        else {
+            throw new Error('a1 and b1 is required!');
+        }
     }
 
-    var _multiply = function (matrix4, param) {
-        var newParam = [];
-        for (var i = 0; i < 4; i++)
-            for (var j = 0; j < param.length / 4; j++)
-                newParam[j * 4 + i] =
-                    matrix4[i] * param[j * 4] +
-                        matrix4[i + 4] * param[j * 4 + 1] +
-                        matrix4[i + 8] * param[j * 4 + 2] +
-                        matrix4[i + 12] * param[j * 4 + 3];
-        return newParam;
-    };
-    var Matrix4 = (function () {
-        function Matrix4(initMatrix4) {
-            if (initMatrix4 === void 0) { initMatrix4 = [
-                1, 0, 0, 0,
-                0, 1, 0, 0,
-                0, 0, 1, 0,
-                0, 0, 0, 1
-            ]; }
-            this.name = 'Matrix4';
-            this.__matrix4 = initMatrix4;
-        }
-        Matrix4.prototype.move = function (dis, a, b, c) {
-            if (c === void 0) { c = 0; }
-            this.__matrix4 = _multiply(_move(dis, a, b, c), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.rotate = function (deg, a1, b1, c1, a2, b2, c2) {
-            var matrix4s = _transform(a1, b1, c1, a2, b2, c2);
-            this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.scale = function (xTimes, yTimes, zTimes, cx, cy, cz) {
-            if (cx === void 0) { cx = 0; }
-            if (cy === void 0) { cy = 0; }
-            if (cz === void 0) { cz = 0; }
-            this.__matrix4 = _multiply(_scale(xTimes, yTimes, zTimes, cx, cy, cz), this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.multiply = function (newMatrix4, flag) {
-            if (flag === void 0) { flag = false; }
-            this.__matrix4 = flag ? _multiply(this.__matrix4, newMatrix4) : _multiply(newMatrix4, this.__matrix4);
-            return this;
-        };
-        Matrix4.prototype.use = function (x, y, z, w) {
-            if (z === void 0) { z = 0; }
-            if (w === void 0) { w = 1; }
-            return _multiply(this.__matrix4, [x, y, z, w]);
-        };
-        Matrix4.prototype.value = function () {
-            return this.__matrix4;
-        };
-        return Matrix4;
+    var _multiply = function (matrix4, param) {
+        var newParam = [];
+        for (var i = 0; i < 4; i++)
+            for (var j = 0; j < param.length / 4; j++)
+                newParam[j * 4 + i] =
+                    matrix4[i] * param[j * 4] +
+                        matrix4[i + 4] * param[j * 4 + 1] +
+                        matrix4[i + 8] * param[j * 4 + 2] +
+                        matrix4[i + 12] * param[j * 4 + 3];
+        return newParam;
+    };
+    var Matrix4 = (function () {
+        function Matrix4(initMatrix4) {
+            if (initMatrix4 === void 0) { initMatrix4 = [
+                1, 0, 0, 0,
+                0, 1, 0, 0,
+                0, 0, 1, 0,
+                0, 0, 0, 1
+            ]; }
+            this.name = 'Matrix4';
+            this.__matrix4 = initMatrix4;
+        }
+        Matrix4.prototype.move = function (dis, a, b, c) {
+            if (c === void 0) { c = 0; }
+            this.__matrix4 = _multiply(_move(dis, a, b, c), this.__matrix4);
+            return this;
+        };
+        Matrix4.prototype.rotate = function (deg, a1, b1, c1, a2, b2, c2) {
+            var matrix4s = _transform(a1, b1, c1, a2, b2, c2);
+            this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4);
+            return this;
+        };
+        Matrix4.prototype.scale = function (xTimes, yTimes, zTimes, cx, cy, cz) {
+            if (cx === void 0) { cx = 0; }
+            if (cy === void 0) { cy = 0; }
+            if (cz === void 0) { cz = 0; }
+            this.__matrix4 = _multiply(_scale(xTimes, yTimes, zTimes, cx, cy, cz), this.__matrix4);
+            return this;
+        };
+        Matrix4.prototype.multiply = function (newMatrix4, flag) {
+            if (flag === void 0) { flag = false; }
+            this.__matrix4 = flag ? _multiply(this.__matrix4, newMatrix4) : _multiply(newMatrix4, this.__matrix4);
+            return this;
+        };
+        Matrix4.prototype.use = function (x, y, z, w) {
+            if (z === void 0) { z = 0; }
+            if (w === void 0) { w = 1; }
+            return _multiply(this.__matrix4, [x, y, z, w]);
+        };
+        Matrix4.prototype.value = function () {
+            return this.__matrix4;
+        };
+        return Matrix4;
     }());
 
-    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 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;
-        }
-        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;
-            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);
-            return this;
-        };
-        return BufferObject;
+    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 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;
+        }
+        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;
+            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);
+            return this;
+        };
+        return BufferObject;
     }());
 
-    var initTexture = function (painter, type, unit) {
-        var texture = painter.createTexture();
-        painter.activeTexture(painter['TEXTURE' + unit]);
-        painter.bindTexture(type, texture);
-        return texture;
-    };
-    var linkImage = function (painter, type, level, format, textureType, image) {
-        painter.texImage2D(type, level, format, format, textureType, image);
-    };
-    var linkCube = function (painter, type, level, format, textureType, images, width, height, texture) {
-        var types = [
-            painter.TEXTURE_CUBE_MAP_POSITIVE_X,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_X,
-            painter.TEXTURE_CUBE_MAP_POSITIVE_Y,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_Y,
-            painter.TEXTURE_CUBE_MAP_POSITIVE_Z,
-            painter.TEXTURE_CUBE_MAP_NEGATIVE_Z
-        ], target;
-        for (var i = 0; i < types.length; i++) {
-            if (images[i]) {
-                target = types[i];
-                painter.texImage2D(target, level, format, width, height, 0, format, textureType, null);
-                painter.bindTexture(type, texture);
-                painter.texImage2D(target, level, format, format, textureType, images[i]);
-            }
-        }
-        painter.generateMipmap(type);
-    };
-    var TextureObject = (function () {
-        function TextureObject(painter, type, unit) {
-            if (unit === void 0) { unit = 0; }
-            this.__painter = painter;
-            this.__type = {
-                "2d": painter.TEXTURE_2D,
-                "cube": painter.TEXTURE_CUBE_MAP
-            }[type];
-            this.__texture = initTexture(painter, this.__type, unit);
-            painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST);
-            painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST);
-            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE);
-            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE);
-        }
-        TextureObject.prototype.useImage = function (image) {
-            linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image);
-            return this;
-        };
-        TextureObject.prototype.useCube = function (images, width, height) {
-            linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture);
-            return this;
-        };
-        return TextureObject;
+    var initTexture = function (painter, type, unit) {
+        var texture = painter.createTexture();
+        painter.activeTexture(painter['TEXTURE' + unit]);
+        painter.bindTexture(type, texture);
+        return texture;
+    };
+    var linkImage = function (painter, type, level, format, textureType, image) {
+        painter.texImage2D(type, level, format, format, textureType, image);
+    };
+    var linkCube = function (painter, type, level, format, textureType, images, width, height, texture) {
+        var types = [
+            painter.TEXTURE_CUBE_MAP_POSITIVE_X,
+            painter.TEXTURE_CUBE_MAP_NEGATIVE_X,
+            painter.TEXTURE_CUBE_MAP_POSITIVE_Y,
+            painter.TEXTURE_CUBE_MAP_NEGATIVE_Y,
+            painter.TEXTURE_CUBE_MAP_POSITIVE_Z,
+            painter.TEXTURE_CUBE_MAP_NEGATIVE_Z
+        ], target;
+        for (var i = 0; i < types.length; i++) {
+            if (images[i]) {
+                target = types[i];
+                painter.texImage2D(target, level, format, width, height, 0, format, textureType, null);
+                painter.bindTexture(type, texture);
+                painter.texImage2D(target, level, format, format, textureType, images[i]);
+            }
+        }
+        painter.generateMipmap(type);
+    };
+    var TextureObject = (function () {
+        function TextureObject(painter, type, unit) {
+            if (unit === void 0) { unit = 0; }
+            this.__painter = painter;
+            this.__type = {
+                "2d": painter.TEXTURE_2D,
+                "cube": painter.TEXTURE_CUBE_MAP
+            }[type];
+            this.__texture = initTexture(painter, this.__type, unit);
+            painter.texParameteri(this.__type, painter.TEXTURE_MIN_FILTER, painter.NEAREST);
+            painter.texParameteri(this.__type, painter.TEXTURE_MAG_FILTER, painter.NEAREST);
+            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_S, painter.CLAMP_TO_EDGE);
+            painter.texParameteri(this.__type, painter.TEXTURE_WRAP_T, painter.CLAMP_TO_EDGE);
+        }
+        TextureObject.prototype.useImage = function (image) {
+            linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image);
+            return this;
+        };
+        TextureObject.prototype.useCube = function (images, width, height) {
+            linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture);
+            return this;
+        };
+        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 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 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 ShaderObject = (function () {
-        function ShaderObject(painter) {
-            this.__painter = painter;
-        }
-        ShaderObject.prototype.use = function () {
-            this.__painter.useProgram(this.program);
-            return this;
-        };
-        ShaderObject.prototype.compile = function (vshaderSource, fshaderSource) {
-            this.program = useShader(this.__painter, vshaderSource, fshaderSource);
-            return this;
-        };
-        return ShaderObject;
+    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 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 ShaderObject = (function () {
+        function ShaderObject(painter) {
+            this.__painter = painter;
+        }
+        ShaderObject.prototype.use = function () {
+            this.__painter.useProgram(this.program);
+            return this;
+        };
+        ShaderObject.prototype.compile = function (vshaderSource, fshaderSource) {
+            this.program = useShader(this.__painter, vshaderSource, fshaderSource);
+            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 vsColor = "attribute vec4 a_position;\r\nuniform mat4 u_matrix;\r\n\r\nvoid main()\r\n{\r\n    vec4 temp = u_matrix * a_position;\r\n\r\n    // 把原生的WebGL使用的左手坐标系变成了右手坐标系\r\n    temp.z = -1.0 * temp.z;\r\n\r\n    // 表示眼睛距离vec4(0.0,0.0,1.0)的距离\r\n    float dist = 4.0;\r\n\r\n    // 使用投影直接计算\r\n    // 为保证纹理和相对位置正确\r\n    // x、y、z的改变满足线性变换\r\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));\r\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 vsColors = "attribute vec4 a_position;\r\nuniform mat4 u_matrix;\r\nattribute vec4 a_color;\r\nvarying vec4 v_color;\r\n\r\nvoid main()\r\n{\r\n    vec4 temp = u_matrix * a_position;\r\n    temp.z = -1.0 * temp.z;\r\n    float dist = 4.0;\r\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));\r\n\r\n    v_color = a_color;\r\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 vsImage = "attribute vec4 a_position;\r\nuniform mat4 u_matrix;\r\nattribute vec2 a_textcoord;\r\nvarying vec2 v_textcoord;\r\n\r\nvoid main()\r\n{\r\n    vec4 temp = u_matrix * a_position;\r\n    temp.z = -1.0 * temp.z;\r\n    float dist = 4.0;\r\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));\r\n\r\n    v_textcoord = a_textcoord;\r\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 vsCube = "attribute vec4 a_position;\r\nuniform mat4 u_matrix;\r\nattribute vec4 a_normal;\r\nvarying vec3 v_normal;\r\n\r\nvoid main()\r\n{\r\n    vec4 temp = u_matrix * a_position;\r\n    temp.z = -1.0 * temp.z;\r\n    float dist = 4.0;\r\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));\r\n\r\n    v_normal = normalize(vec3(a_normal));\r\n}";
 
-    var fsColor = "precision mediump float;\n\nuniform vec4 u_color;\n\nvoid main()\n{\n    gl_FragColor = u_color;\n}";
+    var fsColor = "precision mediump float;\r\n\r\nuniform vec4 u_color;\r\n\r\nvoid main()\r\n{\r\n    gl_FragColor = u_color;\r\n}";
 
-    var fsColors = "precision mediump float;\n\nvarying vec4 v_color;\n\nvoid main()\n{\n    gl_FragColor = v_color;\n}";
+    var fsColors = "precision mediump float;\r\n\r\nvarying vec4 v_color;\r\n\r\nvoid main()\r\n{\r\n    gl_FragColor = v_color;\r\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 fsImage = "precision mediump float;\r\n\r\nuniform sampler2D u_sampler;\r\nvarying vec2 v_textcoord;\r\n\r\nvoid main()\r\n{\r\n    gl_FragColor = texture2D(u_sampler, v_textcoord);\r\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 fsCube = "precision mediump float;\r\n\r\nvarying vec3 v_normal;\r\nuniform samplerCube u_texture;\r\n\r\nvoid main()\r\n{\r\n    gl_FragColor = textureCube(u_texture, normalize(v_normal));\r\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;
+    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 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"), mesh.material.color.r, mesh.material.color.g, mesh.material.color.b, mesh.material.color.alpha);
-        }
-        if ("colors" in mesh.material) {
-            new BufferObject(painter).use()
-                .write(mesh.material.colors.array)
-                .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0);
-        }
-        else if ("cube" in mesh.material) {
-            var size = mesh.material.cube.right.image.value.width;
-            painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0);
-            getTexture(type, painter, 'cube').useCube([
-                mesh.material.cube.right.image.value,
-                mesh.material.cube.left.image.value,
-                mesh.material.cube.top.image.value,
-                mesh.material.cube.bottom.image.value,
-                mesh.material.cube.far.image.value,
-                mesh.material.cube.near.image.value
-            ], size, size);
-        }
-        else if ("image" in mesh.material) {
-            painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0);
-            new BufferObject(painter).use()
-                .write(mesh.geometry.attributes.uv.array)
-                .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0);
-            getTexture(type, painter, '2d').useImage(mesh.material.image.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);
-        }
+    function doDraw (type, painter, mesh, meshWorld, globalWorld) {
+        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"), mesh.material.color.r, mesh.material.color.g, mesh.material.color.b, mesh.material.color.alpha);
+        }
+        if ("colors" in mesh.material) {
+            new BufferObject(painter).use()
+                .write(mesh.material.colors.array)
+                .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0);
+        }
+        else if ("cube" in mesh.material) {
+            var size = mesh.material.cube.right.image.value.width;
+            painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0);
+            getTexture(type, painter, 'cube').useCube([
+                mesh.material.cube.right.image.value,
+                mesh.material.cube.left.image.value,
+                mesh.material.cube.top.image.value,
+                mesh.material.cube.bottom.image.value,
+                mesh.material.cube.far.image.value,
+                mesh.material.cube.near.image.value
+            ], size, size);
+        }
+        else if ("image" in mesh.material) {
+            painter.uniform1i(painter.getUniformLocation(shader.program, "u_sampler"), 0);
+            new BufferObject(painter).use()
+                .write(mesh.geometry.attributes.uv.array)
+                .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv.itemSize, 2, 0);
+            getTexture(type, painter, '2d').useImage(mesh.material.image.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);
+        }
     }
 
-    function assemble (begin, end, step, count) {
-        var val = [];
-        for (var index = 0; index < count; index++)
-            val[index] = begin;
-        return function () {
-            for (var i = 0; i < count; i++) {
-                if (val[i] + step < end) {
-                    val[i] = +(val[i] + step).toFixed(7);
-                    break;
-                }
-                else if (i < count - 1) {
-                    val[i] = begin;
-                }
-            }
-            return val;
-        };
+    function assemble (begin, end, step, count) {
+        var val = [];
+        for (var index = 0; index < count; index++)
+            val[index] = begin;
+        return function () {
+            for (var i = 0; i < count; i++) {
+                if (val[i] + step < end) {
+                    val[i] = +(val[i] + step).toFixed(7);
+                    break;
+                }
+                else if (i < count - 1) {
+                    val[i] = begin;
+                }
+            }
+            return val;
+        };
     }
 
-    var needUpdate = false;
-    var scale = 10;
-    var WebGL$1 = (function () {
-        function WebGL(ViewCanvas, RegionCanvas) {
-            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(ViewCanvas, scale);
-            if (RegionCanvas) {
-                this.__regionPainter = getWebGLContext(RegionCanvas, scale, {});
-            }
-            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);
-            }
-            return this;
-        };
-        WebGL.prototype.draw = function (object3D, isUpdateRegion) {
-            if (isUpdateRegion === void 0) { isUpdateRegion = false; }
-            if (!isUpdateRegion)
-                needUpdate = true;
-            var meshWorld = {
-                matrix: object3D.matrix.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];
-            }
-            return this;
-        };
-        WebGL.prototype.getRegion = function (x, y) {
-            var _this = this;
-            if (needUpdate)
-                this.review(true);
-            needUpdate = false;
-            return new Promise(function (resolve, reject) {
-                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;
+    var needUpdate = false;
+    var scale = 10;
+    var WebGL$1 = (function () {
+        function WebGL(ViewCanvas, RegionCanvas) {
+            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(ViewCanvas, scale);
+            if (RegionCanvas) {
+                this.__regionPainter = getWebGLContext(RegionCanvas, scale, {});
+            }
+            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);
+            }
+            return this;
+        };
+        WebGL.prototype.draw = function (object3D, isUpdateRegion) {
+            if (isUpdateRegion === void 0) { isUpdateRegion = false; }
+            if (!isUpdateRegion)
+                needUpdate = true;
+            var meshWorld = {
+                matrix: object3D.matrix.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];
+            }
+            return this;
+        };
+        WebGL.prototype.getRegion = function (x, y) {
+            var _this = this;
+            if (needUpdate)
+                this.review(true);
+            needUpdate = false;
+            return new Promise(function (resolve, reject) {
+                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;
     }());
 
-    function mergeOption (option, defaultOption) {
-        for (var key in option) {
-            defaultOption[key] = option[key];
-        }
-        return defaultOption;
+    function mergeOption (option, defaultOption) {
+        for (var key in option) {
+            defaultOption[key] = option[key];
+        }
+        return defaultOption;
     }
 
-    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;
-            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) || this;
-        }
-        return WebGL;
+    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;
+            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) || this;
+        }
+        return WebGL;
     }(WebGL$1));
 
     return WebGL;