vislite 0.5.2 → 0.6.0-alpha.2

package/src/common/webgl/buffer.ts

@@ -1,80 +1,80 @@
-// 缓冲区分为两种：
-// 1.缓冲区中保存了包含顶点的数据
-// 2.缓冲区保存了包含顶点的索引值
-
-// 获取一个新的缓冲区
-// isElement默认false，创建第一种缓冲区，为true创建第二种
-let newBuffer = (painter: WebGLRenderingContext) => {
-    return painter.createBuffer()
-}
-
-// 数据写入缓冲区
-// data是一个类型化数组，表示写入的数据
-// usage表示程序如何使用存储在缓冲区的数据
-let writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
-    let TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
-    painter.bufferData(TYPE, data, usage)
-}
-
-// 使用缓冲区数据
-// location指定待分配的attribute变量的存储位置
-// size每个分量个数
-// type数据类型，应该是以下的某个：
-//      gl.UNSIGNED_BYTE    Uint8Array
-//      gl.SHORT            Int16Array
-//      gl.UNSIGNED_SHORT   Uint16Array
-//      gl.INT              Int32Array
-//      gl.UNSIGNED_INT     Uint32Array
-//      gl.FLOAT            Float32Array
-// stride相邻两个数据项的字节数
-// offset数据的起点字节位置
-// normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
-let useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
-
-    // 把缓冲区对象分配给目标变量
-    painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
-
-    // 连接目标对象和缓冲区对象
-    painter.enableVertexAttribArray(location)
-}
-
-class BufferObject {
-
-    private __painter: WebGLRenderingContext
-    private __isElement: boolean
-
-    private __buffer: WebGLBuffer
-    private __type: number
-    private __fsize: number
-
-    constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
-        this.__painter = painter
-        this.__isElement = isElement
-
-        this.__buffer = newBuffer(painter)
-        this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
-    }
-
-    // 使用这个缓冲区对象
-    // （先于写入和分配）
-    use() {
-        this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
-        return this
-    }
-
-    // 写入数据
-    write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
-        writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
-        this.__fsize = data.BYTES_PER_ELEMENT
-        return this
-    }
-
-    // 分配使用
-    // 第2～4位参数分别表示：一个完整数据的长度、一组数据的长度、读取位置偏移
-    divide(location: number, size: number, stride: number, offset: number = 0) {
-        useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
-        return this
-    }
-}
-
+// 缓冲区分为两种：
+// 1.缓冲区中保存了包含顶点的数据
+// 2.缓冲区保存了包含顶点的索引值
+
+// 获取一个新的缓冲区
+// isElement默认false，创建第一种缓冲区，为true创建第二种
+const newBuffer = (painter: WebGLRenderingContext) => {
+    return painter.createBuffer()
+}
+
+// 数据写入缓冲区
+// data是一个类型化数组，表示写入的数据
+// usage表示程序如何使用存储在缓冲区的数据
+const writeBuffer = (painter: WebGLRenderingContext, data: ArrayBuffer, isElement: boolean, usage: number) => {
+    const TYPE = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
+    painter.bufferData(TYPE, data, usage)
+}
+
+// 使用缓冲区数据
+// location指定待分配的attribute变量的存储位置
+// size每个分量个数
+// type数据类型，应该是以下的某个：
+//      gl.UNSIGNED_BYTE    Uint8Array
+//      gl.SHORT            Int16Array
+//      gl.UNSIGNED_SHORT   Uint16Array
+//      gl.INT              Int32Array
+//      gl.UNSIGNED_INT     Uint32Array
+//      gl.FLOAT            Float32Array
+// stride相邻两个数据项的字节数
+// offset数据的起点字节位置
+// normalized是否把非浮点型的数据归一化到[0,1]或[-1,1]区间
+const useBuffer = (painter: WebGLRenderingContext, location: number, size: number, type: number, stride: number, offset: number, normalized: boolean) => {
+
+    // 把缓冲区对象分配给目标变量
+    painter.vertexAttribPointer(location, size, type, normalized, stride, offset)
+
+    // 连接目标对象和缓冲区对象
+    painter.enableVertexAttribArray(location)
+}
+
+class BufferObject {
+
+    private __painter: WebGLRenderingContext
+    private __isElement: boolean
+
+    private __buffer: WebGLBuffer
+    private __type: number
+    private __fsize: number
+
+    constructor(painter: WebGLRenderingContext, isElement: boolean = false) {
+        this.__painter = painter
+        this.__isElement = isElement
+
+        this.__buffer = newBuffer(painter)
+        this.__type = isElement ? painter.ELEMENT_ARRAY_BUFFER : painter.ARRAY_BUFFER
+    }
+
+    // 使用这个缓冲区对象
+    // （先于写入和分配）
+    use() {
+        this.__painter.bindBuffer(this.__type, this.__buffer) // 绑定到目标
+        return this
+    }
+
+    // 写入数据
+    write(data: Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array) {
+        writeBuffer(this.__painter, data, this.__isElement, this.__painter.STATIC_DRAW)
+        this.__fsize = data.BYTES_PER_ELEMENT
+        return this
+    }
+
+    // 分配使用
+    // 第2～4位参数分别表示：一个完整数据的长度、一组数据的长度、读取位置偏移
+    divide(location: number, size: number, stride: number, offset: number = 0) {
+        useBuffer(this.__painter, location, size, this.__painter.FLOAT, stride * this.__fsize, offset * this.__fsize, false)
+        return this
+    }
+}
+
 export default BufferObject

package/src/common/webgl/doDraw.ts

@@ -1,109 +1,109 @@
-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) {
-    let 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
-            , mesh.material.color.g
-            , mesh.material.color.b
-            , mesh.material.color.alpha)
-    }
-
-    // 多颜色
-    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, mesh.material.colors.itemSize, 0)
-
-    }
-
-    // 立方纹理
-    else if ("cube" in mesh.material) {
-
-        let 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, 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)
-
-    }
-
+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
+            , mesh.material.color.g
+            , mesh.material.color.b
+            , mesh.material.color.alpha)
+    }
+
+    // 多颜色
+    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, mesh.material.colors.itemSize, 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, 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 +1,27 @@
-export default function (painter: WebGLRenderingContext) {
-    let width = painter.drawingBufferWidth, height = painter.drawingBufferHeight
-
-    let 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
-
-        let pixelR = pixels[4 * (y * width + x)]
-        let pixelG = pixels[4 * (y * width + x) + 1]
-        let pixelB = pixels[4 * (y * width + x) + 2]
-        let pixelA = pixels[4 * (y * width + x) + 3]
-
-        return "rgba(" + pixelR + "," + pixelG + "," + pixelB + "," + pixelA + ")"
-    }
+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 +1,49 @@
-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'
-
-let shaders = {}
-export default function (type: string, painter: WebGLRenderingContext, mesh: meshType) {
-
-    let 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()
-
-    // 顶点着色器
-    let 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")
-
-    // 片段（元）着色器
-    let fragmentShader = {
-        [type + "1000"]: fsColor,
-        [type + "0100"]: fsColors,
-        [type + "0010"]: fsImage,
-        [type + "0001"]: fsCube
-    }[uniqueName]
-
-    // 启用着色器
-    let shader = new ShaderObject(painter).compile(vertexShader, fragmentShader).use()
-
-    shaders[uniqueName] = shader
-    return shader
+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 +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'
+
+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/getWebGLContext.ts

@@ -1,28 +1,29 @@
-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 = {}) {
+    const names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]
+    let 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.')
+
+    const width = painter.canvas.width, height = painter.canvas.height
+
+    const viewWidth = width * scale
+    const 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
 }