vislite 0.1.0 → 0.2.0-alpha.7

package/src/common/webgl/getTexture.ts

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

package/src/common/webgl/getWebGLContext.ts

@@ -0,0 +1,28 @@
+interface OptsType {
+    preserveDrawingBuffer?: boolean
+}
+export default function (canvas: HTMLCanvasElement, scale: number, opts: OptsType = {}) {
+    let names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"], painter = null
+    for (let i = 0; i < names.length; i++) {
+        try {
+            painter = canvas.getContext(names[i], opts)
+        } catch (e) { }
+        if (painter) break
+    }
+    if (!painter) throw new Error('Non canvas or browser does not support webgl.')
+
+    let width = painter.canvas.width, height = painter.canvas.height
+
+    let viewWidth = width * scale
+    let viewHeight = height * scale
+
+    painter.viewport((width - viewWidth) * 0.5, (height - viewHeight) * 0.5, viewWidth, viewHeight)
+
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/depthFunc
+    painter.depthFunc(painter.LEQUAL)
+
+    // 开启深度计算
+    painter.enable(painter.DEPTH_TEST);
+
+    return painter
+}

package/src/common/webgl/index.ts

@@ -0,0 +1,212 @@
+import getWebGLContext from './getWebGLContext'
+import Object3DType from '../../../types/Object3D'
+import Scene3DType from '../../../types/Scene3D'
+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)
+        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) {
+            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) {
+                // 区域上
+                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)
+            } else {
+                // 画布上
+                doDraw("region" + this.__unique, this.painter, object3D.mesh[index], meshWorld, globalWorld)
+            }
+        }
+
+        this.__getColor = getColorFactory(this.__regionPainter)
+    }
+
+    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)
+            }
+
+        }
+
+        this.__scene.children.push(object3D)
+        this.draw(object3D)
+    }
+
+    // 设置当前绘制区域名称
+    setRegion(regionName: string | number) {
+        this.__regionName = regionName + ""
+
+        if (regionName) {
+            if (this.__regionList[regionName] == undefined) {
+                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("")
+
+        })
+    }
+
+}
+
+export default WebGL

package/src/common/webgl/shader.ts

@@ -0,0 +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
+    }
+
+}
+
+export default ShaderObject

package/src/common/webgl/texture.ts

@@ -0,0 +1,99 @@
+// 初始化一个纹理对象
+// type = gl.TEXTURE_2D 二维纹理
+// type = gl.TEXTURE_CUBE_MAP 立方体纹理
+// unit表示开启的纹理单元编号
+let initTexture = (painter: WebGLRenderingContext, type: number, unit: number) => {
+
+    // 创建纹理对象
+    let texture = painter.createTexture()
+
+    if (type == painter.TEXTURE_2D) {
+
+        // 开启纹理单元，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比特
+let linkImage = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, image: TexImageSource) => {
+    painter.texImage2D(type, level, format, format, textureType, image)
+}
+
+let linkCube = (painter: WebGLRenderingContext, type: number, level: number, format: number, textureType: number, images: TexImageSource[], width: number, height: number, texture: WebGLTexture) => {
+
+    let 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 // 前
+    ], 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]
+
+        // 创建纹理
+        this.__texture = initTexture(painter, this.__type, unit)
+
+        // 配置纹理
+        painter.texParameteri(this.__type, painter.TEXTURE_MIN_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/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
+}