vislite 1.2.0-beta.0 → 1.2.0

package/src/common/webgl/shader.ts

@@ -1,76 +1,76 @@
-// 着色器分为两类：顶点着色器 + 片段着色器
-// 前者用于定义一个点的特性，比如位置，大小，颜色等
-// 后者用于针对每个片段（可以理解为像素）进行处理
-
-// 着色器采用的语言是：GLSL ES语言
-
-// 把着色器字符串加载成着色器对象
-const loadShader = (painter: WebGLRenderingContext, type: number, source: string) => {
-
-    // 创建着色器对象
-    const 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
-}
-
-//  建立着色器
-const useShader = (painter: WebGLRenderingContext, vshaderSource: string, fshaderSource: string) => {
-
-    // 分别加载顶点着色器对象和片段着色器对象
-    const vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource)
-    const fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource)
-
-    // 创建一个着色器程序
-    const glProgram = painter.createProgram() as WebGLProgram
-
-    // 把前面创建的两个着色器对象添加到着色器程序中
-    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
-}
-
-class ShaderObject {
-
-    private __painter: WebGLRenderingContext
-
-    program: WebGLProgram
-
-    constructor(painter: WebGLRenderingContext) {
-        this.__painter = painter
-    }
-
-    // 使用这个程序
-    // （后于编译）
-    use() {
-        this.__painter.useProgram(this.program)
-        return this
-    }
-
-    // 编译着色器程序
-    compile(vshaderSource: string, fshaderSource: string) {
-        this.program = useShader(this.__painter, vshaderSource, fshaderSource) as WebGLProgram
-        return this
-    }
-
-}
-
+// 着色器分为两类：顶点着色器 + 片段着色器
+// 前者用于定义一个点的特性，比如位置，大小，颜色等
+// 后者用于针对每个片段（可以理解为像素）进行处理
+
+// 着色器采用的语言是：GLSL ES语言
+
+// 把着色器字符串加载成着色器对象
+const loadShader = (painter: WebGLRenderingContext, type: number, source: string) => {
+
+    // 创建着色器对象
+    const 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
+}
+
+//  建立着色器
+const useShader = (painter: WebGLRenderingContext, vshaderSource: string, fshaderSource: string) => {
+
+    // 分别加载顶点着色器对象和片段着色器对象
+    const vertexShader = loadShader(painter, painter.VERTEX_SHADER, vshaderSource)
+    const fragmentShader = loadShader(painter, painter.FRAGMENT_SHADER, fshaderSource)
+
+    // 创建一个着色器程序
+    const glProgram = painter.createProgram() as WebGLProgram
+
+    // 把前面创建的两个着色器对象添加到着色器程序中
+    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
+}
+
+class ShaderObject {
+
+    private __painter: WebGLRenderingContext
+
+    program: WebGLProgram
+
+    constructor(painter: WebGLRenderingContext) {
+        this.__painter = painter
+    }
+
+    // 使用这个程序
+    // （后于编译）
+    use() {
+        this.__painter.useProgram(this.program)
+        return this
+    }
+
+    // 编译着色器程序
+    compile(vshaderSource: string, fshaderSource: string) {
+        this.program = useShader(this.__painter, vshaderSource, fshaderSource) as WebGLProgram
+        return this
+    }
+
+}
+
 export default ShaderObject

package/src/common/webgl/texture.ts

@@ -1,98 +1,98 @@
-// 初始化一个纹理对象
-// type = gl.TEXTURE_2D 二维纹理
-// type = gl.TEXTURE_CUBE_MAP 立方体纹理
-// unit表示开启的纹理单元编号
-const initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
-
-    // 创建纹理对象
-    const texture = painter.createTexture()
-
-    // 开启纹理单元，unit表示开启的编号
-    painter.activeTexture(painter['TEXTURE' + unit])
-
-    // 绑定纹理对象到目标上
-    painter.bindTexture(type, texture)
-
-    return texture
-}
-
-// 链接资源图片
-// level默认传入0即可，和金字塔纹理有关
-// format表示图像的内部格式：
-//      gl.RGB(红绿蓝)
-//      gl.RGBA(红绿蓝透明度)
-//      gl.ALPHA(0.0,0.0,0.0,透明度)
-//      gl.LUMINANCE(L、L、L、1L:流明)
-//      gl.LUMINANCE_ALPHA(L、L、L,透明度)
-// textureType表示纹理数据的格式：
-//      gl.UNSIGNED_BYTE: 表示无符号整形，每一个颜色分量占据1字节
-//      gl.UNSIGNED_SHORT_5_6_5: 表示RGB，每一个分量分别占据占据5, 6, 5比特
-//      gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA，每一个分量分别占据占据4, 4, 4, 4比特
-//      gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA，每一个分量分别占据占据5比特，A分量占据1比特
-const linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
-    painter.texImage2D(type, level, format, format, textureType, image)
-}
-
-const linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
-
-    const 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 // 前
-    ]
-    let target: number
-
-    for (let 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)
-}
-
-class TextureObject {
-
-    private __painter: WebGLRenderingContext
-    private __type: number
-
-    private __texture: WebGLTexture
-
-    constructor(painter: WebGLRenderingContext, type: string, unit = 0) {
-        this.__painter = painter
-        this.__type = {
-            "2d": painter.TEXTURE_2D,
-            "cube": painter.TEXTURE_CUBE_MAP
-        }[type] as number
-
-        // 创建纹理
-        this.__texture = initTexture(painter, this.__type, unit) as WebGLTexture
-
-        // 配置纹理
-        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)
-    }
-
-    // 链接图片资源(单一)
-    useImage(image: TexImageSource) {
-        linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image)
-        return this
-    }
-
-    // 链接图片资源（多张）
-    useCube(images: TexImageSource[], width: number, height: number) {
-        linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture)
-        return this
-    }
-
-}
-
+// 初始化一个纹理对象
+// type = gl.TEXTURE_2D 二维纹理
+// type = gl.TEXTURE_CUBE_MAP 立方体纹理
+// unit表示开启的纹理单元编号
+const initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
+
+    // 创建纹理对象
+    const texture = painter.createTexture()
+
+    // 开启纹理单元，unit表示开启的编号
+    painter.activeTexture(painter['TEXTURE' + unit])
+
+    // 绑定纹理对象到目标上
+    painter.bindTexture(type, texture)
+
+    return texture
+}
+
+// 链接资源图片
+// level默认传入0即可，和金字塔纹理有关
+// format表示图像的内部格式：
+//      gl.RGB(红绿蓝)
+//      gl.RGBA(红绿蓝透明度)
+//      gl.ALPHA(0.0,0.0,0.0,透明度)
+//      gl.LUMINANCE(L、L、L、1L:流明)
+//      gl.LUMINANCE_ALPHA(L、L、L,透明度)
+// textureType表示纹理数据的格式：
+//      gl.UNSIGNED_BYTE: 表示无符号整形，每一个颜色分量占据1字节
+//      gl.UNSIGNED_SHORT_5_6_5: 表示RGB，每一个分量分别占据占据5, 6, 5比特
+//      gl.UNSIGNED_SHORT_4_4_4_4: 表示RGBA，每一个分量分别占据占据4, 4, 4, 4比特
+//      gl.UNSIGNED_SHORT_5_5_5_1: 表示RGBA，每一个分量分别占据占据5比特，A分量占据1比特
+const linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
+    painter.texImage2D(type, level, format, format, textureType, image)
+}
+
+const linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
+
+    const 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 // 前
+    ]
+    let target: number
+
+    for (let 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)
+}
+
+class TextureObject {
+
+    private __painter: WebGLRenderingContext
+    private __type: number
+
+    private __texture: WebGLTexture
+
+    constructor(painter: WebGLRenderingContext, type: string, unit = 0) {
+        this.__painter = painter
+        this.__type = {
+            "2d": painter.TEXTURE_2D,
+            "cube": painter.TEXTURE_CUBE_MAP
+        }[type] as number
+
+        // 创建纹理
+        this.__texture = initTexture(painter, this.__type, unit) as WebGLTexture
+
+        // 配置纹理
+        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)
+    }
+
+    // 链接图片资源(单一)
+    useImage(image: TexImageSource) {
+        linkImage(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, image)
+        return this
+    }
+
+    // 链接图片资源（多张）
+    useCube(images: TexImageSource[], width: number, height: number) {
+        linkCube(this.__painter, this.__type, 0, this.__painter.RGBA, this.__painter.UNSIGNED_BYTE, images, width, height, this.__texture)
+        return this
+    }
+
+}
+
 export default TextureObject

package/src/interpolation/Cardinal.ts

@@ -1,111 +1,111 @@
-/**
- * Cardinal三次插值
- * ----------------------------
- * Hermite拟合的计算是，确定两个点和两个点的斜率
- * 用一个y=ax(3)+bx(2)+cx+d的三次多项式来求解
- * 而Cardinal是建立在此基础上
- * 给定需要拟合的两个点和第一个点的前一个点+最后一个点的后一个点
- * 第一个点的斜率由第一个点的前一个点和第二个点的斜率确定
- * 第二个点的斜率由第一个点和第二个点的后一个点的斜率确定
- */
-
-import type 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": []
-        };
-        let 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!')
-        }
-    }
-
-}
-
+/**
+ * Cardinal三次插值
+ * ----------------------------
+ * Hermite拟合的计算是，确定两个点和两个点的斜率
+ * 用一个y=ax(3)+bx(2)+cx+d的三次多项式来求解
+ * 而Cardinal是建立在此基础上
+ * 给定需要拟合的两个点和第一个点的前一个点+最后一个点的后一个点
+ * 第一个点的斜率由第一个点的前一个点和第二个点的斜率确定
+ * 第二个点的斜率由第一个点和第二个点的后一个点的斜率确定
+ */
+
+import type 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": []
+        };
+        let 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