vislite 0.2.0 → 0.3.0-alpha.1

package/src/common/svg/tool.ts

@@ -1,44 +1,44 @@
-import { XLINK_ATTRIBUTE } from "./dictionary"
-import SVGConfigType from '../../../types/SVGConfig'
-
-// 新建节点
-export function toNode(tagname: string) {
-    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
-}
-
-// 设置属性
-let _setAttribute = function (el: SVGElement, key: string, value: string | number) {
-
-    // 需要使用xlink命名空间的xml属性
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
-        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
-    }
-
-    // 否则
-    else {
-        el.setAttribute(key, value + "")
-    }
-}
-export let setAttribute = _setAttribute
-
-// 获取属性
-export function getAttribute(el: SVGElement, key: string) {
-    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
-    return el.getAttribute(key)
-}
-
-export function full(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", config.fillStyle)
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
-}
-
-export function fill(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "fill", config.fillStyle)
-}
-
-export function stroke(el: SVGElement, config: SVGConfigType) {
-    _setAttribute(el, "stroke", config.strokeStyle)
-    _setAttribute(el, "fill", "none")
-    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+import { XLINK_ATTRIBUTE } from "./dictionary"
+import SVGConfigType from '../../../types/SVGConfig'
+
+// 新建节点
+export function toNode(tagname: string) {
+    return document.createElementNS('http://www.w3.org/2000/svg', tagname)
+}
+
+// 设置属性
+let _setAttribute = function (el: SVGElement, key: string, value: string | number) {
+
+    // 需要使用xlink命名空间的xml属性
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
+        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "")
+    }
+
+    // 否则
+    else {
+        el.setAttribute(key, value + "")
+    }
+}
+export let setAttribute = _setAttribute
+
+// 获取属性
+export function getAttribute(el: SVGElement, key: string) {
+    if (XLINK_ATTRIBUTE.indexOf(key) > -1) key = 'xlink:' + key
+    return el.getAttribute(key)
+}
+
+export function full(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", config.fillStyle)
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
+}
+
+export function fill(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "fill", config.fillStyle)
+}
+
+export function stroke(el: SVGElement, config: SVGConfigType) {
+    _setAttribute(el, "stroke", config.strokeStyle)
+    _setAttribute(el, "fill", "none")
+    _setAttribute(el, "stroke-dasharray", config.lineDash.join(','))
 }

package/src/common/webgl/doDraw.ts

@@ -20,7 +20,7 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
     // 点数据写入缓冲区
     new BufferObject(painter).use()
         .write(mesh.geometry.attributes.position.array as Float32Array)
-        .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)
@@ -31,7 +31,7 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
     if (mesh.geometry.attributes.normal) {
         new BufferObject(painter).use()
             .write(mesh.geometry.attributes.normal.array as Float32Array)
-            .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)
     }
 
     // 颜色
@@ -45,10 +45,20 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
             , mesh.material.color.alpha)
     }
 
+    // 多颜色
+    if ("colors" in mesh.material) {
+
+        // 写入颜色序列
+        new BufferObject(painter).use()
+            .write(mesh.material.colors.array as Float32Array)
+            .divide(painter.getAttribLocation(shader.program, "a_color"), mesh.material.colors.itemSize, mesh.material.colors.itemSize, 0)
+
+    }
+
     // 立方纹理
     else if ("cube" in mesh.material) {
 
-        let size = mesh.material.cube.right.image.value.width
+        let size = (mesh.material.cube.right.image.value as any).width
 
         getTexture(type, painter, 'cube').useCube([
             mesh.material.cube.right.image.value,

package/src/common/webgl/getShader.ts

@@ -9,6 +9,7 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
         (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()
 
@@ -24,6 +25,8 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
 
     ${mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : ''}
 
+    ${mesh.material.colors ? 'attribute vec4 a_color;varying vec4 v_color;' : ''}
+
     void main(){
         vec4 temp = a_position;
 
@@ -43,6 +46,7 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
 
         ${mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : ''}
         ${mesh.material.image ? 'v_textcoord = a_textcoord;' : ''}
+        ${mesh.material.colors ? 'v_color=a_color;' : ''}
      }
  `
 
@@ -54,11 +58,13 @@ export default function (type: string, painter: WebGLRenderingContext, mesh: mes
     ${mesh.material.color ? 'uniform vec4 u_color;' : ''}
     ${mesh.material.cube ? 'uniform samplerCube u_texture;' : ''}
     ${mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : ''}
+    ${mesh.material.colors ? 'varying vec4 v_color;' : ''}
 
     void main(){
         ${mesh.material.color ? 'gl_FragColor = u_color;' : ''}
         ${mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : ''}
         ${mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : ''}
+        ${mesh.material.colors ? 'gl_FragColor=v_color;' : ''}
     }
  `
 

package/src/common/webgl/index.ts

@@ -165,6 +165,10 @@ class WebGL {
                 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)

package/src/getLoopColors.ts

@@ -1,42 +1,42 @@
-// 获取一组循环色彩
-export default function (num: number, alpha: number = 1) {
-    // 颜色集合
-    let colorList = [
-        'rgba(84,112,198,' + alpha + ")", 'rgba(145,204,117,' + alpha + ")",
-        'rgba(250,200,88,' + alpha + ")", 'rgba(238,102,102,' + alpha + ")",
-        'rgba(115,192,222,' + alpha + ")", 'rgba(59,162,114,' + alpha + ")",
-        'rgba(252,132,82,' + alpha + ")", 'rgba(154,96,180,' + alpha + ")",
-        'rgba(234,124,204,' + alpha + ")"
-    ]
-
-    let colors: string[] = []
-
-    // 根据情况返回颜色数组
-    if (num <= colorList.length) {
-        // 这种情况就不需要任何处理
-        return colorList
-    } else {
-        // 如果正好是集合长度的倍数
-        if (num % colorList.length == 0) {
-            // 将颜色数组循环加入后再返回
-            for (let i = 0; i < (num / colorList.length); i++) {
-                colors = colors.concat(colorList)
-            }
-        } else {
-            for (let j = 1; j < (num / colorList.length); j++) {
-                colors = colors.concat(colorList)
-            }
-            // 防止最后一个颜色和第一个颜色重复
-            if (num % colorList.length == 1) {
-                colors = colors.concat(colorList[4])
-            } else {
-                for (let k = 0; k < num % colorList.length; k++) {
-                    colors = colors.concat(colorList[k])
-                }
-            }
-        }
-    }
-
-    // 返回结果
-    return colors
-}
+// 获取一组循环色彩
+export default function (num: number, alpha: number = 1) {
+    // 颜色集合
+    let colorList = [
+        'rgba(84,112,198,' + alpha + ")", 'rgba(145,204,117,' + alpha + ")",
+        'rgba(250,200,88,' + alpha + ")", 'rgba(238,102,102,' + alpha + ")",
+        'rgba(115,192,222,' + alpha + ")", 'rgba(59,162,114,' + alpha + ")",
+        'rgba(252,132,82,' + alpha + ")", 'rgba(154,96,180,' + alpha + ")",
+        'rgba(234,124,204,' + alpha + ")"
+    ]
+
+    let colors: string[] = []
+
+    // 根据情况返回颜色数组
+    if (num <= colorList.length) {
+        // 这种情况就不需要任何处理
+        return colorList
+    } else {
+        // 如果正好是集合长度的倍数
+        if (num % colorList.length == 0) {
+            // 将颜色数组循环加入后再返回
+            for (let i = 0; i < (num / colorList.length); i++) {
+                colors = colors.concat(colorList)
+            }
+        } else {
+            for (let j = 1; j < (num / colorList.length); j++) {
+                colors = colors.concat(colorList)
+            }
+            // 防止最后一个颜色和第一个颜色重复
+            if (num % colorList.length == 1) {
+                colors = colors.concat(colorList[4])
+            } else {
+                for (let k = 0; k < num % colorList.length; k++) {
+                    colors = colors.concat(colorList[k])
+                }
+            }
+        }
+    }
+
+    // 返回结果
+    return colors
+}

package/src/interpolation/Cardinal.ts

@@ -1,92 +1,110 @@
-/**
- * Cardinal三次插值
- * ----------------------------
- * Hermite拟合的计算是，确定两个点和两个点的斜率
- * 用一个y=ax(3)+bx(2)+cx+d的三次多项式来求解
- * 而Cardinal是建立在此基础上
- * 给定需要拟合的两个点和第一个点的前一个点+最后一个点的后一个点
- * 第一个点的斜率由第一个点的前一个点和第二个点的斜率确定
- * 第二个点的斜率由第一个点和第二个点的后一个点的斜率确定
- */
-
-import CardinalType from '../../types/Cardinal'
-import Hermite from './Hermite'
-
-class Cardinal implements CardinalType {
-    readonly name: string = 'Cardinal'
-
-    // 该参数用于调整曲线走势，默认数值t=0，分水岭t=-1，|t-(-1)|的值越大，曲线走势调整的越严重
-    private __t: number
-
-    private __HS: {
-        x: number[],
-        h: Hermite[]
-    }
-    private __i: number
-
-    constructor(t: number = 0) {
-        this.__t = t
-    }
-
-    // 设置点的位置
-    // 参数格式：[[x1, y1], [x2, y2], ... ]
-    // 至少两个点
-    setP(points: number[][]) {
-
-        this.__HS = {
-            "x": [],
-            "h": []
-        };
-        var flag: number,
-            slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]),
-            temp: number
-        this.__HS.x[0] = points[0][0]
-        for (flag = 1; flag < points.length; flag++) {
-            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])
-
-            // 求解两个点直接的拟合方程
-            // 第一个点的前一个点直接取第一个点
-            // 最后一个点的后一个点直接取最后一个点
-            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
-        }
-        return this
-
-    }
-
-    // 根据x值返回y值
-    use(x: number) {
-        if (this.__HS) {
-            this.__i = -1
-
-            // 寻找记录x所在位置的区间
-            // 这里就是寻找对应的拟合函数
-            while (this.__i + 1 < this.__HS.x.length && (x > this.__HS.x[this.__i + 1] || (this.__i == -1 && x >= this.__HS.x[this.__i + 1]))) {
-                this.__i += 1
-            }
-
-            // 由于js浮点运算不准确，我们对于越界的情况进行兼容
-
-            if (this.__i < 0) {
-                return this.__HS.h[0].use(this.__HS.x[0])
-            }
-
-            else if (this.__i >= this.__HS.h.length) {
-                return this.__HS.h[this.__HS.h.length - 1].use(this.__HS.x[this.__HS.x.length - 1])
-            }
-
-            return this.__HS.h[this.__i].use(x)
-        } else {
-            throw new Error('You shoud first set the position!')
-        }
-    }
-
-}
-
+/**
+ * Cardinal三次插值
+ * ----------------------------
+ * Hermite拟合的计算是，确定两个点和两个点的斜率
+ * 用一个y=ax(3)+bx(2)+cx+d的三次多项式来求解
+ * 而Cardinal是建立在此基础上
+ * 给定需要拟合的两个点和第一个点的前一个点+最后一个点的后一个点
+ * 第一个点的斜率由第一个点的前一个点和第二个点的斜率确定
+ * 第二个点的斜率由第一个点和第二个点的后一个点的斜率确定
+ */
+
+import CardinalType from '../../types/Cardinal'
+import Hermite from './Hermite'
+
+class Cardinal implements CardinalType {
+    readonly name: string = 'Cardinal'
+
+    // 该参数用于调整曲线走势，默认数值t=0，分水岭t=-1，|t-(-1)|的值越大，曲线走势调整的越严重
+    private __t: number
+
+    private __HS: {
+        x: number[],
+        h: Hermite[]
+    }
+    private __i: number
+
+    constructor(t: number = 0) {
+        this.__t = t
+    }
+
+    // 设置点的位置
+    // 参数格式：[[x1, y1], [x2, y2], ... ]
+    // 至少两个点
+    setP(points: number[][]) {
+
+        this.__HS = {
+            "x": [],
+            "h": []
+        };
+        var flag: number,
+            slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]),
+            temp: number
+        this.__HS.x[0] = points[0][0]
+        for (flag = 1; flag < points.length; flag++) {
+            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])
+
+            // 修复超过界限的值问题
+            // 2023年6月25日 于南京
+            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
+        }
+        return this
+
+    }
+
+    // 根据x值返回y值
+    use(x: number) {
+        if (this.__HS) {
+            this.__i = -1
+
+            // 寻找记录x所在位置的区间
+            // 这里就是寻找对应的拟合函数
+            while (this.__i + 1 < this.__HS.x.length && (x > this.__HS.x[this.__i + 1] || (this.__i == -1 && x >= this.__HS.x[this.__i + 1]))) {
+                this.__i += 1
+            }
+
+            // 由于js浮点运算不准确，我们对于越界的情况进行兼容
+
+            if (this.__i < 0) {
+                return this.__HS.h[0].use(this.__HS.x[0])
+            }
+
+            else if (this.__i >= this.__HS.h.length) {
+                return this.__HS.h[this.__HS.h.length - 1].use(this.__HS.x[this.__HS.x.length - 1])
+            }
+
+            return this.__HS.h[this.__i].use(x)
+        } else {
+            throw new Error('You shoud first set the position!')
+        }
+    }
+
+}
+
 export default Cardinal

package/src/interpolation/Hermite.ts

@@ -1,66 +1,66 @@
-import HermiteType from '../../types/Hermite'
-
-class Hermite implements HermiteType {
-    readonly name: string = 'Hermite'
-
-    private __u: number // 张弛系数
-
-    private __MR: number[]
-    private __a: number
-    private __b: number
-
-    constructor(u: number = 0.5) {
-        this.__u = u
-    }
-
-    /**
-    * 设置点的位置
-    * @param {Number} x1 左边点的位置
-    * @param {Number} y1
-    * @param {Number} x2 右边点的位置
-    * @param {Number} y2
-    * @param {Number} s1 两个点的斜率
-    * @param {Number} s2
-    */
-    setP(x1: number, y1: number, x2: number, y2: number, s1: number, s2: number) {
-        if (x1 < x2) {
-            // 记录原始尺寸
-            this.__a = x1
-            this.__b = x2
-            let p3 = this.__u * s1,
-                p4 = this.__u * s2
-            // 缩放到[0,1]定义域
-            y1 /= (x2 - x1)
-            y2 /= (x2 - x1)
-            // MR是提前计算好的多项式通解矩阵
-            // 为了加速计算
-            // 如上面说的
-            // 统一在[0,1]上计算后再通过缩放和移动恢复
-            // 避免了动态求解矩阵的麻烦
-            this.__MR = [
-                2 * y1 - 2 * y2 + p3 + p4,
-                3 * y2 - 3 * y1 - 2 * p3 - p4,
-                p3,
-                y1
-            ]
-        } else throw new Error('The point x-position should be increamented!')
-        return this
-    }
-
-
-    /**
-     * 根据x值返回y值
-     * @param {Number} x
-     */
-    use(x: number) {
-        if (this.__MR) {
-            let sx = (x - this.__a) / (this.__b - this.__a),
-                sx2 = sx * sx,
-                sx3 = sx * sx2
-            let sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3]
-            return sResult * (this.__b - this.__a)
-        } else throw new Error('You shoud first set the position!')
-    }
-}
-
+import HermiteType from '../../types/Hermite'
+
+class Hermite implements HermiteType {
+    readonly name: string = 'Hermite'
+
+    private __u: number // 张弛系数
+
+    private __MR: number[]
+    private __a: number
+    private __b: number
+
+    constructor(u: number = 0.5) {
+        this.__u = u
+    }
+
+    /**
+    * 设置点的位置
+    * @param {Number} x1 左边点的位置
+    * @param {Number} y1
+    * @param {Number} x2 右边点的位置
+    * @param {Number} y2
+    * @param {Number} s1 两个点的斜率
+    * @param {Number} s2
+    */
+    setP(x1: number, y1: number, x2: number, y2: number, s1: number, s2: number) {
+        if (x1 < x2) {
+            // 记录原始尺寸
+            this.__a = x1
+            this.__b = x2
+            let p3 = this.__u * s1,
+                p4 = this.__u * s2
+            // 缩放到[0,1]定义域
+            y1 /= (x2 - x1)
+            y2 /= (x2 - x1)
+            // MR是提前计算好的多项式通解矩阵
+            // 为了加速计算
+            // 如上面说的
+            // 统一在[0,1]上计算后再通过缩放和移动恢复
+            // 避免了动态求解矩阵的麻烦
+            this.__MR = [
+                2 * y1 - 2 * y2 + p3 + p4,
+                3 * y2 - 3 * y1 - 2 * p3 - p4,
+                p3,
+                y1
+            ]
+        } else throw new Error('The point x-position should be increamented!')
+        return this
+    }
+
+
+    /**
+     * 根据x值返回y值
+     * @param {Number} x
+     */
+    use(x: number) {
+        if (this.__MR) {
+            let sx = (x - this.__a) / (this.__b - this.__a),
+                sx2 = sx * sx,
+                sx3 = sx * sx2
+            let sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3]
+            return sResult * (this.__b - this.__a)
+        } else throw new Error('You shoud first set the position!')
+    }
+}
+
 export default Hermite

package/src/rotate.ts

@@ -1,8 +1,8 @@
-// 点（x,y）围绕中心（cx,cy）旋转deg度
-export default function (cx: number, cy: number, deg: number, x: number, y: number) {
-    let cos = Math.cos(deg), sin = Math.sin(deg)
-    return [
-        (x - cx) * cos - (y - cy) * sin + cx,
-        (x - cx) * sin + (y - cy) * cos + cy
-    ]
+// 点（x,y）围绕中心（cx,cy）旋转deg度
+export default function (cx: number, cy: number, deg: number, x: number, y: number) {
+    let cos = Math.cos(deg), sin = Math.sin(deg)
+    return [
+        (x - cx) * cos - (y - cy) * sin + cx,
+        (x - cx) * sin + (y - cy) * cos + cy
+    ]
 }