vislite 0.3.1 → 0.4.0

package/src/common/webgl/getShader.ts

@@ -1,76 +1,76 @@
-import ShaderObject from './shader'
-
-import { meshType } from '../../../types/Object3D'
-
-let shaders = {}
-export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
-
-    let uniqueName = type +
-        (mesh.geometry.attributes.normal ? "1" : "0") +
-        (mesh.material.image ? "1" : "0") +
-        (mesh.material.color ? "1" : "0") +
-        (mesh.material.colors ? "1" : "0") +
-        (mesh.material.cube ? "1" : "0")
-    if (shaders[uniqueName]) return shaders[uniqueName].use()
-
-    // 顶点着色器
-    let vertexShader = `
-    attribute vec4 a_position;
-
-     ${mesh.geometry.attributes.normal ? 'attribute vec4 a_normal;varying vec3 v_normal;' : ''}
-
-    uniform mat4 u_matrix_world;
-    uniform mat4 u_matrix_mesh;
-    uniform mat4 u_matrix_proporion;
-
-    ${mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : ''}
-
-    ${mesh.material.colors ? 'attribute vec4 a_color;varying vec4 v_color;' : ''}
-
-    void main(){
-        vec4 temp = a_position;
-
-        // 应用变换矩阵：屏幕比调平矩阵、世界矩阵、物体矩阵
-        temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * temp;
-
-        // 把原生的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));
-
-        ${mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : ''}
-        ${mesh.material.image ? 'v_textcoord = a_textcoord;' : ''}
-        ${mesh.material.colors ? 'v_color=a_color;' : ''}
-     }
- `
-
-    // 片段（元）着色器
-    let fragmentShader = `
-    precision mediump float;
-
-    ${mesh.geometry.attributes.normal ? 'varying vec3 v_normal;' : ''}
-    ${mesh.material.color ? 'uniform vec4 u_color;' : ''}
-    ${mesh.material.cube ? 'uniform samplerCube u_texture;' : ''}
-    ${mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : ''}
-    ${mesh.material.colors ? 'varying vec4 v_color;' : ''}
-
-    void main(){
-        ${mesh.material.color ? 'gl_FragColor = u_color;' : ''}
-        ${mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : ''}
-        ${mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : ''}
-        ${mesh.material.colors ? 'gl_FragColor=v_color;' : ''}
-    }
- `
-
-    // 启用着色器
-    let shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
-
-    shaders[uniqueName] = shader
-    return shader
+import ShaderObject from './shader'
+
+import { meshType } from '../../../types/Object3D'
+
+let shaders = {}
+export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
+
+    let uniqueName = type +
+        (mesh.geometry.attributes.normal ? "1" : "0") +
+        (mesh.material.image ? "1" : "0") +
+        (mesh.material.color ? "1" : "0") +
+        (mesh.material.colors ? "1" : "0") +
+        (mesh.material.cube ? "1" : "0")
+    if (shaders[uniqueName]) return shaders[uniqueName].use()
+
+    // 顶点着色器
+    let vertexShader = `
+    attribute vec4 a_position;
+
+     ${mesh.geometry.attributes.normal ? 'attribute vec4 a_normal;varying vec3 v_normal;' : ''}
+
+    uniform mat4 u_matrix_world;
+    uniform mat4 u_matrix_mesh;
+    uniform mat4 u_matrix_proporion;
+
+    ${mesh.material.image ? 'attribute vec2 a_textcoord;varying vec2 v_textcoord;' : ''}
+
+    ${mesh.material.colors ? 'attribute vec4 a_color;varying vec4 v_color;' : ''}
+
+    void main(){
+        vec4 temp = a_position;
+
+        // 应用变换矩阵：屏幕比调平矩阵、世界矩阵、物体矩阵
+        temp = u_matrix_proporion * u_matrix_world * u_matrix_mesh * temp;
+
+        // 把原生的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));
+
+        ${mesh.geometry.attributes.normal ? 'v_normal = normalize(vec3(a_normal));' : ''}
+        ${mesh.material.image ? 'v_textcoord = a_textcoord;' : ''}
+        ${mesh.material.colors ? 'v_color=a_color;' : ''}
+     }
+ `
+
+    // 片段（元）着色器
+    let fragmentShader = `
+    precision mediump float;
+
+    ${mesh.geometry.attributes.normal ? 'varying vec3 v_normal;' : ''}
+    ${mesh.material.color ? 'uniform vec4 u_color;' : ''}
+    ${mesh.material.cube ? 'uniform samplerCube u_texture;' : ''}
+    ${mesh.material.image ? 'uniform sampler2D u_sampler;varying vec2 v_textcoord;' : ''}
+    ${mesh.material.colors ? 'varying vec4 v_color;' : ''}
+
+    void main(){
+        ${mesh.material.color ? 'gl_FragColor = u_color;' : ''}
+        ${mesh.material.cube ? 'gl_FragColor = textureCube(u_texture,normalize(v_normal));' : ''}
+        ${mesh.material.image ? 'gl_FragColor = texture2D(u_sampler,v_textcoord);' : ''}
+        ${mesh.material.colors ? 'gl_FragColor=v_color;' : ''}
+    }
+ `
+
+    // 启用着色器
+    let shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
+
+    shaders[uniqueName] = shader
+    return shader
 }

package/src/common/webgl/getTexture.ts

@@ -1,12 +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]
+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

@@ -1,28 +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
+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

@@ -1,217 +1,217 @@
-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)
-
-                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] == 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("")
-
-        })
-    }
-
-}
-
+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)
+
+                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] == 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