vislite 0.7.0 → 0.7.1

package/src/common/webgl/index.ts

@@ -1,227 +1,227 @@
-import type Object3DType from '../../../types/Object3D'
-import type Scene3DType from '../../../types/Scene3D'
-
-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) {
-        this.__unique = new Date().valueOf()
-
-        this.painter = getWebGLContext(ViewCanvas, scale)
-        if (RegionCanvas) {
-            this.__regionPainter = getWebGLContext(RegionCanvas, scale, {
-
-                // 如果不设置，涉及到缓冲区的情况可能无法获取颜色
-                // preserveDrawingBuffer: true
-            })
-        }
-
-        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("")
-
-        })
-    }
-
-}
-
+import type Object3DType from '../../../types/Object3D'
+import type Scene3DType from '../../../types/Scene3D'
+
+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) {
+        this.__unique = new Date().valueOf()
+
+        this.painter = getWebGLContext(ViewCanvas, scale)
+        if (RegionCanvas) {
+            this.__regionPainter = getWebGLContext(RegionCanvas, scale, {
+
+                // 如果不设置，涉及到缓冲区的情况可能无法获取颜色
+                // preserveDrawingBuffer: true
+            })
+        }
+
+        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/common/webgl/shader.ts

@@ -52,7 +52,7 @@ class ShaderObject {
 
     private __painter: WebGLRenderingContext
 
-    program: WebGLProgram | null = null
+    program: WebGLProgram
 
     constructor(painter: WebGLRenderingContext) {
         this.__painter = painter

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