vislite 0.8.0 → 1.0.0-next.0

package/src/common/geometry/prism-vertical.ts

@@ -1,55 +0,0 @@
-import rotate from '../../rotate'
-
-/**
- * 棱柱垂直部分
- * @param normal 是否需要法向量
- * @param x 中心
- * @param y
- * @param z
- * @param radius 半径
- * @param height 高
- * @param num 份数
- * @param beginDeg 开始弧度，默认0
- * @param deg 跨越弧度，默认2pi
- * @returns 点数组
- */
-export default function (normal: boolean, x: number, y: number, z: number, radius: number, height: number, num: number, beginDeg: number = 0, deg: number = Math.PI * 2) {
-    const points = []
-    let beginPosition: [number, number]
-
-    if (num == 4) {
-        beginPosition = rotate(x, z, Math.PI * 0.25, x - radius, z)
-    } else {
-        beginPosition = [x + radius, z]
-    }
-
-    if (beginDeg != 0) {
-        beginPosition = rotate(x, z, beginDeg, ...beginPosition)
-    }
-
-    const perDeg = deg / num, degHalf = deg / (num * 2)
-
-    let endPosition: [number, number], normalPosition: [number, number, number] | [] = []
-    for (let i = 0; i < num; i++) {
-
-        endPosition = rotate(x, z, perDeg, ...beginPosition)
-
-        if (normal) {
-            const halfPosition = rotate(x, z, degHalf, ...beginPosition)
-            normalPosition = [halfPosition[0], 0, halfPosition[1]]
-        }
-
-        points.push(beginPosition[0], y, beginPosition[1], ...normalPosition)
-        points.push(beginPosition[0], y + height, beginPosition[1], ...normalPosition)
-        points.push(endPosition[0], y + height, endPosition[1], ...normalPosition)
-
-        points.push(beginPosition[0], y, beginPosition[1], ...normalPosition)
-        points.push(endPosition[0], y, endPosition[1], ...normalPosition)
-        points.push(endPosition[0], y + height, endPosition[1], ...normalPosition)
-
-
-        beginPosition = endPosition
-    }
-
-    return points
-}

package/src/common/geometry/sphere-fragment.ts

@@ -1,40 +0,0 @@
-import rotate from '../../rotate'
-
-// 球体中的一瓣子
-
-export default function (normal: boolean, cx: number, cy: number, cz: number, radius: number, num: number, index: number) {
-    const points = [cx, cy + radius, cz], deg = Math.PI * 2 / num
-    let point: [number, number]
-
-    if (normal) points.push(0, radius, 0)
-
-    const copy2 = () => {
-        points.push(...points.slice(points.length - (normal ? 12 : 6)))
-    }
-
-    for (let i = 1; i < num * 0.5; i++) {
-        point = rotate(cx, cy, deg * i, cx, cy + radius)
-
-        if (i > 1) copy2()
-
-        // 第一个点
-        const point1 = rotate(cx, cz, deg * index, point[0], cz)
-        points.push(point1[0], point[1], point1[1])
-
-        if (normal) points.push(point1[0] - cx, point[1] - cy, point1[1] - cz)
-
-        if (i > 1) copy2()
-
-        // 下一个点
-        const point2 = rotate(cx, cz, deg * (index + 1), point[0], cz)
-        points.push(point2[0], point[1], point2[1])
-
-        if (normal) points.push(point2[0] - cx, point2[1] - cy, point2[1] - cz)
-    }
-    copy2()
-    points.push(cx, cy - radius, cz)
-
-    if (normal) points.push(0, - radius, 0)
-
-    return points
-}

package/src/common/geometry/tool/circle.ts

@@ -1,18 +0,0 @@
-/**
- * 计算切割份数
- * @param precision 精度
- * @param radius 半径
- * @param deg 需要跨越的弧度，默认圆（2pi）
- * @returns 切割份数
- */
-export const splitNum = function (precision: number, radius: number, deg: number = Math.PI * 2) {
-
-    // 根据切割弧度得出切割块数目
-    const num = Math.ceil(deg /
-
-        // 为了满足最小精度而得出的切割弧度
-        Math.asin(precision / radius) * 2)
-
-    return (isNaN(num) || num < 12) ? 12 : num
-
-}

package/src/common/geometry/tool/rotateLine.ts

@@ -1,49 +0,0 @@
-/**
- * 物体方向转换
- * 由（x,y,z）转换成（x2-x,y2-y,z2-z）
- * @param x
- * @param y
- * @param z
- * @param x2
- * @param y2
- * @param z2
- * @returns 点转换函数
- */
-export default function (x: number, y: number, z: number, x2: number, y2: number, z2: number) {
-    return (x0: number, y0: number, z0: number, isNormal: boolean) => {
-        if (x == x2 && z == z2) return [x0, y0, z0]
-
-        let sin: number, cos: number, temp: Array<number>
-
-        // 第一步：归零化
-        let _x0 = x0 - (isNormal ? 0 : x), _y0 = y0 - (isNormal ? 0 : y), _z0 = z0 - (isNormal ? 0 : z)  // 法向量起点本来就是原点
-        const _x2 = x2 - x, _y2 = y2 - y, _z2 = z2 - z
-
-        // 第二步：围绕OZ轴旋转
-
-        const __d = Math.sqrt(_x2 * _x2 + _z2 * _z2)
-        cos = _x2 / __d
-        sin = _z2 / __d
-
-        const _x2N = _z2 * sin + _x2 * cos
-
-        const d = Math.sqrt(_y2 * _y2 + _x2N * _x2N)
-        cos = _y2 / d
-        sin = _x2N / d
-
-        temp = [_y0, _x0]
-        _y0 = temp[0] * cos - temp[1] * sin
-        _x0 = temp[0] * sin + temp[1] * cos
-
-        // 第三步：围绕0Y轴旋转
-        cos = _x2 / __d
-        sin = _z2 / __d
-
-        temp = [_x0, _z0]
-        _x0 = temp[0] * cos - temp[1] * sin
-        _z0 = temp[0] * sin + temp[1] * cos
-
-        // 第四步：去零化（直接返回）
-        return [_x0 + (isNormal ? 0 : x), _y0 + (isNormal ? 0 : y), _z0 + (isNormal ? 0 : z)]
-    }
-}

package/src/common/geometry/tool/triangles.ts

@@ -1,24 +0,0 @@
-/**
- * 方向：ab x ac
- * @param normal 是否需要法向量
- * @param points [a1, b1, c1, a2, b2, c2, ...]
- * @returns 完整的点数据
- */
-export default function (normal: boolean, points: Array<number>) {
-    if (normal) {
-        const _points = []
-        for (let i = 0; i < points.length; i += 9) {
-            const ab = [points[i + 3] - points[i], points[i + 4] - points[i + 1], points[i + 5] - points[i + 2]]
-            const ac = [points[i + 6] - points[i], points[i + 7] - points[i + 1], points[i + 8] - points[i + 2]]
-            const normalVector = [ab[1] * ac[2] - ac[1] * ab[2], ab[2] * ac[0] - ab[0] * ac[2], ab[0] * ac[1] - ab[1] * ac[2]]
-            _points.push(
-                points[i], points[i + 1], points[i + 2], ...normalVector,
-                points[i + 3], points[i + 4], points[i + 5], ...normalVector,
-                points[i + 6], points[i + 7], points[i + 8], ...normalVector,
-            )
-        }
-        return _points
-    } else {
-        return points
-    }
-}

package/src/common/webgl/doDraw.ts

@@ -1,109 +0,0 @@
-import BufferObject from './buffer'
-
-import getTexture from './getTexture'
-import getShader from './getShader'
-
-interface MeshWorldType {
-    matrix: number[]
-}
-
-interface GlobalWorldType {
-    matrix: number[]
-    proporion: number[]
-}
-
-import { meshType } from '../../../types/Object3D'
-
-export default function (type: string, painter: WebGLRenderingContext, mesh: meshType, meshWorld: MeshWorldType, globalWorld: GlobalWorldType) {
-    const shader = getShader(type, painter, mesh)
-
-    // 点数据写入缓冲区
-    new BufferObject(painter).use()
-        .write(mesh.geometry.attributes.position.array as Float32Array)
-        .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 as Float32Array)
-            .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 as number
-            , mesh.material.color?.g as number
-            , mesh.material.color?.b as number
-            , mesh.material.color?.alpha as number)
-    }
-
-    // 多颜色
-    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 as number, mesh.material.colors?.itemSize as number, 0)
-
-    }
-
-    // 立方纹理
-    else if ("cube" in mesh.material) {
-
-        const size = (mesh.material.cube?.right?.image.value as any).width
-
-        painter.uniform1i(painter.getUniformLocation(shader.program, "u_texture"), 0)
-
-        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 as Float32Array)
-            .divide(painter.getAttribLocation(shader.program, "a_textcoord"), mesh.geometry.attributes.uv?.itemSize as number, 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 as Uint8Array)
-
-        // 绘制
-        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)
-
-    }
-
-}

package/src/common/webgl/getColorFactory.ts

@@ -1,27 +0,0 @@
-export default function (painter: WebGLRenderingContext) {
-    const width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
-
-    const pixels = new Uint8Array(
-        4 * width * height
-    )
-    painter.readPixels(
-        0,
-        0,
-        width,
-        height,
-        painter.RGBA,
-        painter.UNSIGNED_BYTE,
-        pixels
-    )
-
-    return function (x: number, y: number): string {
-        y = height - y
-
-        const pixelR = pixels[4 * (y * width + x)]
-        const pixelG = pixels[4 * (y * width + x) + 1]
-        const pixelB = pixels[4 * (y * width + x) + 2]
-        const pixelA = pixels[4 * (y * width + x) + 3]
-
-        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
-    }
-}

package/src/common/webgl/getShader.ts

@@ -1,49 +0,0 @@
-import type { meshType } from '../../../types/Object3D'
-
-import ShaderObject from './shader'
-
-import vsColor from '../../shader/vsColor.c'
-import vsColors from '../../shader/vsColors.c'
-import vsImage from '../../shader/vsImage.c'
-import vsCube from '../../shader/vsCube.c'
-
-import fsColor from '../../shader/fsColor.c'
-import fsColors from '../../shader/fsColors.c'
-import fsImage from '../../shader/fsImage.c'
-import fsCube from '../../shader/fsCube.c'
-
-const shaders = {}
-export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
-
-    const uniqueName = type +
-        (mesh.material.color ? "1" : "0") +
-        (mesh.material.colors ? "1" : "0") +
-        (mesh.material.image ? "1" : "0") +
-        (mesh.material.cube ? "1" : "0")
-    if (shaders[uniqueName]) return shaders[uniqueName].use()
-
-    // 顶点着色器
-    const vertexShader = {
-        [type + "1000"]: vsColor,
-        [type + "0100"]: vsColors,
-        [type + "0010"]: vsImage,
-        [type + "0001"]: vsCube
-    }[uniqueName].replace(/uniform +mat4 +u_matrix;/, `
-    uniform mat4 u_matrix_world;
-    uniform mat4 u_matrix_mesh;
-    uniform mat4 u_matrix_proporion;`).replace(/u_matrix +\* +a_position/, "u_matrix_proporion * u_matrix_world * u_matrix_mesh * a_position")
-
-    // 片段（元）着色器
-    const fragmentShader = {
-        [type + "1000"]: fsColor,
-        [type + "0100"]: fsColors,
-        [type + "0010"]: fsImage,
-        [type + "0001"]: fsCube
-    }[uniqueName]
-
-    // 启用着色器
-    const shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
-
-    shaders[uniqueName] = shader
-    return shader
-}

package/src/common/webgl/getTexture.ts

@@ -1,12 +0,0 @@
-import TextureObject from './texture'
-
-const textures = {}
-export default function (type: string, painter: WebGLRenderingContext, kind: string) {
-    const uniqueName = type + "-" + kind
-
-    if (!textures[uniqueName]) {
-        textures[uniqueName] = new TextureObject(painter, kind)
-    }
-
-    return textures[uniqueName]
-}

package/src/common/webgl/index.ts

@@ -1,228 +0,0 @@
-import type Object3DType from '../../../types/Object3D'
-import type Scene3DType from '../../../types/Scene3D'
-import type { WebGLmodeType } from "../../../types/getWebGLContext"
-
-import getWebGLContext from './getWebGLContext'
-import getColorFactory from './getColorFactory'
-import Matrix4 from '../../Matrix4/index'
-import doDraw from './doDraw'
-import assemble from '../assemble'
-
-// 获取区域信息前是否需要刷新区域
-let needUpdate = false
-
-const scale = 10
-class WebGL {
-
-    readonly name: string = "WebGL"
-
-    painter: WebGLRenderingContext
-    private __regionPainter: WebGLRenderingContext
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    private __getColor = (x: number, y: number) => "rgba(0,0,0,1)"
-
-    private __regionList: {
-        [key: string | number]: Array<number>
-    } = {} //区域映射表
-    private __regionAssemble = assemble(0, 1, 0.2, 3)
-
-    private __regionName = "" // 当前绘制的内容名称
-    private __regionColor = [0, 0, 0, 1] // 当前记录区域应该使用的颜色
-
-    private __scene: Scene3DType = { // 记录着3D世界
-        children: [],
-
-        // 右手坐标系
-        matrix: new Matrix4([
-            1, 0, 0, 0,
-            0, 1, 0, 0,
-            0, 0, 1, 0,
-            0, 0, 0, scale
-        ])
-    }
-
-    private __proporion: number[]
-
-    private __unique: number
-
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, mode?: WebGLmodeType) {
-        this.__unique = new Date().valueOf()
-
-        this.painter = getWebGLContext(ViewCanvas, scale, {}, mode)
-        if (RegionCanvas) {
-            this.__regionPainter = getWebGLContext(RegionCanvas, scale, {
-
-                // 如果不设置，涉及到缓冲区的情况可能无法获取颜色
-                // preserveDrawingBuffer: true
-            }, mode)
-        }
-
-        const proportion = this.painter.canvas.width / this.painter.canvas.height
-
-        let xProportion = 1
-        let yProportion = 1
-
-        if (proportion > 1) {
-            xProportion = 1 / proportion
-        } else {
-            yProportion = proportion
-        }
-
-        const zProportion = Math.min(xProportion, yProportion)
-
-        this.__proporion = [
-            xProportion, 0, 0, 0,
-            0, yProportion, 0, 0,
-            0, 0, zProportion, 0,
-            0, 0, 0, 1
-        ]
-
-    }
-
-    matrix(initMatrix4?: number[]) {
-        return new Matrix4(initMatrix4)
-    }
-
-    getMatrix() {
-        return this.__scene.matrix
-    }
-
-    getObject3D() {
-        return this.__scene.children
-    }
-
-    review(isUpdateRegion = false) {
-
-        if (isUpdateRegion) {
-            if (this.__regionPainter) {
-                this.__regionPainter.clearColor(1, 1, 1, 1)
-                this.__regionPainter.clear(this.__regionPainter.COLOR_BUFFER_BIT)
-            }
-        } else {
-            this.painter.clearColor(1, 1, 1, 1)
-            this.painter.clear(this.painter.COLOR_BUFFER_BIT)
-        }
-
-        for (let index = 0; index < this.__scene.children.length; index++) {
-            this.draw(this.__scene.children[index], isUpdateRegion)
-        }
-        return this
-    }
-
-    private draw(object3D: Object3DType, isUpdateRegion = false) {
-        if (!isUpdateRegion) needUpdate = true
-
-        const meshWorld = {
-            matrix: object3D.matrix?.value() as Array<number>
-        }
-
-        const globalWorld = {
-            matrix: this.__scene.matrix.value(),
-            proporion: this.__proporion
-        }
-
-        // 设置好当前区域
-        this.setRegion(object3D.region)
-
-        for (let index = 0; index < object3D.mesh.length; index++) {
-
-            if (isUpdateRegion) {
-                if (this.__regionPainter) {
-                    // 区域上
-                    doDraw("painter" + this.__unique, this.__regionPainter, {
-                        geometry: object3D.mesh[index].geometry,
-                        material: {
-                            color: {
-                                r: this.__regionColor[0],
-                                g: this.__regionColor[1],
-                                b: this.__regionColor[2],
-                                alpha: this.__regionColor[3]
-                            }
-                        }
-                    }, meshWorld, globalWorld)
-
-                    this.__getColor = getColorFactory(this.__regionPainter)
-                }
-            } else {
-                // 画布上
-                doDraw("region" + this.__unique, this.painter, object3D.mesh[index], meshWorld, globalWorld)
-            }
-        }
-
-    }
-
-    render(object3D: Object3DType) {
-        if (!('matrix' in object3D)) object3D.matrix = new Matrix4()
-        if (!('region' in object3D)) object3D.region = ""
-
-        // 对数据进行校对
-        for (let index = 0; index < object3D.mesh.length; index++) {
-            const mesh = object3D.mesh[index]
-
-            if (mesh.geometry.attributes.normal && Array.isArray(mesh.geometry.attributes.normal.array)) {
-                mesh.geometry.attributes.normal.array = new Float32Array(mesh.geometry.attributes.normal.array)
-            }
-
-            if (mesh.geometry.attributes.position && Array.isArray(mesh.geometry.attributes.position.array)) {
-                mesh.geometry.attributes.position.array = new Float32Array(mesh.geometry.attributes.position.array)
-            }
-
-            if (mesh.geometry.attributes.uv && Array.isArray(mesh.geometry.attributes.uv.array)) {
-                mesh.geometry.attributes.uv.array = new Float32Array(mesh.geometry.attributes.uv.array)
-            }
-
-            if (mesh.geometry.index && Array.isArray(mesh.geometry.index.array)) {
-                mesh.geometry.index.array = new Uint8Array(mesh.geometry.index.array)
-            }
-
-            if (mesh.material.colors && Array.isArray(mesh.material.colors.array)) {
-                mesh.material.colors.array = new Float32Array(mesh.material.colors.array)
-            }
-
-        }
-
-        this.__scene.children.push(object3D)
-        this.draw(object3D)
-    }
-
-    // 设置当前绘制区域名称
-    setRegion(regionName: string | number | undefined) {
-        this.__regionName = regionName + ""
-
-        if (regionName) {
-            if (this.__regionList[regionName] == void 0) {
-                this.__regionList[regionName] = [... this.__regionAssemble(), 1]
-            }
-            this.__regionColor = this.__regionList[regionName]
-        } else {
-            this.__regionColor = [0, 0, 0, 1]
-        }
-        return this
-    }
-
-    // 获取当前事件触发的区域名称
-    getRegion(x: number, y: number): Promise<string> {
-        if (needUpdate) this.review(true)
-
-        needUpdate = false
-        return new Promise((resolve) => {
-
-            const rgba = this.__getColor(x, y)
-
-            // 查找当前点击的区域
-            for (const key in this.__regionList) {
-                const currentRGBA = this.__regionList[key]
-                if ("rgba(" + currentRGBA[0] * 255 + "," + currentRGBA[1] * 255 + "," + currentRGBA[2] * 255 + "," + currentRGBA[3] * 255 + ")" == rgba) {
-                    resolve(key)
-                    break
-                }
-            }
-            resolve("")
-
-        })
-    }
-
-}
-
-export default WebGL

package/src/shader/fsColor.c

@@ -1,8 +0,0 @@
-precision mediump float;
-
-uniform vec4 u_color;
-
-void main()
-{
-    gl_FragColor = u_color;
-}

package/src/shader/fsColors.c

@@ -1,8 +0,0 @@
-precision mediump float;
-
-varying vec4 v_color;
-
-void main()
-{
-    gl_FragColor = v_color;
-}

package/src/shader/fsCube.c

@@ -1,9 +0,0 @@
-precision mediump float;
-
-varying vec3 v_normal;
-uniform samplerCube u_texture;
-
-void main()
-{
-    gl_FragColor = textureCube(u_texture, normalize(v_normal));
-}

package/src/shader/fsImage.c

@@ -1,9 +0,0 @@
-precision mediump float;
-
-uniform sampler2D u_sampler;
-varying vec2 v_textcoord;
-
-void main()
-{
-    gl_FragColor = texture2D(u_sampler, v_textcoord);
-}

package/src/shader/vsColor.c

@@ -1,18 +0,0 @@
-attribute vec4 a_position;
-uniform mat4 u_matrix;
-
-void main()
-{
-    vec4 temp = u_matrix * a_position;
-
-    // 把原生的WebGL使用的左手坐标系变成了右手坐标系
-    temp.z = -1.0 * temp.z;
-
-    // 表示眼睛距离vec4(0.0,0.0,1.0)的距离
-    float dist = 4.0;
-
-    // 使用投影直接计算
-    // 为保证纹理和相对位置正确
-    // x、y、z的改变满足线性变换
-    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));
-}