vislite 0.1.0 → 0.2.0-alpha.7

package/lib/WebGL/index.umd.js

@@ -0,0 +1,626 @@
+/*!
+* VISLite JavaScript Library v0.2.0-alpha.7
+* git+https://github.com/oi-contrib/VISLite.git
+*
+* Copyright zxl20070701
+* Released under the MIT license
+* https://zxl20070701.github.io/notebook/home.html
+* 
+* 本版本系测试版本，请认真阅读下述说明再使用：
+*
+*【测试版本细则】
+* alpha：内测版本，仅供开发人员提供测试环境而发布，后续的修改可能极具破坏性，非有明确了解前请勿直接用于项目中
+* beta：外测版本，正式发布前的确认测试，或者新功能紧急发布，一般可以直接用于实际项目，因为即使后续发现了问题，直接使用正式版即可，不会有破坏性
+*/
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VISLite_WebGL = factory());
+})(this, (function () { 'use strict';
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+
+    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 _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 _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!');
+        }
+    }
+
+    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 initTexture = function (painter, type, unit) {
+        var texture = painter.createTexture();
+        if (type == painter.TEXTURE_2D) {
+            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_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 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 shaders = {};
+    function getShader (type, painter, mesh) {
+        var uniqueName = type +
+            (mesh.geometry.attributes.normal ? "1" : "0") +
+            (mesh.material.image ? "1" : "0") +
+            (mesh.material.color ? "1" : "0") +
+            (mesh.material.cube ? "1" : "0");
+        if (shaders[uniqueName])
+            return shaders[uniqueName].use();
+        var vertexShader = "\n     attribute vec4 a_position;\n\n     ".concat(mesh.geometry.attributes.normal ? 'attribute vec4 a_normal;varying vec3 v_normal;' : '', "\n\n    uniform mat4 u_matrix_world;\n    uniform mat4 u_matrix_mesh;\n    uniform mat4 u_matrix_proporion;\n\n    ").concat(mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : '', "\n\n    void main(){\n        vec4 temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position;\n\n        // \u8868\u793A\u773C\u775B\u8DDD\u79BBvec4(0.0,0.0,1.0)\u7684\u8DDD\u79BB\n        float dist = 4.0;\n\n        // \u4F7F\u7528\u6295\u5F71\u76F4\u63A5\u8BA1\u7B97\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        ").concat(mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : '', "\n        ").concat(mesh.material.image ? 'v_textcoord = a_textcoord;' : '', "\n     }\n ");
+        var fragmentShader = "\n    precision mediump float;\n\n    ".concat(mesh.geometry.attributes.normal ? 'varying vec3 v_normal;' : '', "\n    ").concat(mesh.material.color ? 'uniform vec4 u_color;' : '', "\n    ").concat(mesh.material.cube ? 'uniform samplerCube u_texture;' : '', "\n    ").concat(mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : '', "\n\n    void main(){\n        ").concat(mesh.material.color ? 'gl_FragColor = u_color;' : '', "\n        ").concat(mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : '', "\n        ").concat(mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : '', "\n    }\n ");
+        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, 3, 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, 3, 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);
+        }
+        else if ("cube" in mesh.material) {
+            var size = mesh.material.cube.right.image.value.width;
+            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] < 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);
+            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) {
+                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) {
+                    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);
+                }
+                else {
+                    doDraw("region" + this.__unique, this.painter, object3D.mesh[index], meshWorld, globalWorld);
+                }
+            }
+            this.__getColor = getColorFactory(this.__regionPainter);
+        };
+        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);
+                }
+            }
+            this.__scene.children.push(object3D);
+            this.draw(object3D);
+        };
+        WebGL.prototype.setRegion = function (regionName) {
+            this.__regionName = regionName + "";
+            if (regionName) {
+                if (this.__regionList[regionName] == undefined) {
+                    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 WebGL = (function (_super) {
+        __extends(WebGL, _super);
+        function WebGL(el) {
+            if (!el) {
+                throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.");
+            }
+            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 {
+                RegionCanvas = document.createElement('canvas');
+                el.appendChild(RegionCanvas);
+                RegionCanvas.style.position = 'absolute';
+                RegionCanvas.style.zIndex = "-1";
+                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];
+                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;
+
+}));

package/lib/WebGL/index.umd.min.js

@@ -0,0 +1,15 @@
+/*!
+* VISLite JavaScript Library v0.2.0-alpha.7
+* git+https://github.com/oi-contrib/VISLite.git
+*
+* Copyright zxl20070701
+* Released under the MIT license
+* https://zxl20070701.github.io/notebook/home.html
+* 
+* 本版本系测试版本，请认真阅读下述说明再使用：
+*
+*【测试版本细则】
+* alpha：内测版本，仅供开发人员提供测试环境而发布，后续的修改可能极具破坏性，非有明确了解前请勿直接用于项目中
+* beta：外测版本，正式发布前的确认测试，或者新功能紧急发布，一般可以直接用于实际项目，因为即使后续发现了问题，直接使用正式版即可，不会有破坏性
+*/
+var t,r;t=this,r=function(){"use strict";var t=function(r,e){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,r){t.__proto__=r}||function(t,r){for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&(t[e]=r[e])},t(r,e)};function r(t,r,e){if(e||2===arguments.length)for(var i,n=0,o=r.length;n<o;n++)!i&&n in r||(i||(i=Array.prototype.slice.call(r,0,n)),i[n]=r[n]);return t.concat(i||Array.prototype.slice.call(r))}function e(t,r,e){void 0===e&&(e={});for(var i=["webgl","experimental-webgl","webkit-3d","moz-webgl"],n=null,o=0;o<i.length;o++){try{n=t.getContext(i[o],e)}catch(t){}if(n)break}if(!n)throw new Error("Non canvas or browser does not support webgl.");var a=n.canvas.width,_=n.canvas.height,s=a*r,u=_*r;return n.viewport(.5*(a-s),.5*(_-u),s,u),n.depthFunc(n.LEQUAL),n.enable(n.DEPTH_TEST),n}var i=function(t,r){for(var e=[],i=0;i<4;i++)for(var n=0;n<r.length/4;n++)e[4*n+i]=t[i]*r[4*n]+t[i+4]*r[4*n+1]+t[i+8]*r[4*n+2]+t[i+12]*r[4*n+3];return e},n=function(){function t(t){void 0===t&&(t=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),this.name="Matrix4",this.__matrix4=t}return t.prototype.move=function(t,r,e,n){return void 0===n&&(n=0),this.__matrix4=i(function(t,r,e,i){void 0===i&&(i=0);var n=Math.sqrt(r*r+e*e+i*i);return[1,0,0,0,0,1,0,0,0,0,1,0,r*t/n,e*t/n,i*t/n,1]}(t,r,e,n),this.__matrix4),this},t.prototype.rotate=function(t,r,e,n,o,a,_){var s=function(t,r,e,i,n,o){if("number"==typeof t&&"number"==typeof r){if("number"!=typeof e?(e=0,i=t,n=r,o=1):"number"==typeof i&&"number"==typeof n&&"number"==typeof o||(i=t,n=r,o=e,t=0,r=0,e=0),t==i&&r==n&&e==o)throw new Error("It's not a legitimate ray!");var a=Math.sqrt((i-t)*(i-t)+(n-r)*(n-r)),_=0!=a?(n-r)/a:1,s=0!=a?(i-t)/a:0,u=(i-t)*s+(n-r)*_,m=o-e,c=Math.sqrt(u*u+m*m),l=0!=c?m/c:1,h=0!=c?u/c:0;return[[_,l*s,s*h,0,-s,_*l,_*h,0,0,-h,l,0,r*s-t*_,e*h-t*s*l-r*_*l,-t*s*h-r*_*h-e*l,1],[_,-s,0,0,l*s,l*_,-h,0,s*h,_*h,l,0,t,r,e,1]]}throw new Error("a1 and b1 is required!")}(r,e,n,o,a,_);return this.__matrix4=i(i(i(s[1],function(t){var r=Math.sin(t),e=Math.cos(t);return[e,r,0,0,-r,e,0,0,0,0,1,0,0,0,0,1]}(t)),s[0]),this.__matrix4),this},t.prototype.scale=function(t,r,e,n,o,a){return void 0===n&&(n=0),void 0===o&&(o=0),void 0===a&&(a=0),this.__matrix4=i(function(t,r,e,i,n,o){return void 0===i&&(i=0),void 0===n&&(n=0),void 0===o&&(o=0),[t,0,0,0,0,r,0,0,0,0,e,0,i-i*t,n-n*r,o-o*e,1]}(t,r,e,n,o,a),this.__matrix4),this},t.prototype.multiply=function(t,r){return void 0===r&&(r=!1),this.__matrix4=r?i(this.__matrix4,t):i(t,this.__matrix4),this},t.prototype.use=function(t,r,e,n){return void 0===e&&(e=0),void 0===n&&(n=1),i(this.__matrix4,[t,r,e,n])},t.prototype.value=function(){return this.__matrix4},t}(),o=function(){function t(t,r){void 0===r&&(r=!1),this.__painter=t,this.__isElement=r,this.__buffer=function(t){return t.createBuffer()}(t),this.__type=r?t.ELEMENT_ARRAY_BUFFER:t.ARRAY_BUFFER}return t.prototype.use=function(){return this.__painter.bindBuffer(this.__type,this.__buffer),this},t.prototype.write=function(t){return function(t,r,e,i){var n=e?t.ELEMENT_ARRAY_BUFFER:t.ARRAY_BUFFER;t.bufferData(n,r,i)}(this.__painter,t,this.__isElement,this.__painter.STATIC_DRAW),this.__fsize=t.BYTES_PER_ELEMENT,this},t.prototype.divide=function(t,r,e,i){return void 0===i&&(i=0),function(t,r,e,i,n,o,a){t.vertexAttribPointer(r,e,i,a,n,o),t.enableVertexAttribArray(r)}(this.__painter,t,r,this.__painter.FLOAT,e*this.__fsize,i*this.__fsize,!1),this},t}(),a=function(){function t(t,r,e){void 0===e&&(e=0),this.__painter=t,this.__type={"2d":t.TEXTURE_2D,cube:t.TEXTURE_CUBE_MAP}[r],this.__texture=function(t,r,e){var i=t.createTexture();return r==t.TEXTURE_2D&&t.activeTexture(t["TEXTURE"+e]),t.bindTexture(r,i),i}(t,this.__type,e),t.texParameteri(this.__type,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(this.__type,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(this.__type,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE)}return t.prototype.useImage=function(t){return function(t,r,e,i,n,o){t.texImage2D(r,e,i,i,n,o)}(this.__painter,this.__type,0,this.__painter.RGBA,this.__painter.UNSIGNED_BYTE,t),this},t.prototype.useCube=function(t,r,e){return function(t,r,e,i,n,o,a,_,s){for(var u,m=[t.TEXTURE_CUBE_MAP_POSITIVE_X,t.TEXTURE_CUBE_MAP_NEGATIVE_X,t.TEXTURE_CUBE_MAP_POSITIVE_Y,t.TEXTURE_CUBE_MAP_NEGATIVE_Y,t.TEXTURE_CUBE_MAP_POSITIVE_Z,t.TEXTURE_CUBE_MAP_NEGATIVE_Z],c=0;c<m.length;c++)o[c]&&(u=m[c],t.texImage2D(u,e,i,a,_,0,i,n,null),t.bindTexture(r,s),t.texImage2D(u,e,i,i,n,o[c]));t.generateMipmap(r)}(this.__painter,this.__type,0,this.__painter.RGBA,this.__painter.UNSIGNED_BYTE,t,r,e,this.__texture),this},t}(),_={};function s(t,r,e){var i=t+"-"+e;return _[i]||(_[i]=new a(r,e)),_[i]}var u=function(t,r,e){var i=t.createShader(r);if(null==i)throw new Error("Unable to create shader!");if(t.shaderSource(i,e),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS))throw new Error("Failed to compile shader:"+t.getShaderInfoLog(i));return i},m=function(){function t(t){this.__painter=t}return t.prototype.use=function(){return this.__painter.useProgram(this.program),this},t.prototype.compile=function(t,r){return this.program=function(t,r,e){var i=u(t,t.VERTEX_SHADER,r),n=u(t,t.FRAGMENT_SHADER,e),o=t.createProgram();if(t.attachShader(o,i),t.attachShader(o,n),t.linkProgram(o),!t.getProgramParameter(o,t.LINK_STATUS))throw new Error("Failed to link program: "+t.getProgramInfoLog(o));return o}(this.__painter,t,r),this},t}(),c={};function l(t,r,e,i,n){var a=function(t,r,e){var i=t+(e.geometry.attributes.normal?"1":"0")+(e.material.image?"1":"0")+(e.material.color?"1":"0")+(e.material.cube?"1":"0");if(c[i])return c[i].use();var n="\n     attribute vec4 a_position;\n\n     ".concat(e.geometry.attributes.normal?"attribute vec4 a_normal;varying vec3 v_normal;":"","\n\n    uniform mat4 u_matrix_world;\n    uniform mat4 u_matrix_mesh;\n    uniform mat4 u_matrix_proporion;\n\n    ").concat(e.material.image?"attribute vec2 a_textcoord;varying vec2 v_textcoord;":"","\n\n    void main(){\n        vec4 temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position;\n\n        // 表示眼睛距离vec4(0.0,0.0,1.0)的距离\n        float dist = 4.0;\n\n        // 使用投影直接计算\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        ").concat(e.geometry.attributes.normal?"v_normal = normalize(vec3(a_normal));":"","\n        ").concat(e.material.image?"v_textcoord = a_textcoord;":"","\n     }\n "),o="\n    precision mediump float;\n\n    ".concat(e.geometry.attributes.normal?"varying vec3 v_normal;":"","\n    ").concat(e.material.color?"uniform vec4 u_color;":"","\n    ").concat(e.material.cube?"uniform samplerCube u_texture;":"","\n    ").concat(e.material.image?"uniform sampler2D u_sampler;varying vec2 v_textcoord;":"","\n\n    void main(){\n        ").concat(e.material.color?"gl_FragColor = u_color;":"","\n        ").concat(e.material.cube?"gl_FragColor = textureCube(u_texture,normalize(v_normal));":"","\n        ").concat(e.material.image?"gl_FragColor = texture2D(u_sampler,v_textcoord);":"","\n    }\n "),a=new m(r).compile(n,o).use();return c[i]=a,a}(t,r,e);if(new o(r).use().write(e.geometry.attributes.position.array).divide(r.getAttribLocation(a.program,"a_position"),e.geometry.attributes.position.itemSize,3,0),r.uniformMatrix4fv(r.getUniformLocation(a.program,"u_matrix_world"),!1,n.matrix),r.uniformMatrix4fv(r.getUniformLocation(a.program,"u_matrix_proporion"),!1,n.proporion),r.uniformMatrix4fv(r.getUniformLocation(a.program,"u_matrix_mesh"),!1,i.matrix),e.geometry.attributes.normal&&new o(r).use().write(e.geometry.attributes.normal.array).divide(r.getAttribLocation(a.program,"a_normal"),e.geometry.attributes.normal.itemSize,3,0),"color"in e.material)r.uniform4f(r.getUniformLocation(a.program,"u_color"),e.material.color.r,e.material.color.g,e.material.color.b,e.material.color.alpha);else if("cube"in e.material){var _=e.material.cube.right.image.value.width;s(t,r,"cube").useCube([e.material.cube.right.image.value,e.material.cube.left.image.value,e.material.cube.top.image.value,e.material.cube.bottom.image.value,e.material.cube.far.image.value,e.material.cube.near.image.value],_,_)}else"image"in e.material&&(r.uniform1i(r.getUniformLocation(a.program,"u_sampler"),0),new o(r).use().write(e.geometry.attributes.uv.array).divide(r.getAttribLocation(a.program,"a_textcoord"),e.geometry.attributes.uv.itemSize,2,0),s(t,r,"2d").useImage(e.material.image.value));e.geometry.index?(new o(r,!0).use().write(e.geometry.index.array),r.drawElements(r[e.geometry.type],e.geometry.index.count,r.UNSIGNED_BYTE,0)):r.drawArrays(r[e.geometry.type],0,e.geometry.attributes.position.count)}var h=!1,p=function(){function t(t,r){this.name="WebGL",this.__getColor=function(t,r){return"rgba(0,0,0,1)"},this.__regionList={},this.__regionAssemble=function(t,r,e,i){for(var n=[],o=0;o<i;o++)n[o]=t;return function(){for(var o=0;o<i;o++){if(n[o]<r){n[o]=+(n[o]+e).toFixed(7);break}o<i-1&&(n[o]=t)}return n}}(0,1,.2,3),this.__regionName="",this.__regionColor=[0,0,0,1],this.__scene={children:[],matrix:new n([1,0,0,0,0,1,0,0,0,0,-1,0,0,0,0,10])},this.__unique=(new Date).valueOf(),this.painter=e(t,10),this.__regionPainter=e(r,10,{});var i=this.painter.canvas.width/this.painter.canvas.height,o=1,a=1;i>1?o=1/i:a=i;var _=Math.min(o,a);this.__proporion=[o,0,0,0,0,a,0,0,0,0,_,0,0,0,0,1]}return t.prototype.matrix=function(t){return new n(t)},t.prototype.getMatrix=function(){return this.__scene.matrix},t.prototype.getObject3D=function(){return this.__scene.children},t.prototype.review=function(t){void 0===t&&(t=!1),t?(this.__regionPainter.clearColor(1,1,1,1),this.__regionPainter.clear(this.__regionPainter.COLOR_BUFFER_BIT)):(this.painter.clearColor(1,1,1,1),this.painter.clear(this.painter.COLOR_BUFFER_BIT));for(var r=0;r<this.__scene.children.length;r++)this.draw(this.__scene.children[r],t);return this},t.prototype.draw=function(t,r){void 0===r&&(r=!1),r||(h=!0);var e,i,n,o,a={matrix:t.matrix.value()},_={matrix:this.__scene.matrix.value(),proporion:this.__proporion};this.setRegion(t.region);for(var s=0;s<t.mesh.length;s++)r?l("painter"+this.__unique,this.__regionPainter,{geometry:t.mesh[s].geometry,material:{color:{r:this.__regionColor[0],g:this.__regionColor[1],b:this.__regionColor[2],alpha:this.__regionColor[3]}}},a,_):l("region"+this.__unique,this.painter,t.mesh[s],a,_);this.__getColor=(e=this.__regionPainter,i=e.drawingBufferWidth,n=e.drawingBufferHeight,o=new Uint8Array(4*i*n),e.readPixels(0,0,i,n,e.RGBA,e.UNSIGNED_BYTE,o),function(t,r){return"rgba("+o[4*((r=n-r)*i+t)]+","+o[4*(r*i+t)+1]+","+o[4*(r*i+t)+2]+","+o[4*(r*i+t)+3]+")"})},t.prototype.render=function(t){"matrix"in t||(t.matrix=new n),"region"in t||(t.region="");for(var r=0;r<t.mesh.length;r++){var e=t.mesh[r];e.geometry.attributes.normal&&Array.isArray(e.geometry.attributes.normal.array)&&(e.geometry.attributes.normal.array=new Float32Array(e.geometry.attributes.normal.array)),e.geometry.attributes.position&&Array.isArray(e.geometry.attributes.position.array)&&(e.geometry.attributes.position.array=new Float32Array(e.geometry.attributes.position.array)),e.geometry.attributes.uv&&Array.isArray(e.geometry.attributes.uv.array)&&(e.geometry.attributes.uv.array=new Float32Array(e.geometry.attributes.uv.array)),e.geometry.index&&Array.isArray(e.geometry.index.array)&&(e.geometry.index.array=new Uint8Array(e.geometry.index.array))}this.__scene.children.push(t),this.draw(t)},t.prototype.setRegion=function(t){return this.__regionName=t+"",t?(null==this.__regionList[t]&&(this.__regionList[t]=r(r([],this.__regionAssemble(),!0),[1],!1)),this.__regionColor=this.__regionList[t]):this.__regionColor=[0,0,0,1],this},t.prototype.getRegion=function(t,r){var e=this;return h&&this.review(!0),h=!1,new Promise((function(i,n){var o=e.__getColor(t,r);for(var a in e.__regionList){var _=e.__regionList[a];if("rgba("+255*_[0]+","+255*_[1]+","+255*_[2]+","+255*_[3]+")"==o){i(a);break}}i("")}))},t}();return function(r){function e(t){if(!t)throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.");var e,i,n=t.clientWidth,o=t.clientHeight,a=t;a._vislite_canvas_?(e=a._vislite_canvas_[0],i=a._vislite_canvas_[1]):(i=document.createElement("canvas"),t.appendChild(i),i.style.position="absolute",i.style.zIndex="-1",e=document.createElement("canvas"),t.appendChild(e),a._vislite_canvas_=[e,i],t.setAttribute("vislite","WebGL"));for(var _=0,s=[e,i];_<s.length;_++){var u=s[_];u.style.width=n+"px",u.setAttribute("width",n+""),u.style.height=o+"px",u.setAttribute("height",o+"")}return r.call(this,e,i)||this}return function(r,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=r}t(r,e),r.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}(e,r),e}(p)},"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(t="undefined"!=typeof globalThis?globalThis:t||self).VISLite_WebGL=r();