vislite 0.8.1-alpha.1 → 0.8.1

package/lib/OralWebGL/index.es.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.8.1-alpha.1
+* VISLite JavaScript Library v0.8.1
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Wed Apr 03 2024 10:29:52 GMT+0800 (China Standard Time)
+* Publish Date:  Wed Apr 10 2024 20:35:52 GMT+0800 (中国标准时间)
 */
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -40,600 +40,600 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-function getWebGLContext (canvas, scale, opts, mode) {
-    if (opts === void 0) { opts = {}; }
-    if (mode === void 0) { mode = "scaleToFill"; }
-    var names = ["experimental-webgl", "webkit-3d", "moz-webgl"];
-    var painter = canvas.getContext("webgl", opts);
-    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 scaleX = scale, scaleY = scale;
-    if (mode == "aspectFit") {
-        if (width > height) {
-            scaleX *= height / width;
-        }
-        else if (height > width) {
-            scaleY *= width / height;
-        }
-    }
-    else if (mode == "aspectFill") {
-        if (width > height) {
-            scaleY *= width / height;
-        }
-        else if (height > width) {
-            scaleX *= height / width;
-        }
-    }
-    var viewWidth = width * scaleX;
-    var viewHeight = height * scaleY;
-    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, mode) {
+    if (opts === void 0) { opts = {}; }
+    if (mode === void 0) { mode = "scaleToFill"; }
+    var names = ["experimental-webgl", "webkit-3d", "moz-webgl"];
+    var painter = canvas.getContext("webgl", opts);
+    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 scaleX = scale, scaleY = scale;
+    if (mode == "aspectFit") {
+        if (width > height) {
+            scaleX *= height / width;
+        }
+        else if (height > width) {
+            scaleY *= width / height;
+        }
+    }
+    else if (mode == "aspectFill") {
+        if (width > height) {
+            scaleY *= width / height;
+        }
+        else if (height > width) {
+            scaleX *= height / width;
+        }
+    }
+    var viewWidth = width * scaleX;
+    var viewHeight = height * scaleY;
+    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 __initMatrix4 = [
-    1, 0, 0, 0,
-    0, 1, 0, 0,
-    0, 0, 1, 0,
-    0, 0, 0, 1
-];
-var Matrix4 = (function () {
-    function Matrix4(initMatrix4) {
-        if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
-        this.name = 'Matrix4';
-        this.__matrix4 = initMatrix4;
-    }
-    Matrix4.prototype.setValue = function (initMatrix4) {
-        if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
-        this.__matrix4 = initMatrix4;
-        return this;
-    };
-    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 __initMatrix4 = [
+    1, 0, 0, 0,
+    0, 1, 0, 0,
+    0, 0, 1, 0,
+    0, 0, 0, 1
+];
+var Matrix4 = (function () {
+    function Matrix4(initMatrix4) {
+        if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
+        this.name = 'Matrix4';
+        this.__matrix4 = initMatrix4;
+    }
+    Matrix4.prototype.setValue = function (initMatrix4) {
+        if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
+        this.__matrix4 = initMatrix4;
+        return this;
+    };
+    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
-    ];
-    var 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
+    ];
+    var 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 _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);
-    }
+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);
+    }
 }
 
-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 = (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(ViewCanvas, scale, {}, mode);
-        if (RegionCanvas) {
-            this.__regionPainter = getWebGLContext(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);
-        }
-        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];
-        }
-        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;
+var needUpdate = false;
+var scale = 10;
+var WebGL = (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(ViewCanvas, scale, {}, mode);
+        if (RegionCanvas) {
+            this.__regionPainter = getWebGLContext(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);
+        }
+        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];
+        }
+        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;
 }());
 
 export { WebGL as default };