vislite 0.2.0 → 0.3.0-alpha.1

package/lib/index.umd.js

@@ -1,12 +1,12 @@
 /*!
-* VISLite JavaScript Library v0.2.0
+* VISLite JavaScript Library v0.3.0-alpha.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: Sat Jun 03 2023 09:32:28 GMT+0800 (中国标准时间)
+* Publish Date:  Wed Jun 28 2023 22:51:53 GMT+0800 (中国标准时间)
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -67,9 +67,20 @@
                 if (points[flag][0] <= points[flag - 1][0])
                     throw new Error('The point position should be increamented!');
                 this.__HS.x[flag] = points[flag][0];
-                temp = flag < points.length - 1 ?
-                    (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]) :
-                    (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0]);
+                if (flag < points.length - 1) {
+                    if ((points[flag + 1][1] > points[flag][1] && points[flag - 1][1] > points[flag][1]) ||
+                        (points[flag + 1][1] < points[flag][1] && points[flag - 1][1] < points[flag][1]) ||
+                        points[flag + 1][1] == points[flag][1] ||
+                        points[flag - 1][1] == points[flag][1]) {
+                        temp = 0;
+                    }
+                    else {
+                        temp = (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]);
+                    }
+                }
+                else {
+                    temp = (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0]);
+                }
                 this.__HS.h[flag - 1] = new Hermite((1 - this.__t) * 0.5).setP(points[flag - 1][0], points[flag - 1][1], points[flag][0], points[flag][1], slope, temp);
                 slope = temp;
             }
@@ -511,22 +522,22 @@
     }
 
     var initText$1 = function (el, config, x, y, deg) {
-        if (el.nodeName.toLowerCase() !== 'text')
-            throw new Error('Need a <text> !');
+        if (el.nodeName.toLowerCase() !== "text")
+            throw new Error("Need a <text> !");
         setAttribute(el, "dy", {
-            "top": config['font-size'] * 0.5,
-            "middle": 0,
-            "bottom": -config['font-size'] * 0.5,
+            top: config["fontSize"] * 0.5,
+            middle: 0,
+            bottom: -config["fontSize"] * 0.5,
         }[config.textBaseline]);
         setStyle(el, {
             "text-anchor": {
-                "left": "start",
-                "right": "end",
-                "center": "middle"
+                left: "start",
+                right: "end",
+                center: "middle",
             }[config.textAlign],
             "dominant-baseline": "central",
-            "font-size": config['font-size'] + "px",
-            "font-family": config['font-family']
+            "font-size": config["fontSize"] + "px",
+            "font-family": config["fontFamily"],
         });
         setAttribute(el, "x", x);
         setAttribute(el, "y", y);
@@ -536,20 +547,20 @@
         }
     };
     var initCircle$1 = function (el, cx, cy, r) {
-        if (el.nodeName.toLowerCase() !== 'circle')
-            throw new Error('Need a <circle> !');
-        setAttribute(el, 'cx', cx);
-        setAttribute(el, 'cy', cy);
-        setAttribute(el, 'r', r);
+        if (el.nodeName.toLowerCase() !== "circle")
+            throw new Error("Need a <circle> !");
+        setAttribute(el, "cx", cx);
+        setAttribute(el, "cy", cy);
+        setAttribute(el, "r", r);
     };
     var initPath = function (el, path) {
-        if (el.nodeName.toLowerCase() !== 'path')
-            throw new Error('Need a <path> !');
-        setAttribute(el, 'd', path);
+        if (el.nodeName.toLowerCase() !== "path")
+            throw new Error("Need a <path> !");
+        setAttribute(el, "d", path);
     };
     var initRect$1 = function (el, x, y, width, height) {
-        if (el.nodeName.toLowerCase() !== 'rect')
-            throw new Error('Need a <rect> !');
+        if (el.nodeName.toLowerCase() !== "rect")
+            throw new Error("Need a <rect> !");
         if (height < 0) {
             height *= -1;
             y -= height;
@@ -558,14 +569,16 @@
             width *= -1;
             x -= width;
         }
-        setAttribute(el, 'x', x);
-        setAttribute(el, 'y', y);
-        setAttribute(el, 'width', width);
-        setAttribute(el, 'height', height);
+        setAttribute(el, "x", x);
+        setAttribute(el, "y", y);
+        setAttribute(el, "width", width);
+        setAttribute(el, "height", height);
     };
     var initArc$1 = function (el, config, cx, cy, r1, r2, beginDeg, deg) {
-        if (el.nodeName.toLowerCase() !== 'path')
-            throw new Error('Need a <path> !');
+        if (el.nodeName.toLowerCase() !== "path")
+            throw new Error("Need a <path> !");
+        beginDeg = (beginDeg / 180) * Math.PI;
+        deg = (deg / 180) * Math.PI;
         beginDeg = beginDeg % (Math.PI * 2);
         if (r1 > r2) {
             var temp = r1;
@@ -579,27 +592,28 @@
             deg = deg % (Math.PI * 2);
         }
         arc(beginDeg, deg, cx, cy, r1, r2, function (beginA, endA, begInnerX, begInnerY, begOuterX, begOuterY, endInnerX, endInnerY, endOuterX, endOuterY, r) {
-            var f = (endA - beginA) > Math.PI ? 1 : 0, d = "M" + begInnerX + " " + begInnerY;
+            var f = endA - beginA > Math.PI ? 1 : 0, d = "M" + begInnerX + " " + begInnerY;
             if (r < 0)
                 r = -r;
             d +=
                 "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY;
-            if (config["arc-end-cap"] == 'round')
+            if (config.arcEndCap == "round")
                 d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY;
-            else if (config["arc-end-cap"] == '-round')
+            else if (config.arcEndCap == "-round")
                 d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY;
             else
                 d += "L" + endOuterX + " " + endOuterY;
-            d += "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY;
-            if (config["arc-start-cap"] == 'round')
+            d +=
+                "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY;
+            if (config.arcStartCap == "round")
                 d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY;
-            else if (config["arc-start-cap"] == '-round')
+            else if (config.arcStartCap == "-round")
                 d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY;
             else
                 d += "L" + begInnerX + " " + begInnerY;
-            if (config["arc-start-cap"] == 'butt')
+            if (config.arcStartCap == "butt")
                 d += "Z";
-            setAttribute(el, 'd', d);
+            setAttribute(el, "d", d);
         });
     };
 
@@ -607,29 +621,29 @@
         "font-size": "fontSize",
         "font-family": "fontFamily",
         "arc-start-cap": "arcStartCap",
-        "arc-end-cap": "arcEndCap"
+        "arc-end-cap": "arcEndCap",
     };
     var SVG$1 = (function () {
         function SVG(svg) {
             this.name = "SVG";
             this.__config = {
-                "fillStyle": "#000",
-                "strokeStyle": "#000",
-                "lineWidth": 1,
-                "textAlign": "left",
-                "textBaseline": "middle",
+                fillStyle: "#000",
+                strokeStyle: "#000",
+                lineWidth: 1,
+                textAlign: "left",
+                textBaseline: "middle",
                 "font-size": 16,
                 "font-family": "sans-serif",
                 "arc-start-cap": "butt",
                 "arc-end-cap": "butt",
-                "lineDash": []
+                lineDash: [],
             };
             this.__path = "";
             this.__currentPosition = [];
             this.__svg = svg;
         }
         SVG.prototype.config = function (params) {
-            if (typeof params !== 'object') {
+            if (typeof params !== "object") {
                 return this.__config[oldAttrName$1[params] || params];
             }
             else {
@@ -649,7 +663,7 @@
         };
         SVG.prototype.appendEl = function (el, context) {
             context = context || this.__svg;
-            if (typeof el == 'string')
+            if (typeof el == "string")
                 el = toNode(el);
             context.appendChild(el);
             this.__useEl = el;
@@ -657,14 +671,15 @@
         };
         SVG.prototype.appendBoard = function (el, context) {
             var _el = el;
-            if (typeof el == 'string')
-                _el = {
-                    text: "text",
-                    path: "path",
-                    arc: "path",
-                    circle: "circle",
-                    rect: "rect"
-                }[el] || "";
+            if (typeof el == "string")
+                _el =
+                    {
+                        text: "text",
+                        path: "path",
+                        arc: "path",
+                        circle: "circle",
+                        rect: "rect",
+                    }[el] || "";
             if (_el == "")
                 throw new Error("Unsupported drawing method:" + el);
             return this.appendEl(_el, context);
@@ -681,7 +696,7 @@
         SVG.prototype.attr = function (params) {
             if (!this.__useEl)
                 throw new Error("Currently, no node can be modified or viewed.");
-            if (typeof params !== 'object') {
+            if (typeof params !== "object") {
                 return getAttribute(this.__useEl, params);
             }
             else {
@@ -792,17 +807,28 @@
             return this;
         };
         SVG.prototype.arc = function (x, y, r, beginDeg, deg) {
-            var begPosition = rotate$1(x, y, beginDeg, x + r, y);
-            var endPosition = rotate$1(x, y, beginDeg + deg, x + r, y);
-            beginDeg = beginDeg / Math.PI * 180;
-            deg = deg / Math.PI * 180;
-            if (this.__path == '') {
+            var begPosition = rotate$1(x, y, (beginDeg / 180) * Math.PI, x + r, y);
+            var endPosition = rotate$1(x, y, ((beginDeg + deg) / 180) * Math.PI, x + r, y);
+            if (this.__path == "") {
                 this.__path += "M" + begPosition[0] + "," + begPosition[1];
             }
-            else if (begPosition[0] != this.__currentPosition[0] || begPosition[1] != this.__currentPosition[1]) {
+            else if (begPosition[0] != this.__currentPosition[0] ||
+                begPosition[1] != this.__currentPosition[1]) {
                 this.__path += "L" + begPosition[0] + "," + begPosition[1];
             }
-            this.__path += "A" + r + "," + r + " 0 " + ((deg > 180 || deg < -180) ? 1 : 0) + "," + (deg > 0 ? 1 : 0) + " " + endPosition[0] + "," + endPosition[1];
+            this.__path +=
+                "A" +
+                    r +
+                    "," +
+                    r +
+                    " 0 " +
+                    (deg > 180 || deg < -180 ? 1 : 0) +
+                    "," +
+                    (deg > 0 ? 1 : 0) +
+                    " " +
+                    endPosition[0] +
+                    "," +
+                    endPosition[1];
             return this;
         };
         SVG.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
@@ -810,7 +836,8 @@
             return this;
         };
         SVG.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
-            this.__path += "C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y;
+            this.__path +=
+                "C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y;
             return this;
         };
         return SVG;
@@ -837,7 +864,14 @@
         painter.beginPath();
         painter.translate(x, y);
         painter.rotate(deg);
-        painter.font = config.fontStyle + " " + config.fontWeight + " " + config.fontSize + "px " + config.fontFamily;
+        painter.font =
+            config.fontStyle +
+                " " +
+                config.fontWeight +
+                " " +
+                config.fontSize +
+                "px " +
+                config.fontFamily;
         return painter;
     };
     var initArc = function (painter, config, cx, cy, r1, r2, beginDeg, deg) {
@@ -859,17 +893,21 @@
             painter.beginPath();
             painter.moveTo(begInnerX, begInnerY);
             painter.arc(cx, cy, r1, beginA, endA, false);
-            if (config.arcEndCap != 'round')
-                painter.lineTo(endOuterX, endOuterY);
-            else
+            if (config.arcEndCap == "round")
                 painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, true);
-            painter.arc(cx, cy, r2, endA, beginA, true);
-            if (config.arcStartCap != 'round')
-                painter.lineTo(begInnerX, begInnerY);
+            else if (config.arcEndCap == "-round")
+                painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, false);
             else
+                painter.lineTo(endOuterX, endOuterY);
+            painter.arc(cx, cy, r2, endA, beginA, true);
+            if (config.arcStartCap == "round")
                 painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, true);
+            else if (config.arcStartCap == "-round")
+                painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, false);
+            else
+                painter.lineTo(begInnerX, begInnerY);
         });
-        if (config.arcStartCap == 'butt')
+        if (config.arcStartCap == "butt")
             painter.closePath();
         return painter;
     };
@@ -942,6 +980,9 @@
                     this.painter.setLineDash(value);
             }
             else if (key in this.__specialConfig) {
+                if (key == 'fontSize') {
+                    value = Math.round(value);
+                }
                 this.__specialConfig[key] = value;
             }
             else if (key in this.__initConfig) {
@@ -1085,6 +1126,12 @@
             this.painter.restore();
             return this;
         };
+        Painter.prototype.clip = function () {
+            if (this.__region)
+                this.__region.clip();
+            this.painter.clip();
+            return this;
+        };
         Painter.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
             if (this.__region)
                 this.__region.quadraticCurveTo(cpx, cpy, x, y);
@@ -1184,19 +1231,46 @@
         };
     }
 
+    var linearGradient = function (painter, x0, y0, x1, y1) {
+        var gradient = painter.createLinearGradient(x0, y0, x1, y1);
+        var enhanceGradient = {
+            "value": function () {
+                return gradient;
+            },
+            "setColor": function (stop, color) {
+                gradient.addColorStop(stop, color);
+                return enhanceGradient;
+            }
+        };
+        return enhanceGradient;
+    };
+    var radialGradient = function (painter, cx, cy, r) {
+        var gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r);
+        var enhanceGradient = {
+            "value": function () {
+                return gradient;
+            },
+            "setColor": function (stop, color) {
+                gradient.addColorStop(stop, color);
+                return enhanceGradient;
+            }
+        };
+        return enhanceGradient;
+    };
+
     var oldAttrName = {
         "font-size": "fontSize",
         "font-family": "fontFamily",
         "font-weight": "fontWeight",
         "font-style": "fontStyle",
         "arc-start-cap": "arcStartCap",
-        "arc-end-cap": "arcEndCap"
+        "arc-end-cap": "arcEndCap",
     };
     var Canvas$1 = (function (_super) {
         __extends(Canvas, _super);
         function Canvas(ViewCanvas, RegionCanvas) {
             var _this = _super.call(this, ViewCanvas, {}, new Painter(RegionCanvas, {
-                willReadFrequently: true
+                willReadFrequently: true,
             })) || this;
             _this.name = "Canvas";
             _this.__regionList = {};
@@ -1215,7 +1289,8 @@
             if (regionName) {
                 if (this.__regionList[regionName] == undefined) {
                     var tempColor = this.__regionAssemble();
-                    this.__regionList[regionName] = "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")";
+                    this.__regionList[regionName] =
+                        "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")";
                 }
                 this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
                     this.__region.useConfig("strokeStyle", this.__regionList[regionName]);
@@ -1233,7 +1308,14 @@
                 var currentRGBA = imgData.data;
                 var doit = function () {
                     for (var key in _this.__regionList) {
-                        if ("rgb(" + currentRGBA[0] + "," + currentRGBA[1] + "," + currentRGBA[2] + ")" == _this.__regionList[key]) {
+                        if ("rgb(" +
+                            currentRGBA[0] +
+                            "," +
+                            currentRGBA[1] +
+                            "," +
+                            currentRGBA[2] +
+                            ")" ==
+                            _this.__regionList[key]) {
                             resolve(key);
                             break;
                         }
@@ -1255,6 +1337,24 @@
             if (isRegion === void 0) { isRegion = false; }
             return isRegion ? this.__region.painter : this.painter;
         };
+        Canvas.prototype.createLinearGradient = function (x0, y0, x1, y1) {
+            return linearGradient(this.painter, x0, y0, x1, y1);
+        };
+        Canvas.prototype.createRadialGradient = function (cx, cy, r) {
+            return radialGradient(this.painter, cx, cy, r);
+        };
+        Canvas.prototype.getColor = function (x, y) {
+            var currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data;
+            return ("rgba(" +
+                currentRGBA[0] +
+                "," +
+                currentRGBA[1] +
+                "," +
+                currentRGBA[2] +
+                "," +
+                currentRGBA[3] +
+                ")");
+        };
         return Canvas;
     }(Painter));
 
@@ -1477,11 +1577,12 @@
             (mesh.geometry.attributes.normal ? "1" : "0") +
             (mesh.material.image ? "1" : "0") +
             (mesh.material.color ? "1" : "0") +
+            (mesh.material.colors ? "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 = a_position;\n\n        // \u5E94\u7528\u53D8\u6362\u77E9\u9635\uFF1A\u5C4F\u5E55\u6BD4\u8C03\u5E73\u77E9\u9635\u3001\u4E16\u754C\u77E9\u9635\u3001\u7269\u4F53\u77E9\u9635\n        temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * temp;\n\n        // \u628A\u539F\u751F\u7684WebGL\u4F7F\u7528\u7684\u5DE6\u624B\u5750\u6807\u7CFB\u53D8\u6210\u4E86\u53F3\u624B\u5750\u6807\u7CFB\n        temp.z = -1.0 * temp.z;\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        // \u4E3A\u4FDD\u8BC1\u7EB9\u7406\u548C\u76F8\u5BF9\u4F4D\u7F6E\u6B63\u786E\n        // x\u3001y\u3001z\u7684\u6539\u53D8\u6EE1\u8DB3\u7EBF\u6027\u53D8\u6362\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 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    ").concat(mesh.material.colors ? 'attribute vec4 a_color;varying vec4 v_color;' : '', "\n\n    void main(){\n        vec4 temp = a_position;\n\n        // \u5E94\u7528\u53D8\u6362\u77E9\u9635\uFF1A\u5C4F\u5E55\u6BD4\u8C03\u5E73\u77E9\u9635\u3001\u4E16\u754C\u77E9\u9635\u3001\u7269\u4F53\u77E9\u9635\n        temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * temp;\n\n        // \u628A\u539F\u751F\u7684WebGL\u4F7F\u7528\u7684\u5DE6\u624B\u5750\u6807\u7CFB\u53D8\u6210\u4E86\u53F3\u624B\u5750\u6807\u7CFB\n        temp.z = -1.0 * temp.z;\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        // \u4E3A\u4FDD\u8BC1\u7EB9\u7406\u548C\u76F8\u5BF9\u4F4D\u7F6E\u6B63\u786E\n        // x\u3001y\u3001z\u7684\u6539\u53D8\u6EE1\u8DB3\u7EBF\u6027\u53D8\u6362\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        ").concat(mesh.material.colors ? 'v_color=a_color;' : '', "\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    ").concat(mesh.material.colors ? 'varying vec4 v_color;' : '', "\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        ").concat(mesh.material.colors ? 'gl_FragColor=v_color;' : '', "\n    }\n ");
         var shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use();
         shaders[uniqueName] = shader;
         return shader;
@@ -1491,18 +1592,23 @@
         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);
+            .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, 3, 0);
+                .divide(painter.getAttribLocation(shader.program, "a_normal"), mesh.geometry.attributes.normal.itemSize, mesh.geometry.attributes.normal.itemSize, 0);
         }
         if ("color" in mesh.material) {
             painter.uniform4f(painter.getUniformLocation(shader.program, "u_color"), mesh.material.color.r, mesh.material.color.g, mesh.material.color.b, mesh.material.color.alpha);
         }
+        if ("colors" in mesh.material) {
+            new BufferObject(painter).use()
+                .write(mesh.material.colors.array)
+                .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0);
+        }
         else if ("cube" in mesh.material) {
             var size = mesh.material.cube.right.image.value.width;
             getTexture(type, painter, 'cube').useCube([
@@ -1645,6 +1751,9 @@
                 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);