vislite 0.5.2 → 0.6.0-alpha.2

package/src/common/webgl/index.ts

@@ -1,224 +1,225 @@
-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
-
-let scale = 10
-class WebGL {
-
-    readonly name: string = "WebGL"
-
-    painter: WebGLRenderingContext
-    private __regionPainter: WebGLRenderingContext
-
-    private __getColor = (x: number, y: number) => "rgba(0,0,0,1)"
-
-    private __regionList = {} //区域映射表
-    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) {
-        this.__unique = new Date().valueOf()
-
-        this.painter = getWebGLContext(ViewCanvas, scale)
-        if (RegionCanvas) {
-            this.__regionPainter = getWebGLContext(RegionCanvas, scale, {
-
-                // 如果不设置，涉及到缓冲区的情况可能无法获取颜色
-                // preserveDrawingBuffer: true
-            })
-        }
-
-        let proportion = this.painter.canvas.width / this.painter.canvas.height
-
-        let xProportion = 1
-        let yProportion = 1
-
-        if (proportion > 1) {
-            xProportion = 1 / proportion
-        } else {
-            yProportion = proportion
-        }
-
-        let 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
-
-        let meshWorld = {
-            matrix: object3D.matrix.value()
-        }
-
-        let 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++) {
-            let 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) {
-        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, reject) => {
-
-            let rgba = this.__getColor(x, y)
-
-            // 查找当前点击的区域
-            for (let key in this.__regionList) {
-                let 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 = {} //区域映射表
+    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) {
+        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()
+        }
+
+        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) {
+        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

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